/* ===============================
   FIX SAFE - NEXT HIRE PATCH
================================ */

/* FIX VARIABLES MANQUANTES SANS IMPACT */
:root {
    --dark: #273146;
    --gold: #C9B29B;
    --text: #666;
    --radius-sm: 8px;
    --shadow-sm: 0 10px 25px rgba(0,0,0,0.05);
}

/* FIX MOBILE NAV SAFETY */
.nav-links.active {
    display: flex;
}

/* FIX CONTACT ICON BUG SAFE */
.contact-tag i {
    color: #C9B29B;
}

/* FIX BUTTON CONSISTENCY WITHOUT BREAKING OLD STYLES */
button:hover {
    transform: translateY(-2px);
}

/* FIX AUTH LAYOUT ONLY (NO STRUCTURE CHANGE) */
.auth-section {
    min-height: calc(100vh - 80px);
}

/* FIX DASHBOARD BASIC ALIGNMENT */
.dashboard {
    width: 90%;
    max-width: 800px;
    margin: 80px auto;
    text-align: center;
}

/* FIX CV / CONFIRMATION PAGES CENTERING */
.container,
.confirmation-box {
    max-width: 600px;
    margin: 80px auto;
    text-align: center;
}

/* SAFE IMAGE RESPONSIVE FIX */
img {
    max-width: 100%;
    height: auto;
}


/* ====================================
   GOOGLE FONTS
==================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');


/* ====================================
   RESET
==================================== */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body{
    min-height: 100%;
}

/* ====================================
   BODY
==================================== */

body{
    font-family: 'Inter', sans-serif;
    background-color: #F8F7F5;
    color: #1D2433;
    line-height: 1.6;
    overflow-x: hidden;
}


/* ====================================
   LINKS
==================================== */

a{
    text-decoration: none;
    color: #1D2433;
    transition: 0.3s;
}

a:hover{
    color: #C9B29B;
}


/* ====================================
   BUTTONS
==================================== */

button{
    padding: 14px 28px;
    border: none;
    border-radius: 6px;

    cursor: pointer;

    font-size: 14px;
    font-weight: 500;

    transition: 0.3s;
}

/* ====================================
   HEADER
==================================== */

header{
    background-color: white;

    border-bottom: 1px solid #ECECEC;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    transition: all 0.35s ease;
}

/* 🔥 SCROLL STATE */
header.scrolled {
    background-color: var(--gold) !important;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

/* 🔥 TEXT CHANGE */
header.scrolled a,
header.scrolled button,
header.scrolled .logo {
    color: #1D2433 !important;
}

/* 🔥 HIDE */
header.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

nav{
    width: 90%;
    max-width: 1300px;
    margin: auto;
    display: flex;
    justify-content: space-between; /* ⭐ IMPORTANT */
    align-items: center;
    padding: 10px 0;
    gap: 30px;
}

.logo{
    display: flex;
    align-items: center;
}

.logo img{
    height: 70px;
    width: auto;
    object-fit: contain;
}



/* ====================================
   NAVIGATION
==================================== */

.nav-links{
    display: flex;
    align-items: center;
    gap: 35px;
}

.nav-links button{
    background: linear-gradient(135deg, #1D2433, #2E3950);
    color: white;
    border-radius: 30px;
    padding: 10px 22px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}
.nav-links button:hover{
    background: var(--gold);
    color: #1D2433;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.nav-links a{
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    position: relative;
    transition: 0.3s;
}
.nav-links a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0%;
    height: 2px;
    background: var(--gold);
    transition: 0.3s;
}

.nav-links a:hover::after{
    width: 100%;
}


/* ====================================
   NAV BUTTON
==================================== */

nav button{
    background-color: #1D2433;
    color: white;
}

nav button:hover{
    background-color: #C9B29B;
    color: #1D2433;
}


/* ====================================
   MOBILE MENU ICON
==================================== */

.menu-toggle{
    display: none;

    font-size: 28px;

    cursor: pointer;

    color: #1D2433;
}

/* ====================================
   HERO SECTION (FIX FIX FIX)
==================================== */

.hero-section{
    width: 90%;
    max-width: 1300px;
    margin: auto;
    padding: 90px 0;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* TEXT */
.hero-text p:first-child{
    color: #C9B29B;
    letter-spacing: 4px;
    font-size: 14px;
    margin-bottom: 20px;
}

/* TITLE */
.hero-text h1{
    font-family: 'Cormorant Garamond', serif;
    font-size: 72px;
    line-height: 1;
    margin-bottom: 30px;
}

.title-gold{
    color: #1D2433;
}

.title-dark{
    color: #C9B29B;
}



/* DESCRIPTION */
.hero-text p:nth-of-type(2){
    font-size: 18px;
    color: #666;
    margin-bottom: 35px;
    max-width: 550px;
}

/* BUTTONS */
.hero-text button{
    margin-right: 15px;
}

.hero-text button:first-of-type{
    background-color: #1D2433;
    color: white;
}

.hero-text button:first-of-type:hover{
    background-color: #C9B29B;
    color: #1D2433;
}

.hero-text button:last-of-type{
    background-color: #DCCCB8;
    color: #1D2433;
}

.hero-text button:last-of-type:hover{
    background-color: #1D2433;
    color: white;
}

/* VIDEO */
.hero-video iframe{
    width: 100%;
    height: 420px;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}


/* ====================================
   STATS SECTION
==================================== */

.stats-section{
    background: linear-gradient(to right, #1D2433, #2E3950);

    padding: 70px 10%;

    display: grid;
    grid-template-columns: repeat(4,1fr);

    text-align: center;

    color: white;
}

.stat-box{
    position: relative;
}


/* VERTICAL LINE */

.stat-box:not(:last-child)::after{
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    transform: translateY(-50%);

    width: 1px;
    height: 120px;

    background: rgba(255,255,255,0.15);
}


/* ICON */

.stat-box i{
    font-size: 50px;

    color: #C9B29B;

    margin-bottom: 25px;
}


/* NUMBER */

.stat-box h2{
    font-size: 58px;

    font-family: 'Cormorant Garamond', serif;

    color: #DCCCB8;

    margin-bottom: 10px;
}


/* TEXT */

.stat-box p{
    color: rgba(255,255,255,0.85);

    font-size: 16px;
}


/* ====================================
   SERVICES SECTION 
==================================== */

.services-section{
    width: 90%;
    max-width: 1300px;
    margin: auto;
    padding: 110px 0;
}

/* HEADER */
.services-header{
    text-align: center;
    margin-bottom: 70px;
}

.services-header p{
    color: #C9B29B;
    letter-spacing: 4px;
    font-size: 14px;
    margin-bottom: 15px;
}

.services-header h2{
    font-family: 'Cormorant Garamond', serif;
    font-size: 56px;
}

/* GRID */
.services-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* CARD */
.services-grid article{
    background-color: white;
    padding: 45px;
    border-radius: 14px;
    border: 1px solid #ECECEC;
    transition: 0.3s;
}

.services-grid article:hover{
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* ICON */
.services-grid article i{
    font-size: 60px;
    color: #C9B29B;
    margin-bottom: 25px;
}

/* TITLE */
.services-grid article h3{
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    margin-bottom: 15px;
}

/* TEXT */
.services-grid article p{
    color: #666;
}

/* CARD */

article{
    background-color: white;

    padding: 45px;

    border-radius: 14px;

    border: 1px solid #ECECEC;

    transition: 0.3s;
}

article:hover{
    transform: translateY(-8px);

    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

article i{
    font-size: 60px;

    color: #C9B29B;

    margin-bottom: 25px;
}

article h3{
    font-family: 'Cormorant Garamond', serif;

    font-size: 32px;

    margin-bottom: 15px;
}

article p{
    color: #666;
}


/* ====================================
   JOBS SECTION
==================================== */

.jobs-section{
    background-color: white;
    padding: 110px 10%;
}

/* TITLE */
.jobs-section > div:first-child{
    text-align: center;
    margin-bottom: 60px;
}

.jobs-section > div:first-child p{
    color: #C9B29B;
    letter-spacing: 4px;
    margin-bottom: 15px;
}

.jobs-section > div:first-child h2{
    font-size: 56px;
    font-family: 'Cormorant Garamond', serif;
}

/* LIST */
.jobs-section > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* CARD */
.jobs-section > div:nth-child(2) > div{
    background-color: #F8F7F5;
    padding: 30px;

    border-radius: 10px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* TITLE CARD */
.jobs-section h3{
    margin-bottom: 8px;
}

/* BUTTON */
.jobs-section button{
    background-color: #1D2433;
    color: white;
}

.jobs-section button:hover{
    background-color: #C9B29B;
    color: #1D2433;
}

/* FOOTER BUTTON */
.jobs-section > div:last-child{
    text-align: center;
    margin-top: 50px;
}


/* ====================================
   WHY US
==================================== */

.why-us{
    width: 90%;
    max-width: 1300px;

    margin: auto;
    padding: 110px 0;

    display: grid;
    grid-template-columns: 1fr 1.2fr;

    gap: 80px;

    align-items: center;
}


/* LEFT */

.why-left p:first-child{
    color: #C9B29B;

    letter-spacing: 4px;

    margin-bottom: 15px;
}

.why-left h2{
    font-family: 'Cormorant Garamond', serif;

    font-size: 58px;

    margin-bottom: 25px;
}

.why-left p:last-child{
    color: #666;

    font-size: 17px;

    line-height: 1.8;
}


/* RIGHT */

.why-right{
    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 35px 50px;
}


/* ITEM */

.why-item{
    display: flex;

    align-items: flex-start;

    gap: 18px;
}


/* ICON */

.icon-circle{
    width: 55px;
    height: 55px;

    min-width: 55px;

    border-radius: 50%;

    background-color: #1D2433;

    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-circle i{
    color: #DCCCB8;

    font-size: 22px;
}


/* TEXT */

.why-item h3{
    font-size: 24px;

    line-height: 1.4;

    font-family: 'Cormorant Garamond', serif;
}


/* ====================================
   FOOTER
==================================== */

footer{
    background-color: #1D2433;

    color: white;

    padding: 70px 10%;

    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 60px;
}

footer h3,
footer h4{
    margin-bottom: 20px;

    font-family: 'Cormorant Garamond', serif;

    font-size: 28px;
}

footer p{
    color: #D6D6D6;
}

footer a{
    display: block;

    margin-bottom: 12px;

    color: #D6D6D6;
}

footer a:hover{
    color: #DCCCB8;
}

footer hr{
    grid-column: span 3;

    margin: 30px 0;

    border: 1px solid rgba(255,255,255,0.1);
}

footer > p{
    grid-column: span 3;

    text-align: center;
}


/* CONTACT */

.footer-contact p{
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;
}

.footer-contact i{
    color: #DCCCB8;
}


/* SOCIAL ICONS */

.social-icons{
    display: flex;

    gap: 15px;

    margin-top: 25px;
}

.social-icons a{
    width: 42px;
    height: 42px;

    border-radius: 50%;

    background-color: rgba(255,255,255,0.08);

    display: flex;
    justify-content: center;
    align-items: center;

    transition: 0.3s;
}

.social-icons i{
    color: #DCCCB8;

    font-size: 18px;
}

.social-icons a:hover{
    background-color: #DCCCB8;

    transform: translateY(-4px);
}

.social-icons a:hover i{
    color: #1D2433;
}


/* ====================================
   TABLETTE
==================================== */

@media(max-width:1024px){

    /* Le menu burger s'active dès la tablette (1024px) */
    nav{
        position: relative;
    }

    .logo img{
        height: 50px;
        width: auto;
        object-fit: contain;
    }

    .menu-toggle{
        display: block;
    }

    .nav-links{
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;

        background-color: white;
        padding: 25px;

        border-radius: 0 0 14px 14px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;

        /* ANIMATION PRO */
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;

        transition: all 0.3s ease;
    }
    .nav-links.active{
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-links a{
        width: 100%;
        text-align: center;
        padding-bottom: 12px;
        border-bottom: 1px solid #ECECEC;
    }

    .nav-links button{
        width: 100%;
    }
    /* 🌟 FIN DE LA PARTIE MENU BURGER */


    section:nth-of-type(1){
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }

    section:nth-of-type(1) h1{
        font-size: 58px;
    }

    section:nth-of-type(1) div:first-child p:nth-child(3){
        margin: auto;
    }

    .stats-section{
        grid-template-columns: repeat(2,1fr);
        gap: 40px;
    }

    .stat-box:nth-child(2)::after{
        display: none;
    }

    section:nth-of-type(3) > div:last-child{
        grid-template-columns: repeat(2,1fr);
    }

    .why-us{
        grid-template-columns: 1fr;
    }

    footer{
        grid-template-columns: repeat(2,1fr);
    }

    footer hr,
    footer > p{
        grid-column: span 2;
    }
}


/* ====================================
   MOBILE
==================================== */

@media(max-width:700px){

    /* Le menu burger étant déjà configuré plus haut pour 1024px, 
       il s'applique automatiquement ici sur mobile. On garde juste le reste ! */

    section:nth-of-type(1){
        padding: 60px 0;
    }

    section:nth-of-type(1) h1{
        font-size: 42px;
        line-height: 1.1;
    }

    section:nth-of-type(1) button{
        width: 100%;
        margin-bottom: 15px;
        margin-right: 0;
    }

    .stats-section{
        grid-template-columns: 1fr;
    }

    .stat-box::after{
        display: none !important;
    }

    section:nth-of-type(3) > div:last-child{
        grid-template-columns: 1fr;
    }

    article{
        padding: 35px 25px;
    }

    section:nth-of-type(4) > div:nth-child(2) > div{
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .why-right{
        grid-template-columns: 1fr;
    }

    .why-left h2{
        font-size: 42px;
    }

    footer{
        grid-template-columns: 1fr;
        text-align: center;
    }

    footer hr,
    footer > p{
        grid-column: span 1;
    }

    .footer-contact p,
    .social-icons{
        justify-content: center;
    }
}
/* ====================================
   LOGIN / REGISTER PAGE
==================================== */

.auth-section{
    width: 100%;
    min-height: calc(100vh - 80px); /* 👈 IMPORTANT */
    
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #F8F7F5;

    padding: 40px 0; /* 👈 sécurité mobile */
}

/* CONTENEUR GLOBAL */
.auth-box{
    width: 100%;
    max-width: 700px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* TITRE */
.auth-box h2{
    font-family: 'Cormorant Garamond', serif;
    font-size: 42px;
    text-align: center;
    color: #1D2433;
}

/* FORM */
.auth-section form{
    width: 100%;
    max-width: 100%;

    background: white;
    padding: 60px 55px;

    border-radius: 18px;
    border: 1px solid #ECECEC;

    box-shadow: 0 20px 50px rgba(0,0,0,0.06);

    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* LABEL */
.auth-section label{
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;

    color: #1D2433; 
    text-align: left;
}

/* INPUT */
.auth-section input{
    width: 100%;
    padding: 14px;

    border: 1px solid #ECECEC;
    border-radius: 8px;

    font-size: 14px;
    font-family: 'Inter', sans-serif;

    outline: none;
    transition: 0.3s;
}

/* FOCUS */
.auth-section input:focus{
    border-color: #C9B29B;
}

/* BUTTON */
.auth-section button{
    width: 100%;
    padding: 14px;

    margin-top: 10px;

    background-color: #1D2433;
    color: white;

    border: none;
    border-radius: 8px;

    cursor: pointer;

    font-size: 15px;
    font-weight: 500;

    transition: 0.3s;
}

/* HOVER */
.auth-section button:hover{
    background-color: #C9B29B;
    color: #1D2433;

    transform: translateY(-2px);
}

/* ====================================
   SOCIAL AUTH 
==================================== */

.auth-social{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

/* =========================
   BASE BUTTON STYLE
========================= */

.auth-social button{
    width: 100%;
    padding: 14px 16px;

    border-radius: 10px;
    border: 1px solid #E6E6E6;

    background: #FFFFFF;

    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;

    font-size: 14px;
    font-weight: 500;

    transition: all 0.25s ease;

    font-family: 'Inter', sans-serif;

    color: #1D2433;
}

/* =========================
   GOOGLE BUTTON
========================= */

.google-btn{
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
}

.google-btn i{
    color: #DB4437;
    font-size: 16px;
}

/* GOOGLE HOVER */
.google-btn:hover{
    background: #FAF7F3;
    border-color: #C9B29B;

    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* =========================
   APPLE BUTTON (FIXED VISIBILITY)
========================= */

.apple-btn{
    background: #1D2433;
    border: 1px solid #1D2433;

    color: white;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

/* IMPORTANT: icône visible dès le départ */
.apple-btn i{
    color: #121749;
    font-size: 16px;
    opacity: 1;
}

/* APPLE HOVER */
.apple-btn:hover{
    background: #C9B29B;
    border-color: #C9B29B;

    color: #1D2433;

    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}

/* ICÔNE AU HOVER */
.apple-btn:hover i{
    color: #1D2433;
}

/* DIVIDER */
.divider{
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: #999;
}

.divider::before,
.divider::after{
    content: "";
    flex: 1;
    height: 1px;
    background: #ECECEC;
}

.divider span{
    margin: 0 10px;
    font-size: 13px;
}

/* ====================================
   CONTACT SECTION 
==================================== */

.contact-section{
    width: 90%;
    max-width: 1300px;
    margin: auto;
    padding: 100px 0;

    display: flex;
    flex-direction: column;
    gap: 90px;
}

/* BOX */
.contact-box{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
}

/* REVERSE (ENTREPRISE) */
.contact-box.reverse{
    direction: rtl;
}

.contact-box.reverse .contact-content{
    direction: ltr;
}

/* IMAGE */
.contact-image{
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.contact-image img{
    width: 100%;
    height: 430px;
    object-fit: cover;
    transition: 0.4s ease;
}

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

/* TAG (FIX ICON ISSUE HERE) */
.contact-tag{
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 8px 14px;
    border-radius: 30px;

    background: rgba(201,178,155,0.15);
    color: var(--gold);

    font-size: 13px;
    font-weight: 500;

    margin-bottom: 15px;
}

/* 🔥 FIX ICON <i> NON OPERATIONNEL / NON VISIBLE */
.contact-tag i{
    font-size: 14px;
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* TITRE */
.contact-content h2{
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    color: var(--dark);
    line-height: 1.2;

    margin-bottom: 20px;
}

/* TEXTE */
.contact-content p{
    font-size: 16px;
    color: var(--text);
    line-height: 1.8;

    margin-bottom: 30px;
    max-width: 520px;
}

/* BUTTONS */
.contact-buttons{
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* BUTTON BASE */
.contact-buttons button{
    padding: 14px 26px;

    border-radius: var(--radius-sm);
    border: 1px solid transparent;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    letter-spacing: 0.5px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* BTN PRIMARY (PLUS CONTRASTÉ) */
.contact-buttons button{
    background: linear-gradient(135deg, #1D2433, #2E3950);
    color: white;
}

/* HOVER PRIMARY */
.contact-buttons button:hover{
    background: var(--gold);
    color: #1D2433;

    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* ACTIVE EFFECT */
.contact-buttons button:active{
    transform: translateY(-1px);
}

/* FOCUS ACCESSIBILITY */
.contact-buttons button:focus{
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

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

@media (max-width: 1024px){
    .contact-box{
        grid-template-columns: 1fr;
        text-align: center;
    }

    .contact-content p{
        margin: 0 auto 25px;
    }

    .contact-buttons{
        justify-content: center;
    }

    .contact-box.reverse{
        direction: ltr;
    }

    .contact-image img{
        height: 350px;
    }
}

@media (max-width: 700px){
    .contact-section{
        padding: 70px 0;
        gap: 60px;
    }

    .contact-content h2{
        font-size: 34px;
    }

    .contact-image img{
        height: 280px;
    }

    .contact-buttons button{
        width: 100%;
    }
}

/* ====================================
   NEXT HIRE - PAGES SUPPLÉMENTAIRES
   (SAFE ADD-ON - NE CASSE PAS LE RESTE)
==================================== */


/* ====================================
   DASHBOARD
==================================== */
.dashboard {
    width: 90%;
    max-width: 800px;
    margin: 100px auto;
    padding: 40px;

    background: #fff;
    border-radius: 14px;

    box-shadow: 0 15px 40px rgba(0,0,0,0.08);

    text-align: center;
}

.dashboard h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 42px;
    margin-bottom: 20px;
}

.dashboard p {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

#logout-btn {
    background: #1D2433;
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
}

#logout-btn:hover {
    background: #C9B29B;
    color: #1D2433;
}


/* ====================================
   ESPACE CANDIDAT
==================================== */
.hero-candidat {
    width: 90%;
    max-width: 1100px;
    margin: auto;
    padding: 90px 0;
}

.hero-candidat h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    margin-bottom: 15px;
}

.hero-candidat p {
    color: #666;
    margin-bottom: 40px;
}

.info-box {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    border-left: 4px solid #C9B29B;
    margin-bottom: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.cv-box,
.email-box {
    background: #fff;
    padding: 30px;
    border-radius: 14px;
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.cv-box input {
    width: 100%;
    padding: 14px;
    border: 1px solid #ECECEC;
    border-radius: 8px;
    margin-bottom: 15px;
}

.cv-box button,
.email-box button {
    background: #1D2433;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
}

.cv-box button:hover,
.email-box button:hover {
    background: #C9B29B;
    color: #1D2433;
}

#cv-status {
    margin-top: 10px;
    font-size: 14px;
    color: green;
}


/* ====================================
   ESPACE ENTREPRISE
==================================== */
.hero-company {
    width: 90%;
    max-width: 1100px;
    margin: auto;
    padding: 90px 0;
}

.company-form {
    background: #fff;
    padding: 40px;
    border-radius: 14px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

.company-form h2 {
    margin-bottom: 20px;
    font-family: 'Cormorant Garamond', serif;
}

.company-form input,
.company-form select,
.company-form textarea {
    width: 100%;
    padding: 14px;
    margin-bottom: 15px;
    border: 1px solid #ECECEC;
    border-radius: 8px;
}

#publish-job-btn {
    background: #1D2433;
    color: white;
}

#publish-job-btn:hover {
    background: #C9B29B;
    color: #1D2433;
}

#job-status {
    margin-top: 10px;
    font-size: 14px;
}


/* ====================================
   CV PAGES (SAVED / SENT)
==================================== */
.container {
    width: 90%;
    max-width: 600px;
    margin: 120px auto;
    text-align: center;

    background: #fff;
    padding: 50px;

    border-radius: 14px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.container h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 40px;
    margin-bottom: 20px;
}

.container p {
    color: #666;
    margin-bottom: 25px;
}

.container .icon {
    font-size: 50px;
    margin-bottom: 20px;
}


/* BUTTON STYLE GLOBAL SAFE */
.btn,
.btn-primary {
    display: inline-block;
    padding: 12px 25px;

    background: #1D2433;
    color: white;

    border-radius: 8px;

    transition: 0.3s;
}

.btn:hover,
.btn-primary:hover {
    background: #C9B29B;
    color: #1D2433;
}

input,
textarea,
select {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #1D2433;
}
.about-page{
    width:90%;
    max-width:1300px;
    margin:auto;
    padding:100px 0;
}

/* HEADER */
.about-header{
    text-align:center;
    max-width:850px;
    margin:0 auto 100px;
}

.about-header h1{
    font-family:'Cormorant Garamond',serif;
    font-size:72px;
    color:#1D2433;
    margin-bottom:15px;
}

.about-header p{
    color:#C9B29B;
    font-weight:600;
    letter-spacing:3px;
    margin-bottom:20px;
}

.about-header span{
    color:#666;
    line-height:1.9;
    font-size:18px;
}

/* CARD LAYOUT */
.about-card{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:60px;
    align-items:center;
    margin-bottom:120px;
}

.about-card.reverse{
    grid-template-columns:1fr 420px;
}

/* IMAGE (FIX UNIQUE + CLEAN) */
.about-image{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    box-shadow:0 25px 60px rgba(0,0,0,.10);
}

/* TOP LINE DECORATION */
.about-image::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:#C9B29B;
    z-index:2;
}

/* IMAGE + ANIMATION */
.about-image img{
    width:100%;
    height:520px;
    object-fit:cover;

    animation: floatImage 6s ease-in-out infinite;
    transition: transform 0.4s ease;
}

/* HOVER */
.about-image:hover img{
    transform:scale(1.08);
}

/* ANIMATION UNIQUE */
@keyframes floatImage {
    0%   { transform: translate(0px, 0px) scale(1); }
    25%  { transform: translate(8px, -10px) scale(1.02); }
    50%  { transform: translate(-10px, 6px) scale(1.03); }
    75%  { transform: translate(6px, 10px) scale(1.02); }
    100% { transform: translate(0px, 0px) scale(1); }
}

/* CONTENT */
.about-content{
    background:transparent;
    padding:0;
    border:none;
    box-shadow:none;
}

.about-content h2 {
    width: 100%;
    display: block;
    white-space: nowrap; /* empêche retour ligne */
    overflow-wrap: normal;
    word-break: keep-all;

    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(28px, 3vw, 58px);

    line-height: 1.1;
}

.about-content h3{
    display:inline-block;
    padding:10px 22px;
    border-radius:50px;
    background:rgba(201,178,155,.15);
    color:#C9B29B;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:30px;
}

.about-content p{
    font-size:18px;
    color:#666;
    line-height:1.9;
    margin-bottom:22px;
}

/* HIGHLIGHT PARAGRAPH */
.about-content p:nth-child(4){
    font-size:24px;
    color:#1D2433;
    font-family:'Cormorant Garamond',serif;
    font-weight:600;
    border-left:4px solid #C9B29B;
    padding-left:20px;
}

/* FOOTER SECTION */
.about-footer{
    background:linear-gradient(135deg,#C9B29B,#2E3950);
    padding:80px;
    border-radius:30px;
    text-align:center;
    margin-top:50px;
}

.about-footer h2{
    color: white;
    font-family: 'Cormorant Garamond', serif;

    font-size: clamp(24px, 3.2vw, 54px);
    line-height: 1.2;

    width: 100%;
    display: block;

    white-space: nowrap; /* bloque le retour à la ligne */
    overflow: hidden;    /* empêche débordement */
    text-overflow: ellipsis; /* option sécurité */
}

/* =========================
   RESPONSIVE (MERGED CLEAN)
========================= */

@media(max-width:1024px){

    .about-card,
    .about-card.reverse{
        grid-template-columns:1fr;
    }

    .about-header h1{
        font-size:52px;
    }

    .about-content{
        text-align:center;
    }

    .about-content p:nth-child(4){
        border:none;
        padding:0;
    }

    .about-content h2{
        font-size:46px;
    }

    .about-image img{
        height:450px;
    }
}

@media(max-width:700px){

    .about-page{
        padding:70px 0;
    }

    .about-header h1{
        font-size:42px;
    }

    .about-header span{
        font-size:16px;
    }

    .about-content h2{
        font-size:34px;
    }

    .about-footer{
        padding:50px 25px;
    }

    .about-footer h2{
        font-size:34px;
    }

    .about-image img{
        height:320px;
    }
}
/* ==========================
   LOADER - NEXT HIRE TEXT logo
========================== */

#loader{
    position: fixed;
    inset: 0;
    background: #F8F7F5;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 25px;
    z-index: 9999;
}

/* LOGO TEXT */
.logo-text{
    font-family: 'Cormorant Garamond', serif;
    font-size: 64px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #1D2433;

    animation: fadeUp 1.2s ease-in-out infinite alternate;
}

/* GOLD PART */
.logo-text span{
    color: #C9B29B;
}

/* TEXT ANIMATION */
.loader-text{
    font-size: 16px;
    font-weight: 500;
    color: #666;
    letter-spacing: 3px;

    animation: floatX 1.5s ease-in-out infinite;
}

/* ANIMATIONS */
@keyframes fadeUp{
    0% { transform: translateY(-5px); opacity: 0.6; }
    100% { transform: translateY(5px); opacity: 1; }
}

@keyframes floatX {
    0% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    100% { transform: translateX(-10px); }
}

/* ====================================
   FORGOT PASSWORD PAGE
==================================== */

/* Réutilisation de la structure globale de la section d'authentification */
.forgot-password-section {
    width: 100%;
    min-height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F8F7F5;
    padding: 40px 0;
}

/* Boîte principale calquée sur le design de la page de login */
.forgot-password-box {
    width: 90%;
    max-width: 550px; /* Légèrement plus condensé pour un formulaire à champ unique */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

/* Titre élégant en Cormorant Garamond */
.forgot-password-box h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 42px;
    text-align: center;
    color: #1D2433;
    margin-bottom: 5px;
}

/* Texte d'explication sous le titre */
.forgot-password-box .instruction-text {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #666;
    text-align: center;
    line-height: 1.6;
    max-width: 450px;
    margin-top: -15px;
}

/* Formulaire sécurisé et stylisé */
.forgot-password-section form {
    width: 100%;
    background: white;
    padding: 50px 45px;
    border-radius: 18px;
    border: 1px solid #ECECEC;
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Alignement et style des labels */
.forgot-password-section label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1D2433;
    text-align: left;
}

/* Style des champs de saisie (Input) */
.forgot-password-section input {
    width: 100%;
    padding: 14px;
    border: 1px solid #ECECEC;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: 0.3s;
}

/* Focus avec la couleur Or du thème */
.forgot-password-section input:focus {
    border-color: #C9B29B;
    box-shadow: 0 0 0 3px rgba(201, 178, 155, 0.1);
}

/* Bouton principal de soumission */
.forgot-password-section button {
    width: 100%;
    padding: 14px;
    margin-top: 10px;
    background-color: #1D2433;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: 0.3s;
}

/* Effet Hover du bouton principal */
.forgot-password-section button:hover {
    background-color: #C9B29B;
    color: #1D2433;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Lien de retour à la page de connexion */
.back-to-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1D2433;
    margin-top: 5px;
    transition: 0.3s;
}

.back-to-login:hover {
    color: #C9B29B;
}

.back-to-login i {
    font-size: 14px;
    transition: transform 0.3s;
}

.back-to-login:hover i {
    transform: translateX(-4px); /* Petit effet fluide au survol vers la gauche */
}

/* ====================================
   RESPONSIVE MODIFICATIONS
==================================== */
@media (max-width: 700px) {
    .forgot-password-section {
        padding: 30px 0;
    }
    
    .forgot-password-box h2 {
        font-size: 34px;
    }
    
    .forgot-password-section form {
        padding: 35px 25px;
    }
}