/* ========================================================================= Feuille de style mobile du portfolio Adapte la mise en page (pensée pour le bureau dans main.css) aux petits écrans : menu, blocs en colonnes, sections plein écran, textes et images. ========================================================================= */ /* ------------------------------------------------------------------------- TABLETTES ET PETITS ÉCRANS (<= 768px) ------------------------------------------------------------------------- */ @media screen and (max-width: 768px) { /* ---- Menu de navigation ---- Sur bureau le menu est fixe avec les liens sur une ligne. Sur mobile on laisse les liens passer à la ligne (flex-wrap) et on réduit l'espacement pour qu'ils restent tous visibles et cliquables (pas de hamburger / JS). */ .menu ul { flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 8px 4px; } .menu ul li { padding: 0 4px; } .menu ul li a { font-size: 0.85rem; padding: 4px 8px; } /* ---- Conteneurs à deux colonnes -> empilés ---- .container et .cvdiv passent en colonne, les blocs prennent toute la largeur disponible. On annule aussi le line-height géant de .box (utilisé pour centrer du texte sur une ligne au bureau). */ .container { flex-direction: column; align-items: center; padding-top: 20px; } .box { width: 90%; margin-top: 8%; line-height: 1.5; } /* Première section / titres : on garde de l'air sous le menu fixe. */ .centered-section { min-height: auto; padding-top: 90px; } /* ---- Sections plein écran ---- Au bureau chaque section fait 100vh avec un défilement "scroll-snap". Sur mobile le contenu d'une compétence dépasse souvent cette hauteur : on libère la hauteur et on désactive l'accroche pour éviter les coupures. */ section { height: auto; min-height: auto; scroll-snap-align: none; scroll-margin-top: 90px; } /* ---- Textes ---- */ h2 { font-size: 1.4rem; padding-left: 10px; padding-right: 10px; } h3 { font-size: 1.2rem; } h4, h5 { font-size: 1rem; } .introportfolio { margin-top: 4%; line-height: 1.5; } /* Les paragraphes de présentation des dossiers utilisent une marge inline de 20% (pensée pour le bureau) : on la réduit pour ne pas écraser le texte sur mobile. !important car la marge est posée en style inline. */ .cvdiv p { margin-left: 6% !important; margin-right: 6% !important; } /* ---- Images ---- */ .box img, .porfolio { max-width: 100%; height: auto; } /* ---- Liste de dossiers (Rafale, DU Énergie...) -> empilée ---- */ .dossier ul { flex-direction: column; align-items: center; gap: 8px; } /* ---- Aperçus PDF intégrés (Google Drive) ---- */ iframe { width: 100% !important; height: 60vh; } } /* ------------------------------------------------------------------------- DÉSACTIVATION DU SCROLL-SNAP SUR MOBILE (hors media-query imbriquée car cible l'élément racine ) ------------------------------------------------------------------------- */ @media screen and (max-width: 768px) { html { scroll-snap-type: none; } } /* ------------------------------------------------------------------------- TRÈS PETITS ÉCRANS (<= 480px) : ajustements fins ------------------------------------------------------------------------- */ @media screen and (max-width: 480px) { .box { width: 95%; } .menu ul li a { font-size: 0.78rem; padding: 4px 6px; } h2 { font-size: 1.2rem; } .introportfolio { text-align: left; /* le justifié laisse de grands trous sur écran étroit */ } /* Marges inline encore réduites pour les blocs "dossiers". */ .cvdiv p { margin-left: 4% !important; margin-right: 4% !important; } }