/* ===================================================================== theme.css — SOCLE VISUEL UNIQUE d'IR-Kelvin.com --------------------------------------------------------------------- UN site, une seule logique. Base, composants, navigation, icônes : identiques dans toutes les divisions. Seul le THÈME (couleur d'accent) change par division — c'est « une nappe de variables ». Usage : (ou "bf", ou futures) Puis on utilise les classes .irk-* (au lieu de styles en dur). Pour un aperçu : /PA/theme_demo.html ===================================================================== */ /* ---------- JETONS COMMUNS (identiques partout) ---------- */ :root { /* Texte */ --txt: #18191b; --txt-2: #5c5e62; --txt-3: #8e9095; /* Surfaces */ --fond: #f3f2f0; --surface: #ffffff; --bordure: #e6e4e1; --fonce: #2c3e50; /* barres, titres de carte */ /* Marque (partagée) */ --marque: #ed6a1a; /* orange IR-Kelvin */ --marque-pale:#fbeae0; /* États */ --succes: #27ae60; --danger: #e74c3c; --danger-2: #c0392b; --avert: #f39c12; /* Formes */ --rayon: 8px; --rayon-sm: 6px; --rayon-lg: 12px; --ombre: 0 2px 6px rgba(0,0,0,.08); --ombre-lg: 0 4px 16px rgba(0,0,0,.18); --espace: 14px; /* ACCENT = variable de thème (défaut : PA). Voir surcharges plus bas. */ --accent: var(--marque); --accent-txt: #ffffff; } /* ---------- THÈMES PAR DIVISION (la seule chose qui change) ---------- */ :root[data-division="pa"], .theme-pa { --accent: #ed6a1a; } /* PA : orange marque */ :root[data-division="bf"], .theme-bf { --accent: #c2410c; } /* BF : orange brûlé */ :root[data-division="ind"], .theme-ind { --accent: #1e8449; } /* Industriel : vert */ /* ---------- COMPOSANTS (mêmes partout, habillés par les jetons) ---------- */ .irk-retour { display: inline-block; margin: 12px 14px 6px; color: var(--accent); text-decoration: none; font-weight: bold; font-size: 14px; } .irk-retour:hover { text-decoration: underline; } .irk-card { background: var(--surface); border-radius: var(--rayon-lg); padding: 18px; box-shadow: var(--ombre); margin-bottom: var(--espace); } .irk-card-titre { font-size: 14px; font-weight: bold; letter-spacing: .5px; color: #fff; background: var(--fonce); padding: 8px 12px; border-radius: var(--rayon) var(--rayon) 0 0; margin: -18px -18px 14px; } .irk-btn { display: inline-block; border: 0; border-radius: var(--rayon); cursor: pointer; padding: 10px 18px; font-weight: bold; font-size: 14px; text-decoration: none; background: var(--accent); color: var(--accent-txt); line-height: 1.2; } .irk-btn:hover { filter: brightness(.94); } .irk-btn-2 { background: var(--surface); color: var(--txt); border: 1px solid var(--bordure); } .irk-btn-danger { background: var(--danger-2); color: #fff; } .irk-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: bold; background: var(--marque-pale); color: var(--accent); } .irk-badge-succes { background: #eafaf1; color: var(--succes); } .irk-badge-danger { background: #fdedec; color: var(--danger-2); } .irk-badge-gris { background: #ecf0f1; color: var(--txt-2); } .irk h1, .irk h2 { color: var(--txt); } .irk a { color: var(--accent); } .irk-table { width: 100%; border-collapse: collapse; font-size: 14px; } .irk-table th { text-align: left; color: var(--txt-2); border-bottom: 2px solid var(--bordure); padding: 8px; } .irk-table td { border-bottom: 1px solid var(--bordure); padding: 8px; } .irk-table tr:hover td { background: var(--fond); } .irk-input, .irk textarea, .irk select { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--bordure); border-radius: var(--rayon); font-size: 14px; color: var(--txt); background: var(--surface); } .irk-input:focus, .irk textarea:focus, .irk select:focus { outline: none; border-color: var(--accent); } /* ---------- DISPOSITION STANDARD (un cadre de contenu unique) ---------- Contenu centré, largeur constante → même disposition partout, et sur grand écran on reste dans une zone confortable (pas à se balader). */ .irk-page { max-width: 1400px; /* aligné sur PA, la référence */ margin: 0 auto; padding: 20px 24px; box-sizing: border-box; } .irk-page--large { max-width: 1700px; } /* pages à tableaux larges */