/* Theme URI: www.michel-grillon.fr Author: Michel Grillon Author URI: www.michel-grillon.fr Description: Style du site michel-grillon.fr. Version: 2.0 */ /*Selecteur universel tous les éléments HTML de la page*/ * { margin: 0; padding: 0; box-sizing: border-box; list-style: none; } /* Pseudo-sélecteur, élément racine pour définir les variables CSS globales */ /*le mode root est le mode clair par défaut, les couleurs sont inversées car à l' origine c'etait le mode foncé qui était par défaut*/ :root { --color-primary: #FFFFFF; --color-secondary: #107B74; --color-white: #454e56; --color-black: #FFFFFF; --color-grey0: #12181b; --color-grey-1: #2a2e35; --color-grey-2: #454e56; --color-grey-3: #6c7983; --color-grey-4: #b2becd; --color-grey-5: #dbe1e8; --color-grey-6: #f8f8f8; --br-sm-2: 14px; --box-shadow-1: 0 3px 15px rgba(0, 0, 0, .3); /* Noir avec 50% de transparence */ --color-black-transparent: rgba(0, 0, 0, 0.8); --color-black-transparent2: rgba(0, 0, 0, 0.5); } /*le light mode correspond au mode" sombre*/ .dark-mode { --color-primary: #0A192F; --color-secondary: #107B74; --color-white: #FFFFFF; --color-black: #000; --color-grey0: #f8f8f8; --color-grey-1: #dbe1e8; --color-grey-2: #b2becd; --color-grey-3: #6c7983; --color-grey-4: #454e56; --color-grey-5: #2a2e35; --color-grey-6: #12181b; --br-sm-2: 14px; --box-shadow-1: 0 3px 15px rgba(255, 255, 255, 0.3); /* Blanc avec 50% de transparence */ --color-black-transparent: rgba(255, 255, 255, 0.8); --color-black-transparent2: rgba(255, 255, 255, 0.5); } body { background-color: var(--color-primary); font-family: "Roboto", sans-serif; font-family: "Poppins", sans-serif; font-size: 1.1rem; color: var(--color-white); transition: all 0.4s ease-in-out; } a:focus, button:focus, input:focus, textarea:focus { outline: 2px solid #000; } #copyright { position: fixed; writing-mode: vertical-lr; transform: rotate(180deg); background: transparent; display: flex; align-items: center; justify-content: center; z-index: 100; } #copyright small { font-size: 14px; font-weight: bold; color: var(--color-white); } a { display: inline-block; text-decoration: none; color: inherit; font-family: inherit; } hr { border: none; /* Supprime la bordure par défaut */ height: 2px; /* Épaisseur de la ligne */ background-color : var(--color-secondary); /* Couleur de la ligne */ width: 100%; /* Largeur de la ligne */ } small { font-size: 0.7em; } header { min-height: 100vh; color: var(--color-white); overflow: hidden; padding: 0 !important; } section { min-height: 100vh; width: 100%; position: absolute; /* Permet le défilement si le contenu est trop long */ left: 0; top: 0; padding: 3rem 18rem; } .container { display: none; flex: 1; transform: translateY(-100%) scale(0); transition: all 0.4s ease-in-out; background-color: var(--color-primary); } .active { display: block; animation: appear 1s ease-in-out; transform: translateY(0) scaleY(1); } @keyframes appear { 0% { transform: translateY(-100%) scaleY(0); } 100% { transform: translateY(0) scaleY(1); } } /* Panneau de contrôle - menu =======================================================*/ .controls { position: fixed; z-index: 10; top: 40%; right: 4%; padding-right: 0.9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateY(-50%); } .controls .control, .logos-reseaux { padding: 1rem; cursor: pointer; background-color: var(--color-grey-4); width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0.3rem 0; box-shadow: var(--box-shadow-1); box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3); } .controls .control i { font-size: 1rem; color: var(--color-grey0); pointer-events: none; } .controls .active-btn { background-color: var(--color-secondary); transition: all 0.4s ease-in-out; box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); } .controls .active-btn i { color: var(--color-grey0); } #accessibilite { position: fixed; top: 1.5%; right: 3.5%; display: flex; flex-direction: row; /* Aligner les éléments en ligne */ gap: 10px; /* Espacement entre les boutons */ } .theme-btn, .text-size-btn { width: 40px; height: 40px; border-radius: 50%; background-color: var(--color-grey-4); cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3); transition: all 0.1s ease-in-out; } .theme-btn:active, .text-size-btn:active { transform: translateY(-3px); } .theme-btn i, .text-size-btn i { font-size: 1rem; color: var(--color-grey0); pointer-events: none; display: flex; align-items: center; justify-content: center; } /* Ajoutez cette classe pour le texte agrandi */ .large-text { font-size: 1.5em; color: var(--color-primary); } .large-text p, .large-text ul, .large-text ol, .large-text li, .large-text span, .large-text h3 { color: var(--color-white); } /* Les éléments spécifiques conservent leur couleur d'origine */ .large-text .portfolios .portfolio-item .hover-items h2 { color: var(--color-white); /* Conserve la couleur blanche pour les titres des vignettes */ } /* Conserve la couleur blanche pour les icônes */ .large-text .portfolios .portfolio-item .hover-items .icons .icon i { color: var(--color-white); } .logos-reseaux { display: flex; justify-content: center; margin-top: 0.3em; } .logos-reseaux a { margin: 0 0.3em; } .logos-reseaux i { font-size: 1.1em; color: var(--color-grey0); } /*Header-content*=======================================================*/ .header-content { display: grid; grid-template-columns: repeat(2, 1fr); min-height: 100vh; } .header-content .left-header { display: flex; align-items: center; position: relative; } .header-content .left-header .h-shape { transition: all 0.4s ease-in-out; width: 65%; height: 100%; background-color: var(--color-secondary); position: absolute; left: 0; top: 0; z-index: -1; clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%); } .header-content .left-header .image { border-radius: var(--br-sm-2); height: 60%; width: 60%; margin-left: 1.5rem; box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.36); background-color:rgba(0, 0, 0, 0.1); /*background-color: #000;*/ /*background-color: var(--color-white);*/ transition: all 0.4s ease-in-out; } .header-content .left-header .image img { border-radius: var(--br-sm-2); width: 100%; height: 100%; transition: all 0.4s ease-in-out; filter: grayscale(25%); } .header-content .left-header .image img:hover { filter: grayscale(0); } .header-content .right-header { display: flex; flex-direction: column; justify-content: center; padding-right: 18rem; text-align: center; } .header-content .right-header .name { font-size: 3rem; } .header-content .right-header .name span { color: var(--color-secondary); } .header-content .right-header p { margin: 1.5rem 0; line-height: 2rem; } /*About=======================================================**/ .about-container { display: grid; grid-template-columns: repeat(2, 1fr); padding: 3.5rem 0rem 5rem 0rem; } .about-container .right-about { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; } .about-container .right-about .about-item { border: 1px solid var(--color-grey-5); border-radius: 5px; transition: all 0.4s ease-in-out; box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.1); } .about-container .right-about .about-item:hover { cursor: default; transform: translateY(-5px); border: 1px solid var(--color-secondary); box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); } .about-container .right-about .about-item .abt-text { padding: 1.5rem; display: flex; flex-direction: column; } .about-container .right-about .about-item .abt-text .large-text { font-size: 3rem; font-weight: 700; color: var(--color-secondary); } .about-container .right-about .about-item .abt-text .small-text { padding-left: 3rem; position: relative; text-transform: uppercase; font-size: 1.2rem; color: var(--color-grey-1); letter-spacing: 0.125rem; } .about-container .right-about .about-item .abt-text .small-text::before { content: ""; position: absolute; left: 0; top: 0.9375rem; width: 2rem; height: 0.125rem; background-color: var(--color-grey-5); } .about-container .left-about { padding-right: 5rem; } .about-container .left-about p { line-height: 2rem; padding: 1rem; color: var(--color-grey-1); } .about-container .left-about h4 { font-size: 2rem; text-transform: uppercase; } .technos li { margin-bottom: 5px; } .technos2 li { margin-bottom: 10px; } .about-stats { padding-bottom: 4rem; } .skills-container { display: flex; flex-direction: row; /* Par défaut, les éléments sont côte à côte pour les écrans de bureau */ } .left-skills, .right-skills { width: 48%; /* Par défaut, les éléments prennent 48% de la largeur pour les écrans de bureau */ border: 1px solid var(--color-secondary); border-radius: 5px; transition: all 0.4s ease-in-out; box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.1); margin: 10px; padding: 10px; text-align: left; /* Aligne le texte à gauche à l'intérieur des calques */ } .right-skills:hover { cursor: default; transform: translateY(-5px); border: 1px solid var(--color-secondary); box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); } .left-skills:hover { cursor: default; transform: translateY(-5px); border: 1px solid var(--color-secondary); box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); } .left-skills, .right-skills, .large-text { font-size: 2rem; font-weight: 400; color: var(--color-secondary); } .left-skills, .right-skills, .small-text { padding-left: 1rem; padding-right: 1rem; position: relative; text-transform: uppercase; font-size: 1.2rem; color: var(--color-grey-1); letter-spacing: 2px; } .stat-title { text-transform: uppercase; font-size: 1.4rem; text-align: center; padding: 3.5rem 0; position: relative; } .stat-title::before { content: ""; position: absolute; left: 50%; top: 0; width: 40%; height: 1px; background-color: var(--color-grey-5); transform: translateX(-50%); } /*Timeline=======================================================**/ .timeline { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; padding-bottom: 3rem; } .timeline .timeline-item { position: relative; padding-left: 3rem; border-left: 1px solid var(--color-grey-5); } .timeline .timeline-item .tl-icon { position: absolute; left: -27px; top: 0; background-color: var(--color-secondary); box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); color: var(--color-black); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .timeline .timeline-item .tl-icon i { font-size: 1.3rem; } .timeline .timeline-item .tl-duration { padding: 0.2rem 0.6rem; background-color: var(--color-grey-5); box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); border-radius: 15px; display: inline-block; font-size: 0.8rem; text-transform: uppercase; font-weight: 500; } .timeline .timeline-item h5 { padding: 1rem 0; text-transform: uppercase; font-size: 1.3rem; font-weight: 600; } .timeline .timeline-item h5 span { color: var(--color-grey-2); font-weight: 500; font-size: 1.2rem; } .timeline .timeline-item p { color: var(--color-grey-2); } /* Portfolio======================================================= */ .port-text { padding: 2rem 0; text-align: center; } .portfolios { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem; margin-top: 3rem; } .portfolios .portfolio-item { position: relative; border-radius: 15px; } .portfolios .portfolio-item .hover-items p { margin-left: 5px; text-align: center; } .portfolios .portfolio-item img { width: 100%; height: 300px; object-fit: cover; border-radius: 15px; border: 1px solid var(--color-grey-5); transition: all 0.4s ease-in-out; box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.1); } .portfolios .portfolio-item .hover-items { width: 100%; height: 99%; background-color: var(--color-black-transparent); position: absolute; left: 0; top: 0; border-radius: 15px; display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; opacity: 0; transform: scale(0); transition: all 0.4s ease-in-out; cursor: default; transform: translateY(-5px); border: 1px solid var(--color-secondary); box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); } .portfolios .portfolio-item .hover-items h3 { font-size: 1.5rem; color: var(--color-primary); margin-bottom: 1.5rem; text-align: center; } .portfolios .portfolio-item .hover-items .icons { display: flex; justify-content: center; align-items: center; text-align: center; } .portfolios .portfolio-item .hover-items .icons .icon { background-color: var(--color-primary); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin: 0 1rem; cursor: pointer; transition: all 0.4s ease-in-out; } .portfolios .portfolio-item .hover-items .icons .icon i { font-size: 2rem; color: var(--color-white); margin: 0 1rem; } .portfolios .portfolio-item .hover-items .icons .icon:hover { background-color: var(--color-white); text-align: center; } .portfolios .portfolio-item .hover-items .icons .icon:hover i { color: var(--color-primary); } .portfolio-item:hover .hover-items { opacity: 1; transform: scale(1); } /* Style pour les infobulles */ .tooltip-mobile { position: relative; display: inline-block; } .tooltip-mobile .tooltip-text { visibility: hidden; background-color: #555; color: #fff; text-align: center; border-radius: 5px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; /* Positionner l'infobulle au-dessus */ left: 50%; transform: translateX(-50%); width: max-content; white-space: nowrap; opacity: 0; transition: opacity 0.3s; } .tooltip-mobile .tooltip-text::after { content: ""; position: absolute; top: 100%; /* Au-dessus de l'infobulle */ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltip-mobile.active .tooltip-text { visibility: visible; opacity: 1; } /* Styles pour les éléments agrandis */ .large-text .portfolios .portfolio-item .hover-items h3 { font-size: 2rem; color: var(--color-white); } .large-text .portfolios .portfolio-item .hover-items .icons .icon { width: 60px; height: 60px; } .large-text .portfolios .portfolio-item .hover-items .icons .icon i { font-size: 2rem; } /* Styles pour les icônes avec la classe languages */ .portfolios .portfolio-item .hover-items i { font-size: 2rem; /* Taille des icônes */ color: var(--color-black); /* Couleur des icônes */ margin: 0 0.5rem; /* Espacement entre les icônes */ } .large-text .portfolios .portfolio-item .hover-items i { font-size: 2.5rem; /* Taille des icônes agrandies */ } /* Styles pour les icônes dans le div avec la classe languages */ .languages i { font-size: 2rem; /* Taille des icônes */ color: var(--color-white); /* Couleur des icônes */ margin: 0 0.5rem; /* Espacement entre les icônes */ } .large-text .languages i { font-size: 3rem; /* Taille des icônes agrandies */ } .languages p { margin-bottom: 5px; } .languages span { margin-right: 5px; } /* Centrer tous les éléments

dans .portfolio-item */ .portfolios .portfolio-item p { text-align: center; } /* Contact=======================================================*/ .contact-content-con { display: flex; padding-top: 3.5rem; } .contact-content-con .left-contact { flex: 2; } .contact-content-con .left-contact h4 { margin-top: 1rem; font-size: 2rem; text-transform: uppercase; } .contact-content-con .left-contact p { margin: 1rem 0; line-height: 2rem; } .contact-content-con .left-contact .contact-info .contact-item { display: flex; align-items: center; justify-content: space-between; } .contact-content-con .left-contact .contact-info .contact-item p { margin: 0.3rem 0 !important; padding: 0 !important; } .contact-content-con .left-contact .contact-info .contact-item .icon { display: grid; grid-template-columns: 40px 1fr; } .contact-content-con .left-contact .contact-info .contact-item .icon i { display: flex; align-items: center; font-size: 1.3rem; } .contact-content-con .left-contact .contact-icon { display: flex; margin-top: 2rem; } .contact-content-con .left-contact .contact-icon a { display: flex; align-items: center; color: var(--color-white); background-color: var(--color-grey-5); box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); cursor: pointer; justify-content: center; width: 50px; height: 50px; border-radius: 50%; margin: 0 0.4rem; transition: all 0.4s ease-in-out; } .contact-content-con .left-contact .contact-icon a:hover { background-color: var(--color-secondary); box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); } .contact-content-con .left-contact .contact-icon a:hover i { box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); color: var(--color-primary); } .contact-content-con .left-contact .contact-icon a i { display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); } .right-contact { flex: 3; margin-left: 3rem; } .input-control { margin: 1.5rem 0; } .input-control input, .input-control textarea, .input-control input[name="sujet"], .input-control textarea[name="commentaire"] { box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); border-radius: 30px; font-weight: inherit; font-size: inherit; font-family: inherit; padding: 0.25rem 1.1rem; outline: none; border: none; background-color: var(--color-grey-4); color: var(--color-white); width: 100%; resize: none; transition: background-color 0.3s, color 0.3s; } /* Styles pour tous les champs en focus ou avec du contenu */ .input-control input:focus, .input-control textarea:focus, .input-control input:not(:placeholder-shown), .input-control textarea:not(:placeholder-shown) { background-color: var(--color-white); color: var(--color-black); } /* Styles spécifiques pour le sujet et le commentaire */ .input-control input[name="sujet"], .input-control textarea[name="commentaire"] { background-color: var(--color-grey-4); color: var(--color-black); } .input-control input[name="sujet"]:focus, .input-control textarea[name="commentaire"]:focus, .input-control input[name="sujet"]:not(:placeholder-shown), .input-control textarea[name="commentaire"]:not(:placeholder-shown) { background-color: #E8F0FE; color: var(--color-white); } .dark-mode .input-control input[name="sujet"]:focus, .dark-mode .input-control textarea[name="commentaire"]:focus, .dark-mode .input-control input[name="sujet"]:not(:placeholder-shown), .dark-mode .input-control textarea[name="commentaire"]:not(:placeholder-shown) { background-color: #E8F0FE; color: var(--color-black); } .submit-btn { display: flex; justify-content: flex-start; } #submit-btn { box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); margin: 2px; } /* Confidentialite======================================================*/ .confidentialite-container { display: flex; padding-top: 3.5rem; padding-bottom: 6rem; } /* Mentions=======================================================*/ .mentions-container { display: flex; padding-top: 3.5rem; padding-bottom: 5rem; } /*Independed components============================================*/ .btn-con { display: flex; align-self: flex-start; } .main-btn { border-radius: 30px; color: inherit; font-weight: 600; position: relative; box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); border: 1px solid var(--color-secondary); display: flex; align-self: flex-start; align-items: center; overflow: hidden; padding: 3px; } .main-btn .btn-text { padding: 0 2rem; } .btn-icon i { box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .main-btn .btn-icon { background-color: var(--color-secondary); display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 1rem; } .main-btn::before { content: ""; position: absolute; top: 0; right: 0; transform: translateX(100%); transition: all 0.4s ease-out; z-index: -1; } .main-btn:hover { transition: all 0.4s ease-out; color: var(--color-black); } .main-btn:hover::before { width: 100%; height: 100%; background-color: var(--color-secondary); transform: translateX(0); transition: all 0.4s ease-out; } img { box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); } /* Par défaut, le titre mobile est caché */ .mobile-main-title { display: none; } .mobile-main-title { text-align: center; font-family: "Poppins", sans-serif; } .mobile-main-title h2 { position: relative; text-transform: uppercase; font-size: 4rem; font-weight: 700; } .mobile-main-title h2 span { color: var(--color-secondary); } .mobile-main-title h2 .bg-text { position: absolute; top: 50%; left: 50%; color: var(--color-grey-5); transition: all 0.4s ease-in-out; z-index: -1; transform: translate(-50%, -50%); font-weight: 800; font-size: 6.3rem; } /* Titre desktop */ .main-title { text-align: center; } .main-title h2 { position: relative; text-transform: uppercase; font-size: 4rem; font-weight: 700; } .main-title h2 span { color: var(--color-secondary); } .main-title h2 .bg-text { position: absolute; top: 50%; left: 50%; color: var(--color-grey-5); transition: all 0.4s ease-in-out; z-index: -1; transform: translate(-50%, -50%); font-weight: 800; font-size: 6.3rem; } .about-container .left-about p { padding-left: 0; } /* bouton d'envois email ==============================================*/ .submit-btn { text-align: center; margin-top: 20px; } .main-btn-contact { display: inline-block; padding: 10px 20px; font-size: 16px; color: #fff; background-color: var(--color-secondary); border: none; border-radius: 5px; cursor: pointer; text-decoration: none; transition: background-color 0.3s ease; } .main-btn-contact:hover { background-color: #0d4945; } /* Erreur formulaire mail vide : Style pour le message d'erreur */ /* Style général pour les alertes (success ou error) */ .alert { position: fixed; background-color: #f8f9fa; /* Exemple de couleur de fond pour l'alerte */ border: 1px solid #ccc; /* Ajoute une bordure */ top: 5px; right: 20px; padding: 10px; border-radius: 5px; color: white; z-index: 1000; display: none; /* Par défaut, l'alerte est cachée */ position: relative; /* Position relative pour les éléments enfants */ } /* Forcer l'affichage des alertes */ .alert.show { display: block !important; /* Utilisé pour forcer l'affichage avec JavaScript - Montre l'alerte lorsqu'elle a la classe 'show' */ } /* Alertes spécifiques au succès */ .alert-success { background-color: #27AE60; box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); } /* Alertes spécifiques à l'erreur */ .alert-error { background-color: red; box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); } /* Style pour le bouton de fermeture */ .close { color: #000; /* Couleur de la croix */ font-weight: bold; /* Gras pour mieux la voir */ position: absolute; /* Positionne par rapport à l'alerte */ right: 15px; /* Ajuste la position */ top: 10px; /* Ajuste la position */ cursor: pointer; /* Curseur de pointeur */ } /* Style pour le message de succès spécifique */ .success-message { background-color: #d4edda; border: 1px solid #c3e6cb; padding: 10px; border-radius: 5px; text-align: center; } .menu-2 { padding-right: 0.625em; } .menu-2 p { margin: 0; text-align: right; } /* Flèche pour le retour vers le haut de la page */ .fleche-hdpage i { font-size: 1.875em; position: fixed; bottom: 1em; right: 1.875em; } /* Footer ============================================================ */ footer { position: relative; /* Changé de static à relative */ z-index: 10; /* Assure que le footer est au-dessus des sections */ text-align: center; width: 100%; box-sizing: border-box; margin-bottom: 0px; } footer .container { padding: 0; margin: 0; width: 100%; max-width: 100%; } /*Mobile 1 ====================================================================================================== */ @media screen and (max-width: 768px) { #home { text-align: center; margin: 0 auto; margin-left: -1rem; } header { padding: 0 !important; } .header-content { grid-template-columns: repeat(1, 1fr); padding-bottom: 6rem; } .mobile-main-title h2 { font-size: 3rem; } .mobile-main-title h2 span { font-size: 3rem; } .mobile-main-title h2 .bg-text { font-size: 4rem; } .left-header .h-shape { display: none; } .right-header { grid-row: 1; padding-right: 0rem !important; width: 90%; } .right-header .name { font-size: 2.5rem !important; text-align: center; padding-top: 3rem; } .header-content .left-header .image { margin: 0 auto; width: 100%; height: 95%; } .header-content .left-header .image img { width: 100%; height: 100%; transition: all 0.4s ease-in-out; filter: grayscale(25%); } .controls { top: auto; bottom: 0; flex-direction: row; justify-content: center; left: 50%; transform: translateX(-50%); width: 100%; background-color: var(--color-grey-5); } .controls .control { margin: 1rem 0.4rem 1rem 0.4rem; width: 25px; height: 25px; } .theme-btn { width: 25px; height: 25px; } .text-size-btn { width: 25px; height: 25px; } .logos-reseaux { display: flex; margin: 1rem 0.4rem 1rem 0.4rem; width: 25px; height: 25px; } .logos-reseaux a { margin: 0; } .logos-reseaux i { font-size: 1.2em; padding: 0; } .about-container { grid-template-columns: repeat(1, 1fr); } .about-container .right-about { grid-template-columns: repeat(1, 1fr); padding-top: 2.5rem; } .about-container .left-about { padding-right: 0; } .about-container .left-about p { padding-left: 0; } .timeline { grid-template-columns: repeat(1, 1fr); padding-bottom: 6rem; } .container { padding: 2rem 2.5rem !important; } .skills-container { flex-direction: column; /* Les éléments sont l'un au-dessus de l'autre pour les écrans mobiles */ } .left-skills, .right-skills { width: 100%; /* Les éléments prennent toute la largeur pour les écrans mobiles */ } .about-stats .progress-bars { grid-template-columns: repeat(1, 1fr); } .portfolios { grid-template-columns: repeat(1, 1fr); padding-bottom: 6rem; margin-top: 1rem; justify-content: center; } .portfolio-item .hover-items { opacity: 1; visibility: visible; position: static; transform: none; } .portfolio-item .image img { filter: none; } .portfolio-item .icons { display: flex; justify-content: center; } .portfolio-item .languages p { display: flex; justify-content: center; } .icons .icon i { font-size: 1.5rem; } .portfolio-item h3 { font-size: 1.5rem; text-align: center; } .contact-content-con { flex-direction: column; } .contact-content-con .right-contact { margin-left: 0; margin-top: 2.5rem; } .contact-content-con .right-contact .i-c-2 { flex-direction: column; } .contact-content-con .right-contact .i-c-2 :last-child { margin-left: 0; margin-top: 1.5rem; } .contact-content-con .right-contact { margin-bottom: 6rem; } .contact-item { flex-direction: column; margin: 1rem 0; } .contact-item p { font-size: 15px; color: var(--color-grey-2); } .contact-item span { font-size: 15px; } .contact-item .icon { grid-template-columns: 25px 1fr; } .main-btn-contact { font-size: 14px; /* Taille réduite pour mobile */ padding: 2px 4px; /* Espacement réduit */ } .confidentialite, .mentions { padding-bottom: 3em; } .main-title { display: none; /* Cache le titre desktop sur mobile */ } .mobile-main-title { display: block; /* Affiche le titre mobile */ } .mobile-main-title h1 { font-size: 2.1rem; font-weight: 400; } .mobile-main-title h1 .bg-text { font-weight: 600; font-size: 5rem; } .mobile-main-title h2 { font-size: 1.9rem; } .mobile-main-title h2 span { font-size: 2.1rem; } .mobile-main-title h2 .bg-text { font-size: 2.1rem; } /* Flèche pour le retour vers le haut de la page */ .fleche-hdpage i { font-size: 1.875em; position: fixed; bottom: 2em; right: 0.2em; } } /*Tablette - mobile paysage ==================================================================================================== */ @media screen and (min-width: 769px) and (max-width: 970px) { .container { padding: 7rem 6rem; } .about-container .left-about { padding-right: 0rem; } .header-content { grid-template-columns: repeat(1, 1fr); padding-bottom: 6rem; } .left-header .h-shape { display: none; } .header-content .left-header .image { margin: 0 auto !important; } .right-header { grid-row: 1; padding-right: 0rem !important; width: 90%; margin: 0 auto; } .right-header .name { font-size: 2.5rem !important; text-align: center; padding-top: 3rem; } .controls { top: auto; bottom: 0; flex-direction: row; justify-content: center; left: 50%; transform: translateX(-50%); width: 100%; background-color: var(--color-grey-5); } .controls .control { margin: 1rem 0.4rem 1rem 0.4rem; width: 25px; height: 25px; } .theme-btn { width: 25px; height: 25px; } .text-size-btn { width: 25px; height: 25px; } .logos-reseaux { display: flex; margin: 1rem 0.4rem 1rem 0.4rem; width: 25px; height: 25px; } .logos-reseaux a { margin: 0; } .logos-reseaux i { font-size: 1.2em; padding: 0; } .portfolios { grid-template-columns: repeat(2, 1fr); padding-bottom: 6rem; margin-top: 1rem; justify-content: center; /*width: 50%;*/ align-items: center; } .contact-item .icon span, .contact-item p { font-size: 0.75rem; } .submit-btn { margin: 2px; } } /*Tablette 2 - =================================================================================================== */ @media screen and (max-width: 1070px) { .about-container { grid-template-columns: repeat(1, 1fr); } .about-container .right-about { padding-top: 2.5rem; } .mobile-main-title.main-title h2 { font-size: 4rem; } .mobile-main-title.main-title h2 span { font-size: 4rem; } .mobile-main-title.main-title h2 .bg-text { font-size: 4.5rem; } } /*Tablette paysage1 - Desktop 1======================================================================================= */ @media screen and (max-width: 1250px) { .header-content .right-header { padding-right: 9rem; } } /*Tablette paysage2 - Desktop 2======================================================================================= */ @media screen and (min-width: 1251px) and (max-width: 1432px) { .header-content .left-header .image { margin: 0 auto !important; } .container { padding: 7rem 11rem; } .contact-content-con { flex-direction: column; } .contact-content-con .right-contact { margin-left: 0; margin-top: 2.5rem; } .contact-content-con .right-contact .i-c-2 { flex-direction: column; } .contact-content-con .right-contact .i-c-2 :last-child { margin-left: 0; margin-top: 1.5rem; } .contact-content-con .right-contact { margin-bottom: 6rem; } .mobile.main-title h2 .bg-text { font-size: 5.5rem; } }