/* =========================================================
   BL2AC - Feuille de style principale
   =========================================================
   Organisation du fichier :
   1. Réglages généraux
   2. Menu de navigation
   3. Bandeau d'accueil
   4. Approche
   5. Domaines d'intervention
   6. Démarche / PDCA
   7. À propos
   8. Contact et pied de page
   9. Adaptation mobile (écrans <= 768 px)

   Palette principale :
   - Bleu foncé :  #0c3f83
   - Bleu moyen :  #85a8d8
   - Bleu clair :  #cad9ec
   - Crème :       #fffaf2
   ========================================================= */


/* =========================================================
   1. RÉGLAGES GÉNÉRAUX
   ========================================================= */

/* Inclut les bordures et les espacements dans la largeur des éléments. */
* {
    box-sizing: border-box;
}

/* Style général du site. */
body {
    margin: 0;
    font-family: "Manrope", Arial, sans-serif;
    color: #0c3f83;
    background-color: #fffaf2;
}

/* Graisse commune aux titres. */
h1,
h2,
h3 {
    font-weight: 600;
}


/* =========================================================
   2. MENU DE NAVIGATION - VERSION PC
   ========================================================= */

/* Barre bleue qui reste visible en haut de l'écran lors du défilement. */
.navbar {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #0c3f83;
}

/* Conteneur du logo BL2AC et des liens du menu. */
.navbar-content {
    max-width: 1200px;
    height: 70px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Nom BL2AC affiché à gauche du menu. */
.navbar-logo {
    color: white;
    text-decoration: none;
    font-size: 27px;
    font-weight: bold;
}

/* Le bouton hamburger est masqué sur PC. */
.menu-toggle {
    display: none;
}

/* Liens du menu affichés horizontalement sur PC. */
.navbar-links {
    display: flex;
    align-items: center;
    gap: 35px;
}

.navbar-links a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}

.navbar-links a:hover {
    color: #cad9ec;
}


/* =========================================================
   3. BANDEAU D'ACCUEIL - VERSION PC
   ========================================================= */

/* Fond bleu clair de la première section. */
.hero {
    background-color: #cad9ec;
}

/* Deux colonnes : texte à gauche et illustration à droite. */
.hero-content {
    max-width: 1200px;
    min-height: 500px;
    margin: 0 auto;
    display: flex;
}

/* ----- Partie gauche : titres, texte et logo ----- */
.hero-text {
    width: 55%;
    padding: 70px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.hero-text h1 {
    margin: 0 0 25px;
    font-size: 42px;
    line-height: 1.15;
}

.hero-text h2 {
    margin: 0 0 25px;
    font-size: 23px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.hero-text p {
    max-width: 550px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.5;
}

/* Logo BL2AC placé sous le texte d'introduction. */
.logo {
    margin-top: 30px;
    text-align: center;
}

.logo img {
    display: block;
    width: 280px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ----- Partie droite : illustration des panneaux ----- */
.hero-image {
    width: 45%;
    display: flex;
}

.hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================================
   4. UNE APPROCHE ADAPTÉE À VOTRE RÉALITÉ - VERSION PC
   ========================================================= */

.approche {
    padding: 60px 30px;
    background-color: #fffaf2;
}

/* Encadré central de la section. */
.approche-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 35px 50px;
    border: 1px solid #cad9ec;
    text-align: center;
}

/* Logo BL2AC placé au-dessus du titre de la section */

.approche-logo {
    display: block;
    width: 150px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 25px;
}

.approche h2 {
    margin: 0 0 25px;
    font-size: 32px;
    color: #0c3f83;
}

.approche p {
    max-width: 900px;
    margin: 10px auto;
    font-size: 18px;
    line-height: 1.5;
}

/* Phrase de conclusion volontairement plus visible. */
.approche-conclusion {
    margin-top: 25px !important;
    font-size: 21px !important;
    font-weight: bold;
    color: #85a8d8;
}


/* =========================================================
   5. DOMAINES D'INTERVENTION - VERSION PC
   ========================================================= */

.domaines {
    padding: 60px 30px;
    background-color: #cad9ec;
}

.domaines-content {
    max-width: 1200px;
    margin: 0 auto;
}

.domaines h2 {
    margin: 0 0 45px;
    text-align: center;
    font-size: 34px;
    color: #0c3f83;
}

/* Trois cartes côte à côte sur PC. */
.domaines-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Carte d'un domaine d'intervention. */
.domaine-card {
    padding: 35px 30px;
    background-color: #fffaf2;
    border: 1px solid rgba(12, 63, 131, 0.12);
    border-radius: 6px;
}

.domaine-card h3 {
    margin: 0 0 25px;
    font-size: 19px;
    line-height: 1.3;
    color: #0c3f83;
}

.domaine-card ul {
    margin: 0;
    padding-left: 20px;
}

.domaine-card li {
    margin-bottom: 12px;
    font-size: 17px;
    line-height: 1.4;
}


/* =========================================================
   6. DÉMARCHE / PDCA - VERSION PC
   ========================================================= */

.demarche {
    padding: 60px 30px;
    background-color: #fffaf2;
}

.demarche-content {
    max-width: 1200px;
    margin: 0 auto;
}

.demarche h2 {
    margin: 0 0 15px;
    text-align: center;
    font-size: 34px;
    color: #0c3f83;
}

.demarche-intro {
    max-width: 750px;
    margin: 0 auto 40px;
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
}

/*
   Grille de la démarche :
   5 cartes (1fr) séparées par 4 colonnes de 40 px réservées aux flèches.
*/
.pdca {
    display: grid;
    grid-template-columns:
        1fr 40px
        1fr 40px
        1fr 40px
        1fr 40px
        1fr;
    align-items: stretch;
    gap: 0;
}

/* Une étape de la démarche. */
.pdca-etape {
    position: relative;
    min-width: 0;
    min-height: 250px;
    padding: 30px 20px 25px;
    background-color: #fffaf2;
    border: 1px solid rgba(12, 63, 131, 0.12);
    border-radius: 10px;
    text-align: center;
}

/* Numéro rond placé légèrement au-dessus de chaque carte. */
.pdca-numero {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #0c3f83;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

/* Pictogramme de chaque étape. */
.pdca-icone {
    display: block;
    width: 65px;
    height: 65px;
    margin: 12px auto 18px;
    object-fit: contain;
}

.pdca-etape h3 {
    margin: 0 0 18px;
    color: #0c3f83;
    font-size: 20px;
    font-weight: 600;
}

.pdca-etape p {
    margin: 0;
    color: #0c3f83;
    font-size: 15px;
    line-height: 1.65;
}

/* Conteneur des flèches entre les cartes. */
.pdca-fleche {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
   La flèche fait 80 px alors que sa colonne ne fait que 40 px :
   elle déborde volontairement sur les cartes pour créer la liaison visuelle.
*/
.pdca-fleche img {
    display: block;
    width: 80px;
    max-width: none;
    height: auto;
}

/* Bandeau final de la démarche. */
.amelioration-continue {
    margin-top: 25px;
    padding: 14px;
    background-color: #0c3f83;
    color: white;
    text-align: center;
    font-size: 17px;
    letter-spacing: 2px;
}


/* =========================================================
   7. À PROPOS / EXPÉRIENCE - VERSION PC
   ========================================================= */

.apropos {
    padding: 60px 30px;
    background-color: #cad9ec;
}

.apropos-content {
    max-width: 1200px;
    margin: 0 auto;
}

.apropos h2 {
    max-width: 850px;
    margin: 0 auto 40px;
    text-align: center;
    font-size: 34px;
    line-height: 1.2;
    color: #0c3f83;
}

/* Deux colonnes : présentation à gauche, qualifications à droite. */
.apropos-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Texte de présentation. */
.apropos-texte {
    font-size: 17px;
    line-height: 1.65;
}

.apropos-texte p {
    margin-top: 0;
    margin-bottom: 22px;
}

/* Portrait intégré au début du texte sur PC. */
.apropos-photo {
    float: left;
    width: 250px;
    height: 250px;
    margin: 0 25px 15px 0;
    object-fit: contain;
}

/* Colonne des encadrés Formation / Expériences. */
.apropos-infos {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card {
    padding: 28px 30px;
    background-color: #fffaf2;
    border: 1px solid rgba(12, 63, 131, 0.12);
    border-radius: 8px;
}

.info-card h3 {
    margin: 0 0 20px;
    font-size: 18px;
    color: #0c3f83;
}

.info-card ul {
    margin: 0;
    padding-left: 20px;
}

.info-card li {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.4;
}


/* =========================================================
   8. CONTACT ET PIED DE PAGE - VERSION PC
   ========================================================= */

.contact {
    padding: 60px 30px;
    background-color: #0c3f83;
    color: white;
}

/* Deux colonnes : message à gauche, coordonnées à droite. */
.contact-content {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 0;
    align-items: center;
}

/* ----- Texte de contact ----- */
.contact h2 {
    margin: 0 0 25px;
    font-size: 34px;
    color: white;
}

.contact-texte p {
    max-width: 650px;
    font-size: 18px;
    line-height: 1.6;
}
/* Logo BL2AC blanc dans la partie gauche du contact */

.contact-logo {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    margin: 30px auto 0;
}

/* ----- Bloc des coordonnées ----- */
.contact-coordonnees {
    margin-left: 40px;
    padding: 30px 35px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #85a8d8;
    border-radius: 10px;
}

.contact-coordonnees h3 {
    margin: 0 0 20px;
    font-size: 22px;
}

.contact-coordonnees a {
    display: block;
    margin-bottom: 10px;
    color: white;
    text-decoration: none;
    font-size: 19px;
}

.contact-coordonnees a:hover {
    text-decoration: underline;
}

.contact-coordonnees p {
    margin-top: 25px;
    font-size: 16px;
    line-height: 1.5;
}

/* Ligne téléphone ou e-mail avec son icône. */
.contact-ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.contact-ligne a {
    margin-bottom: 0;
}

.contact-icone {
    width: 25px;
    color: #cad9ec;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

/* Lien LinkedIn et QR code disposés verticalement. */
.contact-qrcode {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start;
    width: fit-content;
    margin-top: 22px;
    color: white;
    text-decoration: none;
}

.contact-qrcode span {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
}

.contact-qrcode img {
    display: block;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    object-fit: contain;
    background-color: white;
}

.contact-qrcode:hover span {
    text-decoration: underline;
}

.contact-localisation {
    margin-top: 25px;
}

/* Mention CAPE en bas du site. */
.footer {
    padding: 15px 25px;
    background-color: #0c3f83;
    border-top: 1px solid #85a8d8;
    color: #cad9ec;
    text-align: center;
}

.footer p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
}


/* =========================================================
   9. VERSION MOBILE - ÉCRANS JUSQU'À 768 PX
   =========================================================
   Les règles ci-dessous remplacent uniquement les propriétés
   qui doivent changer sur téléphone / petit écran.
   ========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       Bandeau d'accueil mobile
       ----------------------------------------------------- */

    /* Le texte et l'illustration passent l'un sous l'autre. */
    .hero-content {
        flex-direction: column;
    }

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

    .hero-text h1 {
        font-size: 32px;
    }

    .hero-text h2 {
        font-size: 20px;
    }

    .hero-text p {
        font-size: 17px;
    }

    .logo img {
        width: 240px;
    }

    /* L'illustration est centrée et réduite sur mobile. */
    .hero-image {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
    }

    .hero-image img {
        width: 70%;
        height: auto;
        object-fit: contain;
    }


    /* -----------------------------------------------------
       Approche mobile
       ----------------------------------------------------- */

    .approche {
        padding: 30px 20px;
    }

    .approche-content {
        padding: 30px 20px;
    }

    .approche h2 {
        font-size: 27px;
    }

    .approche p {
        font-size: 16px;
    }

    .approche-conclusion {
        font-size: 19px !important;
    }


    /* -----------------------------------------------------
       Domaines d'intervention mobile
       ----------------------------------------------------- */

    .domaines {
        padding: 40px 20px;
    }

    .domaines h2 {
        margin-bottom: 30px;
        font-size: 28px;
    }

    /* Les trois cartes sont empilées verticalement. */
    .domaines-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .domaine-card {
        padding: 30px 25px;
    }

    .domaine-card h3 {
        font-size: 18px;
    }

    .domaine-card li {
        font-size: 16px;
    }


    /* -----------------------------------------------------
       Démarche / PDCA mobile
       ----------------------------------------------------- */

    .demarche {
        padding: 45px 20px;
    }

    .demarche h2 {
        font-size: 28px;
    }

    .demarche-intro {
        margin-bottom: 30px;
        font-size: 16px;
    }

    /* Les cinq étapes sont empilées en une seule colonne. */
    .pdca {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pdca-etape {
        min-height: auto;
        padding: 30px 25px;
    }

    /* Espace vertical réservé à la flèche entre deux cartes. */
    .pdca-fleche {
        height: 65px;
    }

    /*
       Sur mobile, l'image horizontale est remplacée par fleche_bas.png.
       La hauteur de 80 px permet à la flèche de chevaucher légèrement
       l'espace entre les cartes.
    */
    .pdca-fleche img {
        content: url("images/fleche_bas.png");
        width: auto;
        max-width: none;
        height: 80px;
    }

    .pdca-etape h3 {
        font-size: 20px;
    }

    .pdca-etape p {
        font-size: 16px;
    }

    .amelioration-continue {
        margin-top: 25px;
        padding: 14px;
        background-color: #0c3f83;
        color: white;
        text-align: center;
        font-size: 17px;
        letter-spacing: 2px;
    }


    /* -----------------------------------------------------
       À propos mobile
       ----------------------------------------------------- */

    .apropos {
        padding: 45px 20px;
    }

    .apropos h2 {
        margin-bottom: 30px;
        font-size: 28px;
    }

    /* Les deux colonnes PC deviennent une seule colonne. */
    .apropos-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .apropos-texte {
        font-size: 16px;
    }

    /* La photo n'est plus flottante : elle est centrée au-dessus du texte. */
    .apropos-photo {
        float: none;
        display: block;
        width: 180px;
        height: 180px;
        margin: 0 auto 25px;
    }

    .info-card {
        padding: 25px;
    }

    .info-card h3 {
        font-size: 17px;
    }

    .info-card li {
        font-size: 15px;
    }


    /* -----------------------------------------------------
       Contact mobile
       ----------------------------------------------------- */

    .contact {
        padding: 45px 25px;
    }

    /* Le texte et les coordonnées passent l'un sous l'autre. */
    .contact-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .contact h2 {
        font-size: 28px;
    }

    .contact-texte p {
        font-size: 16px;
    }

    /* Logo BL2AC dans la section Contact sur mobile */
    .contact-logo {
        width: 160px;
        margin-top: 25px;
    }
	
    .contact-coordonnees {
        margin-left: 0;
        padding: 25px;
        border: 1px solid #85a8d8;
        border-radius: 12px;
    }


    /* -----------------------------------------------------
       Menu de navigation mobile
       ----------------------------------------------------- */

    .navbar-content {
        position: relative;
        height: 60px;
        padding: 0 20px;
    }

    .navbar-logo {
        font-size: 24px;
    }

    /* Le bouton hamburger devient visible sur mobile. */
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        color: white;
        font-size: 30px;
        cursor: pointer;
    }

    /* Le menu est masqué par défaut sous le bouton hamburger. */
    .navbar-links {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        padding: 15px 20px 20px;
        background-color: #0c3f83;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .navbar-links a {
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid #85a8d8;
        font-size: 16px;
    }

    /* Cette classe est ajoutée / retirée par le JavaScript du menu. */
    .navbar-links.menu-open {
        display: flex;
    }
}



/* =========================================================
   10. MENTIONS LÉGALES
   ========================================================= */

.legal {
    padding: 60px 30px;
    background-color: #fffaf2;
}

.legal-content {
    max-width: 950px;
    margin: 0 auto;
}

.legal h1 {
    margin: 0 0 35px;
    font-size: 38px;
    color: #0c3f83;
}

.legal h2 {
    margin: 35px 0 15px;
    font-size: 23px;
    color: #0c3f83;
}

.legal p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.7;
}

.legal a {
    color: #0c3f83;
}

.legal-back {
    display: inline-block;
    margin-bottom: 30px;
    color: #0c3f83;
    text-decoration: none;
    font-weight: 600;
}

.legal-back:hover {
    text-decoration: underline;
}

.footer a {
    color: #cad9ec;
    text-decoration: underline;
}

.footer a:hover {
    color: white;
}

/* Adaptation de la page Mentions légales sur mobile */
@media (max-width: 768px) {

    .legal {
        padding: 40px 20px;
    }

    .legal h1 {
        font-size: 30px;
    }

    .legal h2 {
        font-size: 21px;
    }

    .legal p {
        font-size: 15px;
    }
}