/* * Composants partagés par les écrans d'authentification (connexion, double * authentification…), non couverts par le thème Tailwind (assets/styles/app.css) : * panneau calepin, bouton principal, lien, case à cocher et animations d'entrée. * Les styles propres à un écran vivent dans login.css / 2fa.css. */ /* ----- panneau calepin (gauche) ----- */ .ruled { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 37px, rgba(251, 248, 241, 0.09) 37px, rgba(251, 248, 241, 0.09) 38px); } .ribbon { position: absolute; top: 0; right: 64px; width: 30px; height: 188px; background: linear-gradient(#c9851f, #a86a14); box-shadow: 0 6px 14px -4px rgba(58, 48, 28, 0.35); } .ribbon::after { content: ""; position: absolute; left: 0; bottom: -15px; border-left: 15px solid #a86a14; border-right: 15px solid #c9851f; border-bottom: 16px solid transparent; } /* ----- bouton principal ----- */ .btn-primary { background: #5e7355; color: #fbf8f1; border-radius: 7px; font-weight: 700; transition: 0.16s; box-shadow: 0 1px 2px rgba(58, 48, 28, 0.1), 0 8px 18px -8px rgba(63, 80, 57, 0.5); } .btn-primary:hover:not(:disabled) { background: #4c6045; } .btn-primary:active:not(:disabled) { transform: translateY(1px); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } /* ----- lien ----- */ .lk { color: #3f5039; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(63, 80, 57, 0.28); transition: 0.15s; cursor: pointer; } .lk:hover { border-color: #3f5039; } .lk:disabled, .lk[disabled] { color: #9c917f; border-color: transparent; cursor: default; } /* ----- case à cocher personnalisée ----- */ .ck { appearance: none; height: 18px; width: 18px; border: 1.5px solid #d6cab2; border-radius: 5px; background: #fff; cursor: pointer; position: relative; transition: 0.15s; } .ck:hover { border-color: #5e7355; } .ck:checked { background: #5e7355; border-color: #5e7355; } .ck:checked::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px; border: solid #fbf8f1; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ----- animations d'entrée ----- */ @keyframes fu { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes fl { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } } .fu { opacity: 0; animation: fu 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } .fl { opacity: 0; animation: fl 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } .d1 { animation-delay: 0.06s; } .d2 { animation-delay: 0.13s; } .d3 { animation-delay: 0.2s; } .d4 { animation-delay: 0.27s; } .d5 { animation-delay: 0.34s; } .d6 { animation-delay: 0.41s; } .d7 { animation-delay: 0.48s; } /* * Rechargement après erreur (classe « no-anim » posée sur par la vue) : * on fige les éléments dans leur état final pour ne pas rejouer l'entrée. */ .no-anim .fu, .no-anim .fl { animation: none; opacity: 1; } /* Accessibilité : aucune animation d'entrée si l'utilisateur préfère un mouvement réduit. */ @media (prefers-reduced-motion: reduce) { .fu, .fl { animation: none; opacity: 1; } }