/* ========================================================================== Feuille de style pour la page web "page_web01" Auteur: Votre Nom Description: Ce fichier contient tous les styles nécessaires pour recréer la mise en page de l'infographie sur le diabète. Le préfixe "page_web01-" est utilisé pour toutes les classes afin d'éviter les conflits avec d'autres styles dans un projet plus large. ========================================================================== */ /* ========================================================================== 1. STYLES GLOBAUX ET CONTENEUR PRINCIPAL ========================================================================== */ /* * Le conteneur principal qui enveloppe tout le contenu. * Il est utilisé pour centrer la page et définir sa largeur maximale. * La balise n'est pas modifiée, comme demandé. */ .page_web01-container { /* Utilisation d'une police moderne et lisible, similaire à celle de l'image. Vous pouvez la remplacer par une autre. N'oubliez pas de l'importer si nécessaire (par exemple, via Google Fonts). */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* Couleur de texte par défaut. Un gris foncé est souvent plus doux pour les yeux que le noir pur. */ color: #333; /* Hauteur de ligne pour une meilleure lisibilité des paragraphes. */ line-height: 1.6; /* Définit la largeur maximale du contenu. */ max-width: 99900px; /* Centre le conteneur horizontalement dans la page. */ margin-left: auto; margin-right: auto; /* Ajoute de l'espace en haut/bas et sur les côtés pour que le contenu ne colle pas aux bords de l'écran. */ padding: 40px 20px; } /* ========================================================================== 2. STYLES DE TYPOGRAPHIE ========================================================================== */ /* * Style pour les titres principaux de section (ex: "LE DIABETE, C'EST QUOI ?"). */ .page_web01-main-title { color: #650065; /* Couleur violet/rose des titres */ font-size: 2.2em; /* Taille de police importante */ font-weight: 700; /* Police fine (light) */ text-align: center; /* Texte centré */ text-transform: uppercase; /* Texte en majuscules */ letter-spacing: 4px; /* Espacement large entre les lettres, une caractéristique clé du design */ margin-top: 40px; /* Espace au-dessus du titre */ margin-bottom: 30px; /* Espace en dessous du titre */ } /* * Style pour les sous-titres (ex: "Le diabète de type 1 :"). */ .page_web01-subtitle { font-weight: bold; /* Texte en gras */ /* text-decoration: underline; Texte souligné */ margin-top: 25px; /* Espace au-dessus */ margin-bottom: 10px; /* Espace en dessous */ font-size: 1.1em; /* Légèrement plus grand que le texte normal */ } /* * Style pour les paragraphes de texte. */ .page_web01-p { margin-bottom: 15px; /* Espace en dessous de chaque paragraphe */ font-size: 1.7em; } /* * Style pour les listes à puces. */ .page_web01-ul { list-style-type: disc; /* Style de puce par défaut */ padding-left: 20px; /* Indentation de la liste */ margin-bottom: 20px; /* Espace en dessous de la liste */ } /* * Style pour les éléments d'une liste. */ .page_web01-li { margin-bottom: 5px; /* Espace entre les éléments de la liste */ } /* * Style pour le texte en gras à l'intérieur d'un paragraphe (ex: "insulinorésistance"). */ .page_web01-bold { font-weight: bold; } /* ========================================================================== 3. ÉLÉMENTS SPÉCIFIQUES ========================================================================== */ /* * Conteneur pour les statistiques (France / Nièvre). * Utilise Flexbox pour aligner les éléments horizontalement. */ .page_web01-stats-container { display: flex; /* Active le mode Flexbox */ justify-content: space-around; /* Répartit l'espace autour des éléments */ align-items: center; /* Centre les éléments verticalement */ text-align: center; /* Centre le texte à l'intérieur des blocs de stats */ margin: 40px 0; /* Espace vertical */ flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */ gap: 20px; /* Espace entre les éléments */ } /* * Bloc individuel pour une statistique. */ .page_web01-stat-block { font-size: 1.1em; } /* * Image décorative (l'abeille et la ruche). * Vous devrez ajuster la taille selon votre image. */ .page_web01-stat-image { max-width: 150px; /* Limite la taille de l'image */ height: auto; } /* * Le gros chiffre "92%" mis en évidence. */ .page_web01-highlight-stat { font-size: 4em; /* Très grande taille de police */ font-weight: bold; /* Texte en gras */ color: #f4c145; /* Couleur jaune/doré */ text-align: center; /* Centré */ margin: 40px 0; /* Espace vertical */ } /* * Bouton jaune (ex: "Nos recettes en vidéo"). */ .page_web01-button { display: block; /* Prend toute la largeur disponible pour pouvoir le centrer avec margin auto */ width: fit-content; /* S'adapte à la largeur de son contenu */ margin: 40px auto; /* Centre le bouton horizontalement */ background-color: #f4c145; /* Couleur de fond jaune */ color: white; /* Couleur du texte */ padding: 12px 30px; /* Espace intérieur (haut/bas et gauche/droite) */ border-radius: 50px; /* Bords très arrondis pour un effet "pilule" */ text-decoration: none; /* Supprime le soulignement du lien */ font-weight: bold; /* Texte en gras */ transition: background-color 0.3s ease, transform 0.2s ease; /* Animation douce pour le survol */ } /* * Effet au survol de la souris sur le bouton. */ .page_web01-button:hover { background-color: #e0b03d; /* Jaune légèrement plus foncé */ transform: scale(1.05); /* Agrandit légèrement le bouton */ } /* ========================================================================== 4. MISE EN PAGE FLEXIBLE (Texte + Image) ========================================================================== */ /* * Conteneur général pour une section avec du contenu à gauche et une image à droite (ou l'inverse). * Utilise Flexbox pour une mise en page facile et responsive. */ .page_web01-flex-section { display: flex; /* Active Flexbox */ align-items: center; /* Centre les éléments verticalement l'un par rapport à l'autre */ gap: 40px; /* Crée un espace entre le bloc de texte et le bloc d'image */ margin: 50px 0; /* Espace vertical autour de la section */ flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur les petits écrans */ } /* * Bloc contenant le texte dans une section flexible. * "flex: 1" signifie qu'il prendra l'espace disponible. */ .page_web01-flex-text { flex: 1; /* Prend 50% de l'espace s'il y a 2 éléments "flex: 1" */ min-width: 300px; /* Largeur minimale avant de passer à la ligne */ } /* * Bloc contenant l'image dans une section flexible. */ .page_web01-flex-image-container { flex: 1; /* Prend l'autre moitié de l'espace */ min-width: 300px; /* Largeur minimale */ text-align: center; /* Centre l'image si elle est plus petite que son conteneur */ } /* * Image circulaire. * Cette classe doit être appliquée directement à la balise . */ .page_web01-circular-image { width: 100%; /* L'image prend toute la largeur de son conteneur */ max-width: 300px; /* Mais ne dépasse pas 300px */ height: 300px; /* Hauteur fixe pour garantir un cercle parfait */ border-radius: 50%; /* La magie du cercle ! */ object-fit: cover; /* Assure que l'image remplit l'espace sans être déformée, en la rognant si nécessaire. */ }