/* ================================================================ CAROUSEL STYLES - Barre rouge latérale, flou, transition fade ================================================================ */ /* ---------------------------------------------------------------- 1. STRUCTURE & POSITIONNEMENT GÉNÉRAL ---------------------------------------------------------------- */ /* Conteneur principal du texte (la légende au-dessus de l'image). On force le style pour annuler le CSS par défaut de Bootstrap 3. !important est utilisé pour garantir que ces règles s'appliquent toujours. */ [id^="myCarousel_"] .carousel-caption { color: #fff !important; /* Couleur du texte : blanc */ font-size: 4vh !important; /* Taille du texte : 4% de la hauteur de l'écran (responsive) */ padding: 4vh 4vh 4vh 10% !important; /* Espace interne : haut, droite, bas, gauche */ bottom: 0 !important; /* Le texte est positionné tout en bas */ top: auto !important; /* Annule la position en haut */ left: 0 !important; /* Le texte commence à gauche */ right: 0 !important; /* Le texte s'étend jusqu'à droite */ display: flex !important; /* Affichage flex pour centrer le contenu */ justify-content: center !important; /* Centrage horizontal */ flex-direction: column !important; /* Les éléments (h1, p) sont empilés verticalement */ text-shadow: -1px 0 5px #333, /* Ombre du texte : gauche */ 0 1px 5px #333, /* Ombre du texte : bas */ 1px 0 5px #333, /* Ombre du texte : droite */ 0 -1px 5px #333 !important; /* Ombre du texte : haut */ position: absolute !important; /* Position absolue par rapport au conteneur parent */ width: 100% !important; /* Largeur totale */ height: 100% !important; /* Hauteur totale (couvre toute l'image) */ pointer-events: none !important; /* Le texte ne bloque pas les clics (sauf le lien) */ background: transparent !important; /* Pas de fond (le flou est géré ailleurs) */ transform: none !important; /* Annule toute transformation CSS */ } /* ---------------------------------------------------------------- 2. FOND FLU (EFFET VERRE DÉPOLI) ---------------------------------------------------------------- */ /* Le fond flou derrière le texte pour améliorer la lisibilité. Il est séparé du texte pour ne pas flouter le texte lui-même. */ [id^="myCarousel_"] .carousel-caption-background { filter: blur(20px); /* Niveau de flou : 20 pixels */ -webkit-filter: blur(20px); /* Compatibilité navigateurs Webkit (Safari, Chrome) */ position: absolute; /* Position absolue */ top: 0; /* En haut */ left: 0; /* À gauche */ width: 100%; /* Toute la largeur */ height: 100%; /* Toute la hauteur */ background-color: rgba(0,0,0,0.4); /* Fond noir semi-transparent à 40% */ pointer-events: none; /* Ne bloque pas les clics */ z-index: 1; /* Place le flou au-dessus de l'image, mais sous le texte */ } /* Le conteneur du texte (au-dessus du flou). C'est lui qui contient le titre et le sous-titre. */ [id^="myCarousel_"] .carousel-caption-foreground { z-index: 100; /* Place le texte au-dessus du flou */ position: relative; /* Position relative pour le z-index */ pointer-events: auto; /* Le texte peut recevoir des clics (ex: lien) */ } /* Pour que le lien ne casse pas le style. On s'assure que le lien (s'il y en a un) s'affiche en blanc et sans soulignement. */ [id^="myCarousel_"] .carousel-caption-foreground a { display: block; /* Le lien occupe tout le bloc (titre + sous-titre) */ color: #fff !important; /* Texte du lien en blanc */ text-decoration: none !important; /* Pas de soulignement */ } /* ---------------------------------------------------------------- 3. STYLE DES ÉLÉMENTS DE TEXTE (H1 & P) ---------------------------------------------------------------- */ /* Style du paragraphe (sous-titre) dans le carrousel. C'est le texte qui apparaît juste en dessous du titre. */ [id^="myCarousel_"] .carousel-caption p { line-height: 1.1; /* Espace entre les lignes : 1.1 (serré) */ font-weight: bold; /* Texte en gras */ margin: 0 !important; /* Supprime les marges externes */ color: #fff !important; /* Couleur du texte : blanc au repos */ } /* Style du titre (h1) dans le carrousel. C'est le texte principal, plus gros que le sous-titre. */ [id^="myCarousel_"] h1 { font-weight: bold; /* Texte en gras */ text-shadow: -1px 0 5px rgba(200, 200, 200, .8), /* Ombre claire autour du titre */ 0 1px 5px rgba(200, 200, 200, .8), 1px 0 5px rgba(200, 200, 200, .8), 0 -1px 5px rgba(200, 200, 200, .8); font-family: "Source Sans Pro", sans-serif; /* Police de caractères */ font-size: 125%; /* Taille du titre : 125% de la taille de base */ margin: 0 0 55px 0 !important; /* Marge en bas de 15px pour séparer le titre du sous-titre */ } /* ---------------------------------------------------------------- 4. ALIGNEMENT HORIZONTAL (GAUCHE / DROITE) - TEXTE EN BAS ---------------------------------------------------------------- */ /* right-caption = Texte aligné à DROITE (bordure rouge à GAUCHE du texte) left-caption = Texte aligné à GAUCHE (bordure rouge à DROITE du texte) */ /* Texte aligné à DROITE - POSITIONNÉ EN BAS */ [id^="myCarousel_"] .right-caption { text-align: right !important; /* Le texte est aligné à droite */ left: auto !important; /* Annule la position à gauche */ right: 15% !important; /* Le texte commence à 15% du bord droit */ width: 45% !important; /* Largeur du bloc de texte : 45% de l'écran */ bottom: 12% !important; /* Le texte est à 12% du bas de l'écran */ top: auto !important; /* Annule la position en haut */ transform: none !important; /* Annule toute transformation */ padding: 0 !important; /* Supprime les paddings */ margin: 0 !important; /* Supprime les marges */ justify-content: flex-end !important; /* Alignement flexible vers la droite */ } /* Texte aligné à GAUCHE - POSITIONNÉ EN BAS */ [id^="myCarousel_"] .left-caption { text-align: left !important; /* Le texte est aligné à gauche */ right: auto !important; /* Annule la position à droite */ left: 15% !important; /* Le texte commence à 15% du bord gauche */ width: 45% !important; /* Largeur du bloc de texte : 45% de l'écran */ bottom: 12% !important; /* Le texte est à 12% du bas de l'écran */ top: auto !important; /* Annule la position en haut */ transform: none !important; /* Annule toute transformation */ padding: 0 !important; /* Supprime les paddings */ margin: 0 !important; /* Supprime les marges */ justify-content: flex-end !important; /* Alignement flexible vers la gauche */ } /* ---------------------------------------------------------------- 5. BORDURE ROUGE (LA BARRE ROUGE) ---------------------------------------------------------------- */ /* Texte à GAUCHE → Bordure rouge à DROITE du texte. Le sous-titre a une barre rouge collée à sa droite. */ [id^="myCarousel_"] .left-caption p { border-right: thick solid #ff0000 !important; /* Bordure droite : épaisse, rouge */ padding-right: 1em !important; /* Espace entre le texte et la barre : 1em */ font-weight: 600 !important; /* Texte un peu plus gras */ display: inline-block !important; /* Le paragraphe s'adapte à la largeur du texte */ } /* Texte à DROITE → Bordure rouge à GAUCHE du texte. Le sous-titre a une barre rouge collée à sa gauche. */ [id^="myCarousel_"] .right-caption p { border-left: thick solid #ff0000 !important; /* Bordure gauche : épaisse, rouge */ padding-left: 1em !important; /* Espace entre le texte et la barre : 1em */ display: inline-block !important; /* Le paragraphe s'adapte à la largeur du texte */ } /* ---------------------------------------------------------------- 6. ANIMATIONS (FADE IN / FADE OUT) ---------------------------------------------------------------- */ /* Classe de base pour les animations. Définit la durée et le mode de remplissage. */ .animated { -webkit-animation-duration: 1s; /* Durée de l'animation : 1 seconde (Webkit) */ animation-duration: 1s; /* Durée de l'animation : 1 seconde (standard) */ -webkit-animation-fill-mode: both; /* Garde l'état final de l'animation (Webkit) */ animation-fill-mode: both; /* Garde l'état final de l'animation (standard) */ } /* Animation : Fade In Down (apparition en descendant) */ @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } /* Départ : invisible, 20px plus haut */ 100% { opacity: 1; transform: translateY(0); } /* Fin : visible, position normale */ } @-webkit-keyframes fadeInDown { /* Version Webkit */ 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { /* Version Mozilla */ 0% { opacity: 0; -moz-transform: translateY(-20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { /* Version Opera */ 0% { opacity: 0; -o-transform: translateY(-20px); } 100% { opacity: 1; -o-transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } /* Animation : Fade In Right Big (apparition depuis la droite) */ .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } /* Départ : invisible, 2000px à droite */ 100% { opacity: 1; transform: translateX(0); } /* Fin : visible, position normale */ } @-webkit-keyframes fadeInRightBig { /* Version Webkit */ 0% { opacity: 0; -webkit-transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRightBig { /* Version Mozilla */ 0% { opacity: 0; -moz-transform: translateX(2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRightBig { /* Version Opera */ 0% { opacity: 0; -o-transform: translateX(2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } /* Animation : Fade In Left Big (apparition depuis la gauche) */ @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } /* Départ : invisible, 2000px à gauche */ 100% { opacity: 1; transform: translateX(0); } /* Fin : visible, position normale */ } @-webkit-keyframes fadeInLeftBig { /* Version Webkit */ 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeftBig { /* Version Mozilla */ 0% { opacity: 0; -moz-transform: translateX(-2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeftBig { /* Version Opera */ 0% { opacity: 0; -o-transform: translateX(-2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } /* ---------------------------------------------------------------- 7. TRANSITIONS ENTRE LES SLIDES (FONDU) ---------------------------------------------------------------- */ /* Transition en fondu pour les slides. Remplace le défilement latéral par un fondu enchaîné. */ [id^="myCarousel_"] .carousel-inner .item { opacity: 0; /* Chaque slide est invisible au départ */ -webkit-transition-property: opacity; /* Transition sur l'opacité (Webkit) */ transition-property: opacity; /* Transition sur l'opacité (standard) */ -webkit-transition-duration: 0.8s; /* Durée de la transition : 0.8 seconde (Webkit) */ transition-duration: 0.8s; /* Durée de la transition : 0.8 seconde (standard) */ } [id^="myCarousel_"] .carousel-inner .active { opacity: 1; /* La slide active est visible */ } /* États intermédiaires de la transition (gestion du défilement) */ [id^="myCarousel_"] .carousel-inner .active.left, [id^="myCarousel_"] .carousel-inner .active.right { left: 0; /* Annule le déplacement latéral */ opacity: 0; /* La slide disparaît en fondu */ z-index: 1; /* Reste en arrière-plan */ } [id^="myCarousel_"] .carousel-inner .next.left, [id^="myCarousel_"] .carousel-inner .prev.right { opacity: 1; /* La nouvelle slide apparaît en fondu */ } /* Contrôles du carrousel (flèches) */ [id^="myCarousel_"] .carousel-control { z-index: 2; /* Les flèches sont au-dessus des slides */ } /* ---------------------------------------------------------------- 8. RESPONSIVE (ADAPTATION SUR PETITS ÉCRANS) ---------------------------------------------------------------- */ /* Adaptation pour les écrans de tablette (largeur max 768px). On réduit la largeur du texte et on ajuste la position. */ @media screen and (max-width:768px) { [id^="myCarousel_"] .right-caption { right: 10% !important; /* Le texte est à 10% du bord droit */ width: 60% !important; /* Le texte occupe 60% de l'écran */ text-align: right !important; /* Alignement à droite */ bottom: 10% !important; /* Le texte est à 10% du bas */ top: auto !important; padding: 0 !important; margin: 0 !important; justify-content: flex-end !important; } [id^="myCarousel_"] .left-caption { left: 10% !important; /* Le texte est à 10% du bord gauche */ width: 60% !important; /* Le texte occupe 60% de l'écran */ text-align: left !important; /* Alignement à gauche */ bottom: 10% !important; /* Le texte est à 10% du bas */ top: auto !important; padding: 0 !important; margin: 0 !important; justify-content: flex-end !important; } } /* Adaptation pour les écrans de téléphone (largeur max 480px). On réduit la taille du texte et on élargit le bloc de texte. */ @media screen and (max-width:480px) { [id^="myCarousel_"] .right-caption { right: 8% !important; /* Le texte est à 8% du bord droit */ width: 80% !important; /* Le texte occupe 80% de l'écran */ font-size: 2.5vh !important; /* Taille du texte réduite à 2.5% de la hauteur de l'écran */ text-align: right !important; bottom: 8% !important; top: auto !important; padding: 0 !important; margin: 0 !important; justify-content: flex-end !important; } [id^="myCarousel_"] .left-caption { left: 8% !important; /* Le texte est à 8% du bord gauche */ width: 80% !important; /* Le texte occupe 80% de l'écran */ font-size: 2.5vh !important; /* Taille du texte réduite à 2.5% de la hauteur de l'écran */ text-align: left !important; bottom: 8% !important; top: auto !important; padding: 0 !important; margin: 0 !important; justify-content: flex-end !important; } } /* Adaptation pour les très petits écrans (largeur max 360px). Le texte est encore plus petit et occupe presque tout l'écran. */ @media screen and (max-width:360px) { [id^="myCarousel_"] .right-caption { right: 5% !important; width: 90% !important; font-size: 2vh !important; /* Taille du texte : 2% de la hauteur de l'écran */ bottom: 5% !important; top: auto !important; padding: 0 !important; margin: 0 !important; justify-content: flex-end !important; } [id^="myCarousel_"] .left-caption { left: 5% !important; width: 90% !important; font-size: 2vh !important; bottom: 5% !important; top: auto !important; padding: 0 !important; margin: 0 !important; justify-content: flex-end !important; } } /* ================================================================ ⭐ EFFET AU SURVOL : TOUT LE TEXTE DU P DEVIENT ROUGE ================================================================ */ /* Au repos : tout le texte (paragraphe) est blanc. Cela garantit que le texte est blanc tant que l'utilisateur ne passe pas la souris dessus. */ [id^="myCarousel_"] .carousel-caption p { color: #fff !important; } /* Au survol du paragraphe : tout le texte du sous-titre devient rouge. Cela inclut le texte normal ET le texte à l'intérieur des balises . */ [id^="myCarousel_"] .left-caption p:hover, [id^="myCarousel_"] .right-caption p:hover { color: #ff0000 !important; /* Le texte devient rouge */ border-color: #ff0000 !important; /* La bordure rouge reste visible (et devient rouge si elle ne l'était pas) */ transition: all 0.3s ease; /* Transition douce de 0.3 seconde */ } /* ================================================================ ⭐ AGRANDISSEMENT DU TEXTE DANS LES BALISES ================================================================ */ /* Le texte à l'intérieur des balises (ex: "pour vos données critiques") est agrandi de 175% par rapport au reste du texte. Il prend la couleur de son parent (blanc au repos, rouge au survol). */ [id^="myCarousel_"] .carousel-caption p span { font-size: 175% !important; /* Taille : 1.75x plus grande */ display: inline-block !important; /* Le span se comporte comme un bloc en ligne */ font-weight: bold !important; /* Texte en gras */ line-height: 1.3 !important; /* Espacement entre lignes un peu plus large */ color: inherit !important; /* Prend la couleur du parent (p) : blanc au repos, rouge au survol */ } /* ================================================================ ⭐ DÉCALAGE DU TITRE SEULEMENT (h1) ================================================================ */ /* Si alignement à DROITE (right-caption), la barre rouge est à GAUCHE du sous-titre. Le titre (h1) est décalé vers la GAUCHE grâce à un padding à droite. Cela crée un espace entre le titre et le sous-titre. */ [id^="myCarousel_"] .right-caption h1 { padding-right: -1.6em !important; /* Pousse le titre vers la gauche de 1.5em */ } /* Si alignement à GAUCHE (left-caption), la barre rouge est à DROITE du sous-titre. Le titre (h1) est décalé vers la DROITE grâce à un padding à gauche. */ [id^="myCarousel_"] .left-caption h1 { padding-left: 1.8em !important; /* Pousse le titre vers la droite de 1.5em */ }