/* ============================================================
SCOLIAGES — Design system partagé
Chargé par TOUTES les pages via
Doit être chargé APRÈS le script Tailwind CDN + tailwind-config.js
============================================================ */
/* Polices Fraunces/Inter chargées via dans le
de chaque page (pas via @import ici) : le navigateur peut alors les
découvrir et les charger en parallèle du CSS, au lieu d'attendre que ce
fichier soit entièrement téléchargé et parsé avant de savoir qu'il faut
aller chercher les polices. Meilleur FCP/LCP sur connexion lente. */
* { scroll-behavior: smooth; }
html, body { background: #FFFFFF; }
html, body { overflow-x: hidden; } /* jamais de scroll horizontal accidentel — body aussi, pas juste html, sinon les éléments position:fixed y échappent */
body { font-family: 'Inter', sans-serif; color: #10192E; antialiased; }
h1, h2, h3, .display { font-family: 'Fraunces', serif; }
input[type="checkbox"], input[type="radio"] { accent-color: #B8902E; }
/* Chiffres financiers toujours alignés en colonnes */
.tnum { font-variant-numeric: tabular-nums; }
/* Focus clavier visible partout (accessibilité) */
a, button, input, select, textarea { transition: all .18s ease; }
:focus-visible { outline: 2px solid #B8902E; outline-offset: 3px; border-radius: 4px; }
/* Boutons */
.btn-gold { background: #B8902E; color: #fff; }
.btn-gold:hover { background: #8F6D1F; }
.btn-gold:disabled { opacity: .55; cursor: not-allowed; }
.btn-ghost { background: transparent; color: #10192E; border: 1px solid #E7E5DF; }
.btn-ghost:hover { background: #F5F4F0; }
.btn-dark { background: #10192E; color: #fff; }
.btn-dark:hover { background: #1c2942; }
/* Icônes ligne, cohérentes sur tout le site (jamais d'image raster pour les icônes) */
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* Sceau — élément signature de la marque : petite rotation "tampon" à l'apparition */
@keyframes stampIn {
0% { transform: scale(1.55) rotate(-20deg); opacity: 0; }
55% { transform: scale(0.94) rotate(5deg); opacity: 1; }
100% { transform: scale(1) rotate(-8deg); opacity: 1; }
}
.seal-stamp { animation: stampIn .9s cubic-bezier(.2,.8,.2,1) .35s both; }
/* Révélation douce au scroll */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; }
.reveal.in { animation: fadeUp .7s ease-out both; }
/* Spinner de chargement (boutons async) */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
.spinner-dark { border: 2px solid rgba(16,25,46,.2); border-top-color: #10192E; }
/* Toast de confirmation */
#toast-root { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: #10192E; color: #fff; font-size: 13.5px; font-weight: 500; padding: 10px 18px; border-radius: 999px; box-shadow: 0 10px 30px -8px rgba(16,25,46,.5); opacity: 0; transform: translateY(8px); animation: toastIn .25s ease forwards; }
@keyframes toastIn { to { opacity: 1; transform: translateY(0); } }
/* Navigation latérale (app interne) */
.nav-link { display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem; border-radius: .65rem; color: rgba(255,255,255,.68); font-size: 14px; font-weight: 500; border-left: 2px solid transparent; }
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link.active { background: rgba(184,144,46,.16); color: #fff; border-left: 2px solid #B8902E; }
/* Onglets (paramètres, ton de relance) */
.tab-btn { font-size: 13.5px; font-weight: 500; padding: .55rem 1rem; border-radius: 999px; color: #4A5268; }
.tab-btn.active { background: #10192E; color: #fff; }
/* Champs de formulaire */
.field-label { display: block; font-size: 13px; font-weight: 500; color: #4A5268; margin-bottom: .4rem; }
.field-input { width: 100%; border: 1px solid #E7E5DF; border-radius: .65rem; padding: .65rem .85rem; font-size: 14.5px; background: #fff; }
.field-input:focus { outline: none; border-color: #B8902E; box-shadow: 0 0 0 3px rgba(184,144,46,.15); }
.field-input:disabled { background: #F5F4F0; color: #4A5268; cursor: not-allowed; }
.field-error { font-size: 12.5px; color: #B0413E; margin-top: .35rem; }
/* Badges de statut */
.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: 12px; font-weight: 500; padding: .3rem .65rem; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
.seal-stamp, .reveal, .spinner { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* Ombre de l'en-tête sticky au scroll */
#header-bar.scrolled, #app-topbar.scrolled { box-shadow: 0 1px 0 0 #E7E5DF; }