/* ========================================================== 1. MISE EN PAGE GÉNÉRALE DE L'ENCADREMENT ========================================================== */ html { overflow-y: scroll; /* Force l'affichage de la barre de scroll pour éviter les sauts de mise en page */ } body{ background-color: #000000; } .encadrement { padding: 3rem 4rem; /*margin-top: 5vh;*/ margin-bottom: 10vh; text-align: justify; } .content-wrapper { scroll-margin-top: 10rem; } /* ========================================================== 2. STYLES DU TITRE PRINCIPAL (H1) ========================================================== */ /* On surcharge le style de .page-title pour l'aligner à gauche sur cette page */ .encadrement h1.page-title { text-align: left; margin-bottom: 5rem; background: none; color: transparent; /* Important pour que les spans soient maîtres de la couleur */ text-shadow: none; } /* Chaque ligne du titre hérite du style .page-title mais est gérée individuellement pour l'animation */ .encadrement h1 span { display: block; /* On réplique le style de .page-title (de font.css) sur chaque span */ background: linear-gradient(to right, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.9) 25%, rgba(255, 215, 0, 0.9) 75%, rgba(255, 215, 0, 0.2) ); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 5px rgba(255, 215, 0, 0.4), 0 0 10px rgba(255, 165, 0, 0.2); /* Préparation pour l'animation (état initial) */ opacity: 0; /*transform: translateY(15px) translateZ(0);*/ } .encadrement h1 span:first-child { font-size: 4rem; transform: translateY(0px) translateZ(0); } .encadrement h1 span:nth-child(2) { font-size: 2.5rem; text-align: right; transform: translateY(10px) translateZ(0); margin-right: 5rem; } .encadrement h1 span:nth-child(3) { font-size: 2.5rem; text-align: right; transform: translateY(15px) translateZ(0); } /* ========================================================== 3. STYLES DES PARAGRAPHES ET ÉLÉMENTS TEXTUELS ========================================================== */ .encadrement p { font-size: var(--taille-texte); margin-bottom: 5rem; } /* PRÉPARATION DES ÉLÉMENTS POUR L'ANIMATION CSS */ #premierePartie, #slider1Container, #slider1Instruction, #separateur0, #separateur1, #separateur1_bas { opacity: 0; transition-property: opacity, transform; transition-timing-function: ease-out; transform: translateZ(0); /* Astuce anti-flou */ } /* On décale les éléments qui doivent remonter (état initial) */ #premierePartie, #slider1Container, #slider1Instruction { transform: translateY(15px) translateZ(0); } #deuxiemePartie, #troisiemePartie { margin-left: 4rem; } .decallage { display: inline-block; margin-left: 2em; font-style: italic; } /* ========================================================== SEPARATEURS BAS STYLE SPÉCIFIQUE A LA PAGE ========================================================== */ #separateur1_bas, #separateur2_bas { width: 55%; margin-top: -2rem; margin-bottom: 2rem; background-color: rgba(255, 215, 0, 0.4); } .separateur-bas::before, .separateur-bas::after { background-color: rgba(255, 215, 0, 0.4); /* Estompé */ height: 2rem; /* Longueur des bras */ } /* ========================================================== SÉQUENCE D'ANIMATION D'INTRODUCTION EN CSS ========================================================== */ /* Chaque règle définit l'état final de l'élément et sa chronologie (durée, délai) */ body.intro-animation-active #homeTitle span:nth-child(1) { opacity: 1; transform: translateY(0) translateZ(0); /* Retour à la position initiale */ transition-duration: 2.7s; transition-delay: 0.6s; } body.intro-animation-active #homeTitle span:nth-child(2) { opacity: 1; transform: translateY(0) translateZ(0); /* Retour à la position initiale */ transition-duration: 1.5s; transition-delay: 2.2s; } body.intro-animation-active #homeTitle span:nth-child(3) { opacity: 1; transform: translateY(0) translateZ(0); /* Retour à la position initiale */ transition-duration: 1.7s; transition-delay: 2.3s; } body.intro-animation-active #premierePartie { opacity: 1; transform: translateY(0) translateZ(0); transition-duration: 1.4s; transition-delay: 2.8s; } body.intro-animation-active #separateur0 { opacity: 1; transition-duration: 2.5s; transition-delay: 1.9s; } body.intro-animation-active #separateur1 { opacity: 1; transition-duration: 2.5s; transition-delay: 3.0s; } body.intro-animation-active #slider1Container, body.intro-animation-active #slider1Instruction { opacity: 1; transform: translateY(0) translateZ(0); transition-duration: 1.0s; transition-delay: 4.0s; } body.intro-animation-active #separateur1_bas { opacity: 1; transition-duration: 1.9s; transition-delay: 4.0s; } /* ========================================================== 5. STYLE DES BLOCS INTERACTIFS (SLIDERS) ========================================================== */ .interactive-block { width: 100%; /* Prend toute la largeur disponible */ display: flex; flex-direction: column; /* Empile les éléments verticalement */ align-items: center; /* Centre les éléments horizontalement */ /* Crée un espacement de 2.5rem entre chaque enfant (séparateur, slider, séparateur) */ gap: 2rem; } /* On supprime les marges des séparateurs DANS ce bloc pour laisser 'gap' gérer l'espace */ .interactive-block .separateur-haut, .interactive-block .separateur-bas, .interactive-block .separateur { margin: 0; } /* ========================================================== 4. RESPONSIVE DESIGN (TABLETTE) ========================================================== */ @media (max-width: 768px) { .encadrement { padding: 2rem 2.5rem; } .encadrement h1 { font-size: 2.4rem; margin-bottom: 2rem; background: none; -webkit-background-clip: initial; background-clip: initial; /*color: #FFD700;*/ /*text-shadow:*/ /* !* Couche 1: Le halo sombre et diffus (le "vignetage") *!*/ /* 0 0 15px rgba(0, 0, 0, 0.5),*/ /* */ /* !* Couche 2: La lueur dorée principale par-dessus *!*/ /* 0 0 7px rgba(255, 215, 0, 0.7);*/ } } /* ========================================================== 4. RESPONSIVE DESIGN (MOBILE) ========================================================== */ @media (max-width: 560px) { .encadrement { padding: 1.5rem; margin-top: 1.5vh; margin-bottom: 5vh; box-sizing: border-box; width: 95%; } .encadrement h1 { font-size: 1.5rem; text-align: center; /* On recentre le titre pour les petits écrans */ } /* On annule les décalages et on ajuste la taille pour mobile */ .encadrement h1 span:first-child { font-size: 2.2rem; left: 0; position: relative; overflow: hidden; margin-bottom: 3rem; } /* On annule le reflet sur mobile */ .encadrement h1 span:first-child::after { display: none; } .encadrement h1 span:nth-child(2), .encadrement h1 span:nth-child(3) { font-size: 1.3rem; margin-left: 0; margin-right: 0; } #deuxiemePartie, #troisiemePartie { margin-left: 0; } .encadrement p { font-size: 1rem; } #separateur1_bas { width: 70%; } /* 2 BLOCS A SUPPRIMER SI BUG */ /* NOUVEAU : Agencement du slider pour mobile */ #slider1Container { display: flex; /* Active le mode Flexbox */ align-items: center; /* Centre les éléments verticalement */ width: 100%; /* Le conteneur prend toute la largeur */ gap: 1rem; /* Ajoute un espace (ex: 1rem) entre les labels et le slider */ } #slider1Container input[type="range"] { flex-grow: 1; /* Permet au slider de prendre tout l'espace central disponible */ width: auto; /* La largeur est maintenant gérée par flexbox */ } }