/* =====================================================
   PAGE HERO
===================================================== */

.page-hero{

    position: relative;

    min-height: 60vh;

    display: flex;

    align-items: center;

    overflow: hidden;

}


/*==============================
  BACKGROUND IMAGE
==============================*/

.page-hero-picture{

    position: absolute;

    inset: 0;

    z-index: 1;

}

.page-hero-image{

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}


/*==============================
  OVERLAY
==============================*/

.page-hero-overlay{

    position: absolute;

    inset: 0;

    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.60) 50%,
        rgba(0,0,0,.35) 100%
    );

}


/*==============================
  CONTENT
==============================*/

.page-hero-content{

    position: relative;

    z-index: 3;

    max-width: 700px;

    color: #ffffff;

}


/*==============================
  BADGE
==============================*/

.page-badge{

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 20px;

    margin-bottom: 25px;

    border-radius: 50px;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.20);

    backdrop-filter: blur(10px);

    color: #ffffff;

    font-size: .9rem;

    font-weight: 600;

}

.page-badge i{

    color: #f7941d;

}


/*==============================
  TITLE
==============================*/

.page-hero-content h1{

    font-size: clamp(2.5rem,5vw,4.2rem);

    line-height: 1.15;

    margin-bottom: 25px;

    font-weight: 700;

}


/*==============================
  DESCRIPTION
==============================*/

.page-hero-content p{

    font-size: 1.05rem;

    line-height: 1.9;

    color: rgba(255,255,255,.90);

    margin-bottom: 35px;

}


/*==============================
  BREADCRUMB
==============================*/

.breadcrumb{

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    font-size: .95rem;

}

.breadcrumb a{

    color: #ffffff;

    text-decoration: none;

    transition: .3s;

}

.breadcrumb a:hover{

    color: #f7941d;

}

.breadcrumb span{

    color: rgba(255,255,255,.75);

}


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

@media(max-width:992px){

    .page-hero{

        min-height: 55vh;

    }

}

@media(max-width:768px){

    .page-hero{

        min-height: 50vh;

        padding: 120px 0 70px;

    }

    .page-hero-content{

        max-width: 100%;

    }

    .page-hero-content h1{

        font-size: 2.3rem;

    }

    .page-hero-content p{

        font-size: 1rem;

    }

}

@media(max-width:576px){

    .page-hero{

        min-height: 45vh;

    }

    .page-badge{

        font-size: .80rem;

        padding: 8px 16px;

    }

    .page-hero-content h1{

        font-size: 2rem;

    }

}

/*======================================================
  PAGE HERO ANIMATION
======================================================*/

.page-hero-content{

    opacity:0;

    transform:translateY(40px);

    transition:all .9s ease;

}

.page-hero.page-loaded .page-hero-content{

    opacity:1;

    transform:translateY(0);

}

.page-hero-image{

    transform:scale(1.08);

    transition:transform 8s ease;

}

.page-hero-image.image-loaded{

    transform:scale(1);

}


/* =====================================================
   ABOUT STORY
===================================================== */

.about-story{

    padding:120px 0;

    background:#ffffff;

}


/*==============================
  GRID
==============================*/

.about-story-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}


/*==============================
  IMAGE
==============================*/

.about-story-image{

    position:relative;

}

.about-story-image img{

    width:100%;

    display:block;

    border-radius:25px;

    object-fit:cover;

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

    transition:.5s ease;

}

.about-story-image:hover img{

    transform:scale(1.03);

}


/*==============================
  CONTENT
==============================*/

.about-story-content h2{

    font-size:2.8rem;

    line-height:1.2;

    color:#0f172a;

    margin:25px 0;

}

.about-story-content p{

    color:#64748b;

    font-size:1.05rem;

    line-height:1.9;

    margin-bottom:20px;

}


/*==============================
  FEATURES
==============================*/

.story-features{

    display:grid;

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

    gap:18px;

    margin:40px 0;

}

.story-feature{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 20px;

    background:#f8fafc;

    border-radius:14px;

    transition:.35s ease;

}

.story-feature:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.story-feature i{

    color:#1f5d3a;

    font-size:1.2rem;

}

.story-feature span{

    color:#334155;

    font-weight:500;

}


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

.about-story-content .btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

}


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

@media(max-width:992px){

    .about-story-grid{

        gap:50px;

    }

    .about-story-content h2{

        font-size:2.2rem;

    }

}

@media(max-width:768px){

    .about-story{

        padding:90px 0;

    }

    .about-story-grid{

        grid-template-columns:1fr;

    }

    .about-story-image{

        order:1;

    }

    .about-story-content{

        order:2;

    }

    .about-story-content h2{

        font-size:2rem;

    }

    .story-features{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .about-story{

        padding:70px 0;

    }

    .about-story-content h2{

        font-size:1.8rem;

    }

    .about-story-content p{

        font-size:1rem;

    }

    .about-story-content .btn{

        width:100%;

        justify-content:center;

    }

}

/* =====================================================
   MISSION • VISION • VALEURS
===================================================== */

.mission-vision{

    padding:120px 0;

    background:#f8fafc;

}


/*==============================
  GRID
==============================*/

.mvv-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}


/*==============================
  CARD
==============================*/

.mvv-card{

    background:#ffffff;

    padding:45px 35px;

    border-radius:22px;

    text-align:center;

    border:1px solid #e2e8f0;

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

    transition:.4s ease;

}

.mvv-card:hover{

    transform:translateY(-10px);

    border-color:#1f5d3a;

    box-shadow:0 25px 50px rgba(0,0,0,.12);

}


/*==============================
  ICON
==============================*/

.mvv-icon{

    width:90px;

    height:90px;

    margin:0 auto 30px;

    border-radius:50%;

    background:rgba(31,93,58,.08);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s ease;

}

.mvv-icon i{

    font-size:2.3rem;

    color:#1f5d3a;

    transition:.35s ease;

}

.mvv-card:hover .mvv-icon{

    background:#1f5d3a;

}

.mvv-card:hover .mvv-icon i{

    color:#ffffff;

}


/*==============================
  TITLE
==============================*/

.mvv-card h3{

    color:#0f172a;

    font-size:1.5rem;

    margin-bottom:20px;

}


/*==============================
  TEXT
==============================*/

.mvv-card p{

    color:#64748b;

    line-height:1.9;

}


/*==============================
  VALUES
==============================*/

.values-list{

    list-style:none;

    margin-top:20px;

    text-align:left;

}

.values-list li{

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px 0;

    color:#475569;

    font-weight:500;

}

.values-list li i{

    color:#1f5d3a;

    font-size:1rem;

}


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

@media(max-width:992px){

    .mvv-grid{

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

    }

    .mvv-card:last-child{

        grid-column:span 2;

    }

}

@media(max-width:768px){

    .mission-vision{

        padding:90px 0;

    }

    .mvv-grid{

        grid-template-columns:1fr;

    }

    .mvv-card:last-child{

        grid-column:span 1;

    }

}

@media(max-width:576px){

    .mvv-card{

        padding:35px 25px;

    }

    .mvv-icon{

        width:80px;

        height:80px;

    }

    .mvv-icon i{

        font-size:2rem;

    }

    .mvv-card h3{

        font-size:1.35rem;

    }

}

/*======================================================
  MISSION • VISION • VALEURS ANIMATION
======================================================*/

.mvv-card{

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.mvv-card.show-mvv{

    opacity:1;

    transform:translateY(0);

}


/* =====================================================
   BUSINESS AREAS
===================================================== */

.business-areas{

    padding:120px 0;

    background:#ffffff;

}


/*==============================
  GRID
==============================*/

.business-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}


/*==============================
  CARD
==============================*/

.business-card{

    position:relative;

    background:#ffffff;

    padding:40px 35px;

    border-radius:22px;

    border:1px solid #e2e8f0;

    box-shadow:0 15px 40px rgba(15,23,42,.06);

    overflow:hidden;

    transition:.4s ease;

}

.business-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:5px;

    background:#1f5d3a;

    transition:.4s ease;

}

.business-card:hover{

    transform:translateY(-10px);

    border-color:#1f5d3a;

    box-shadow:0 25px 55px rgba(15,23,42,.12);

}

.business-card:hover::before{

    width:100%;

}


/*==============================
  ICON
==============================*/

.business-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

    background:rgba(31,93,58,.08);

    transition:.35s ease;

}

.business-icon i{

    font-size:2rem;

    color:#1f5d3a;

    transition:.35s ease;

}

.business-card:hover .business-icon{

    background:#1f5d3a;

    transform:rotate(8deg);

}

.business-card:hover .business-icon i{

    color:#ffffff;

}


/*==============================
  TITLE
==============================*/

.business-card h3{

    font-size:1.45rem;

    color:#0f172a;

    margin-bottom:18px;

    line-height:1.3;

}


/*==============================
  DESCRIPTION
==============================*/

.business-card p{

    color:#64748b;

    line-height:1.9;

    margin-bottom:0;

}


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

@media(max-width:992px){

    .business-grid{

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

    }

}

@media(max-width:768px){

    .business-areas{

        padding:90px 0;

    }

    .business-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .business-card{

        padding:35px 25px;

    }

    .business-icon{

        width:70px;

        height:70px;

    }

    .business-icon i{

        font-size:1.8rem;

    }

    .business-card h3{

        font-size:1.25rem;

    }

}

/*======================================================
  BUSINESS AREAS ANIMATION
======================================================*/

.business-card{

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.business-card.show-business{

    opacity:1;

    transform:translateY(0);

}

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

.why-trust{

    padding:120px 0;

    background:#f8fafc;

}


/*==============================
  GRID
==============================*/

.why-trust-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:80px;

}


/*==============================
  IMAGE
==============================*/

.why-trust-image{

    position:relative;

}

.why-trust-image img{

    width:100%;

    display:block;

    border-radius:25px;

    object-fit:cover;

    box-shadow:0 20px 50px rgba(15,23,42,.12);

    transition:.45s ease;

}

.why-trust-image:hover img{

    transform:scale(1.03);

}


/*==============================
  CONTENT
==============================*/

.why-trust-content h2{

    font-size:2.8rem;

    color:#0f172a;

    line-height:1.2;

    margin:25px 0;

}

.why-trust-content p{

    color:#64748b;

    line-height:1.9;

    font-size:1.05rem;

    margin-bottom:40px;

}


/*==============================
  LIST
==============================*/

.trust-list{

    display:grid;

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

    gap:18px;

}


/*==============================
  ITEM
==============================*/

.trust-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 20px;

    background:#ffffff;

    border-radius:15px;

    border:1px solid #e2e8f0;

    transition:.35s ease;

}

.trust-item:hover{

    transform:translateY(-5px);

    border-color:#1f5d3a;

    box-shadow:0 12px 25px rgba(0,0,0,.08);

}

.trust-item i{

    color:#1f5d3a;

    font-size:1.2rem;

}

.trust-item span{

    color:#334155;

    font-weight:600;

}


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

@media(max-width:992px){

    .why-trust-grid{

        gap:50px;

    }

    .why-trust-content h2{

        font-size:2.2rem;

    }

}

@media(max-width:768px){

    .why-trust{

        padding:90px 0;

    }

    .why-trust-grid{

        grid-template-columns:1fr;

    }

    .why-trust-content{

        order:2;

    }

    .why-trust-image{

        order:1;

    }

    .trust-list{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .why-trust{

        padding:70px 0;

    }

    .why-trust-content h2{

        font-size:1.8rem;

    }

    .why-trust-content p{

        font-size:1rem;

    }

    .trust-item{

        padding:16px;

    }

}


/*======================================================
  WHY TRUST US ANIMATION
======================================================*/

.why-trust-image,
.why-trust-content{

    opacity:0;

    transition:all .8s ease;

}

.why-trust-image{

    transform:translateX(60px);

}

.why-trust-content{

    transform:translateX(-60px);

}

.why-trust.show-trust .why-trust-image,
.why-trust.show-trust .why-trust-content{

    opacity:1;

    transform:translateX(0);

}

/* =====================================================
   DIRECTOR MESSAGE
===================================================== */

.director-message{

    padding:120px 0;

    background:#ffffff;

}


/*==============================
  GRID
==============================*/

.director-grid{

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    align-items:center;

    gap:80px;

}


/*==============================
  IMAGE
==============================*/

.director-image{

    position:relative;

}

.director-image img{

    width:100%;

    display:block;

    border-radius:25px;

    object-fit:cover;

    box-shadow:0 20px 50px rgba(15,23,42,.12);

    transition:.4s ease;

}

.director-image:hover img{

    transform:scale(1.03);

}


/*==============================
  CONTENT
==============================*/

.director-content h2{

    font-size:2.8rem;

    color:#0f172a;

    line-height:1.2;

    margin:25px 0;

}

.director-content p{

    color:#64748b;

    line-height:1.9;

    font-size:1.05rem;

    margin-bottom:22px;

}


/*==============================
  SIGNATURE
==============================*/

.director-signature{

    margin-top:35px;

    padding-top:25px;

    border-top:2px solid #e2e8f0;

}

.director-signature h4{

    font-size:1.4rem;

    color:#1f5d3a;

    margin-bottom:8px;

}

.director-signature span{

    color:#64748b;

    font-weight:500;

}


/* =====================================================
   TEAM
===================================================== */

.team{

    padding:120px 0;

    background:#f8fafc;

}


/*==============================
  IMAGE
==============================*/

.team-image{

    position:relative;

    margin-top:70px;

    overflow:hidden;

    border-radius:25px;

    box-shadow:0 20px 55px rgba(15,23,42,.12);

}

.team-image img{

    width:100%;

    display:block;

    object-fit:cover;

    transition:.5s ease;

}

.team-image:hover img{

    transform:scale(1.04);

}


/*==============================
  CAPTION
==============================*/

.team-image::after{

    content:"Une équipe engagée au service de votre réussite";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:22px;

    background:linear-gradient(

        to top,

        rgba(15,23,42,.92),

        rgba(15,23,42,.15)

    );

    color:#ffffff;

    font-size:1.1rem;

    font-weight:600;

    text-align:center;

}


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

@media(max-width:992px){

    .director-grid{

        gap:50px;

    }

    .director-content h2{

        font-size:2.2rem;

    }

}

@media(max-width:768px){

    .director-message,

    .team{

        padding:90px 0;

    }

    .director-grid{

        grid-template-columns:1fr;

    }

    .director-image{

        order:1;

    }

    .director-content{

        order:2;

    }

}

@media(max-width:576px){

    .director-message,

    .team{

        padding:70px 0;

    }

    .director-content h2{

        font-size:1.9rem;

    }

    .director-content p{

        font-size:1rem;

    }

    .team-image::after{

        font-size:.95rem;

        padding:18px;

    }

}

/*==============================
  FLOATING CARD
==============================*/

.director-card{

    position:absolute;

    right:-20px;

    bottom:35px;

    width:260px;

    padding:25px;

    background:#ffffff;

    border-radius:18px;

    box-shadow:0 25px 60px rgba(15,23,42,.18);

    border-left:6px solid #1f5d3a;

    transition:.4s ease;

}

.director-image:hover .director-card{

    transform:translateY(-8px);

}

.director-title{

    display:inline-block;

    margin-bottom:12px;

    padding:8px 16px;

    background:#1f5d3a;

    color:#ffffff;

    border-radius:30px;

    font-size:.80rem;

    font-weight:600;

}

.director-card h4{

    font-size:1.35rem;

    color:#0f172a;

    margin-bottom:8px;

}

.director-card p{

    color:#64748b;

    margin:0;

    font-weight:500;

}

@media(max-width:768px){

    .director-card{

        position:relative;

        right:auto;

        bottom:auto;

        width:100%;

        margin-top:-25px;

    }

}

/*======================================================
  DIRECTOR & TEAM ANIMATION
======================================================*/

.director-image,
.director-content,
.team-image{

    opacity:0;

    transition:all .9s ease;

}

.director-image{

    transform:translateX(-60px);

}

.director-content{

    transform:translateX(60px);

}

.team-image{

    transform:translateY(60px);

}

.director-message.show-section .director-image,
.director-message.show-section .director-content,
.team.show-section .team-image{

    opacity:1;

    transform:translate(0);

}

/*======================================================
  RESPONSIVE - AJOUT
======================================================*/

@media (max-width:768px){

    .page-hero-content,
    .about-story-content,
    .why-trust-content,
    .director-content{

        width:100%;

        text-align:center;

    }

    .page-badge,
    .section-badge{

        margin-inline:auto;

    }

    .about-story-content .btn{

        margin:auto;

    }

    .story-features,
    .trust-list{

        gap:15px;

    }

    .mvv-grid,
    .business-grid{

        gap:20px;

    }

}


@media (max-width:576px){

    .page-hero{

        padding:130px 0 70px;

    }

    .page-hero-content h1{

        line-height:1.25;

    }

    .about-story-image img,
    .why-trust-image img,
    .director-image img,
    .team-image img{

        width:100%;

        height:auto;

    }

    .story-feature,
    .trust-item{

        width:100%;

    }

    .mvv-card,
    .business-card{

        width:100%;

    }

    .director-card{

        margin-top:20px;

    }

}


/* Sécurité responsive */

.about-story-grid,
.why-trust-grid,
.director-grid,
.mvv-grid,
.business-grid{

    width:100%;

}

img{

    max-width:100%;

    height:auto;

}

iframe,
video{

    max-width:100%;

}