/* ========================================================================== GEOAÏKI — Fondations : variables, réinitialisation, typographie, animations partagées ========================================================================== */ /* ========================================================================== GEOAÏKI — Feuille de style 1) Styles globaux (en-tête, pied de page, boutons, conteneur) 2) Styles cloisonnés par page via une classe sur (p-accueil, p-services…) Sora (titres) + IBM Plex Sans (texte) · marine #142B4C · orange #E8623D ========================================================================== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes pulseDot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @keyframes spinGlobe { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes droneFly { 0%, 100% { transform: translate(0,0) rotate(0deg); } 25% { transform: translate(-12px,-9px) rotate(-2deg); } 50% { transform: translate(6px,-16px) rotate(1.5deg); } 75% { transform: translate(14px,-5px) rotate(-1deg); } } @keyframes rotorBlur { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.18); } } /* ============ GLOBAL ============ */ body { margin: 0; font-family: 'IBM Plex Sans',sans-serif; color: #142B4C; background: #fff; -webkit-font-smoothing: antialiased; } .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } header { position: sticky; top: 0; z-index: 100; background: #142B4C; box-shadow: 0 2px 14px rgba(20,43,76,.28); } .cta-btn { background: #E8623D; color: #fff!important; font-weight: 600; font-size: 15px; padding: 11px 22px; border-radius: 10px; box-shadow: 0 4px 12px rgba(232,98,61,.35); transition: all .15s ease; display: inline-block; border: none; cursor: pointer; font-family: inherit; } .cta-btn:hover { background: #cf5230; transform: translateY(-2px); } #mobileMenu .cta-btn { margin-top: 16px; text-align: center; border-bottom: none; } form .cta-btn { font-size: 16px; padding: 15px 30px; border-radius: 12px; box-shadow: 0 6px 18px rgba(232,98,61,.35); } footer { background: #142B4C; color: #fff; padding: 64px 0 0; } .cta-btn { background: #E8623D; color: #fff!important; font-weight: 600; font-size: 15px; padding: 11px 22px; border-radius: 10px; box-shadow: 0 4px 12px rgba(232,98,61,.35); transition: all .15s ease; display: inline-block; } form .cta-btn { align-self: flex-start; font-size: 16px; padding: 15px 36px; border-radius: 12px; box-shadow: 0 6px 18px rgba(232,98,61,.35); } /* ----- Ajouts Django : messages et erreurs de formulaire ----- */ .flash { padding: 15px 20px; border-radius: 10px; margin-bottom: 12px; font-size: 15px; font-weight: 500; } .flash--success { background: #E7F6EA; color: #1B5E20; } .flash--error { background: #FDECEA; color: #922B21; } .err { display: block; color: #C0392B; font-size: 13.5px; font-style: normal; font-weight: 500; margin-top: 6px; } .skip { position: absolute; left: -9999px; background: #E8623D; color: #fff; padding: 12px 20px; border-radius: 8px; z-index: 300; } .skip:focus { left: 16px; top: 16px; } /* ----- Listes déroulantes : même style que les autres champs ----- */ #contactForm select, #form select { width: 100%; padding: 13px 15px; border: 1px solid #D8DDE4; border-radius: 10px; font-family: inherit; font-size: 15px; color: #142B4C; background: #fff; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 42px; transition: border-color .18s, box-shadow .18s; } #contactForm select:focus, #form select:focus { outline: none; border-color: #E8623D; box-shadow: 0 0 0 3px rgba(232,98,61,.15); } #blocFormationAccueil label, #blocFormation label { display: block; margin-top: 14px; } #blocFormationAccueil label:first-child, #blocFormation label:first-child { margin-top: 0; } /* ========================================================================== Fiche formation (classes fd-* : autonomes, sans dépendance au thème de page) ========================================================================== */ .fd { --n: #142B4C; --nf: #0E1F38; --o: #E8623D; --of: #CF5230; --g: #5B6472; --b: #E3E7EC; --f: #F5F6F8; } /* Les marges internes sont comprises dans la largeur : evite tout debordement */ .fd, .fd *, .fd *::before, .fd *::after { box-sizing: border-box; } /* ----- Animations d'apparition ----- L'opacité initiale est posée par main.js uniquement sur les éléments hors écran : le contenu reste visible si le JS est indisponible. */ /* ----- Responsive ----- */ @media (prefers-reduced-motion:reduce) { .fd [data-reveal] { opacity: 1!important; transform: none!important; transition: none!important; } } /* ========================================================================== Sections image + texte de la page d'accueil ========================================================================== */ .duo { padding: 78px 0; background: #fff; } .duo--inverse { background: #F5F6F8; } /* ========================================================================== Animations douces de la page d'accueil ========================================================================== */ /* Hero : entrée en fondu montant, en cascade */ @keyframes geo-entree { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* Illustration du hero : léger flottement continu */ @keyframes geo-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .social i, .fsocial i { font-size: 16px; }