/* Modification des variables */ :root { --dark-blue: #012650; --medium-blue: #01568d; --accent-yellow: #ffcc03; --light-bg: #ebebeb; } /* Reset et definition de la mise en page par defaut */ html, body { height: 100%; margin: 0; } body { font-family: 'Poppins', sans-serif; background-color: var(--light-bg); color: var(--dark-blue); display: flex; flex-direction: column; min-height: 100vh; } main, .main-content { flex: 1 0 auto; } /* Classes utilitaires personnalisées */ .bg-dark-blue { background-color: var(--dark-blue) !important; } .bg-medium-blue { background-color: var(--medium-blue) !important; } .bg-light-custom { background-color: var(--light-bg) !important; } .text-accent { color: var(--accent-yellow) !important; } /* Liens de navigation */ .navbar-dark .navbar-nav .nav-link { color: var(--light-bg); transition: color 0.3s ease; } .navbar-dark .navbar-nav .nav-link:hover { color: var(--accent-yellow); } /* Bouton d'appel à l'action (CTA) */ .btn-accent { background-color: var(--accent-yellow); border: none; transition: all 0.3s ease; } .btn-accent:hover { background-color: #e6b800; /* Un jaune légèrement plus foncé au survol */ transform: translateY(-2px); /* Animation ultra-fluide et discrète */ box-shadow: 0 4px 10px rgba(255, 204, 3, 0.4); } /* Animation de levée des cartes au survol */ .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-lift:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; } /* Couleur personnalisée pour les icônes */ .text-primary { color: var(--medium-blue) !important; } /* 1. On prépare le conteneur pour qu'il n'y ait aucun débordement lors du scale */ .ratio-16x9 { position: relative; overflow: hidden; background-color: #f8f9fa; /* Couleur de fond pendant le chargement */ } #web-iframe { border: none; position: absolute; top: 0; left: 0; /* IMPORTANT : Si tu veux un scale de 0.75 (75%), l'iframe doit avoir une taille de 133.33% (1 / 0.75) pour que, une fois réduite, elle occupe 100% de l'espace. */ width: 133.33% !important; height: 133.33% !important; /* On applique le scale (mise à l'échelle) */ transform: scale(0.75); transform-origin: top left; /* Compatibilité navigateurs anciens */ -webkit-transform: scale(0.75); -webkit-transform-origin: 0 0; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; } .zoom-trigger { cursor: zoom-in; transition: transform 0.3s ease; object-fit: contain; /* Important pour les images verticales */ max-height: 100%; width: auto !important; } .zoom-trigger:hover { transform: scale(1.02); } /* Style de la modale pour qu'elle soit très sombre */ #zoomModal .modal-content { background: transparent; } .browser-window .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .bg-light-custom { background-color: #f8f9fa; } .btn-accent { background-color: var(--accent-yellow); color: #000; border: none; } .btn-accent:hover { background-color: #e6b100; } /* Style des réseaux sociaux dans le footer */ .footer-socials { padding: 10px 0; } .social-link { color: var(--light-bg); /* Couleur claire par défaut */ font-size: 1.5rem; /* Taille de l'icône */ transition: all 0.3s ease; display: inline-flex; text-decoration: none; } .social-link:hover { color: var(--accent-yellow); /* Jaune au survol */ transform: translateY(-3px); /* Petit effet de levée */ } /* Optionnel : si tu n'as pas encore chargé les icônes Bootstrap */ /* Ajoute cette ligne dans ton si besoin : */