/* ==========================================
   VARIABLES
========================================== */

/* ==========================================
   ANIMATIONS
========================================== */

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-30px);
    }
}

@keyframes floatSmall{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }
}

@keyframes pulse{
    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(50px);
    }

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

/* ==========================================
   SECTIONS COMMUNES
========================================== */

.director-message,
.team,
.branches,
.vision{
    padding:var(--section-padding);
    --primary:#003366;
    --accent:#ff4d00;

    --white:#fff;
    --text:#555;
    --text-light:#777;

    --section-padding:120px 8%;

    --radius:25px;
    --radius-lg:30px;

    --shadow-sm:0 15px 35px rgba(0,0,0,.06);
    --shadow-md:0 15px 40px rgba(0,0,0,.08);
    --shadow-lg:0 25px 60px rgba(0,0,0,.12);

    --transition:.4s ease;
}

/* ==========================================
   MOT DU DIRECTEUR
========================================== */

.director-message{
    position:relative;
    overflow:hidden;
    background:linear-gradient(
        135deg,
        #f8fbff,
        #ffffff
    );
}

/* FORMES */

.bg-shape{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    z-index:1;
}

.shape1{
    width:350px;
    height:350px;
    background:#004aad25;
    top:-100px;
    left:-100px;
    animation:float 8s ease-in-out infinite;
}

.shape2{
    width:300px;
    height:300px;
    background:#ff3c0030;
    right:-100px;
    bottom:-100px;
    animation:float 10s ease-in-out infinite;
}

/* CARTE */

.director-card{
    position:relative;
    z-index:10;

    max-width:1900px;
    margin:auto;

    background:var(--white);

    border-radius:var(--radius-lg);

    padding:50px;

    text-align:center;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    transition:var(--transition);

    animation:fadeUp 1.2s ease;
    margin-top:160px;
}

.director-card:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 80px rgba(0,0,0,.12);
}

/* PHOTO */

.director-photo{
    width:300px;
    height:300px;

    margin:-180px auto 30px;
}

.director-photo img{
    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50%;

    border:8px solid var(--white);

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

    animation:floatSmall 4s ease-in-out infinite;
}

/* CONTENU

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

.quote{
    font-size:50px;
    color:var(--secondary);
    margin-bottom:20px;
}

.director-content p{
    font-size:20px;
    line-height:1.9;
    color:var(--text);
    margin-bottom:18px;
} */

/* SECTION VISION MISSION */
.vision-mission {
    padding: 80px 0;
    margin-top:-80px;
}

.vm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* CARD BASE */
.flip-card{
    height:auto;
    min-height:420px;
}

.flip-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.7s ease;
}

/* FRONT + BACK */
.flip-front,
.flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px;
    text-align: center;
}

/* FRONT */
.flip-front {
    background: #2a018a;
    color: white;
}

.flip-front i {
    font-size: 180px;
    margin-bottom: 10px;
}

/* BACK */
.flip-back {
    background: #272511;
    color: white;
    transform: rotateY(180deg);
    font-size: 20px;
}

/* FLIP ACTIVE */
.flip-card.active .flip-inner {
    transform: rotateY(180deg);
}

/* DESKTOP HOVER */
@media (hover: hover) and (pointer: fine) {
    .flip-card:hover .flip-inner {
        transform: rotateY(180deg);
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .vm-grid {
        grid-template-columns: 1fr;
    }
}

/* SIGNATURE */

.signature{
    margin-top:40px;
}

.signature h4{
    color:var(--primary);
    font-size:24px;
    margin-bottom:10px;
}

.signature span{
    color:var(--text-light);
    font-size:15px;
    letter-spacing:1px;
}

/* ==========================================
   ÉQUIPE
========================================== */

.team{
    background:var(--white);
    margin-top:-90px;
}

.team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
    
}

.team-card{
    background:var(--white);

    border-radius:var(--radius);

    overflow:hidden;

    text-align:center;

    box-shadow:var(--shadow-md);

    transition:var(--transition);
}

.team-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
}

.team-image{
    height:280px;
}

.team-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.team-card h3{
    margin-top:20px;
    color:var(--primary);
}

.team-card span{
    display:block;
    color:var(--text-light);
    padding-bottom:25px;
}

/* ==========================================
   AGENCES
========================================== */

.branches{
    background:linear-gradient(
        135deg,
        #f7f9fc,
        #ffffff
    );
    margin-top:-90px;
}

.branches-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
    margin-top:60px;
}

.branch-card{
    background:var(--white);

    padding:40px;

    text-align:center;

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);
}

.branch-card:hover{
    transform:translateY(-10px);
    background:var(--primary);
}

.branch-card:hover :is(h3,p,i){
    color:var(--white);
}

.branch-card i{
    font-size:45px;
    color:var(--accent);
    margin-bottom:20px;
}

.branch-card h3{
    color:var(--primary);
    margin-bottom:10px;
}



/* ==========================================
   VISION
========================================== */

.vision{
    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        var(--primary),
        #0055aa
    );

    color:var(--white);
}


/* FORMES */

.vision-shape{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    opacity:.25;
}

.shape-left{
    width:350px;
    height:350px;

    background:var(--white);

    top:-120px;
    left:-120px;

    animation:float 8s ease-in-out infinite;
}

.shape-right{
    width:300px;
    height:300px;

    background:#ff9900;

    right:-80px;
    bottom:-80px;

    animation:float 10s ease-in-out infinite;
}

/* CONTENU */

.vision-content{
    max-width:900px;

    margin:auto;

    text-align:center;

    position:relative;
    z-index:2;
}

.vision-icon{
    width:100px;
    height:100px;

    margin:0 auto 30px;

    background:var(--white);
    color:var(--primary);

    border-radius:50%;

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

    font-size:40px;

    animation:pulse 3s infinite;
}

.vision-content h3{
    font-size:40px;
    margin-bottom:25px;
}

.vision-content p{
    font-size:18px;
    line-height:1.9;
    margin-bottom:20px;
    color:#f1f1f1;
}

/* VALEURS */

.vision-values{
    margin-top:70px;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:25px;
}

.value-card{
    background:rgba(255,255,255,.12);

    backdrop-filter:blur(15px);

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

    padding:35px;

    border-radius:var(--radius);

    text-align:center;

    transition:var(--transition);
}

.value-card:hover{
    transform:translateY(-10px);
    background:rgba(255,255,255,.18);
}

.value-card i{
    font-size:40px;
    color:#ffcc00;
    margin-bottom:20px;
}

.value-card h4{
    font-size:22px;
    margin-bottom:12px;
}

.value-card p{
    color:#f2f2f2;
}

@media (max-width: 992px){

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

    .director-card{
        padding:30px 20px;
        margin-top:100px;
    }

    .director-photo{
        width:220px;
        height:220px;
        margin:-120px auto 20px;
    }

    .director-content p{
        font-size:17px;
        line-height:1.7;
    }

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

    .vm-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .flip-card{
        height:380px;
    }

    .flip-front i{
        font-size:120px;
    }

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

    .team-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .team-image{
        height:240px;
    }

    /* ================= BRANCHES ================= */

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

    .branch-card{
        padding:25px;
    }

    /* ================= VISION ================= */

    .vision-content h3{
        font-size:32px;
    }

    .vision-content p{
        font-size:16px;
    }

    .vision-values{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .value-card{
        padding:25px;
    }
}

@media (max-width: 768px){

    /* ================= GENERAL ================= */

    .director-message,
    .team,
    .branches,
    .vision{
        padding:80px 20px;
    }

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

    .director-card{
        padding:25px 18px;
        margin-top:80px;
    }

    .director-photo{
        width:180px;
        height:180px;
        margin:-100px auto 15px;
    }

    .director-content p{
        font-size:16px;
    }

    .quote{
        font-size:32px;
    }

    /* ================= FLIP CARDS ================= */

    .flip-card{
        height:auto;
        min-height:320px;
    }

    .flip-front i{
        font-size:90px;
    }

    .flip-back{
        font-size:16px;
        padding:20px;
    }

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

    .team-grid{
        grid-template-columns:1fr;
    }

    .team-image{
        height:220px;
    }

    /* ================= BRANCHES ================= */

    .branches-grid{
        grid-template-columns:1fr;
    }

    .branch-card{
        padding:20px;
    }

    .branch-card i{
        font-size:35px;
    }

    /* ================= VISION ================= */

    .vision-content h3{
        font-size:26px;
    }

    .vision-content p{
        font-size:15px;
    }

    .vision-icon{
        width:80px;
        height:80px;
        font-size:30px;
    }

    .vision-values{
        grid-template-columns:1fr;
    }

    .value-card{
        padding:20px;
    }
}

@media (max-width:768px){
    .team,
    .branches,
    .vision{
        margin-top:0 !important;
    }
}

.director-card,
.team-card,
.branch-card,
.value-card{
    transition:transform .3s ease, box-shadow .3s ease;
}

@media (hover:none){
    .team-card:hover,
    .branch-card:hover,
    .director-card:hover{
        transform:none;
    }
}