L’objectif de cette procédure est d’assurer une adaptation optimale de l’interface aux écrans mobiles.

Elle s’appuie sur les éléments existants du fichier CSS, en particulier le bloc dédié au responsive :

@media screen and (max-width: 768px) {
    body { overflow-x: hidden; }
    nav ul.show { display: flex; flex-direction: column; ... }
    #hamburger-btn { display: block; cursor: pointer; }
    ...
}

Cette base sera réorganisée et complétée afin d’obtenir un comportement cohérent sur toutes les pages.

Définition du point de rupture (breakpoint) :

Le fichier CSS utilise un breakpoint standard :

@media screen and (max-width: 768px)

Ce choix est pertinent pour une prise en charge des smartphones et de la majorité des tablettes en orientation portrait.

Toutes les adaptations visuelles destinées aux mobiles doivent être intégrées uniquement sous ce media query pour ne pas impacter la version desktop.

Gestion du conteneur principal :

Pour éviter tout décalage horizontal ou apparition de scrollbar, la première étape consiste à neutraliser les débordements :

body {
overflow-x: hidden;
}

Cette règle évite notamment que le bouton hamburger se retrouve en dehors de l’écran.

Réorganisation de la navigation mobile :

Réduction du titre dans la barre de navigation :

Afin d’éviter qu’un élément trop large pousse la navigation hors-écran, le nom est ajusté :

#linkcedricbaudiment {
    font-size: 1.6rem;
}

Affichage du bouton hamburger :

Le menu mobile nécessite l’apparition du bouton spécifique :

#hamburger-btn {
    display: block;
    cursor: pointer;
    font-size: 1.8rem;
}

Menu déroulant toujours visible sur toutes les pages :

Le bloc suivant permet d’afficher le menu lorsque la classe .show est activée par JavaScript :

nav ul.show {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 0;
    width: 150px;
    background-color: #191919;
    border-radius: 10px;
}

Grâce à cette structure, les liens tels que Profil, Formations ou Contact deviennent affichables de manière constante.

Adaptation des boutons et éléments interactifs :

Certains boutons nécessitent également un centrage et une augmentation de marge pour faciliter l’interaction tactile :

#btncv {
    margin-top: 30px;
}

Ce type d’ajustement améliore l’ergonomie générale en mode mobile.

Ajustement des contenus textuels (Profil, Formations) :

Pour améliorer la lisibilité sur mobile, des marges latérales sont ajoutées aux paragraphes :

p {
    width: 90%;
    margin: auto;
    font-size: 1.1rem;
}

Cette règle évite que le texte colle aux bords de l’écran, tout en conservant un rendu homogène sur toutes les pages.

Correction du chevauchement sur la page Contact :

Le titre principal étant placé immédiatement après la navigation, il peut être masqué sur petit écran.
Pour corriger cela, un espacement vertical est ajouté :

#contact h1 {
    margin-top: 120px;
}

Cette valeur garantit que le titre n’entre plus en conflit avec la barre de navigation mobile.

Ajustement général des sections spécifiques :

Exemple pour la page "Formations" :

.etudes-img {
    width: 80%;
    margin: 20px auto;
}

.etudes h1 {
    margin-top: 20px;
}

Les images et titres s’adaptent ainsi aux écrans réduits, tout en conservant une mise en page cohérente.