/* /styles.css */
/* Réinitialisation des styles de base */
body, h1, p {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* /styles.css */

/* Importation de la police Aptos */
@font-face {
    font-family: 'Aptos';
    src: url('assets/fonts/Aptos-Regular.woff2') format('woff2'),
         url('assets/fonts/Aptos-Regular.woff') format('woff'),
         url('assets/fonts/Aptos-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* /styles.css */

/* Définition de la police Aptos Regular */
@font-face {
    font-family: 'Aptos';
    src: url('assets/fonts/aptos/Aptos.ttf') format('truetype');
    font-weight: normal; /* Regular */
    font-style: normal;
}

/* Définition de la police Aptos Bold */
@font-face {
    font-family: 'Aptos';
    src: url('assets/fonts/aptos/Aptos-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* Définition de la police Aptos Italic */
@font-face {
    font-family: 'Aptos';
    src: url('assets/fonts/aptos/Aptos-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

/* Utilisation de la police */
body {
    font-family: 'Aptos', sans-serif; /* Fallback vers sans-serif */
}

/* Styles généraux pour le fond et le texte */
body {
    background-color: #156183;
    font-family: 'Aptos', sans-serif;
    height: auto; /* Modifier pour permettre le contenu de s'étendre */
    display: block; /* Remplacer flex pour un positionnement standard */
    justify-content: flex-start;
    align-items: flex-start; /* Supprimer l'alignement vertical central */
    color: #ffffff;
    overflow: auto; /* Activer le défilement */
    position: relative;
    padding-left: 10%;
}


/* Conteneur principal */
.contenu-principal {
    position: absolute; /* Permet un positionnement précis */
    top: 400px; /* Hauteur par rapport au haut de la page (modifiable) */
    left: 100px; /* Distance depuis le bord gauche (modifiable) */
    text-align: left; /* Alignement à gauche du texte */
    z-index: 2; /* Assure que le texte est au-dessus de l'image */
}

/* Style pour le nom (Raphaël Jansem) */
.nom {
    font-family: 'Aptos'; /* Assure l'utilisation de la police Aptos */
    font-weight: bold; /* Regular */
    font-size: 5rem; /* Taille de police plus grande */
    text-transform: capitalize; /* Première lettre en majuscule */
    margin-bottom: 10px; /* Espacement entre le nom et le titre */
    letter-spacing: 2px; /* Espacement entre les lettres */
}

/* Style pour le titre */
.titre {
    font-family: 'Aptos'; /* Assure l'utilisation de la police Aptos */
    font-weight: bold; /* Gras pour le titre */
    font-size: 2rem; /* Taille plus petite pour le titre */
    text-transform: uppercase; /* Tout en majuscules */
    line-height: 1.2; /* Espacement entre les lignes */
    letter-spacing: 1px; /* Espacement entre les lettres */
    color: #CCE9F7; /* Couleur bleu clair pour le texte */
}

/* Styles pour l'image en haut à droite */
.image-droite {
    position: absolute; /* Placement précis */
    top: 0; /* Collé au bord supérieur */
    right: 0; /* Collé au bord droit */
    width: auto; /* Ajustement automatique selon la hauteur */
    height: 900px; /* Taille par défaut, ajustable */
    z-index: 1; /* Place l'image derrière les autres éléments si nécessaire */
}
/* Bande blanche sous l'image */
.bande-blanche {
    position: absolute; /* Positionnement absolu */
    top: 900px; /* Hauteur personnalisable : change cette valeur pour ajuster la position */
    bottom: 0; /* Collez-la en bas de l'écran */
    left: 0; /* Assurez-vous qu'elle commence bien à gauche */
    width: 100%; /* Toute la largeur de la page */
    height: 120px; /* Hauteur de la bande blanche */
    background-color: #ffffff; /* Couleur blanche */
    z-index: 2; /* Assurez-vous qu'elle est au-dessus de l'image si besoin */
}
/* Style pour le texte dans la bande blanche */
.texte-bande {
    font-family: 'Aptos', sans-serif; /* Assure l'utilisation de la police existante */
    font-weight: bold; /* Texte en gras */
    font-size: 5rem; /* Taille du texte (modifiable) */
    color: #156183; /* Couleur bleu identique au fond de la page */
    margin: 0; /* Supprime les marges par défaut */
    line-height: 120px; /* Aligne verticalement au centre de la bande */
    position: absolute; /* Permet un placement précis */
    left: 200px; /* Distance depuis le bord gauche */
    top: 0; /* Positionne le texte en haut de la bande */
}
/* Conteneur global pour les nouveaux éléments */
.section-elements {
    position: relative; /* Nécessaire pour positionner les enfants en absolute */
}

/* Image photo1.png */
.photo1 {
    position: absolute; /* Positionnement précis */
    top: 1200px; /* Distance depuis le haut de la page */
    left: 0px; /* Distance depuis la gauche */
    width: auto; /* Taille par défaut pour l'image */
    height: 440px; /* Hauteur par défaut (modifiable) */
}

/* Texte sous l'image */
.texte-sous-photo {
    position: absolute; /* Positionnement précis */
    top: 1660px; /* Ajuste la position juste sous l'image */
    left: 70px; /* Aligné avec la photo */
    text-align: center; /* Centré par rapport à l'image */
    width: 300px; /* Même largeur que l'image pour le centrage */
    font-family: 'Aptos', sans-serif; /* Assure la cohérence avec le reste */
    font-size: 1.5rem; /* Taille du texte (modifiable) */
    color: #CCE9F7; /* Couleur du texte */
}

/* Bloc de texte */
.bloc-texte {
    position: absolute; /* Positionnement précis */
    top: 1200px; /* Distance depuis le haut de la page (modifiable) */
    left: 620px; /* Distance depuis la gauche (modifiable) */
    right: 150px; /* Distance depuis la droite (modifiable pour ajuster la largeur) */
    font-family: 'Aptos', sans-serif; /* Assure la cohérence avec le reste */
    font-size: 1.5rem; /* Taille du texte */
    line-height: 1.8; /* Espacement entre les lignes */
    text-align: justify; /* Alignement justifié à gauche */
    color: #ffffff; /* Couleur par défaut (modifiable) */
}
/* Bloc de texte supplémentaire */
.bloc-texte-supplementaire {
    position: absolute; /* Positionnement précis */
    top: 1430px; /* Distance depuis le haut de la page (modifiable) */
    left: 620px; /* Distance depuis la gauche (modifiable) */
    right: 150px; /* Distance depuis la droite (modifiable pour ajuster la largeur) */
    font-family: 'Aptos', sans-serif; /* Assure la cohérence avec le reste */
    font-size: 1.5rem; /* Taille du texte */
    line-height: 1.8; /* Espacement entre les lignes */
    text-align: justify; /* Alignement justifié */
    color: #CCE9F7; /* Couleur du texte */
}

.bloc-texte-supplementaire em {
    font-style: italic; /* Met le texte entre <em> en italique */
}
/* Bande blanche 2 */
.bande-blanche2 {
    position: absolute; /* Positionnement absolu */
    top: 1800px; /* Hauteur personnalisable : change cette valeur pour ajuster la position */
    left: 0; /* Assurez-vous qu'elle commence bien à gauche */
    width: 100%; /* Toute la largeur de la page */
    height: 120px; /* Hauteur de la bande blanche */
    background-color: #ffffff; /* Couleur blanche */
    z-index: 2; /* Assurez-vous qu'elle est au-dessus de l'image si besoin */
}

/* Texte dans la bande blanche 2 */
.texte-bande2 {
    font-family: 'Aptos', sans-serif; /* Assure l'utilisation de la police existante */
    font-weight: bold; /* Texte en gras */
    font-size: 5rem; /* Taille du texte (modifiable) */
    color: #156183; /* Couleur bleu identique au fond de la page */
    margin: 0; /* Supprime les marges par défaut */
    line-height: 120px; /* Aligne verticalement au centre de la bande */
    position: absolute; /* Permet un placement précis */
    left: 200px; /* Distance depuis le bord gauche */
    top: 0; /* Positionne le texte en haut de la bande */
}
/* Bloc de texte pour les missions */
.bloc-missions {
    position: absolute; /* Positionnement précis */
    top: 1970px; /* Distance depuis le haut de la page (modifiable) */
    left: 820px; /* Distance depuis la gauche (modifiable) */
    right: 150px; /* Distance depuis la droite (modifiable pour ajuster la largeur) */
    font-family: 'Aptos', sans-serif; /* Assure la cohérence avec le reste */
    font-size: 1.5rem; /* Taille du texte */
    line-height: 1.8; /* Espacement entre les lignes */
    text-align: justify; /* Alignement justifié */
    color: #ffffff; /* Couleur du texte */
}

/* Style pour les titres en gras */
.bloc-missions strong {
    font-weight: bold; /* Rend les titres en gras */
    color: #ffffff; /* Couleur identique au texte */
}

/* Liste ordonnée dans le bloc missions */
.bloc-missions ol {
    list-style-type: decimal; /* Numérotation automatique avec chiffres */
    padding-left: 20px; /* Décalage pour aligner les numéros */
    margin: 0; /* Supprime les marges inutiles */
}

.bloc-missions ol li {
    margin-bottom: 15px; /* Espacement entre les éléments de la liste */
}

/* Image coche */
.image-coche {
    position: absolute; /* Positionnement précis */
    top: 2080px; /* Distance depuis le haut de la page (modifiable) */
    left: 250px; /* Distance depuis la gauche (modifiable) */
    width: 300px; /* Largeur par défaut (modifiable) */
    height: auto; /* Conserve les proportions de l'image */
    z-index: 3; /* Assure que l'image est au-dessus des autres éléments si nécessaire */
}
/* Bande blanche 3 */
.bande-blanche3 {
    position: absolute; /* Positionnement absolu */
    top: 2560px; /* Hauteur personnalisable : change cette valeur pour ajuster la position */
    left: 0; /* Assurez-vous qu'elle commence bien à gauche */
    width: 100%; /* Toute la largeur de la page */
    height: 120px; /* Hauteur de la bande blanche */
    background-color: #ffffff; /* Couleur blanche */
    z-index: 2; /* Assurez-vous qu'elle est au-dessus de l'image si besoin */
}

/* Texte dans la bande blanche 3 */
.texte-bande3 {
    font-family: 'Aptos', sans-serif; /* Assure l'utilisation de la police existante */
    font-weight: bold; /* Texte en gras */
    font-size: 5rem; /* Taille du texte (modifiable) */
    color: #156183; /* Couleur bleu identique au fond de la page */
    margin: 0; /* Supprime les marges par défaut */
    line-height: 120px; /* Aligne verticalement au centre de la bande */
    position: absolute; /* Permet un placement précis */
    left: 200px; /* Distance depuis le bord gauche */
    top: 0; /* Positionne le texte en haut de la bande */
}
/* Image cible.png */
.image-cible {
    position: absolute; /* Positionnement précis */
    top: 2780px; /* Distance depuis le haut de la page (modifiable) */
    left: 250px; /* Distance depuis la gauche (modifiable) */
    width: 300px; /* Largeur par défaut (modifiable) */
    height: auto; /* Conserve les proportions naturelles */
    z-index: 3; /* Assure que l'image est visible au-dessus des autres éléments */
}

/* Bloc de texte avec liste personnalisée */
.bloc-texte-cible {
    position: absolute; /* Positionnement précis */
    top: 2760px; /* Distance depuis le haut de la page (modifiable) */
    left: 810px; /* Distance depuis la gauche (modifiable) */
    right: 150px; /* Distance depuis la droite (modifiable pour ajuster la largeur) */
    font-family: 'Aptos', sans-serif; /* Assure la cohérence avec le reste */
    font-size: 1.5rem; /* Taille du texte */
    line-height: 1.8; /* Espacement entre les lignes */
    text-align: justify; /* Alignement justifié */
    color: #ffffff; /* Couleur blanche pure */
}

/* Style pour les paragraphes */
.bloc-texte-cible p {
    margin-bottom: 20px; /* Ajoute un espace sous chaque paragraphe */
}

/* Style pour les listes */
.bloc-texte-cible ul {
    list-style-type: none; /* Supprime les puces par défaut */
    padding-left: 0; /* Supprime le retrait gauche */
    margin: 0 0 20px 0; /* Ajoute un espace en bas de chaque liste */
}

/* Style pour les éléments de liste */
.bloc-texte-cible ul li {
    position: relative; /* Nécessaire pour placer le point blanc */
    padding-left: 25px; /* Espace pour le point blanc */
}

/* Point blanc personnalisé */
.bloc-texte-cible ul li::before {
    content: ''; /* Point blanc */
    position: absolute; /* Positionnement précis */
    left: 0; /* Aligné à gauche */
    top: 50%; /* Centré verticalement */
    transform: translateY(-50%); /* Ajuste le centrage exact */
    width: 10px; /* Taille du point blanc */
    height: 10px; /* Taille du point blanc */
    background-color: #ffffff; /* Couleur blanche pure */
    border-radius: 50%; /* Rend le point rond */
}
/* Bloc de texte sous l'image cible */
.bloc-texte-sous-cible {
    position: absolute; /* Positionnement précis */
    top: 3120px; /* Distance par rapport au haut de la page (modifiable) */
    left: 250px; /* Distance par rapport à la gauche (modifiable) */
    right: 150px; /* Distance par rapport à la droite (modifiable pour ajuster la largeur) */
    font-family: 'Aptos', sans-serif; /* Police cohérente avec le reste */
    font-size: 1.5rem; /* Taille du texte */
    line-height: 1.8; /* Espacement entre les lignes */
    text-align: justify; /* Alignement justifié */
    color: #CCE9F7; /* Couleur du texte */
}

/* Style pour le texte en gras */
.bloc-texte-sous-cible p strong {
    font-weight: bold; /* Texte en gras */
    color: #CCE9F7; /* Couleur bleue claire */
}

/* Style pour la liste */
.bloc-texte-sous-cible ul {
    list-style-type: none; /* Supprime les puces par défaut */
    padding-left: 0; /* Supprime le retrait gauche */
    margin: 0; /* Supprime les marges par défaut */
}

/* Points blancs pour la liste */
.bloc-texte-sous-cible ul li {
    position: relative; /* Permet de positionner les points blancs */
    padding-left: 25px; /* Ajoute un espace pour le point blanc */
    margin-bottom: -15px; /* Ajoute un espacement entre les éléments de la liste */
}

.bloc-texte-sous-cible ul li::before {
    content: ''; /* Point blanc */
    position: absolute; /* Positionnement précis */
    left: 0; /* Aligné à gauche */
    top: 50%; /* Centré verticalement */
    transform: translateY(-50%); /* Ajuste le centrage exact */
    width: 10px; /* Taille du point blanc */
    height: 10px; /* Taille du point blanc */
    background-color: #ffffff; /* Couleur blanche */
    border-radius: 50%; /* Rend le point rond */
}
/* Bande blanche 4 */
.bande-blanche4 {
    position: absolute; /* Positionnement absolu */
    top: 3400px; /* Distance par rapport au haut de la page (modifiable) */
    left: 0; /* Bord gauche */
    width: 100%; /* Toute la largeur de la page */
    height: 120px; /* Hauteur de la bande blanche */
    background-color: #ffffff; /* Couleur blanche */
    z-index: 2; /* Assure qu'elle est visible au-dessus des autres éléments */
}

/* Texte dans la bande blanche 4 */
.texte-bande4 {
    font-family: 'Aptos', sans-serif; /* Police cohérente avec le reste */
    font-weight: bold; /* Texte en gras */
    font-size: 5rem; /* Taille du texte (modifiable) */
    color: #156183; /* Couleur bleu identique au fond de la page */
    margin: 0; /* Supprime les marges par défaut */
    line-height: 120px; /* Centre verticalement le texte dans la bande */
    position: absolute; /* Permet de positionner le texte */
    left: 50%; /* Place le texte au centre horizontalement */
    top: 0; /* Positionne le texte en haut de la bande */
    transform: translateX(-50%); /* Centre précisément le texte au milieu */
    text-align: center; /* Assure que le texte multi-lignes reste centré */
}
/* Bloc de texte contact */
.bloc-contact {
    position: absolute; /* Permet un positionnement précis */
    top: 4000px; /* Distance par rapport au haut de la page (modifiable) */
    left: 50%; /* Place le bloc au centre horizontalement */
    transform: translateX(-50%); /* Centre précisément le bloc */
    font-family: 'Aptos', sans-serif; /* Police cohérente avec le reste */
    font-size: 1.8rem; /* Taille de texte (modifiable) */
    --line-spacing: 1; /* Variable pour l'espacement entre les lignes (modifiable) */
    line-height: var(--line-spacing); /* Applique l'espacement entre les lignes */
    text-align: center; /* Aligne le texte au centre */
    color: #CCE9F7; /* Couleur blanc pur */
}

/* Style pour le texte en gras */
.bloc-contact p strong {
    font-weight: bold; /* Met le texte en gras */
    color: #CCE9F7; /* Conserve la couleur blanche */
}

/* Formulaire de contact */
.formulaire-contact {
    position: absolute; /* Permet un positionnement précis */
    top: 3600px; /* Distance par rapport au haut de la page (modifiable) */
    left: 50%; /* Centre horizontal */
    transform: translateX(-50%); /* Centre précis du formulaire */
    width: 80%; /* Largeur par défaut (modifiable) */
    max-width: 600px; /* Largeur maximale pour un design responsive */
    font-family: 'Aptos', sans-serif; /* Cohérence avec le reste de la page */
    color: #CCE9F7; /* Couleur bleue identique aux autres éléments */
}

/* Style pour le formulaire */
.formulaire-contact form {
    display: flex;
    flex-direction: column; /* Organisation verticale des champs */
    gap: 20px; /* Espacement entre les champs */
}

/* Groupes de champs */
.formulaire-contact .form-group {
    display: flex; /* Organisation horizontale */
    gap: 15px; /* Espacement entre les champs */
}

/* Champs du formulaire */
.formulaire-contact input,
.formulaire-contact textarea {
    width: 100%; /* Champs prennent toute la largeur disponible */
    padding: 10px; /* Espacement interne pour un meilleur confort */
    border: 1px solid #cccccc; /* Bordure grise légère */
    border-radius: 5px; /* Coins arrondis */
    font-size: 1rem; /* Taille du texte */
}

/* Zone de texte pour la demande */
.formulaire-contact textarea {
    resize: none; /* Désactive le redimensionnement manuel */
}

/* Bouton d'envoi */
.formulaire-contact button {
    padding: 12px 20px; /* Espacement interne */
    background-color: #165c7c; /* Couleur bleue */
    color: #ffffff; /* Texte blanc */
    font-size: 1.2rem; /* Taille du texte */
    font-weight: bold; /* Gras */
    border: none; /* Supprime les bordures */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur pour montrer que c'est cliquable */
}

.formulaire-contact button:hover {
    background-color: #0f4d66; /* Couleur plus sombre au survol */
}
/* Icône lettre */
.icone-lettre {
    position: absolute; /* Permet un positionnement précis */
    top: 50px; /* Distance par rapport au haut de la page */
    left: 50px; /* Distance par rapport à la gauche de la page */
    display: inline-block; /* S'assure que l'élément se comporte comme une icône */
    cursor: pointer; /* Change le curseur pour montrer que c'est cliquable */
    z-index: 10; /* S'assure que l'icône est au-dessus des autres éléments */
}

.icone-lettre img {
    width: 75px; /* Largeur de l'icône (modifiable) */
    height: auto; /* Conserve les proportions naturelles de l'image */
    transition: transform 0.3s ease; /* Ajoute un effet au survol */
}

.icone-lettre img:hover {
    transform: scale(1.1); /* Agrandit légèrement l'icône au survol */
}
/* Icône LinkedIn */
.icone-linkedin {
    position: absolute; /* Permet un positionnement précis */
    top: 50px; /* Distance par rapport au haut de la page */
    left: 150px; /* Distance par rapport à la gauche de la page */
    display: inline-block; /* S'assure que l'élément se comporte comme une icône */
    cursor: pointer; /* Change le curseur pour montrer que c'est cliquable */
    z-index: 10; /* S'assure que l'icône est au-dessus des autres éléments */
}

.icone-linkedin img {
    width: 75px; /* Largeur de l'icône (modifiable) */
    height: auto; /* Conserve les proportions naturelles de l'image */
    transition: transform 0.3s ease; /* Ajoute un effet au survol */
}

.icone-linkedin img:hover {
    transform: scale(1.1); /* Agrandit légèrement l'icône au survol */
}
/* Style pour le lien de l'e-mail */
.bloc-contact a {
    color: #CCE9F7; /* Couleur bleue cohérente avec le site */
    text-decoration: none; /* Supprime le soulignement par défaut */
    font-weight: bold; /* Met le lien en gras */
}

.bloc-contact a:hover {
    text-decoration: underline; /* Ajoute un soulignement au survol */
    color: #ffffff; /* Couleur bleue plus sombre au survol */
}
/* Bande blanche 5 */
.bande-blanche5 {
    position: absolute; /* Positionnement absolu */
    top: 4150px; /* Distance par rapport au haut de la page (modifiable) */
    left: 0; /* Assurez-vous qu'elle commence bien à gauche */
    width: 100%; /* Toute la largeur de la page */
    height: 80px; /* Hauteur de la bande blanche */
    background-color: #156183; /* Couleur blanche */
    z-index: 2; /* Assure qu'elle est visible au-dessus des autres éléments */
}

/* Texte dans la bande blanche 5 */
.texte-bande5 {
    font-family: 'Aptos', sans-serif; /* Police cohérente avec le reste */
    font-weight: bold; /* Texte en gras */
    font-size: 5rem; /* Taille du texte (modifiable) */
    color: #156183; /* Couleur bleue identique au reste */
    margin: 0; /* Supprime les marges par défaut */
    line-height: 120px; /* Centre verticalement le texte dans la bande */
    position: absolute; /* Permet de positionner le texte */
    left: 50%; /* Centre horizontalement le texte */
    transform: translateX(-50%); /* Centre précis */
    top: 0; /* Positionne le texte en haut de la bande */
    text-align: center; /* Centre le texte multi-lignes */
}

/* ============================= */
/*       AJOUT POUR MOBILE       */
/* ============================= */
@media (max-width: 768px) {

    /* Réduction du padding et de la taille de police globale */
    body {
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 1rem;
        position: relative;
        min-height: 100vh;
    }

    /* Position statique pour éviter les chevauchements en mode mobile */
    .contenu-principal,
    .bande-blanche,
    .bande-blanche2,
    .bande-blanche3,
    .bande-blanche4,
    .bande-blanche5,
    .section-elements,
    .bloc-texte,
    .bloc-texte-supplementaire,
    .bloc-missions,
    .bloc-texte-cible,
    .bloc-texte-sous-cible,
    .bloc-contact,
    .icone-lettre,
    .icone-linkedin {
        position: static;
        width: 100%;
        margin: 1rem 0;
        left: auto;
        top: auto;
        right: auto;
    }

    /* Masque l'image de droite */
    .image-droite {
        display: none;
    }

    /* Photo .photo1 en haut, centrée */
    .photo1 {
        display: block;
        position: static;
        width: 70%;
        max-width: 300px;
        margin: 2rem auto 1rem auto;
        height: auto;
    }

    /* Masque le texte sous la photo */
    .texte-sous-photo {
        display: none !important;
    }

    /* Titres (nom/titre) adaptés au mobile */
    .nom {
        font-size: 2rem;
        text-align: center;
    }
    .titre {
        font-size: 1.2rem;
        text-align: center;
        margin-bottom: 1rem;
    }

    /* Bandes blanches moins hautes, en flux normal */
    .bande-blanche,
    .bande-blanche2,
    .bande-blanche3,
    .bande-blanche4,
    .bande-blanche5 {
        height: auto;
        padding: 1rem 0;
        display: block;
    }

    /* Par défaut, texte des bandes centré (on corrigera .texte-bande5 plus bas) */
    .texte-bande,
    .texte-bande2,
    .texte-bande3,
    .texte-bande4,
    .texte-bande5 {
        position: static;
        font-size: 2rem;
        line-height: normal;
        text-align: center;
        margin: 0;
    }

    /* Blocs de texte : police réduite, alignement plus naturel */
    .bloc-texte,
    .bloc-texte-supplementaire,
    .bloc-missions,
    .bloc-texte-cible,
    .bloc-texte-sous-cible {
        text-align: left;
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    /* On augmente l'interligne spécifiquement pour bloc-texte-sous-cible */
    .bloc-texte-sous-cible {
        line-height: 2; /* plus grand que 1.5 */
    }

    /* Masque le formulaire en version mobile */
    .formulaire-contact {
        display: none !important;
    }

    @media (max-width: 768px) {
        /* Bloc contenant les icônes */
        .bloc-icones {
            display: flex;
            justify-content: center;  /* Centrage des icônes */
            gap: 2rem; /* Espacement entre les icônes */
            margin-top: 2rem; /* Espace au-dessus des icônes */
        }
    
        /* Icônes individuelles */
        .icone-lettre,
        .icone-linkedin {
            position: static !important; /* Annule la position fixe */
            display: block;
            width: 50px;
            height: auto;
            margin: 1rem auto 0 auto; /* Ajoute un espace sous les icônes */
            text-align: center;
        }
    
        /* ✅ Déplacement vers la gauche */
        .icone-lettre {
            margin-left: 105px !important; /* Décale légèrement vers la gauche */
        }
    
        .icone-linkedin {
            margin-left: 105px !important; /* Même décalage pour LinkedIn */
        }
    }
    
    
    
    /* Masque l'image coche et l'image cible */
    .image-coche,
    .image-cible {
        display: none !important;
    }

    /* ================== */
    /*  OVERRIDES FINALS  */
    /* ================== */

    /* Corrige .bloc-contact (annule l'absolu du desktop, centre le bloc lui-même) */
    .bloc-contact {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 600px;       /* Optionnel si tu veux une limite */
        margin: 2rem auto !important;
        text-align: center !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        color: #CCE9F7 !important;
    }

    @media (max-width: 768px) {
        /* Correction de texte-bande4 (RENCONTRONS-NOUS) */
        .texte-bande4 {
            /* Annulation du positionnement absolu */
            position: static !important;
            left: auto !important;
            top: auto !important;
            transform: none !important;
    
            /* Ajustement du placement */
            width: 100% !important;
            margin-left: 1rem !important;
            text-align: left !important; 
            
            /* Taille de police plus petite */
            font-size: 1.5rem !important; /* Diminue la taille */
            line-height: normal !important;
            color: #156183 !important;
        }
    }
    
    
}