/*Police pour le blog*/
@font-face { font-family:'Noto Sans'; src:url('../fonts/Noto_Sans/static/NotoSans-Regular.ttf'); font-weight:400; font-display:swap; }
@font-face { font-family:'Noto Sans'; src:url('../fonts/Noto_Sans/static/NotoSans-Bold.ttf');    font-weight:700; font-display:swap; }

/* Police Poppins (texte courant + boutons) */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}  

/*Delclaration de police (zen-dot)*/
@font-face {
    font-family: 'Zen Dots';
    src: url('../fonts/ZenDots-Regular.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/*La base est aussi un effet sur tout les ellement*/
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;/*enleve les puce des list a puce*/
}

body {
    font-family: 'Zen Dots', 'sans-serif';
    background: linear-gradient(160deg, #0e1726, #16233b);/*effet de degradé en arrier plan*/
}

/* Css de la nav-bar */
.navbar {
    position: fixed;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background-color: #0e1726;
}

.navbar a {
    color: white;
}

.navbar .nav-links ul {
    display: flex;
}

.navbar .nav-links li {
    margin: 0 25px;
}

/*effet sur le logo dans la nav-bar*/
.navbar .logo {
    height: 85px;
    width: auto;

}

/* le menu hamburger*/
.navbar .menu-hamburger {
    display: none;
    width: 35px;
    position: relative;
    z-index: 2;
}

/*partie reponsive de la nav-bar*/
@media screen and (max-width: 1050px) {

    .navbar .logo{
        
        top: 50px;
        left: 50px;
    }

    /*on affiche le menu hamburger*/
    .navbar .menu-hamburger {
        display: block;
        width: 35px;
    }

    /*on modifie la nav-bar pour la mettre en long sur mobile*/
    .nav-links {
        top: 0;
        left: 0;
        position: absolute;
        backdrop-filter: blur(7px);
        background-color: rgba(255, 255, 255, 0.205);
        width: 100%;
        height: 100vh;
        display: flex; 
        justify-content: center; 
        align-items: center;
        margin-left: -100%;
        transition: all 0.5s ease;/*transision sur le coté*/
    }

    .nav-links.mobile-menu {
    margin-left: 0;
    }

    .nav-links ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .navbar .nav-links ul li {
        margin: 25px 0;
        font-size: 1.2em;
    }
}


/* ════════════════════════════════════════════════════════════
   PAGE À PROPOS  (a-propos.html)
   Hero aligné à gauche (filet ambre), cartes Mission/Vision/Approche,
   bandeau "le problème", fonctionnement en 4 étapes, profils et footer
   légal. Tout est scopé sous .apropos.
   ════════════════════════════════════════════════════════════ */
.apropos {
    --bg:#0e1726; --amber:#e8a317; --amber-bd:rgba(232,163,23,0.35);
    --white:#fff; --muted:#aab4c5;
    --glass:rgba(255,255,255,0.04); --glass-bd:rgba(255,255,255,0.08);
    color:var(--white);
}
.apropos, .apropos *, .apropos *::before, .apropos *::after { box-sizing:border-box; }

/* — Navbar maintenue en haut au scroll —
   Le .navbar est position:fixed mais sans z-index : au scroll, les cartes
   (qui créent un contexte d'empilement via transform) passaient par-dessus.
   On la cale en haut et on la fait passer au-dessus. */
.navbar:has(~ .apropos) { top:0; left:0; right:0; z-index:100; }

/* — Hero aligné à gauche, filet ambre — */
.apropos .hero { max-width:1040px; margin:0 auto; padding:185px 40px 20px; }
.apropos .hero-inner { border-left:3px solid var(--amber); padding-left:28px; max-width:720px; }
.apropos .over {
    font-family:'Poppins',sans-serif; font-size:12px; font-weight:700;
    letter-spacing:3px; text-transform:uppercase; color:var(--amber);
    display:block; margin-bottom:18px;
}
.apropos .hero h1 { font-size:54px; line-height:1.08; }
.apropos .hero h1 em { color:var(--amber); font-style:normal; }
.apropos .hero p {
    font-family:'Poppins',sans-serif; font-size:16px; line-height:1.75;
    color:var(--muted); margin-top:22px;
}

/* — Trois cartes (Mission / Vision / Approche) — */
.apropos .cards {
    max-width:1040px; margin:56px auto 0; padding:0 40px;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px;
}
.apropos .card {
    background:var(--glass); border:1px solid var(--glass-bd); border-radius:18px;
    padding:30px 28px; transition:transform .25s ease, border-color .2s;
}
.apropos .card:hover { transform:translateY(-6px); border-color:var(--amber-bd); }
.apropos .card .num {
    font-family:'Zen Dots',sans-serif; font-size:16px; color:var(--amber); margin-bottom:16px;
}
.apropos .card h2 { font-size:22px; margin-bottom:12px; }
.apropos .card p { font-family:'Poppins',sans-serif; font-size:14px; line-height:1.8; color:var(--muted); }

/* — Titre de section générique — */
.apropos .head { max-width:1040px; margin:60px auto 24px; padding:0 40px; }
.apropos .head .o {
    font-family:'Poppins',sans-serif; font-size:11px; font-weight:700;
    letter-spacing:3px; text-transform:uppercase; color:var(--amber);
    display:block; margin-bottom:10px;
}
.apropos .head h2 { font-size:28px; }
.apropos .head .lead {
    font-family:'Poppins',sans-serif; font-size:14px; line-height:1.7;
    color:var(--muted); margin-top:10px; max-width:600px;
}
.apropos .head .lead strong { color:var(--white); }

/* — Bandeau "le problème" — */
.apropos .problem { max-width:1040px; margin:0 auto; padding:0 40px; }
.apropos .problem .inner {
    background:var(--glass); border:1px solid var(--glass-bd); border-radius:18px;
    padding:34px; display:grid; grid-template-columns:1.4fr 1fr; gap:34px; align-items:center;
}
.apropos .problem p { font-family:'Poppins',sans-serif; font-size:14px; line-height:1.85; color:var(--muted); margin-bottom:12px; }
.apropos .problem strong { color:var(--white); }
.apropos .problem .src { font-size:12px; opacity:.65; margin-bottom:0; }
.apropos .problem .figure { text-align:center; border-left:1px solid var(--glass-bd); padding-left:34px; }
.apropos .problem .stat-big { font-family:'Zen Dots',sans-serif; font-size:42px; color:var(--amber); line-height:1.1; }
.apropos .problem .stat-sub { font-family:'Poppins',sans-serif; font-size:13px; color:var(--muted); margin-top:10px; }

/* — "Comment ça marche" : 4 cartes numérotées — */
.apropos .how { max-width:1040px; margin:0 auto; padding:0 40px;
    display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.apropos .step {
    background:var(--glass); border:1px solid var(--glass-bd); border-radius:16px;
    padding:26px 22px; transition:transform .25s ease, border-color .2s;
}
.apropos .step:hover { transform:translateY(-6px); border-color:var(--amber-bd); }
.apropos .step .num { font-family:'Zen Dots',sans-serif; font-size:26px; color:var(--amber); margin-bottom:14px; }
.apropos .step h3 { font-family:'Poppins',sans-serif; font-size:15px; font-weight:700; margin-bottom:8px; }
.apropos .step p { font-family:'Poppins',sans-serif; font-size:13px; line-height:1.65; color:var(--muted); }

/* — "Pour qui" : 3 profils — */
.apropos .who { max-width:1040px; margin:0 auto; padding:0 40px;
    display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.apropos .who .profil {
    background:var(--glass); border:1px solid var(--glass-bd); border-radius:16px;
    padding:24px; transition:border-color .2s;
}
.apropos .who .profil:hover { border-color:var(--amber-bd); }
.apropos .who .tier { font-family:'Poppins',sans-serif; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--amber); margin-bottom:8px; }
.apropos .who h3 { font-size:20px; margin-bottom:8px; }
.apropos .who .profil p { font-family:'Poppins',sans-serif; font-size:13px; line-height:1.7; color:var(--muted); }

/* — Footer légal en grille — */
.apropos .legal {
    border-top:1px solid var(--glass-bd); margin-top:30px;
    max-width:1040px; margin-left:auto; margin-right:auto;
    padding:40px 40px 70px;
    display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px;
}
.apropos .legal .brand { max-width:300px; }
.apropos .legal .brand img { height:46px; width:auto; margin-bottom:12px; }
.apropos .legal .brand p { font-family:'Poppins',sans-serif; font-size:13px; line-height:1.7; color:var(--muted); }
.apropos .legal .col .lbl {
    font-family:'Poppins',sans-serif; font-size:12px; font-weight:700;
    letter-spacing:2px; text-transform:uppercase; color:var(--white);
    display:block; margin-bottom:16px;
}
.apropos .legal .col ul { display:flex; flex-direction:column; gap:11px; }
.apropos .legal .col a {
    font-family:'Poppins',sans-serif; font-size:14px; color:var(--muted);
    transition:color .2s;
}
.apropos .legal .col a:hover { color:var(--amber); }

@media screen and (max-width:760px) {
    .apropos .hero { padding-top:140px; }
    .apropos .hero h1 { font-size:36px; }
    .apropos .problem .inner { grid-template-columns:1fr; }
    .apropos .problem .figure { border-left:none; border-top:1px solid var(--glass-bd); padding-left:0; padding-top:24px; }
    .apropos .how { grid-template-columns:1fr 1fr; }
    .apropos .who { grid-template-columns:1fr; }
}