/* ========================================================================== FOOTER PARTAGÉ — pour footer.php -------------------------------------------------------------------------- Bloc extrait de styles.css pour que le footer s'affiche à l'identique sur les pages qui ne chargent pas styles.css (tuto.php, blog.php, access.php...). À charger EN DERNIER dans le , après les autres feuilles de style. Ne contient QUE des règles propres au footer : aucun effet de bord global. ========================================================================== */ /* ========== CONTENEUR ========== */ .footer { width: 100%; background: linear-gradient(135deg, #0C1A1A 0%, #01257D 100%); color: #fff; padding: 3rem 2rem 2rem; position: relative; } /* ========== GRILLE RESPONSIVE ========== */ .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; max-width: 1400px; margin: 0 auto; } /* ========== CLASSE .span (neutralise les styles globaux de ) ========== */ .span { /* Affichage & positionnement */ display: inline; vertical-align: baseline; /* Typographie */ font-size: inherit; font-weight: inherit; font-family: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none; /* Couleurs */ color: #cbd5e1; /* Gris clair lisible sur fond sombre */ text-decoration: none; /* Comportement */ background: transparent; border: none; margin: 0; padding: 0; /* Transition douce au hover (via le parent .footer-link) */ transition: color 0.3s ease; } /* Hover : le span suit la couleur du lien parent */ .footer-link:hover .span { color: #ffffff; } /* ========== SECTIONS ========== */ .footer-section { display: flex; flex-direction: column; gap: 1rem; } .footer-center { text-align: center; align-items: center; } /* ========== TITRES ========== */ .footer-title { font-size: 1.1rem; font-weight: 600; color: #00FFFF; margin-bottom: 0.5rem; position: relative; padding-bottom: 0.5rem; } .footer-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: #00FFFF; border-radius: 2px; } /* ========== LISTES DE LIENS ========== */ .footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .footer-link { display: flex; align-items: center; gap: 0.75rem; color: #cbd5e1; text-decoration: none; font-size: 0.95rem; transition: all 0.3s ease; padding: 0.25rem 0; } .footer-link:hover { color: #fff; transform: translateX(4px); } /* ========== ICÔNES ========== */ .icon { width: 20px; height: 20px; flex-shrink: 0; color: #00FFFF; transition: transform 0.3s ease; } .footer-link:hover .icon { transform: scale(1.1); } /* ========== COPYRIGHT & MARQUE ========== */ .footer-copyright { font-size: 0.9rem; color: #94a3b8; margin: 0; } .footer-brand { color: #fff; text-decoration: none; font-weight: 600; transition: color 0.3s ease; } .footer-brand:hover { color: #00FFFF; } .footer-brand span { color: #00FFFF; } /* ========== RÉSEAUX SOCIAUX ========== */ .social-links { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; } .social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; transition: all 0.3s ease; } .social-link:hover { background: #00FFFF; transform: translateY(-3px); } .social-icon { width: 20px; height: 20px; color: #fff; transition: transform 0.3s ease; } .social-link:hover .social-icon { transform: scale(1.1); } /* ========== MENTION LÉGALE ========== */ .footer-legal { font-size: 0.8rem; color: #64748b; margin: 0; } /* ========== PARTENAIRES ========== */ .partners-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1rem; align-items: center; } .partner-link { display: flex; align-items: center; justify-content: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; transition: all 0.3s ease; } .partner-link:hover { background: rgba(0, 255, 255, 0.1); transform: scale(1.05); } .partner-logo { max-height: 60px; width: auto; object-fit: contain; filter: grayscale(30%) brightness(0.9); transition: filter 0.3s ease; } .partner-link:hover .partner-logo { filter: grayscale(0%) brightness(1); } /* ========== APPARITION ========== Le footer reste visible même si le JavaScript ne tourne pas (fichier app.js absent ou en erreur) : l'animation se contente d'un fondu au chargement, et se termine sur un état visible. */ @keyframes footer-apparition { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .footer.reveal { opacity: 1; transform: translateY(0); animation: footer-apparition 0.8s ease both; } .footer.reveal-visible { opacity: 1; transform: translateY(0); } /* ========== RESPONSIVE ========== */ @media (max-width: 768px) { .span { font-size: 0.95rem; text-align: center; } .footer { padding: 2rem 1.5rem 1.5rem; text-align: center; } .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; } .footer-center { text-align: center; align-items: center; } .footer-title::after { left: 50%; transform: translateX(-50%); } .footer-link { justify-content: center; } .social-links { justify-content: center; } .partners-grid { grid-template-columns: repeat(2, 1fr); justify-items: center; } .partner-logo { max-height: 50px; } } @media (max-width: 480px) { .span { font-size: 0.9rem; } .partners-grid { grid-template-columns: 1fr; } .footer-link { font-size: 0.9rem; } .social-link { width: 36px; height: 36px; } .social-icon, .icon { width: 18px; height: 18px; } } /* ========== ACCESSIBILITÉ ========== */ .footer-link:focus-visible, .social-link:focus-visible, .partner-link:focus-visible { outline: 2px solid #00FFFF; outline-offset: 2px; border-radius: 4px; } /* Contraste élevé si préférence utilisateur */ @media (prefers-contrast: high) { .span { color: #ffffff; } } /* Réduction des mouvements pour accessibilité */ @media (prefers-reduced-motion: reduce) { .footer-link, .social-link, .partner-link, .footer.reveal { transition: none !important; animation: none !important; transform: none !important; } }