/* * ========================================================= * GLOBAL.CSS — MVC * ========================================================= * * Base générale du site. * * Cette feuille contient uniquement les styles communs * à l'ensemble du site. * * Elle ne contient aucun style spécifique à une page. * * Les feuilles CSS des pages, comme home.css, events.css * ou presentation.css, peuvent utiliser les variables * définies ici. * * Organisation du fichier : * * 1. Variables globales du thème * 2. Réinitialisation générale * 3. HTML * 4. BODY * 5. Liens * 6. Champs et boutons * 7. Conteneur principal * 8. Pied de page * 9. Messages * 10. Notifications globales * ========================================================= */ /* * Police Allura utilisée pour écrire les prénoms * Sylvie & Thierry dans l'en-tête et le pied de page. * * Le fichier de police est stocké localement sur le site : * assets/fonts/Allura-Regular.woff */ @font-face { font-family: "Allura"; src: url("../fonts/Allura-Regular.woff") format("woff"); font-style: normal; font-weight: 400; font-display: swap; } /* ========================================================= 1. VARIABLES GLOBALES DU THÈME ========================================================= * * Toutes les couleurs principales du site sont centralisées * ici afin d'éviter de répéter les mêmes valeurs dans * chaque feuille CSS. * * Les autres feuilles utilisent ces variables avec : * * var(--color-gold) * var(--color-background) * var(--color-text) * * Cela permet de conserver une identité visuelle cohérente * dans toutes les pages du site. */ :root { /* Couleur utilisée pour le fond principal du header. */ --color-header: #BDBDBB; /* Couleur utilisée pour les éléments liés au menu. */ --color-menu: #D2D0CC; /* Couleur de fond principale du site. */ --color-background: #F5EEE3; /* Couleur principale des textes. */ --color-text: #252525; /* Couleur dorée utilisée pour les éléments importants. */ --color-gold: #C6A15B; /* Couleur utilisée pour les bordures générales. */ --color-border: #B8B5AF; /* Couleur secondaire utilisée notamment dans certains blocs. */ --color-secondary: #E8E3DA; /* Couleur ivoire utilisée notamment dans le header. */ --color-ivoire: #FDFCFA; /* Couleur claire de type perle utilisée dans certains éléments. */ --color-perle: #F8F3EC; /* Couleur rose utilisée dans les éléments concernés. */ --color-pink: #FBC0D1; /* Couleur utilisée pour les états hover. */ --color-hover: #D6B35A; /* Couleur jaune utilisée dans certains éléments graphiques. */ --color-yellow: #F5F527; } /* ========================================================= 2. RÉINITIALISATION GÉNÉRALE ========================================================= * * box-sizing: border-box permet de faire entrer les bordures * et les paddings dans la largeur/hauteur déclarée. * * C'est important pour obtenir un comportement prévisible * sur ordinateur, tablette et téléphone. */ *, *::before, *::after { /* Inclut padding et border dans les dimensions calculées. */ box-sizing: border-box; } /* ========================================================= 3. HTML ========================================================= * * On supprime les marges et espacements par défaut du navigateur. * * Le HTML occupe toute la largeur disponible et possède au moins * la hauteur complète de la fenêtre. */ html { /* Supprime toute marge automatique du navigateur. */ margin: 0; /* Supprime tout padding automatique du navigateur. */ padding: 0; /* Permet au document d'occuper toute la largeur disponible. */ width: 100%; /* Garantit une hauteur minimale correspondant à la page complète. */ min-height: 100%; } /* ========================================================= 4. BODY ========================================================= * * Le body constitue la structure générale de toutes les pages. * * Il utilise Flexbox afin de pouvoir placer le contenu principal * entre le header et le footer. */ body { /* Supprime la marge par défaut du navigateur. */ margin: 0; /* Supprime le padding par défaut du navigateur. */ padding: 0; /* Le body prend toute la largeur disponible. */ width: 100%; /* Le body occupe au minimum toute la hauteur de l'écran. */ min-height: 100vh; /* Active Flexbox pour organiser verticalement la page. */ display: flex; /* Place les éléments principaux les uns sous les autres. */ flex-direction: column; /* Police générale utilisée par le site. */ font-family: "Cormorant Garamond", Georgia, serif; /* Applique le fond général du site. */ background: var(--color-background); /* Applique la couleur générale des textes. */ color: var(--color-text); } /* ========================================================= 5. LIENS ========================================================= * * Les liens héritent de la couleur du texte environnant. * * On supprime également le soulignement automatique du navigateur. * * C'est notamment cette règle qui empêche les liens des vignettes * de devenir bleus et soulignés comme des liens HTML standards. */ a { /* Le lien reprend la couleur définie par son élément parent. */ color: inherit; /* Supprime le soulignement automatique des liens. */ text-decoration: none; } /* ========================================================= 6. CHAMPS DE FORMULAIRE ET BOUTONS ========================================================= * * Les champs et boutons utilisent la même police que leur * environnement au lieu de reprendre les styles par défaut * du navigateur. */ button, input, textarea, select { /* Utilise la police héritée du site. */ font: inherit; } /* * Réinitialisation des boutons. * * Les boutons des différentes pages pourront ensuite recevoir * leur propre apparence dans leur feuille CSS spécifique. */ button { /* Supprime la bordure native du navigateur. */ border: 0; /* Supprime le padding natif du navigateur. */ padding: 0; /* Supprime le fond natif du navigateur. */ background: none; /* Affiche le curseur indiquant qu'il s'agit d'un élément cliquable. */ cursor: pointer; } /* ========================================================= 7. CONTENU PRINCIPAL ========================================================= * * Le main occupe l'espace disponible entre le header et le footer. * * Cela permet notamment d'éviter que le footer remonte au milieu * de l'écran lorsque le contenu d'une page est court. */ main { /* Le contenu principal prend l'espace vertical disponible. */ flex: 1; } /* ========================================================= 8. PIED DE PAGE ========================================================= * * Le footer occupe toute la largeur disponible. */ .site-footer { /* Le footer prend toute la largeur de la page. */ width: 100%; } /* ========================================================= 9. MESSAGES — NOTIFICATIONS ========================================================= * * Cette classe correspond aux messages généraux affichés * temporairement au-dessus du contenu. * * Elle peut être utilisée pour les messages : * - succès ; * - avertissement ; * - erreur. * * Le JavaScript peut ajouter la classe .is-hidden pour masquer * progressivement le message. */ .message { /* Positionne le message indépendamment du contenu de la page. */ position: fixed; /* Place le message à 25 pixels du haut de la fenêtre. */ top: 25px; /* Commence son positionnement horizontal au centre. */ left: 50%; /* Corrige le décalage créé par left: 50%. */ transform: translateX(-50%); /* Place le message au-dessus des autres éléments du site. */ z-index: 2000; /* Limite la largeur tout en restant adaptée aux petits écrans. */ width: min(720px, calc(100% - 40px)); /* Ajoute de l'espace intérieur autour du texte. */ padding: 16px 24px; /* Réserve une bordure dont la couleur sera définie par l'état. */ border: 2px solid transparent; /* Arrondit légèrement les angles du message. */ border-radius: 10px; /* Centre le texte du message. */ text-align: center; /* Utilise la police générale du site. */ font-family: "Cormorant Garamond", Georgia, serif; /* Définit la taille du texte du message. */ font-size: 20px; /* Définit l'espacement vertical entre les lignes. */ line-height: 1.35; /* Rend le texte légèrement plus marqué. */ font-weight: 600; /* Ajoute une ombre légère autour du message. */ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); /* Le message est visible par défaut. */ opacity: 1; /* Anime l'apparition/disparition du message. */ transition: opacity 0.3s ease, transform 0.3s ease; } /* ========================================================= MESSAGE — SUCCÈS ========================================================= * * Utilisé lorsqu'une opération s'est correctement déroulée. */ .message.success { /* Bordure verte indiquant un succès. */ border-color: #28A745; /* Couleur du texte de succès. */ color: #1F7A34; /* Fond vert très léger. */ background: rgba(40, 167, 69, 0.12); } /* ========================================================= MESSAGE — AVERTISSEMENT ========================================================= * * Utilisé lorsqu'une information nécessite l'attention * de l'utilisateur sans correspondre à une erreur. */ .message.warning { /* Bordure orange indiquant un avertissement. */ border-color: #FFB000; /* Couleur du texte de l'avertissement. */ color: #A66F00; /* Fond orange très léger. */ background: rgba(255, 176, 0, 0.14); } /* ========================================================= MESSAGE — ERREUR ========================================================= * * Utilisé lorsqu'une opération n'a pas pu être effectuée. */ .message.error { /* Bordure rouge indiquant une erreur. */ border-color: #FF3B30; /* Couleur du texte d'erreur. */ color: #C62828; /* Fond rouge très léger. */ background: rgba(255, 59, 48, 0.12); } /* ========================================================= MESSAGE — ÉTAT MASQUÉ ========================================================= * * Cette classe permet au JavaScript de masquer le message * avec une petite animation. */ .message.is-hidden { /* Rend progressivement le message transparent. */ opacity: 0; /* Fait légèrement remonter le message pendant sa disparition. */ transform: translate(-50%, -15px); /* Empêche le message caché d'intercepter les clics. */ pointer-events: none; } /* ========================================================= MESSAGE — RESPONSIVE MOBILE ========================================================= * * Sur les petits écrans, le message doit utiliser davantage * de largeur disponible et une taille de texte légèrement * réduite. */ @media (max-width: 600px) { .message { /* Réduit l'écart avec le haut de l'écran. */ top: 15px; /* Laisse 15 pixels de marge de chaque côté. */ width: calc(100% - 30px); /* Réduit légèrement les espacements internes. */ padding: 14px 18px; /* Réduit la taille du texte sur mobile. */ font-size: 17px; } } /* ========================================================= 10. NOTIFICATION GLOBALE ========================================================= * * Cette classe correspond aux notifications affichées * dans le flux normal de la page. * * Elle est différente de .message : * * .message * -> notification positionnée au-dessus de la page. * * .site-notification * -> notification intégrée dans le contenu de la page. */ .site-notification { /* Ajuste la largeur au contenu tout en conservant une largeur minimale. */ width: fit-content; /* Empêche la notification d'être trop petite sur écran large. */ min-width: 320px; /* Limite la largeur sur les grands écrans. */ max-width: min(1000px, calc(100% - 50px)); /* Centre horizontalement la notification. */ margin: 60px auto 0; /* Ajoute de l'espace intérieur autour du texte. */ padding: 18px 24px; /* Arrondit légèrement les angles. */ border-radius: 8px; /* Centre le contenu textuel. */ text-align: center; /* Définit l'espacement entre les lignes. */ line-height: 1.35; /* Rend le texte suffisamment visible. */ font-weight: 600; /* La notification est visible par défaut. */ opacity: 1; /* Position initiale de la notification. */ transform: translateY(0); /* Anime son apparition et sa disparition. */ transition: opacity 0.3s ease, transform 0.3s ease; } /* ========================================================= NOTIFICATION — SUCCÈS ========================================================= * * Version succès de la notification globale. */ .site-notification.success { /* Bordure verte indiquant un succès. */ border: 2px solid #28A745; /* Texte vert foncé. */ color: #1F7A34; /* Fond vert légèrement transparent. */ background: rgba(40, 167, 69, 0.12); } /* ========================================================= NOTIFICATION — INFORMATION ========================================================= * Message informatif : demande de création de compte, * indication sur les e-mails ou information neutre. */ .site-notification.info { border: 2px solid var(--color-gold); color: var(--color-text); background: rgba(197, 160, 82, 0.14); } /* ========================================================= NOTIFICATION — ERREUR ========================================================= * * Version erreur de la notification globale. */ .site-notification.error { /* Bordure rouge indiquant une erreur. */ border: 2px solid #FF3B30; /* Texte rouge foncé. */ color: #C62828; /* Fond rouge légèrement transparent. */ background: rgba(255, 59, 48, 0.12); } /* ========================================================= NOTIFICATION — ÉTAT MASQUÉ ========================================================= * * Cette classe est destinée à être utilisée par le JavaScript * lorsque la notification doit disparaître. */ .site-notification.is-hidden { /* Rend progressivement la notification transparente. */ opacity: 0; /* Fait légèrement remonter la notification. */ transform: translateY(-15px); /* Empêche la notification cachée d'intercepter les clics. */ pointer-events: none; } /* ========================================================= NOTIFICATION — RESPONSIVE MOBILE ========================================================= * * Sur téléphone, la notification utilise presque toute * la largeur disponible. */ @media (max-width: 700px) { .site-notification { /* Laisse seulement 15 pixels de marge de chaque côté. */ width: calc(100% - 30px); /* Supprime la largeur minimale qui serait trop importante sur un petit écran. */ min-width: 0; /* Autorise la notification à utiliser toute la largeur disponible. */ max-width: none; /* Réduit l'espace au-dessus de la notification. */ margin-top: 30px; /* Réduit légèrement les espacements internes. */ padding: 15px 18px; } }