/* ══════════ AGENCE 402 · Intranet formation ══════════ Complète styles.css (mêmes tokens). */ /* ── Pages intranet : en-tête resserré ── Les espacements généreux du site vitrine laissent un grand vide sur ces pages outils ; on les réduit via la classe posée sur . */ .intranet .page-header { padding-bottom: var(--sp-xs); } .intranet .page-header .section-lead { margin-bottom: var(--sp-xs); } .intranet .page-header .intra-actions { margin-bottom: 0; } .intranet main .section-sm { padding-top: var(--sp-sm); } .intranet main .section-label { margin-bottom: var(--sp-sm); } .intranet main .buzzer-scene { padding-top: var(--sp-sm); } /* ── Boutons d'accès sur la page Formations ── */ .intranet-access { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-bottom: var(--sp-lg); } /* ── Groupes & sections ── */ .intra-groupe { margin-bottom: var(--sp-2xl); } .intra-groupe .section-label { margin-bottom: var(--sp-md); } .intra-section { position: relative; margin-bottom: var(--sp-md); } .intra-carte { padding: var(--sp-lg); background: var(--ivory-warm); border: 1px solid var(--cream); border-radius: 2px; transition: filter 0.5s var(--ease-out-quart), opacity 0.5s var(--ease-out-quart); } .intra-titre { font-family: 'Cormorant Garamond', serif; font-size: var(--fs-lg); font-weight: 500; color: var(--ink); margin-bottom: var(--sp-xs); } .intra-desc { font-size: var(--fs-base); font-weight: 300; color: var(--ink-muted); margin-bottom: var(--sp-sm); } .intra-liens { list-style: none; display: flex; flex-direction: column; gap: 0.45em; } .intra-lien a { display: inline-flex; align-items: center; gap: 0.45em; color: var(--gold-600); text-decoration: none; font-weight: 400; border-bottom: 1px solid transparent; transition: all 0.3s ease; } .intra-lien a:hover { color: var(--gold-500); border-bottom-color: var(--gold-300); } .intra-lien a svg { width: 13px; height: 13px; } .intra-lien.a-venir { color: var(--stone-200); display: flex; align-items: center; gap: 0.6em; } .badge-a-venir { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone-300); border: 1px dashed var(--stone-100); padding: 0.1em 0.6em; border-radius: 2px; } /* Clé API */ .intra-code { margin-top: var(--sp-sm); display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; background: var(--ink); border-radius: 6px; padding: 0.7em 1em; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-xs); } .intra-code-label { color: rgba(255, 255, 255, 0.45); text-transform: uppercase; letter-spacing: 0.08em; } .intra-code code { color: var(--gold-200); word-break: break-all; flex: 1; min-width: 200px; } .intra-copier { font-family: 'Outfit', sans-serif; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory); background: transparent; border: 1px solid var(--gold-400); padding: 0.35em 1em; cursor: pointer; transition: all 0.3s ease; } .intra-copier:hover { background: var(--gold-500); border-color: var(--gold-500); } /* ── Verrouillage (apprenant) ── */ .intra-section.verrouillee .intra-carte { filter: blur(10px); opacity: 0.55; pointer-events: none; user-select: none; } .intra-verrou { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-xs); text-align: center; padding: var(--sp-md); color: var(--ink-muted); font-size: var(--fs-sm); letter-spacing: 0.03em; } .intra-section.verrouillee .intra-verrou { display: flex; } .intra-verrou svg { width: 26px; height: 26px; color: var(--gold-500); } /* ── Toggle (formateur) ── */ .intra-toggle { display: flex; align-items: center; gap: 0.8em; margin-bottom: 0.5em; } .toggle-btn { position: relative; width: 56px; height: 30px; border-radius: 15px; border: 1px solid var(--stone-100); background: var(--cream); cursor: pointer; transition: all 0.35s var(--ease-out-quart); flex-shrink: 0; } .toggle-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--stone-200); transition: all 0.35s var(--ease-out-quart); } .toggle-btn.actif { background: var(--gold-500); border-color: var(--gold-500); } .toggle-btn.actif .toggle-knob { left: 29px; background: var(--ivory); } .toggle-etat { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-300); } .toggle-etat.visible { color: var(--gold-600); } /* ── Barre d'actions formateur ── */ .intra-actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: center; margin-bottom: var(--sp-xl); } /* ── Sélection de session ── */ .sessions-liste { display: flex; flex-direction: column; gap: var(--sp-md); max-width: 720px; } .session-carte { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-lg); background: var(--ivory-warm); border: 1px solid var(--cream); border-radius: 2px; text-decoration: none; transition: all 0.4s var(--ease-out-expo); } .session-carte:hover { border-color: var(--gold-300); box-shadow: 0 8px 32px rgba(184, 146, 62, 0.08); transform: translateY(-2px); } .session-carte.en-cours { border-color: var(--gold-300); background: var(--gold-100); } .session-infos { flex: 1; } .session-nom { font-family: 'Cormorant Garamond', serif; font-size: var(--fs-xl); font-weight: 500; color: var(--ink); line-height: 1.25; } .session-dates { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-top: 0.3em; } .session-statut { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25em 0.9em; border-radius: 2px; white-space: nowrap; } .session-statut.en-cours { color: var(--gold-700); border: 1px solid var(--gold-400); } .session-statut.terminee { color: var(--stone-300); border: 1px dashed var(--stone-100); } .session-carte svg { width: 16px; height: 16px; color: var(--gold-500); flex-shrink: 0; } /* ── Login ── */ .login-carte { max-width: 440px; padding: var(--sp-xl); background: var(--ivory-warm); border: 1px solid var(--cream); border-radius: 2px; } .login-session { font-family: 'Cormorant Garamond', serif; font-size: var(--fs-xl); font-weight: 500; color: var(--ink); margin-bottom: 0.2em; } .login-dates { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--sp-md); } .login-champ { width: 100%; font-family: 'Outfit', sans-serif; font-size: var(--fs-base); font-weight: 300; color: var(--ink); background: var(--ivory); border: 1px solid var(--gold-200); border-radius: 2px; padding: 0.7em 1em; margin-bottom: var(--sp-sm); outline: none; transition: border-color 0.3s ease; } .login-champ:focus { border-color: var(--gold-500); } .login-erreur { font-size: var(--fs-sm); color: #A2442F; min-height: 1.5em; margin-top: var(--sp-xs); } /* ── Buzzer (Cyber Champion) ── */ .buzzer-scene { display: flex; flex-direction: column; align-items: center; gap: var(--sp-lg); padding: var(--sp-xl) 0 var(--sp-2xl); text-align: center; } .buzzer-nom { font-family: 'Outfit', sans-serif; font-size: var(--fs-md); font-weight: 300; color: var(--ink); background: var(--ivory-warm); border: 1px solid var(--gold-200); border-radius: 2px; padding: 0.6em 1.2em; text-align: center; width: min(320px, 90%); outline: none; transition: border-color 0.3s ease; } .buzzer-nom:focus { border-color: var(--gold-500); } .buzzer-rond { width: 240px; height: 240px; border-radius: 50%; border: none; cursor: pointer; background: radial-gradient(circle at 35% 30%, var(--gold-300), var(--gold-500) 60%, var(--gold-600)); color: var(--ivory); font-family: 'Outfit', sans-serif; font-size: var(--fs-lg); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 10px 40px rgba(184, 146, 62, 0.35), inset 0 -8px 20px rgba(125, 95, 36, 0.4); transition: all 0.15s ease; } .buzzer-rond:hover { transform: translateY(-2px); } .buzzer-rond:active, .buzzer-rond.presse { transform: translateY(4px) scale(0.97); box-shadow: 0 3px 14px rgba(184, 146, 62, 0.3); } .buzzer-rond:disabled { background: radial-gradient(circle at 35% 30%, var(--stone-100), var(--stone-200)); box-shadow: none; cursor: default; transform: none; } .buzzer-statut { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-sm); letter-spacing: 0.05em; color: var(--ink-muted); min-height: 1.6em; } .buzzer-statut strong { color: var(--gold-600); } /* ── Classement des buzz ── */ .buzz-liste { list-style: none; width: min(560px, 100%); margin: 0 auto; } .buzz-liste li { display: flex; align-items: baseline; gap: var(--sp-sm); padding: 0.7em 1em; border-bottom: 1px solid var(--cream); font-size: var(--fs-md); } .buzz-liste li:first-child { background: var(--gold-100); border: 1px solid var(--gold-300); border-radius: 2px; font-weight: 500; } .buzz-ordre { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-sm); color: var(--gold-600); width: 2em; } .buzz-nom { flex: 1; text-align: left; } .buzz-delta { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-xs); color: var(--stone-300); } .buzz-vide { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-sm); color: var(--stone-300); padding: var(--sp-lg); border: 1px dashed var(--stone-100); border-radius: 2px; text-align: center; } @media (max-width: 640px) { .buzzer-rond { width: 200px; height: 200px; } }