/* CSS Document */ /* Dans un fichier CSS, l'astérisque * est un sélecteur universel. Il sélectionne tous les éléments de la page HTML, quel que soit leur type (par exemple, div, p, h1, a, img, etc.).Le sélecteur universel est souvent utilisé pour appliquer des styles de base ou des réinitialisations (reset) à l'ensemble du document. C'est une manière rapide de s'assurer que certaines propriétés, comme les marges et les remplissages, sont cohérentes sur tous les navigateurs. */ html, body { height: 100%; /* S'assure que les deux éléments prennent toute la hauteur de la fenêtre */ margin: 0; padding: 0; overflow-y: hidden; /* Empêche le défilement sur l'élément html */ } body { font-family: 'Inter', sans-serif; background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/images/background1.jpg'); background-size: cover; /* Optionnel : couvre tout l'arrière-plan sans déformation */ background-repeat: no-repeat; /* Optionnel : empêche l'image de se répéter */ background-attachment: fixed; /* Optionnel : l'image reste fixe lorsque vous faites défiler la page */ min-height: 100vh; /* S'assure que le body prend au moins toute la hauteur de la vue */ display: flex; flex-direction: column; overflow-y: auto; /* Permet au body de défiler lorsque le contenu dépasse la hauteur de la vue */ } .container-xxl { flex-grow: 1; /* Permet au contenu principal de prendre l'espace restant */ } /* Styles personnalisés pour les puces d'une liste */ .list-with-custom-bullet li { display: flex; align-items: baseline; /* sinon la puce est légèrement trop haute */ padding-left: 0; } .list-with-custom-bullet li::before { content: ''; flex-shrink: 0; width: 15px; height: 15px; margin-right: 5px; background-image: url('/images/bullet.png'); background-size: contain; background-repeat: no-repeat; background-position: center; } /* Règle spécifique pour la barre de navigation (Offcanvas) */ .offcanvas .navbar-nav .nav-link { position: relative; padding-left: 25px !important; /* Ajuster l'espace pour la puce */ display: flex; /* Utiliser Flexbox pour un alignement vertical parfait */ align-items: center; /* Centrer verticalement le contenu */ } /* Créer la puce avec une pseudo-classe */ .offcanvas .navbar-nav .nav-link::before { content: ''; position: absolute; top: 50%; /* Aligner verticalement au centre du lien */ left: 0; transform: translateY(-50%); /* Décaler la puce vers le haut de 50% de sa propre hauteur */ width: 15px; height: 15px; background-image: url('/images/bullet.png'); background-size: contain; background-repeat: no-repeat; background-position: center; } /* Ajout d'une exception pour le lien du sous-menu si on ne veut pas de puce pour le titre du sous-menu .offcanvas .navbar-nav .nav-link[data-bs-toggle="collapse"]::before { content: none; } */ /* Styles personnalisés pour la barre de navigation */ .navbar-toggler { position: fixed; top: 1rem; right: 1rem; z-index: 1050; /* S'assurer qu'il est au-dessus du contenu */ border: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .offcanvas-end { /* Rendre l'arrière-plan flou pour un effet moderne */ background-color: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .offcanvas-header, .offcanvas-body { background-color: transparent !important; /* S'assurer que le contenu n'a pas de fond */ } .offcanvas .navbar-nav .nav-link { color: #333; font-weight: 500; transition: all 0.3s ease-in-out; border-radius: 0.5rem; padding: 0.75rem 1rem; margin: 0.25rem 0; } .offcanvas .navbar-nav .nav-link:hover, .offcanvas .navbar-nav .nav-link.active { background-color: rgba(0, 0, 0, 0.05); transform: translateX(-5px); } /* Ajustement des liens de sous-menu pour qu'ils s'affichent correctement */ .collapse-menu { padding-left: 1.5rem; /* Un peu de retrait pour le sous-menu */ list-style: none; /* Supprimer les puces de liste */ } /* Définition de la hauteur fixe et la position de référence */ #carouselExampleIndicators .carousel-inner { height: 400px; /* Conservez cette hauteur de référence */ overflow: hidden; } /* Réinitialisation des éléments du carrousel pour le défilement */ #carouselExampleIndicators .carousel-item { /* On remet le comportement par défaut de Bootstrap pour le défilement */ /* Retrait de display: flex et des autres propriétés qui écrasaient la transition */ height: 100%; width: 100%; position: relative; /* S'assurer que la position est bien définie */ text-align: center; /* Aide au centrage horizontal des éléments inline-block */ } /* Ajustement de l'image pour qu'elle s'affiche complètement et soit centrée verticalement */ #carouselExampleIndicators .carousel-item img { /* L'image s'affiche entièrement sans être tronquée */ object-fit: contain; /* Limite l'image à la taille du conteneur */ max-width: 100%; max-height: 100%; width: auto; /* Permet à la largeur de s'adapter au ratio */ height: auto; /* Permet à la hauteur de s'adapter au ratio */ /* Centrage horizontal (méthode block) */ display: block; margin: 0 auto; /* Centrage vertical (très efficace si l'image est plus petite que 400px) */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .alert { background-color: #6d6d72; border-bottom-color: #ffffff; color: #ffffff; } /* image individuelle d'opus 5 */ .image-vw-width { width: 40vw; height: auto; /* Maintient le ratio d'aspect */ } .paragraph-indent { text-indent: 2em; } .text-custom-orange { color: #F79910 !important; /* Exemple d'une couleur orange foncé */ } .btn-custom-orange { /* Couleur de fond */ background-color: #FF8C00; /* Couleur de la bordure */ border-color: #FF8C00; /* (Optionnel) Ajout d'un style au survol (hover) pour une meilleure UX */ transition: background-color 0.3s ease, border-color 0.3s ease; } .btn-custom-orange:hover { /* Assombrir légèrement la couleur au survol */ background-color: #AF5C00; border-color: #F79910; color:black; } /* couleur du code d'erreur dans le formulaire */ .error {color: #FF0000;} .lien-gris-survol:hover { color: #6c757d !important; }