/* Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* =========================
FONTS — Nohemi (titres) & Ballinger (texte)
========================= */
/* ===== Nohemi (WOFF) — toutes les graisses ===== */
@font-face {
font-family: "Nohemi";
src: url("/fonts/nohemi/Nohemi-Thin-BF6438cc57e2011.woff") format("woff");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Nohemi";
src: url("/fonts/nohemi/Nohemi-ExtraLight-BF6438cc581502c.woff") format("woff");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Nohemi";
src: url("/fonts/nohemi/Nohemi-Light-BF6438cc5702321.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Nohemi";
src: url("/fonts/nohemi/Nohemi-Regular-BF6438cc579d934.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Nohemi";
src: url("/fonts/nohemi/Nohemi-Medium-BF6438cc57ddecd.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Nohemi";
src: url("/fonts/nohemi/Nohemi-SemiBold-BF6438cc57db2ff.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Nohemi";
src: url("/fonts/nohemi/Nohemi-Bold-BF6438cc577b524.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Nohemi";
src: url("/fonts/nohemi/Nohemi-ExtraBold-BF6438cc5761ae2.woff") format("woff");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Nohemi";
src: url("/fonts/nohemi/Nohemi-Black-BF6438cc565e67b.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face{font-family:"Ballinger Condensed";src:url("/fonts/ballinger/BallingerCondensed-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Ballinger Condensed";src:url("/fonts/ballinger/BallingerCondensed-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Ballinger Condensed";src:url("/fonts/ballinger/BallingerCondensed-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Ballinger Condensed";src:url("/fonts/ballinger/BallingerCondensed-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Ballinger Condensed";src:url("/fonts/ballinger/BallingerCondensed-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
/* =========================
DESIGN TOKENS
========================= */
:root{
--font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
/* Texte courant : Ballinger si dispo (ou retombe sur system) */
--font-text: "Ballinger Condensed", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
/* Titres : Nohemi */
--font-heading: "Nohemi", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--principal: #fd526d;
--secondaire: #C40C3D;
--tertiaire: #2C2C2C;
--bg: #f5f8fa;
--surface: #FFFFFF;
--border: #E6E6E6;
--muted: #6B7280;
--text: #1F2937;
--success-bg:#E6F9EC; --success:#227D3C; --success-br:#A8E5B4;
--error-bg: #FDECEA; --error: #B00020; --error-br: #F5C2C7;
--info-bg: #EEF2FF; --info: #3730A3; --info-br: #CBD5FF;
--radius: 10px;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(0,0,0,.06);
--shadow-md: 0 6px 12px rgba(0,0,0,.12);
--focus: 0 0 0 3px rgba(251,83,115,.25);
--header-h: 72px; /* hauteur approximative du header */
/* Panels & tiles */
--panel-radius: 14px;
--panel-border: rgba(15,23,42,.08);
--panel-bg: linear-gradient(135deg,#ffffff 0%,#f6f8ff 100%);
--panel-bg-accent: linear-gradient(135deg,#fff0f4 0%,#ffe4eb 100%);
--panel-shadow: 0 18px 40px rgba(15,23,42,.08);
--tile-bg: linear-gradient(140deg, rgba(255,255,255,.98), rgba(247,250,255,.94));
--tile-hover-bg: linear-gradient(140deg,#ffffff,#ffe9ef 90%);
--tile-active-bg: linear-gradient(140deg,#fff0f4,#ffe0e8 90%);
--tile-shadow: 0 16px 32px rgba(15,23,42,.08);
--tile-icon-soft: rgba(253,82,109,.12);
--tile-icon-strong: rgba(253,82,109,.24);
}
/* =========================
RESET + BASE
========================= */
*,
*::before,
*::after{ box-sizing: border-box; font-family: var(--font-text); }
html, body{ height: 100%; width: 100%; }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body{
margin: 0; color: var(--text); background: var(--bg);
line-height: 1.45; letter-spacing: .2px;
overflow-x: hidden;
}
img, video, svg{ max-width: 100%; }
* { min-width: 0; }
/* Typo */
/* Titres et éléments d’en-tête en Nohemi */
h1,h2,h3,.site-title,.news-title,.intra-title,.bday-heading{
font-family: var(--font-heading);
}
h1,h2,h3{ margin: 0 0 .5rem; color: var(--tertiaire); font-weight: 600; text-transform: none; }
h1{ font-size: 1.75rem; } h2{ font-size: 1.375rem; } h3{ font-size: 1.125rem; }
h1 sup {font-size: 55%; font-family: var(--font-heading);}
a{ color: var(--principal); text-decoration: none; font-weight: 500; }
a:focus-visible{ outline: none; box-shadow: var(--focus); border-radius: 6px; }
/* Utilitaires */
.small{ font-size: .9rem; color: var(--muted); }
.a-left{ text-align:left!important; } .a-center{ text-align:center!important; } .a-right{ text-align:right!important; }
.disable-btn{ opacity:.6; cursor:not-allowed; }
.visually-hidden{
position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
white-space:nowrap; border:0; padding:0; margin:-1px;
}
.name {font-family: var(--font-heading); font-weight: 400;}
/* Layout générique */
.page-wrap{ min-height: 100vh; display: flex; flex-direction: column; }
.result-wrapper{ width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 20px; flex: 1; }
.container{ max-width: 1100px; margin: 24px auto; padding: 0 16px; }
/* =========================
LOGIN — plein écran centré (sans entête)
========================= */
body:has(.auth-main){
min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center;
gap: 16px; padding: 20px; background: var(--bg);
}
/* =========================
Shortcuts builder
========================= */
.shortcut-list .shortcut-item{
display:flex;
gap:12px;
align-items:flex-start;
padding:12px 14px;
border:1px solid var(--border);
border-radius:12px;
margin-bottom:10px;
background:#fff;
}
.shortcut-fields{
flex:1;
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:flex-end;
}
.shortcut-field{
flex:1 1 200px;
min-width:180px;
}
.shortcut-field--url{
flex:2 1 280px;
}
.shortcut-field--icon{
flex:1 1 240px;
min-width:220px;
}
.shortcut-field--visible{
flex:0 0 auto;
display:flex;
align-items:flex-end;
}
.shortcut-icon-picker{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
}
.shortcut-file-trigger{
position:relative;
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 14px;
border:1px solid var(--border);
border-radius:10px;
cursor:pointer;
font-size:13px;
background:#f8fafc;
color:#333;
}
.shortcut-file-trigger input{
position:absolute;
inset:0;
opacity:0;
cursor:pointer;
}
.shortcut-thumb-wrap{
width:46px;
height:46px;
border:1px dashed var(--border);
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
background:#f7f7f9;
}
.shortcut-thumb{
max-width:34px;
max-height:34px;
object-fit:contain;
}
.shortcut-thumb-placeholder{
font-size:11px;
color:var(--muted);
text-align:center;
line-height:1.2;
}
body:has(.auth-main) > img{
width: clamp(140px, 24vw, 220px); height: auto; display: block;
filter: drop-shadow(0 1px 1px rgba(0,0,0,.06));
}
body:has(.auth-main) .auth-main{ margin: 0; padding: 0; width: 100%; max-width: 720px; }
body:has(.auth-main) .auth-card{ width: 100%; max-width: 520px; }
body:has(.auth-main) .auth-card form{
margin: 0 !important; box-shadow: none !important; background: transparent !important;
}
/* =========================
HEADER (commun)
========================= */
.main-header{
background: var(--surface);
position: sticky; top: 0; z-index: 1000;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.header-container{
max-width: 1440px; margin: 0 auto; padding: 8px 30px;
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.header-left,.header-right{ display:flex; align-items:center; gap:30px; flex-wrap: wrap; }
.logo{ height: 44px; display:block; }
.site-title{ font-size: 44px; font-weight: 700; color: var(--tertiaire); margin: 0; padding-top: 8px; }
.img-header {
background-image: url(../images/header-lineup.jpg);
height: 300px;
background-size: cover;
background-position: center;
}
.profile-header {
display: flex;
max-width: 1440px;
margin: 0px auto;
align-content: flex-end;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-end;
height: 100%;
padding: 30px;
}
.identity-header {
color: #FFF;
background-color: rgba(0,0,0,0.6);
padding: 20px 30px 20px 60px;
margin: 17px -50px;
border-radius: 20px;
z-index: 0;
}
.identity-header h1 {
margin: 0 0 4px;
font-size: 22px;
font-weight: 700;
}
.subtitle-header {
color: #FFF;
}
/* Bouton burger (affiché uniquement < 880px) */
.sidebar-toggle{
display: none; appearance: none; border: 1px solid var(--border);
background: #fff; color: var(--tertiaire);
padding: 8px 10px; border-radius: var(--radius); font-weight: 700; line-height: 1; cursor: pointer;
}
.sidebar-toggle:focus-visible{ outline: none; box-shadow: var(--focus); }
@media (max-width: 880px){
.sidebar-toggle{ display: inline-flex; align-items: center; height: 40px; background-color: #FFF !important; }
.sidebar-toggle .bar{ width: 18px; height: 2px; background: currentColor; display:block; position:relative; }
.sidebar-toggle .bar::before, .sidebar-toggle .bar::after{
content:""; position:absolute; left:0; right:0; height:2px; background: currentColor;
}
.sidebar-toggle .bar::before{ top:-6px; } .sidebar-toggle .bar::after{ top: 6px; }
}
/* =========================
BOUTONS
========================= */
.container-button{ margin-top: 20px; }
.container-button .small { margin: 0 10px;}
button, .btn{
appearance: none; border: 0; background: var(--principal); color: #fff;
padding: 12px 20px; font-size: 14px; font-weight: 500; border-radius: var(--radius);
box-shadow: var(--shadow-sm); cursor: pointer;
transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
display:inline-flex; align-items:center; gap:8px;
}
button:hover,.btn:hover{ background: var(--secondaire); transform: translateY(-1px); }
button:active,.btn:active{ transform: translateY(0); }
button:disabled,.btn:disabled{ opacity: .6; cursor: not-allowed; transform:none; }
button:focus-visible,.btn:focus-visible{ outline: none; box-shadow: var(--focus); }
.btn-secondary{
display:inline-flex; align-items:center; justify-content:center;
padding:12px 20px; font-size:14px; font-weight:500; border-radius: var(--radius);
background:#EDEDED; color:#333; box-shadow: var(--shadow-sm);
transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn-secondary:hover{ background:#DCDCDC; color:#111; transform: translateY(-1px); }
.btn-secondary:active{ transform: translateY(0); }
.btn-secondary:focus-visible{ outline:none; box-shadow: var(--focus); }
.btn-primary{
background: var(--principal);
color:#fff;
box-shadow: var(--shadow-sm);
}
.btn-primary:hover{ background: var(--secondaire); }
.btn-outline{
background: #fff;
color: #374151;
border: 1px solid #cbd5e1;
box-shadow: none;
}
.btn-outline:hover{ background: #f3f4f6; color: #111; transform:none; }
.btn-ghost{
background: transparent;
color: var(--principal);
padding: 10px 14px;
box-shadow: none;
}
.btn-ghost:hover{ background: rgba(253,82,109,0.08); color: var(--secondaire); transform:none; }
.btn-accent{
background: #374151;
color:#fff;
box-shadow: var(--shadow-sm);
}
.btn-accent:hover{
background: #1f2937;
transform: translateY(-1px);
}
.btn-ico{
display:inline-flex; align-items:center; justify-content:center;
width:18px; height:18px;
}
.btn-ico svg{ display:block; }
.btn-link{ font-size: 14px; text-decoration: underline; }
.link-back, .back-link {font-size: .9rem;}
/* =========================
FORMULAIRES
========================= */
form{
background: var(--surface);
padding: 24px; margin: 24px auto; width: 100%; max-width: 640px;
border-radius: var(--radius);
box-shadow: var(--shadow-md);
}
label{ display:block; margin: 10px 0 6px; font-weight: 600; color:#111; }
input[type="text"], input[type="email"], input[type="password"],
input[type="file"], input[type="date"], input[type="number"], input[type="datetime-local"], input[type="time"], select, textarea{
width: 100%; padding: 12px 14px; font-size: 14px;
border: 1px solid var(--border); border-radius: var(--radius); background: #fff;
outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input:focus, select:focus, textarea:focus{ border-color: var(--principal); box-shadow: var(--focus); }
input[readonly]{ background:#FAFAFA; color:#777; }
select{
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px; padding-right: 36px;
}
/* Formulaires plats */
.form-plain{ background: transparent!important; box-shadow:none!important; padding:0!important; margin:16px 0 0!important; border:0!important; width:100%!important; max-width:none!important; }
.form-flat { background: transparent!important; box-shadow:none!important; padding:0!important; margin:16px 0 0!important; }
.form-sup { background: transparent!important; box-shadow:none!important; padding:0!important; margin:0!important; }
/* =========================
MESSAGES
========================= */
.message{ max-width: 100%; margin: 16px auto; padding: 12px 16px; text-align: center; border-radius: var(--radius); box-shadow: var(--shadow-sm); font-size: 15px; }
.message-success{ background: var(--success-bg); color: var(--success); border: 1px solid var(--success-br); }
.message-error{ background: var(--error-bg); color: var(--error); border: 1px solid var(--error-br); }
.message-info{ background: var(--info-bg); color: var(--info); border: 1px solid var(--info-br); width: 100%; }
/* Confirm modal */
.confirm-modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.55); z-index:2000; transition:opacity .2s ease; opacity:0; pointer-events:none; }
.confirm-modal.is-visible{ opacity:1; pointer-events:auto; }
.confirm-modal[hidden]{ display:none; }
.confirm-dialog{ background:#fff; border-radius:20px; width:100%; max-width:420px; padding:28px 30px; text-align:center; box-shadow:0 25px 50px rgba(15,23,42,.2); position:relative; }
.confirm-icon{ width:64px; height:64px; border-radius:18px; background:rgba(253,82,109,.08); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.confirm-dialog h3{ margin:0 0 10px; font-size:20px; color:#111; }
.confirm-dialog p{ margin:0 0 18px; color:#475467; font-size:15px; }
.confirm-actions{ display:flex; gap:12px; justify-content:center; }
.confirm-modal .btn-secondary, .confirm-modal .btn-danger{ min-width:120px; }
/* =========================
CARTES / SECTIONS
========================= */
.section{
background: var(--surface); border-radius: var(--panel-radius); padding: 28px;
box-shadow: var(--shadow-sm); margin-bottom: 24px;
border: 1px solid var(--panel-border);
}
.section h2{ padding: 10px 0; margin-bottom: 16px; }
.section-narrow{ max-width: 520px; margin: 0 auto; }
.section-narrow .message{ max-width: none; margin-left: 0; margin-right: 0; }
/* Compat v1 */
.card{ background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:var(--panel-radius); box-shadow: var(--shadow-sm); padding:16px; margin-bottom:16px; }
.header{ display:flex; align-items:center; gap:16px; }
/* =========================
TABLES
========================= */
.table-container{ background: var(--panel-bg); border-radius: var(--panel-radius); padding: 28px; margin: 24px auto; width: 100%; max-width: 1440px; box-shadow: var(--shadow-sm); overflow-x:auto; border:1px solid var(--panel-border); }
table{ width:100%; border-collapse: collapse; table-layout: fixed; }
th, td{ padding: 12px; border-bottom: 1px solid var(--border); text-align: left; word-wrap: break-word; }
th{ background: #FFF; color:#555; font-weight: 700; }
tr:hover td{ background: #FAFAFF; }
.sub-table th{ background: #F6F6F6; color: var(--principal); padding: 8px; }
.table-compact{
width:100%;
border-collapse:collapse;
}
.table-compact th,
.table-compact td{
padding:11px 12px;
border-top:1px solid #f1f5f9;
text-align:left;
vertical-align:middle;
font-size:14px;
color:#0f172a;
background:#fff;
}
.table-compact thead th{
border-top:0;
background:#f8fafc;
font-size:12px;
text-transform:uppercase;
letter-spacing:.08em;
color:#94a3b8;
}
.table-compact tbody tr:hover td{
background:#f9fafb;
}
/* =========================
OTP + Divers
========================= */
.otp-grid{ display: grid; grid-template-columns: repeat(6, 56px); gap: 10px; justify-content: center; margin: 10px 0; }
.otp-grid .otp{
height: 56px; text-align: center; font-size: 22px; font-weight: 700;
border: 1px solid var(--border); border-radius: var(--radius);
}
.otp-grid .otp:focus{ box-shadow: var(--focus); border-color: var(--principal); }
.count{ font-size: 14px; color: #666; align-self: center; }
#password-rules{ list-style: none; margin: 16px 0; padding: 0; font-size: .95rem; }
#password-rules li{ color: #666; margin: 8px 0; display:flex; align-items:center; }
#password-rules li.valid{ color: #111; }
.check-icon{
width: 18px; height: 18px; border-radius: 50%;
border: 1px solid #bbb; background: #F5F5F5; margin-right: 10px; display:inline-flex; align-items:center; justify-content:center;
}
li.valid .check-icon{ background: #22C55E; border-color: #16A34A; }
li.valid .check-icon::before{
content: ''; width: 12px; height: 12px;
mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17L4.83 12 3.41 13.41 9 19l12-12-1.41-1.41z'/%3E%3C/svg%3E");
mask-size: contain; background: #fff;
}
.strength{ height: 8px; background: #eee; border-radius: var(--radius-pill); overflow: hidden; margin: 10px 0; }
.strength > #strengthBar{ height: 100%; width: 0%; background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e); transition: width .25s ease; }
/* Stepper */
.stepper{ display:flex; align-items:center; gap: 12px; margin-bottom: 12px; }
.stepper .item{ display:flex; align-items:center; gap: 8px; color:#777; }
.stepper .dot{
width: 32px; height: 32px; border-radius: 50%;
border: 2px solid var(--border); background: #fff; display:grid; place-items:center;
font-weight: 700; color:#999;
}
.stepper .item.active .dot{ border-color: var(--principal); color: var(--principal); }
.stepper .sep{ width: 48px; height: 2px; background: #EEE; border-radius: 2px; }
.stepper .label{ font-size: 14px; color: var(--tertiaire); }
/* =========================
MODULES / ICONS
========================= */
.modules, .tools-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap: 20px; }
.module-card{
width: 280px; background:#fff; border:1px solid var(--border); border-radius: var(--radius);
padding: 20px; text-align:center; box-shadow: var(--shadow-md); transition: transform .2s ease, box-shadow .2s ease; position: relative;
}
.module-card:hover{ transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,.15); }
.module-card h3{ font-size: 18px; margin: 8px 0 6px; }
.module-card p{ color:#666; font-size: 14px; margin:0 0 12px; }
.module-card.locked{ opacity:.55; pointer-events:none; }
.module-card.locked::after{
content:"Accès réservé"; position:absolute; top:12px; right:12px;
background:#FFF3F3; color:#B00020; border:1px solid #F5C2C7; border-radius: 999px; font-size:12px; padding:3px 8px;
}
.icon{ display:inline-block; width:24px; height:24px; background-repeat:no-repeat; background-position:center; background-size:contain; }
.i-calendar{ background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='16' rx='2' fill='%23FB5373'/%3E%3Crect x='3' y='8' width='18' height='2' fill='%23ffffff'/%3E%3Crect x='7' y='2' width='2' height='4' fill='%23ffffff'/%3E%3Crect x='15' y='2' width='2' height='4' fill='%23ffffff'/%3E%3C/svg%3E"); }
.i-laptop{ background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='5' width='16' height='10' rx='2' fill='%23FB5373'/%3E%3Crect x='2' y='17' width='20' height='2' rx='1' fill='%23FB5373'/%3E%3Crect x='10' y='18' width='4' height='1' fill='%23ffffff'/%3E%3C/svg%3E"); }
.i-user-plus{ background-image: url("data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiI+Cg08ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCIvPgoNPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cg08ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOS43MDcyNSAyLjQwODdDOSAzLjAzNTY5IDkgNC4xODI1OSA5IDYuNDc2NFYxNy41MjM2QzkgMTkuODE3NCA5IDIwLjk2NDMgOS43MDcyNSAyMS41OTEzQzEwLjQxNDUgMjIuMjE4MyAxMS40OTU1IDIyLjAyOTcgMTMuNjU3NiAyMS42NTI2TDE1Ljk4NjQgMjEuMjQ2NUMxOC4zODA5IDIwLjgyODggMTkuNTc4MSAyMC42MiAyMC4yODkxIDE5Ljc0MTdDMjEgMTguODYzNSAyMSAxNy41OTMzIDIxIDE1LjA1MjlWOC45NDcxMUMyMSA2LjQwNjcxIDIxIDUuMTM2NTIgMjAuMjg5MSA0LjI1ODI2QzE5LjU3ODEgMy4zNzk5OSAxOC4zODA5IDMuMTcxMTggMTUuOTg2NCAyLjc1MzU0TDEzLjY1NzYgMi4zNDczNkMxMS40OTU1IDEuOTcwMjYgMTAuNDE0NSAxLjc4MTcxIDkuNzA3MjUgMi40MDg3Wk0xMiAxMC4xNjg2QzEyLjQxNDIgMTAuMTY4NiAxMi43NSAxMC41MiAxMi43NSAxMC45NTM1VjEzLjA0NjVDMTIuNzUgMTMuNDggMTIuNDE0MiAxMy44MzE0IDEyIDEzLjgzMTRDMTEuNTg1OCAxMy44MzE0IDExLjI1IDEzLjQ4IDExLjI1IDEzLjA0NjVWMTAuOTUzNUMxMS4yNSAxMC41MiAxMS41ODU4IDEwLjE2ODYgMTIgMTAuMTY4NloiIGZpbGw9IiNmZDUyNmQiLz4gPHBhdGggZD0iTTcuNTQ3MTcgNC41QzUuNDg4ODkgNC41MDMgNC40MTU5OSA0LjU0ODI2IDMuNzMyMjMgNS4yMzIwMkMzIDUuOTY0MjUgMyA3LjE0Mjc2IDMgOS40OTk3OVYxNC40OTk4QzMgMTYuODU2OCAzIDE4LjAzNTMgMy43MzIyMyAxOC43Njc2QzQuNDE1OTkgMTkuNDUxMyA1LjQ4ODg5IDE5LjQ5NjYgNy41NDcxNyAxOS40OTk2QzcuNDk5ODUgMTguODc2MyA3LjQ5OTkyIDE4LjE1NTcgNy41MDAwMSAxNy4zNzY4VjYuNjIyN0M3LjQ5OTkyIDUuODQzODggNy40OTk4NSA1LjEyMzMgNy41NDcxNyA0LjVaIiBmaWxsPSIjZmQ1MjZkIi8+IDwvZz4KDTwvc3ZnPg==")}
.i-address-book{ background-image: url("data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyBmaWxsPSIjZmQ1MjZkIiBoZWlnaHQ9IjgwMHB4IiB3aWR0aD0iODAwcHgiIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDE5OC4xNDUgMTk4LjE0NSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+Cg08ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCIvPgoNPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cg08ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGQ9Ik0xOTUuNTM2LDY4LjE4Yy0xLjg5NS0yLjA3OS00LjU3OC0zLjI2NS03LjM5Mi0zLjI2NUgxMGMtMi44MTMsMC01LjQ5NywxLjE4Ni03LjM5MiwzLjI2NXMtMi44MjYsNC44NjEtMi41NjUsNy42NjIgbDkuNTA1LDEwMi4wOTljMC40NzksNS4xNDIsNC43OTMsOS4wNzMsOS45NTcsOS4wNzNoMTU5LjEzNGM1LjE2NCwwLDkuNDc4LTMuOTMyLDkuOTU3LTkuMDczbDkuNTA1LTEwMi4wOTkgQzE5OC4zNjIsNzMuMDQxLDE5Ny40MzEsNzAuMjU5LDE5NS41MzYsNjguMTh6IE0xMzIuNDI2LDE2Ni4wNzNjLTAuMDA3LTAuMDAxLTAuMDEzLTAuMDAxLTAuMDIsMEg2NS43MzljLTUuNTIzLDAtMTAtNC40NzgtMTAtMTAgYzAtMTMuNTgsMTEuMDQ4LTI0LjYyOCwyNC42MjgtMjQuNjI4aDcuMTc3Yy03LjM4MS00LjA3OC0xMi4zOTMtMTEuOTQtMTIuMzkzLTIwLjk1MmMwLTEzLjE5LDEwLjczMS0yMy45MjIsMjMuOTIyLTIzLjkyMiBzMjMuOTIyLDEwLjczMSwyMy45MjIsMjMuOTIyYzAsOS4wMTItNS4wMTIsMTYuODc0LTEyLjM5MywyMC45NTJoNy4xNzdjMTMuMzAzLDAsMjQuMTc2LDEwLjYwMywyNC42MTQsMjMuODAyIGMwLjAyMiwwLjI3MiwwLjAzNCwwLjU0OCwwLjAzNCwwLjgyNkMxNDIuNDI2LDE2MS41OTYsMTM3Ljk0OSwxNjYuMDczLDEzMi40MjYsMTY2LjA3M3ogTTE3OC45MDYsNDYuMjk4YzAsNC4xNDMtMy4zNTgsNy41LTcuNSw3LjUgSDI2LjczOWMtNC4xNDIsMC03LjUtMy4zNTctNy41LTcuNXMzLjM1OC03LjUsNy41LTcuNWgxNDQuNjY3QzE3NS41NDgsMzguNzk4LDE3OC45MDYsNDIuMTU1LDE3OC45MDYsNDYuMjk4eiBNMTU5LjEwNiwxOC42MzEgYzAsNC4xNDMtMy4zNTgsNy41LTcuNSw3LjVINDYuNTM5Yy00LjE0MiwwLTcuNS0zLjM1Ny03LjUtNy41czMuMzU4LTcuNSw3LjUtNy41aDEwNS4wNjYgQzE1NS43NDgsMTEuMTMxLDE1OS4xMDYsMTQuNDg4LDE1OS4xMDYsMTguNjMxeiIvPiA8L2c+Cg08L3N2Zz4=") }
.i-hr{ background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='9' r='3' fill='%23FB5373'/%3E%3Ccircle cx='16' cy='9' r='3' fill='%23FB5373'/%3E%3Cpath d='M3 19c0-2.5 2.5-4.5 5-4.5s5 2 5 4.5' fill='%23FB5373'/%3E%3Cpath d='M11 19c0-2.3 2.1-4.2 4.5-4.2S20 16.7 20 19' fill='%23FB5373'/%3E%3C/svg%3E"); }
.i-help{ background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23FB5373'/%3E%3Cpath d='M11 16h2v2h-2zM12 6a4 4 0 00-4 4h2a2 2 0 114 0c0 2-3 1.75-3 5h2c0-2.5 3-2.5 3-5a4 4 0 00-4-4z' fill='%23ffffff'/%3E%3C/svg%3E"); }
.i-file{ background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h8l4 4v14a2 2 0 01-2 2H6a2 2 0 01-2-2V5a2 2 0 012-2z' fill='%23FB5373'/%3E%3Cpath d='M14 3v5h5' fill='%23ffffff'/%3E%3Crect x='8' y='12' width='8' height='2' fill='%23ffffff'/%3E%3Crect x='8' y='16' width='8' height='2' fill='%23ffffff'/%3E%3C/svg%3E"); }
.i-dashboard{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='8' height='8' rx='2' fill='%23FB5373'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2' fill='%23FB5373'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2' fill='%23FB5373'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2' fill='%23FB5373'/%3E%3C/svg%3E");}
.i-users{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='4' fill='%23FB5373'/%3E%3Ccircle cx='17' cy='10' r='3' fill='%23FB5373'/%3E%3Cpath d='M3 20c0-3.2 3-6 6.5-6S16 16.8 16 20' fill='%23FB5373'/%3E%3Cpath d='M14 20c0-2.4 2.1-4.4 4.5-4.4S23 17.6 23 20' fill='%23FB5373'/%3E%3C/svg%3E");}
.i-docs{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z' fill='%23FB5373'/%3E%3Crect x='7' y='12' width='8' height='2' fill='%23ffffff'/%3E%3Crect x='7' y='16' width='5' height='2' fill='%23ffffff'/%3E%3C/svg%3E");}
.i-leave{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22v-8' stroke='%23FB5373' stroke-width='2' fill='none'/%3E%3Cpath d='M12 10c1.5-3.5 6-4 8-1-3 0-4.5 1-8 1z' fill='%23FB5373'/%3E%3Cpath d='M12 10c-1.5-3.5-6-4-8-1 3 0 4.5 1 8 1z' fill='%23FB5373'/%3E%3Cpath d='M6 22h12' stroke='%23FB5373' stroke-width='2'/%3E%3C/svg%3E");}
.i-buoy{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23FB5373'/%3E%3Ccircle cx='12' cy='12' r='5' fill='%23ffffff'/%3E%3Cpath d='M12 3v4M12 17v4M3 12h4M17 12h4' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");}
.i-faq{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23FB5373'/%3E%3Cpath d='M8.8 9.5a3.2 3.2 0 0 1 6.4 0c0 2.3-3.2 2-3.2 4' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1' fill='%23ffffff'/%3E%3C/svg%3E");}
.i-news{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='%23FB5373'/%3E%3Crect x='6' y='8' width='6' height='4' fill='%23ffffff'/%3E%3Crect x='13' y='8' width='5' height='2' fill='%23ffffff'/%3E%3Crect x='13' y='11' width='5' height='2' fill='%23ffffff'/%3E%3Crect x='6' y='14' width='12' height='2' fill='%23ffffff'/%3E%3C/svg%3E");}
.i-settings{background-image:url("data:image/svg+xml,%3Csvg fill='%23FB5373' width='22px' height='22px' viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke-width='0'%3E%3C/g%3E%3Cg stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg %3E%20%3Cpath d='M1703.534 960c0-41.788-3.84-84.48-11.633-127.172l210.184-182.174-199.454-340.856-265.186 88.433c-66.974-55.567-143.323-99.389-223.85-128.415L1158.932 0h-397.78L706.49 269.704c-81.43 29.138-156.423 72.282-223.962 128.414l-265.073-88.32L18 650.654l210.184 182.174C220.39 875.52 216.55 918.212 216.55 960s3.84 84.48 11.633 127.172L18 1269.346l199.454 340.856 265.186-88.433c66.974 55.567 143.322 99.389 223.85 128.415L761.152 1920h397.779l54.663-269.704c81.318-29.138 156.424-72.282 223.963-128.414l265.073 88.433 199.454-340.856-210.184-182.174c7.793-42.805 11.633-85.497 11.633-127.285m-743.492 395.294c-217.976 0-395.294-177.318-395.294-395.294 0-217.976 177.318-395.294 395.294-395.294 217.977 0 395.294 177.318 395.294 395.294 0 217.976-177.317 395.294-395.294 395.294' fill-rule='evenodd'%3E%3C/path%3E%20%3C/g%3E%3C/svg%3E"); width: 20px!important;}
.i-academy{background-image:url("data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBmaWxsPSIjZmQ1MjZkIj4KDTxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIi8+Cg08ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KDTxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZmlsbD0iI2ZkNTI2ZCIgZD0iTTE1LjA5MCAxMi43OWMwLjIzNS0wLjE4NSAwLjM4NS0wLjQ2OSAwLjM4NS0wLjc4OSAwLTAuMzU4LTAuMTg4LTAuNjcyLTAuNDcxLTAuODQ5bC0wLjAwNC01LjgyMi0xIDAuNjd2NS4xNWMtMC4yODMgMC4xOC0wLjQ2OCAwLjQ5Mi0wLjQ2OCAwLjg0NyAwIDAuMzE2IDAuMTQ3IDAuNTk4IDAuMzc2IDAuNzgybC0wLjM3OCAwLjUwMmMtMC4zMjMgMC40MS0wLjUyMSAwLjkzMS0wLjUzIDEuNDk4bC0wIDEuMjIyaDAuODFjMC4wMDIgMCAwLjAwNCAwIDAuMDA1IDAgMC40MTEgMCAwLjc1Ny0wLjI4MiAwLjg1My0wLjY2NGwwLjMzMS0xLjMzNnYyaDF2LTEuMjFjLTAuMDA5LTAuNTY5LTAuMjA3LTEuMDkwLTAuNTM0LTEuNTA1eiIvPiA8cGF0aCBmaWxsPSIjZmQ1MjZkIiBkPSJNOCAwbC04IDQgOCA1IDgtNS04LTR6Ii8+IDxwYXRoIGZpbGw9IiNmZDUyNmQiIGQ9Ik04IDEwbC01LTMuMzN2MS43MWMwIDAuOTEgMi45NCAzLjYyIDUgMy42MnM1LTIuNzEgNS0zLjYydi0xLjcxeiIvPiA8L2c+Cg08L3N2Zz4="); width: 20px!important;}
.icon.i-globe {
width: 21px; height: 21px; display:inline-block;
background-color: #FB5373;
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.i-links{
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.05025 1.53553C8.03344 0.552348 9.36692 0 10.7574 0C13.6528 0 16 2.34721 16 5.24264C16 6.63308 15.4477 7.96656 14.4645 8.94975L12.4142 11L11 9.58579L13.0503 7.53553C13.6584 6.92742 14 6.10264 14 5.24264C14 3.45178 12.5482 2 10.7574 2C9.89736 2 9.07258 2.34163 8.46447 2.94975L6.41421 5L5 3.58579L7.05025 1.53553Z' fill='%23FB5373'/%3E%3Cpath d='M7.53553 13.0503L9.58579 11L11 12.4142L8.94975 14.4645C7.96656 15.4477 6.63308 16 5.24264 16C2.34721 16 0 13.6528 0 10.7574C0 9.36693 0.552347 8.03344 1.53553 7.05025L3.58579 5L5 6.41421L2.94975 8.46447C2.34163 9.07258 2 9.89736 2 10.7574C2 12.5482 3.45178 14 5.24264 14C6.10264 14 6.92742 13.6584 7.53553 13.0503Z' fill='%23FB5373'/%3E%3Cpath d='M5.70711 11.7071L11.7071 5.70711L10.2929 4.29289L4.29289 10.2929L5.70711 11.7071Z' fill='%23FB5373'/%3E%3C/svg%3E"); width: 20px!important;
}
/* =========================
LIGHTBOX + POPIN
========================= */
.lightbox{ position:fixed; inset:0; background: rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index: 9999; }
.lightbox-content{ width: 90vw; height: 90vh; position: relative; display:flex; align-items:center; justify-content:center; }
.lightbox iframe{ width:100%; height:100%; border:0; border-radius: var(--radius); box-shadow: 0 6px 12px rgba(0,0,0,.3); }
.lightbox .close-btn{
position:absolute; top:-20px; right:-20px; width: 48px; height:48px; border-radius: 50%;
background: var(--secondaire); color:#fff; border:0; font-size: 24px; line-height:48px; cursor:pointer; box-shadow: var(--shadow-md);
}
.popin{
position:fixed; inset:0;
background: rgba(15,23,42,.55);
display:flex; align-items:center; justify-content:center;
z-index:9999;
}
.popin-content{ background:transparent; padding:0; }
.popin[hidden]{ display:none !important; }
.popin-panel{
background:#fff;
border-radius:18px;
width:min(520px,90vw);
position:relative;
box-shadow:0 20px 45px rgba(15,23,42,.25);
overflow:hidden;
padding:0;
}
.popin-panel h3{ margin:0 0 12px; }
.popin-panel p.small{ margin-top:-6px; }
/* Bouton fermer “X” */
.popin-close {
position: absolute;
top: 12px;
right: 12px;
width: 34px;
height: 34px;
border-radius: 999px;
border: 0;
padding: 0;
background: #eef2ff;
color: #111827;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height: 1;
box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
transition:
background 0.18s ease,
transform 0.1s ease,
box-shadow 0.18s ease;
}
/* Icône X générée en CSS (si tu gardes le bouton vide dans le HTML) */
.popin-close::before {
content: "×";
font-size: 30px;
font-weight: 400;
}
/* États hover / active */
.popin-close:hover {
background: #e0e7ff;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
}
.popin-close:active {
transform: translateY(0);
box-shadow: 0 3px 8px rgba(15, 23, 42, 0.18);
}
/* Focus clavier accessible */
.popin-close:focus-visible {
outline: 2px solid #4f46e5;
outline-offset: 2px;
}
.popin-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
padding:24px 28px;
border-bottom:1px solid var(--border,#e5e7eb);
background:linear-gradient(135deg,#fff,rgba(253,82,109,0.05));
}
.popin-header h3{
margin:0;
font-family:var(--font-heading,var(--font-text));
font-size:1.25rem;
color:var(--text,#1f2937);
}
.popin-header p{
margin:4px 0 0;
color:var(--muted,#6b7280);
font-size:.9rem;
}
.popin-body{
padding:24px 28px 28px;
display:flex;
flex-direction:column;
gap:18px;
}
/* Petite anim d'apparition du panneau */
@keyframes popin-fade-in {
from {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
body.modal-open{ overflow:hidden; }
/* -------- Training invite popin -------- */
.training-invite-popin .training-invite-panel{
width:100%;
max-width:560px;
max-height:90vh;
overflow-y:auto;
border-radius:18px;
padding:0;
box-shadow:0 25px 60px rgba(17,24,39,0.2);
}
.training-invite-popin .training-invite{
font-family:var(--font-text,"Ballinger",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif);
display:flex;
flex-direction:column;
height:100%;
margin: 0;
padding: 0;
}
.training-invite__header{
display:flex;
align-items:center;
justify-content:space-between;
padding:24px 28px;
border-bottom:1px solid var(--border,#e5e7eb);
background:linear-gradient(135deg,#fff,rgba(253,82,109,0.05));
}
.training-invite__title{display:flex;align-items:center;gap:12px;}
.training-invite__icon{font-size:1.5rem;}
.training-invite__header h3{
margin:0;
font-family:var(--font-heading,var(--font-text));
font-size:1.25rem;
color:var(--text,#1f2937);
}
.training-invite__header p{
margin:2px 0 0;
color:var(--muted,#6b7280);
font-size:0.9rem;
}
.training-invite__content{padding:24px 28px 0;}
.training-invite__content .section{margin-bottom:24px;}
.training-invite__content .section-title{
font-size:0.75rem;font-weight:600;text-transform:uppercase;
letter-spacing:0.05em;color:var(--muted,#6b7280);margin-bottom:12px;
}
.training-invite__content .radio-group{display:flex;flex-direction:column;gap:10px;}
.training-invite__content .radio-option{
display:flex;align-items:center;gap:12px;padding:14px 16px;
border:2px solid var(--border,#e5e7eb);border-radius:14px;
cursor:pointer;transition:all .2s;background:#fff;
}
.training-invite__content .radio-option:hover:not(.is-disabled){
border-color:rgba(253,82,109,0.35);background:rgba(253,82,109,0.04);
}
.training-invite__content .radio-option.selected{
border-color:var(--principal,#fd526d);
background:linear-gradient(135deg,rgba(253,82,109,0.08),rgba(196,12,61,0.08));
}
.training-invite__content .radio-option.is-disabled{opacity:.45;cursor:not-allowed;}
.training-invite__content .radio-option input{display:none;}
.training-invite__content .radio-custom{
width:20px;height:20px;border:2px solid var(--border,#d1d5db);
border-radius:50%;display:flex;align-items:center;justify-content:center;
transition:all .2s;
}
.training-invite__content .radio-option.selected .radio-custom{
border-color:var(--principal,#fd526d);background:var(--principal,#fd526d);
}
.training-invite__content .radio-custom::after{
content:"";width:8px;height:8px;border-radius:50%;background:#fff;
opacity:0;transform:scale(0.6);transition:all .2s;
}
.training-invite__content .radio-option.selected .radio-custom::after{
opacity:1;transform:scale(1);
}
.training-invite__content .radio-icon{font-size:1.25rem;}
.training-invite__content .radio-label{font-weight:600;color:var(--text,#111827);}
.training-invite__content .radio-desc{font-size:0.85rem;color:var(--muted,#6b7280);}
.training-invite__content .conditional-section{
display:none;margin-bottom:24px;padding:18px;border-radius:14px;
background:#f9fafb;border:1px solid #eef0f4;
}
.training-invite__content .conditional-section.visible{display:block;}
.training-invite__content .search-container{position:relative;margin-bottom:14px;}
.training-invite__content .search-icon{
position:absolute;left:12px;top:50%;transform:translateY(-50%);
color:var(--muted,#9ca3af);
}
.training-invite__content .search-input{
width:100%;padding:12px 12px 12px 40px;border:2px solid var(--border,#e5e7eb);
border-radius:12px;font-size:0.95rem;transition:all .2s;
}
.training-invite__content .search-input:focus{
outline:none;border-color:var(--principal,#fd526d);
box-shadow:0 0 0 3px rgba(253,82,109,0.18);
}
.training-invite__content .chips-container{
display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;
}
.training-invite__content .chips-container:empty{margin:0;}
.training-invite__content .chip{
display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
border-radius:20px;background:var(--principal,#fd526d);color:#fff;font-size:.8rem;
}
.training-invite__content .chip button{
width:18px;height:18px;border:none;border-radius:50%;
background:rgba(255,255,255,0.25);color:#fff;cursor:pointer;padding: 0;
}
.training-invite__content .chip button:hover{background:rgba(255,255,255,0.4);}
.training-invite__content .dropdown{
border:2px solid var(--border,#e5e7eb);border-radius:12px;background:#fff;
max-height:220px;overflow-y:auto;
}
.training-invite__content .dropdown-item{
display:flex;align-items:center;gap:12px;padding:10px 14px;
cursor:pointer;transition:background .2s;
}
.training-invite__content .dropdown-item .checkbox-custom{margin-left:auto;}
.training-invite__content .dropdown-item-info{
flex:1;
min-width:0;
}
.training-invite__content .dropdown-item:hover{background:#f3f4f6;}
.training-invite__content .dropdown-item.selected{background:rgba(253,82,109,0.08);}
.training-invite__content .dropdown-item-icon{
width:34px;height:34px;border-radius:10px;background:rgba(253,82,109,0.1);
display:flex;align-items:center;justify-content:center;font-size:.95rem;
}
.training-invite__content .dropdown-item-name{
font-weight:600;color:var(--text,#111827);font-size:.95rem;
}
.training-invite__content .dropdown-item-meta{font-size:.8rem;color:var(--muted,#6b7280);}
.training-invite__content .checkbox-custom{
width:18px;height:18px;border:2px solid var(--border,#d1d5db);
border-radius:5px;display:flex;align-items:center;justify-content:center;
font-size:.75rem;color:#fff;
}
.training-invite__content .dropdown-item.selected .checkbox-custom{
background:var(--principal,#fd526d);border-color:var(--principal,#fd526d);
}
.training-invite__content .dropdown-item.selected .checkbox-custom::after{content:"✓";}
.training-invite__content .empty-state{
padding:16px;text-align:center;color:var(--muted,#9ca3af);font-size:.85rem;
}
.training-invite__content .summary{
background:linear-gradient(135deg,#fff6f8,#ffe0e8);
border-radius:14px;padding:18px;margin-top:18px;
}
.training-invite__content .summary-title{
font-size:.75rem;font-weight:600;color:var(--secondaire,#c40c3d);margin-bottom:4px;
}
.training-invite__content .summary-text{font-size:.95rem;color:#7c1a2e;}
.training-invite__content .summary-count{font-weight:700;color:var(--principal,#fd526d);}
.training-invite-popin .btn-group{
display:flex;gap:12px;padding:24px 28px;border-top:1px solid var(--border,#e5e7eb);
}
.training-invite-popin .btn-group .btn{
flex:1;border:none;border-radius:12px;padding:14px 18px;
font-weight:600;cursor:pointer;transition:all .2s;font-size:.95rem;
}
.training-invite-popin .btn-secondary{background:#f3f4f6;color:var(--text,#374151);}
.training-invite-popin .btn-secondary:hover{background:#e5e7eb;}
.training-invite-popin .btn-primary{
background:var(--principal,#fd526d);
color:#fff;
box-shadow:var(--shadow-sm);
}
.training-invite-popin .btn-primary:hover:not(:disabled){
background:var(--secondaire,#c40c3d);
transform:translateY(-1px);
box-shadow:var(--shadow-md);
}
.training-invite-popin .btn-primary:disabled{
opacity:.6;
cursor:not-allowed;
}
#sessionModalForm{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
#sessionModalForm .field-row{
display:contents;
}
#sessionModalForm .field{
margin-bottom:0;
}
#sessionModalForm .field,
#sessionModalForm .toolbar-actions{
grid-column:1 / -1;
}
#sessionModalForm .field-row.grid-2:first-of-type .field:nth-child(1){
grid-column:1 / -1;
}
#sessionModalForm .field-row.grid-2:nth-of-type(2) .field:nth-child(2){
grid-column:1 / -1;
}
/* =========================
PROFIL
========================= */
.profile-card{ display:flex; align-items:center; gap:16px; margin-top:30px; }
.profile-avatar{
width:84px; height:84px; border-radius:50%; object-fit:cover;
background:#f0f0f0; border:1px solid #eee; flex:0 0 84px;
}
.profile-meta{ display:grid; gap:6px; }
.profile-name{ margin:0; font-size:22px; font-weight:600; color:var(--tertiaire); text-transform:none; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.chip{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 6px;
border-radius: 999px;
border: 1px solid #d7dfe7;
background: #fff;
font-size: 10px;
text-align: center;
font-weight: 500;
color: #0f172a;
}
.chip.ok{ background:#ecfdf5; color:#065f46; border-color:#bbf7d0; }
.chip.arch{ background:#f3f4f6; color:#374151; border-color:#e5e7eb; }
.chip.warn{ background:#fff7ed; color:#9a3412; border-color:#ffedd5; }
.chip.neutral{ background:#f3f4f6; color:#1f2937; border-color:#e5e7eb; }
.chip-small{
font-size:12px;
padding:4px 8px;
}
.badge{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; border:1px solid #e6e6e6; background:#fafafa; color:#333; }
.badge.ok{ background:#ecfdf5; color:#065f46; border-color:#bbf7d0; }
.badge.arch{ background:#f3f4f6; color:#374151; border-color:#e5e7eb; }
.profile-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.kv{ display:flex; gap:8px; align-items:baseline; margin-bottom: 12px; }
.k{ width:200px; color:#333; font-size:14px; font-weight:600; }
.v{ flex:1; font-size:14px; }
/* =========================
AUTH (login)
========================= */
.auth-main{ max-width: 960px; margin: 40px auto; padding: 0 20px; }
.auth-card{
background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-md);
padding: 24px; width: 100%; max-width: 700px; margin: 0 auto;
}
.auth-title{ margin: 8px 0 6px; }
.auth-wrap{ max-width: 960px; margin: 24px auto; padding: 0 20px; }
.brand{ display:flex; align-items:center; gap:12px; margin: 2px 0 2px; }
.brand img{ height: 44px; }
/*.brand h1{ font-size: 18px; font-weight: 600; color: var(--tertiaire); margin: 0; }*/
/* =========================
HERO Intranet
========================= */
.hero{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.avatar{ width:84px; height:84px; border-radius:50%; object-fit:cover; background:#f0f0f0; border:1px solid #eee; }
footer{ background: var(--principal); color:#fff; text-align:center; padding: 16px 20px; margin-top: 40px; }
/* =========================
INTRANET (scopé)
========================= */
.intranet .intra-hero{
padding: 24px;
border: 0;
border-radius: var(--panel-radius);
background: var(--panel-bg);
box-shadow: var(--panel-shadow);
}
.intranet .intra-hero-inner{ display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.intranet .intra-avatar{ width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background:#f1f1f1; border:1px solid #e9e9e9; }
.intranet .intra-identity { display:block; }
.intranet .intra-identity h1{ margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--tertiaire); }
.intranet .intra-quick{ margin-top: 10px; display:flex; flex-wrap:wrap; gap:10px; }
.intranet .intra-title{ margin: 16px 0 16px; }
.intranet .intra-subtle{ color: var(--muted); font-size: 14px; margin: 2px 0 14px; }
.intranet .intra-tools{ margin: 20px 0; }
.intranet .intra-grid{ display:grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Cartes outils */
.intranet .intra-card{
--acc: var(--principal); --acc-soft:#fff5f7; --acc-border:#ffe3ea; --acc-grad: linear-gradient(90deg, var(--principal), #ff8aa2);
position: relative; display: block; border: 0; border-radius: var(--panel-radius); background: var(--tile-bg);
text-decoration: none; color: inherit; transition: transform .15s ease, background .25s ease; overflow: hidden;
box-shadow: var(--tile-shadow);
}
.intranet .intra-card:hover{
transform: translateY(-3px);
}
.intranet .intra-card.locked{ cursor: not-allowed; opacity: .88; }
.intranet .intra-card.locked:hover{ transform:none; }
.intranet .intra-accent{ height: 4px; background: var(--acc-grad); }
.intranet .intra-content{ padding: 14px 16px 16px; display: grid; grid-template-rows: auto auto 1fr; gap: 8px; border-radius: var(--panel-radius); }
.intranet .intra-icon{
width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
background: var(--acc-soft);
border: 0;
color: var(--acc);
}
.intranet .intra-icon svg{ width: 22px; height: 22px; display:block; color: inherit; }
.intranet .intra-card h3{ margin:0; font-size:18px; font-weight:700; color: var(--tertiaire); }
.intranet .intra-card p{ margin:0; font-size:14px; color:#666; }
.intranet .tag{ position:absolute; top:10px; right:10px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid; background: #fff; letter-spacing:.2px; }
.intranet .tag-admin { border-color:#ffd1dc; color:#B2163B; background:#fff1f5; }
.intranet .tag-public{ border-color:#d6f3de; color:#1a7f44; background:#edfbf1; }
.intranet .lock-badge{ position:absolute; left: 124px; top: 10px; display:inline-flex; gap:6px; align-items:center; padding: 4px 8px; border-radius: 999px; font-size: 12px; background:#fff9fa; border:1px solid #ffe2e8; color:#b11f41; }
.intranet .lock-badge svg{ width:14px; height:14px; }
.intranet .intra-card.accent-pink { --acc:#FB5373; --acc-soft:#fff5f7; --acc-border:#ffe3ea; --acc-grad: linear-gradient(90deg,#FB5373,#ff8aa2); }
.intranet .intra-card.accent-blue { --acc:#3B82F6; --acc-soft:#eef5ff; --acc-border:#dbeafe; --acc-grad: linear-gradient(90deg,#3B82F6,#93C5FD); }
.intranet .intra-card.accent-amber { --acc:#F59E0B; --acc-soft:#fff8eb; --acc-border:#fdecc7; --acc-grad: linear-gradient(90deg,#F59E0B,#FDE68A); }
.intranet .intra-card.accent-teal { --acc:#10B981; --acc-soft:#ecfdf5; --acc-border:#bbf7d0; --acc-grad: linear-gradient(90deg,#10B981,#6EE7B7); }
.intranet .intra-card.accent-violet{ --acc:#8B5CF6; --acc-soft:#f4f2ff; --acc-border:#e9d5ff; --acc-grad: linear-gradient(90deg,#8B5CF6,#C4B5FD); }
.intranet .intra-card.accent-slate { --acc:#64748B; --acc-soft:#f1f5f9; --acc-border:#e2e8f0; --acc-grad: linear-gradient(90deg,#64748B,#94A3B8); }
.intranet .intra-card.accent-slate{
background: var(--panel-bg);
border: 1px solid var(--panel-border);
}
/* Shell (sidebar + contenu) */
.intranet .intra-shell{
max-width: 1440px;
margin: 18px auto 32px;
display: grid;
gap: 16px;
grid-template-columns: minmax(240px, 280px) 1fr;
align-items: start;
}
/* Sidebar (desktop sticky) */
.intranet .intra-sidenav{
position: sticky;
top: calc(var(--header-h) + 12px);
height: calc(100vh - (var(--header-h) + 133px));
max-height: calc(100vh - (var(--header-h) + 24px));
padding: 22px 18px;
border-radius: var(--panel-radius);
border: 1px solid var(--panel-border);
background: var(--surface);
box-shadow: var(--shadow-sm);
color: #0f172a;
overflow:auto;
}
/* Navigation */
/* 1) Liens de 1er niveau uniquement (évite d'attraper le du bloc profil) */
.intranet .intra-nav > a{
display:flex;
align-items:center;
gap:14px;
padding:12px 14px;
border-radius:14px;
margin:4px 0;
font-size:16px;
color:#0f172a;
text-decoration:none;
font-weight:500;
letter-spacing:.03em;
background: var(--tile-bg);
border: 1px solid transparent;
box-shadow: none;
transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.intra-sidenav .nav-section-title{
font-size:.75rem;
font-weight:700;
color:rgba(71,85,105,.9);
text-transform:uppercase;
letter-spacing:.28em;
padding:18px 12px 10px;
margin:0;
}
.intra-sidenav .nav-sep{
border:0;
border-top:1px solid rgba(15,23,42,.08);
margin:12px 0 8px;
}
.intra-sidenav .ext-mark{ opacity:.65; color:rgba(71,85,105,.9); font-size:13px; margin-left:auto; }
/* 2) Bloc profil mobile : caché par défaut */
.intra-mobile-profile{ display:none; }
.intranet .intra-nav a:hover{
transform: translateX(6px);
box-shadow: var(--tile-shadow);
background: var(--tile-hover-bg);
}
.intranet .intra-nav a:focus-visible{
outline:none;
box-shadow: 0 0 0 3px rgba(253,82,109,.22);
}
.intranet .intra-nav a.is-active,
.intranet .intra-nav a[aria-current="page"]{
background: var(--tile-hover-bg);
border: 1px solid transparent;
box-shadow: var(--tile-shadow);
color: var(--tertiaire);
}
.intranet .intra-nav > a .icon{
width:38px;
height:38px;
border-radius:12px;
flex:0 0 38px;
display:inline-flex;
align-items:center;
justify-content:center;
background-color: #fff;
border: 1px solid rgba(15,23,42,.08);
background-repeat:no-repeat;
background-position:center;
background-size:18px;
transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.intranet .intra-nav > a .icon img{
width:18px;
height:18px;
display:block;
object-fit:contain;
}
.intranet .intra-nav > a:hover .icon{
background-color: #fff;
border-color: rgba(253,82,109,.25);
}
.intranet .intra-nav > a.is-active .icon,
.intranet .intra-nav > a[aria-current="page"] .icon{
background-color: var(--tile-icon-strong);
border-color: rgba(253,82,109,.35);
transform: scale(1.03);
}
/* Liens admin verrouillés : visuels + bloquer tout clic */
.intranet .intra-nav a.locked{
opacity:.45;
cursor:not-allowed;
pointer-events:none; /* empêche le clic, le tap et les events */
text-decoration:none;
filter:saturate(.5);
}
/* Si tu utilises une variante non-lien () */
.intranet .intra-nav .nav-locked{
display:flex;
align-items:center;
gap:10px;
padding:16px 12px;
border-radius:var(--radius);
color:#9ca3af;
background:#fafafa;
border:1px dashed #e5e7eb;
cursor:not-allowed;
user-select:none;
}
/* ===== LINKS — accordéon + actions compactes (scopé) ===== */
/* 1) Accordéon */
.links-section details.link-cred{
border:1px solid var(--border); border-radius:var(--panel-radius); background:#fff; overflow:hidden;
}
.links-section details.link-cred + details.link-cred{ margin-top:8px; }
.links-section summary.link-cred-summary{
list-style:none; cursor:pointer; padding:10px 12px;
font-weight:700; display:flex; align-items:center; justify-content:space-between; color:#111;
}
.links-section summary.link-cred-summary::-webkit-details-marker{ display:none; }
.links-section .cred-body{ padding:0 12px 12px; }
/* caret */
.links-section .carret{
width:10px; height:10px;
border-right:2px solid currentColor; border-bottom:2px solid currentColor;
transform:rotate(-45deg); transition:transform .15s ease; margin-left:8px;
}
.links-section details[open] .carret{ transform:rotate(45deg); }
/* 2) Grille credentials -> 1 colonne */
.links-section .kv-grid{
display:grid; grid-template-columns:1fr; gap:6px 0;
background:#fff; border:0; border-radius:var(--panel-radius); padding:12px;
}
.links-section .kv-grid .k{ font-size:12px; font-weight:600; color:#6b7280; }
.links-section .kv-grid .v{ margin-bottom:6px; }
/* 3) Boutons icône “blindés” (visibles malgré le style global button,.btn) */
.links-section .icon-btn{
appearance:none; padding:0 !important; margin:0; line-height:1;
width:30px; height:30px; border-radius:8px;
border:1px solid var(--border) !important;
display:inline-grid; place-items:center;
background:#f5f5f5 !important; color:#333 !important;
box-shadow:none; cursor:pointer;
}
.links-section .icon-btn:hover{ background:#eeeeee !important; color:#111 !important; }
.links-section .icon-btn svg{ width:16px; height:16px; display:block; }
/* 4) Champ mot de passe + actions */
.links-section .ctrl-actions{ display:inline-flex; align-items:center; gap:6px; }
.links-section .pwd-input{
border:1px solid var(--border); border-radius:10px; padding:8px 10px;
max-width:260px; background:#fff;
}
/* 5) Actions carte + bouton “Ouvrir” compact */
.links-section .action-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.links-section .btn-mini{
display:inline-flex; align-items:center; padding:6px 10px;
border-radius:8px; border:1px solid var(--border); background:#fff; color:#111;
font-weight:600; font-size:13px;
}
.links-section .btn-mini.btn-open{ background:var(--principal); border:0; color:#fff; }
/* 6) Identifiant cliquable (feedback de copie) */
.links-section code.copyable{
cursor:copy; background:#f8fafc; border:1px solid var(--border);
padding:4px 6px; border-radius:8px; font-size:13px;
}
.links-section code.copyable.copy-ok{ background:#ecfdf5; border-color:#bbf7d0; }
@media (max-width:640px){
.links-section .kv-grid{ padding:10px; }
}
/* Off-canvas (mobile) */
.sidebar-backdrop{
position: fixed; inset: 0; background: rgba(17,24,39,.48);
z-index: 999; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
@media (max-width: 880px){
.site-title{ font-size: 24px; }
.intranet .intra-shell{ grid-template-columns: 1fr; } /* 1 colonne */
.intranet .intra-sidenav{
position: fixed;
z-index: 1001;
top: 64px;
left: 0;
bottom: 0;
width: 100%;
height: calc(100% - 64px);
max-height: calc(100vh + 11px);
transform: translateX(-105%);
transition: transform .22s cubic-bezier(.2,.7,.2,1);
border-radius: 0;
}
/* ⬇️ AVANT : body.sidebar-open .intranet .intra-sidenav { ... } */
/* ⬇️ APRÈS : on cible le body qui a les deux classes */
body.sidebar-open.intranet .intra-sidenav{ transform: translateX(0); }
body.sidebar-open .sidebar-backdrop{ opacity: 1; visibility: visible; }
/* Quand le menu est ouvert, on anime la “barre” plutôt que le fond */
.sidebar-toggle[aria-expanded="true"] .bar{
background: transparent;
}
.sidebar-toggle[aria-expanded="true"] .bar::before{
transform: translateY(6px) rotate(45deg);
}
.sidebar-toggle[aria-expanded="true"] .bar::after{
transform: translateY(-6px) rotate(-45deg);
}
.sidebar-toggle .bar,
.sidebar-toggle .bar::before,
.sidebar-toggle .bar::after{
transition: transform .2s ease, background .2s ease;
}
/* Profil en haut du menu (mobile only) */
.intra-mobile-profile{
display:flex; padding:14px; margin:6px 10px 16px;
border:1px solid rgba(15,23,42,.08); border-radius:18px; background:#fff;
align-items:center; gap:12px;
}
.intra-mobile-profile a{
display:flex; align-items:center; gap:12px; text-decoration:none; color:#0f172a; width:100%;
}
.intra-mobile-profile img{
width:48px; height:48px; border-radius:14px; object-fit:cover; border:1px solid rgba(15,23,42,.15); flex:0 0 48px;
}
.intra-mobile-profile .name{
font-family: var(--font-heading); font-weight:600; font-size:16px; color:#0f172a;
line-height:1.2;
}
.intra-mobile-profile .sub{
font-size:12px; color:rgba(71,85,105,.85);
}
/* petite séparation visuelle avec le menu */
.intra-divider{
height:1px; background:#eaeaea; margin:8px 6px; border:0;
display:block;
}
.intra-mobile-profile .name{ font-weight:700; color:var(--tertiaire); line-height:1.2; }
.intra-mobile-profile .email{ font-size:12px; color:#6b7280; }
body.sidebar-open .intranet .intra-sidenav{ transform: translateX(0); }
body.sidebar-open .sidebar-backdrop{ opacity: 1; visibility: visible; }
.header-right {display: none!important}
}
/* Deux colonnes contenu */
.intranet .intra-2col{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: normal;margin: 0 auto 10px; }
.intranet .intra-block{
border: 1px solid var(--panel-border);
border-radius: var(--panel-radius);
background: var(--surface);
padding: 26px;
box-shadow: var(--shadow-sm);
}
/* =========================
ACTUALITÉS
========================= */
.intranet .intra-news{ margin: 12px 0 6px; padding: 0; border: 0; background: transparent; }
.intranet .news-strip{
position: relative;
border: 1px solid var(--panel-border);
border-radius: var(--panel-radius);
background: var(--surface);
box-shadow: var(--shadow-sm);
padding: 32px 18px;
overflow: hidden;
}
.intranet .news-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 10px; }
.intranet .news-title{ margin: 0; font-size: 18px; font-weight: 700; color: var(--tertiaire); }
.intranet .news-viewall{ font-weight: 700; font-size: 14px; }
.intranet .news-rail{
display: inline-flex;
gap: 14px;
overflow-x: auto;
padding: 6px 2px 2px;
scroll-snap-type: x proximity;
align-items: flex-start;
justify-items: center;
flex-direction: row;
align-content: flex-start;
justify-content: flex-start;
}
.intranet .news-rail::-webkit-scrollbar{ height: 10px; }
.intranet .news-rail::-webkit-scrollbar-thumb{ background: #e5e7eb; border-radius: 999px; border: 2px solid #f7f7f7; }
.intranet .news-rail::-webkit-scrollbar-track{ background: transparent; }
.intranet .news-card{
--acc: var(--principal); --acc-soft:#fff5f7; --acc-border:#ffe3ea;
scroll-snap-align: start;
border: 1px solid var(--panel-border);
border-radius: var(--panel-radius);
background: var(--surface);
padding: 18px;
display: grid
;
width: 260px;
min-height: 230px;
grid-template-areas:
"tag"
"top"
"img"
"meta"
"text"
"cta";
grid-template-columns: 1fr;
gap: 8px;
transition: transform .15s ease, background .2s ease;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
align-content: flex-start;
}
.intranet .news-img { width: 100%;
max-height: 120px;
border-radius: 16px;
border: 0;
margin-top: 6px;
object-fit: cover;
object-position: top; }
.intranet .news-card:hover{
transform: translateY(-3px);
background: var(--tile-hover-bg);
}
.intranet .news-top{ grid-area: top; display:flex; align-items:center; gap:10px; width:100%; }
.intranet .news-icon{
width: 38px; height: 38px; border-radius: 50%; display:inline-flex; align-items:center; justify-content:center;
background: var(--acc-soft); border: 0; color: var(--acc); flex: 0 0 38px;
}
.intranet .news-icon svg{ width: 22px; height: 22px; display:block; color: inherit; }
.intranet .news-card h3{ margin:0; font-size: 15px; font-weight: 700; color: var(--tertiaire); line-height:1.25; word-break: break-word; flex: 1 1 auto; }
.intranet .news-meta{ grid-area: meta; font-size: 12px; color: #777; }
.intranet .news-text{ grid-area: text; font-size: 14px; color:#555; width:100%; }
.intranet .news-cta{ grid-area: cta; font-weight: 700; font-size: 14px; color: var(--acc); }
.intranet .news-tag{
grid-area: tag; justify-self: end; align-self: start; position: static;
font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
border: 0; background: var(--acc-soft); color: var(--acc);
}
.intranet .news-card.accent-pink { --acc:#FB5373; --acc-soft:#fff5f7; --acc-border:#ffe3ea; }
.intranet .news-card.accent-blue { --acc:#3B82F6; --acc-soft:#eef5ff; --acc-border:#dbeafe; }
.intranet .news-card.accent-amber { --acc:#F59E0B; --acc-soft:#fff8eb; --acc-border:#fdecc7; }
.intranet .news-card.accent-teal { --acc:#10B981; --acc-soft:#ecfdf5; --acc-border:#bbf7d0; }
.intranet .news-card.accent-violet{ --acc:#8B5CF6; --acc-soft:#f4f2ff; --acc-border:#e9d5ff; }
.intranet .news-card.accent-slate { --acc:#64748B; --acc-soft:#f1f5f9; --acc-border:#e2e8f0; }
/* ---- Styles feed (légers, s’appuient sur ta base) ---- */
.news-feed { margin: 20px auto; }
.composer { display:flex; gap:12px; padding:12px; border:1px solid var(--border); border-radius:var(--panel-radius); background:#fff; }
.composer img{ width:40px;height:40px;border-radius:999px; }
.composer textarea{ flex:1; resize:vertical; min-height:68px; }
.post-card{
border:1px solid var(--border); background:#fff; border-radius:var(--panel-radius); box-shadow: var(--shadow-sm);
margin: 16px auto;
overflow: hidden;
}
.post-head{ display:flex; gap:10px; padding:20px; align-items:center; }
.post-ico{ width:36px;height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.post-title{ font-weight:700; margin:0; line-height:1.3; }
.post-meta{ font-size:12px; color:#6b7280; }
.post-body{ padding:0 12px 12px; }
.post-body .excerpt{ color:#374151; margin:12px 0; }
.post-img{ display:block; width:100%; height:auto; object-fit:cover; max-height:420px; }
.post-stats{ padding:8px 12px; color:#6b7280; font-size:13px; }
.comments{ border-top:1px solid var(--border); background:#fafafa; }
.comments .one{ display:flex; gap:8px; padding:10px 12px; }
.comments .one .bubble{ background:#fff; border:1px solid #eef2f7; border-radius:var(--panel-radius); padding:8px 10px; width: 100%; }
.comments .form{ display:flex; background-color: transparent!important; gap:8px; margin: 0!important; max-width: 100%!important; border-radius: 0!important; box-shadow: none!important; padding:10px 12px!important; border-top:1px dashed #e5e7eb!important; }
.comments .form textarea{ flex:1; resize:vertical; min-height:48px; }
.chip-cat{ font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; border:1px solid var(--border); background:#fff; }
.feed-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
@media (max-width: 900px){
.feed-filters .nl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Bloc d’actions sous chaque actu */
.post-actions {
display:flex;
gap:10px;
padding:12px 12px;
border-top:1px solid var(--border);
}
.post-actions .btn-action {
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius: var(--radius);
background:#fafbfc;
border:1px solid var(--border);
color: var(--text);
font-weight:600;
font-size:14px;
cursor:pointer;
transition: background .15s ease, border-color .15s ease, transform .06s ease, color .15s ease;
text-decoration:none;
user-select:none;
}
.post-actions .btn-action:hover {
background:#f3f4f6;
}
.post-actions .btn-action:active {
transform:translateY(1px);
}
.post-actions .btn-action:focus-visible {
outline:none;
box-shadow: var(--focus);
}
/* Icônes SVG : suivent la couleur du texte */
.post-actions .btn-action svg {
width:18px;
height:18px;
display:block;
}
.post-actions .btn-action svg path {
fill: var(--principal);
}
/* Bouton J’aime (cœur rose) */
.post-actions .btn-like { color: var(--text); }
.post-actions .btn-like:hover {
color: var(--principal);
border-color: var(--principal);
background: #fff5f7;
}
/* État liké (ton JS peut ajouter .is-liked ou data-liked="1") */
.post-actions .btn-like.is-liked,
.post-actions .btn-like[data-liked="1"] {
color: var(--principal);
background: #fff5f7;
border-color: #ffe3ea;
}
/* Bouton Commenter */
.post-actions .btn-comment::before {
content:"";
width:18px;
height:18px;
display:block;
background: var(--principal);
-webkit-mask:url('data:image/svg+xml;utf8,') no-repeat center/contain;
mask:url('data:image/svg+xml;utf8,') no-repeat center/contain;
margin-right:4px;
}
.post-actions .btn-comment:hover {
border-color: var(--border);
background:#f7f7f7;
color: var(--tertiaire);
}
/* Petit compteur (likes, commentaires) */
.post-stats {
padding:6px 10px;
color: var(--muted);
font-size:13px;
}
/* Docs */
.doc-type-ico{ width:30px; height:30px; display:inline-block; vertical-align:middle; }
.doc-type-cell{ display:flex; align-items:center; gap:8px; }
.doc-meta{ color:#666; }
/* =========================
WEEK CAL + TODO
========================= */
.intranet .week-cal{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 8px; }
.intranet .day-chip{
background:#f8fafc; border:1px solid #e2e8f0; border-radius:var(--radius); padding:8px; text-align:center;
cursor:pointer; box-shadow: var(--shadow-sm);
}
.intranet .day-chip span{ display:block; font-size:12px; color:#475569; }
.intranet .day-chip strong{ display:block; font-size:18px; line-height:1; color:#111; }
.intranet .day-chip:hover{ background:#f1f5f9; }
.intranet .day-chip.selected{ background:#ffffff; border-color: var(--principal); box-shadow: var(--focus); }
.intranet .task-list{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.intranet .task-list li{
border:1px solid var(--border); background:#fff; border-radius:var(--radius); padding:8px 10px; display:flex; align-items:center; justify-content:space-between;
}
.intranet .task-list li.is-done span{ text-decoration: line-through; color:#777; }
.intranet .task-list li.empty{ border-style:dashed; color:#666; font-style:italic; }
.intranet .todo input[type="text"]{ width:100%; }
.intranet .todo-list{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.intranet .todo-item{
border:1px solid var(--border); background:#fff; border-radius:var(--radius); padding:8px 10px; display:flex; align-items:center; justify-content:space-between;
}
.intranet .todo-item.done span{ text-decoration: line-through; color:#777; }
.intranet .todo-del{ background:#EDEDED; border:0; border-radius:var(--radius); padding:4px 8px; cursor:pointer; line-height:1; }
.intranet .todo-del:hover{ background:#DCDCDC; }
.intranet .todo-list li.empty{ color:#666; font-size: 13px; text-align: center; margin-top: 10px; font-style:italic; }
.ti-desc { color: var(--muted); font-size: 13px; font-weight: 500; }
.task-list label, .todo-list label {
display: flex;
margin: 10px 0 6px;
font-weight: 600;
color: #111;
gap: 10px;
align-content: center;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
/* =========================
ANNIVERSAIRES (léger, hiérarchisé)
========================= */
.intranet .bday-card{
position: relative; border: 1px solid var(--panel-border); border-radius: var(--panel-radius);
background: var(--surface); color: var(--tertiaire); padding: 18px 20px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.intranet .bday-accent{
height: 3px; background: linear-gradient(90deg, var(--principal), var(--secondaire));
border-radius: 999px; margin: -14px -16px 10px; opacity: .5;
}
.intranet .bday-fireworks{ display:none; }
.intranet .bday-heading{
font-weight: 800; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 8px; color: var(--muted);
}
/* Aujourd’hui — mis en avant */
.intranet .bday-today{
border: 1px solid #ffe3ea; background: linear-gradient(180deg, rgba(253,82,109,.05), rgba(253,82,109,.01));
border-radius: var(--panel-radius); padding: 18px; min-height: 187px; text-align: center;
}
.intranet .bday-today .bday-heading{ color: var(--principal); font-size: 14px; text-align: center; }
.intranet .bday-hero{ display:flex; align-items:center; gap:14px; }
.intranet .bday-hero.column{ flex-direction: column; text-align:center; }
.intranet .bday-hero.row{ flex-direction: row; }
.intranet .bday-infos{ display:grid; gap:4px; }
.intranet .bday-name{ font-size:18px; font-weight:700; color: var(--tertiaire); }
.intranet .bday-today .bday-name{ font-size:20px; }
.intranet .bday-meta{ font-size:13px; color:#555; }
/* Avatar anneau */
.intranet .bday-ring{
display:inline-grid; place-items:center; border-radius:50%; padding:3px;
background: conic-gradient(from 90deg, #ffd1dc, #ffe6ea, #ffd1dc);
box-shadow: 0 4px 12px rgba(0,0,0,.08); aspect-ratio: 1 / 1;
}
.intranet .bday-ring--xl{ width:96px; } .intranet .bday-ring--sm{ width:56px; }
.intranet .bday-ring img{
width:100%; height:100%; max-height:94px; max-width:94px; border-radius:50%;
object-fit: cover; background:#f1f1f1; border:2px solid #fff; display:block;aspect-ratio: 1 / 1;
}
/* Prochain — sous-carte discrète */
.intranet .bday-next{
border: 1px solid var(--border); border-radius: var(--radius); margin-top: 8px; padding: 10px 12px; background: #f8fafc;
}
.intranet .bday-next .bday-heading{ color: var(--muted); font-size: 10.5px; letter-spacing: .16em; }
.intranet .bday-next .bday-hero{ gap:10px; }
.intranet .bday-next .bday-name{ font-size:16px; color: var(--tertiaire); }
.intranet .bday-next .bday-meta{ font-size:12px; color:#6b7280; }
/* =========================
Top bar + lien retour
========================= */
.page-bar{
max-width: 1200px; margin: 12px auto 0; padding: 0;
display: flex; align-items: center; justify-content: flex-start;
}
.back-link{
display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:var(--radius);
font-size:11px; text-transform:uppercase; font-weight:500; color:var(--muted);
background:#FFF; text-decoration:none; line-height:1; transition: background .15s ease, color .15s ease; border: #DDD 1px solid;
}
.back-link:hover{ background:#f3f4f6; color:var(--tertiaire); }
.back-link:focus-visible{ outline:none; box-shadow: var(--focus); background:#f3f4f6; }
.back-link svg{ width:18px; height:18px; display:block; }
/* =========================
404 minimaliste
========================= */
.error404-min{ min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.nf-box{
text-align: center; max-width: 720px; width: 100%;
border: 1px solid var(--border); border-radius: 20px;
background: radial-gradient(900px 400px at -10% -20%, rgba(251,83,115,.08), transparent 60%), linear-gradient(180deg, #fff, #fcfcfc);
box-shadow: var(--shadow-sm); padding: 32px 28px;
}
.nf-accent{ width: 64px; height: 6px; border-radius: 999px; margin: 0 auto 14px; background: linear-gradient(90deg, var(--principal), var(--secondaire)); }
.nf-404{
margin: 0 0 6px; font-size: clamp(72px, 14vw, 160px); font-weight: 800; letter-spacing: -2px; line-height: .9;
background: linear-gradient(90deg, var(--principal), var(--secondaire)); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .95;
}
.nf-title{ margin: 0 0 6px; font-size: 22px; font-weight: 800; color: var(--tertiaire); }
.nf-desc{ margin: 0 auto 16px; color: #555; font-size: 15px; max-width: 560px; }
.nf-actions{ display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.nf-tip{ margin-top: 8px; color: var(--muted); font-size: 14px; }
/* =========================
Backoffice Actus
========================= */
.bo-news{ max-width: 1200px; margin: 0 auto; }
.bo-news .bo-grid{ display:grid; gap:16px; grid-template-columns: minmax(620px,1fr) 420px; }
.bo-news .bo-panel{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.bo-news .bo-titlebar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.bo-news .bo-title{ margin:0; font-size:20px; font-weight:600; color: var(--tertiaire); }
.bo-news .bo-actions{ display:flex; flex-wrap:wrap; gap:10px; }
/* Neutralise le style global "form" ici */
.bo-news .form-plain{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; background:transparent!important; box-shadow:none!important; border:0!important; }
.bo-news .bo-row{ margin:12px 0; }
.bo-news .bo-fields-2{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
.bo-news .bo-help{ font-size:13px; color:var(--muted); margin:4px 0 0; }
.bo-news .input-group{ position:relative; }
.bo-news .input-group .addon{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:20px; height:20px; pointer-events:none; opacity:.8; }
.bo-news .input-group input[type="datetime-local"]{ padding:8px 8px 8px 44px; border: 1px solid var(--border); border-radius: var(--radius); }
.bo-news .toolbar{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 10px; }
.bo-news .seg{ display:flex; gap:6px; height: fit-content; flex-wrap:wrap; align-items:center; }
.bo-news .btn-icon{ padding:8px 10px; line-height:1.1; }
.bo-news .btn-select{ background:#fff; color:#111; border:1px solid var(--border); padding:9px 12px; border-radius:var(--radius); font-weight:600; cursor:pointer; }
.bo-news .btn-select:focus-visible{ box-shadow: var(--focus); outline:none; }
.bo-news .editor{ border: 1px solid var(--border); border-radius: var(--radius); background:#fff; min-height: 280px; padding: 12px 14px; overflow:auto; }
.bo-news .editor:focus{ outline:none; box-shadow: var(--focus); border-color: var(--principal); }
.bo-news .color-chip{ width:22px; height:22px; border-radius:6px; border:1px solid var(--border); cursor:pointer; display:inline-block; }
.bo-news .color-chip[data-back]{ box-shadow: inset 0 0 0 2px #fff; }
.bo-news .preview-img{ max-width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--border); display:block; }
.bo-news .bo-sticky{ position: sticky; top: calc(var(--header-h) + 12px); height: fit-content; }
/* =========================
Annuaire — filtres
========================= */
.directory-section .form-plain{
max-width: none !important;
width: 100% !important;
margin: 24px 0 32px !important;
padding: 22px !important;
border: 0 !important;
border-radius: 10px !important;
background:
linear-gradient(150deg, rgba(253,82,109,.06), rgba(153,210,214,.12)) , #fff !important;
position: relative !important;
overflow:hidden !important;
box-shadow: 0 14px 32px rgba(15,23,42,.09), inset 0 0 0 1px rgba(15,23,42,.04) !important;
}
.directory-section .form-plain::before{
content:'' !important;
position:absolute !important;
width:260px; height:260px;
top:-90px; right:-70px;
background: radial-gradient(circle, rgba(253,82,109,.25) 0%, rgba(253,82,109,0) 70%);
opacity:.45;
z-index:0;
}
.directory-section .form-plain::after{
content:'' !important;
position:absolute !important;
inset:0 !important;
padding:1px;
border-radius:10px;
mask-composite: exclude;
z-index:0;
}
.directory-section .form-plain > *{
position:relative;
z-index:1;
}
.directory-section .filters{
display:grid;
gap:18px;
margin-top:18px;
}
.directory-section .filters-grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap:18px;
align-items:start;
}
.directory-section .filters-grid label{
display:block; font-weight:600; margin:0 0 6px; line-height:1.25; min-height:1.25em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.directory-section .filters-grid input[type="text"], .directory-section .filters-grid select{ width: 100%; }
.directory-section .filters-actions{
display:flex;
gap:12px;
justify-content:flex-end;
padding-top:14px;
border-top:1px dashed rgba(15,23,42,.12);
}
.directory-link{ color:inherit; text-decoration:none; transition:color .15s ease; }
.directory-link:hover{ color:var(--principal); text-decoration:underline; }
.directory-detail{ max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:24px; }
.directory-detail__header{
display:flex; flex-wrap:wrap; gap:20px; align-items:center;
padding:26px; border:1px solid var(--border); border-radius:20px; background:#fff;
}
.directory-detail__avatar{
width:96px; height:96px; border-radius:50%; object-fit:cover;
background:#f3f4f6; border:1px solid #e5e7eb; flex:0 0 auto;
}
.directory-detail__summary{ display:flex; flex-direction:column; gap:6px; min-width:220px; }
.directory-detail__summary h2{ margin:0; font-size:1.6rem; color:var(--tertiaire); }
.directory-detail__summary .role{ font-size:1rem; color:#475569; }
.directory-detail__summary .mail{ font-size:.95rem; color:var(--principal); display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.directory-detail__summary .mail:hover{ text-decoration:underline; }
.directory-detail__badge{
display:inline-flex; align-items:center; gap:8px;
padding:6px 12px; border-radius:999px; font-weight:600; font-size:.85rem;
background:#ecfdf5; color:#047857;
}
.directory-detail__badge.archived{ background:#fef2f2; color:#b91c1c; }
.directory-detail__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.directory-detail__card{ border:1px solid var(--border); border-radius:18px; background:#fff; padding:22px; display:flex; flex-direction:column; gap:16px; }
.directory-detail__card h3{ margin:0; font-size:1.05rem; font-weight:600; color:var(--tertiaire); }
.directory-detail__info{ display:grid; gap:12px; }
.directory-detail__item{ display:flex; flex-direction:column; gap:4px; }
.directory-detail__info dt{
font-size:.85rem; text-transform:uppercase; letter-spacing:.05em;
color:#64748b; margin-bottom:2px;
}
.directory-detail__info dd{ margin:0; font-size:1rem; color:#1f2937; }
/* =========================
Liste actus (nl-*)
========================= */
.nl-wrap{ max-width:1200px; margin:24px auto; padding:0; }
.nl-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.nl-filters{ border: 1px solid var(--border); border-radius: var(--radius); background: #fff; padding: 14px; margin-bottom: 12px; }
.nl-filters .form-plain{ width:100% !important; max-width:none !important; }
.nl-grid{ display:grid; gap:12px; grid-template-columns: 1fr 1fr 2fr; align-items: end; }
.nl-grid label{ display:block; font-weight:600; margin:0 0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:1.25em; line-height:1.25; }
.nl-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }
.nl-table-wrap{ border: 1px solid var(--border); border-radius: var(--radius); background: #fff; overflow: auto; }
.nl-table-wrap thead th{ position: sticky; top: 0; z-index: 1; background:#fff; }
.actions-cell .btn, .actions-cell .btn-secondary{ line-height: 1; }
/* Pastilles état */
.chip.pub { background:#eef2ff; color:#3730A3; border-color:#cbd5ff; }
.chip.prog{ background:#fff7ed; color:#9a3412; border-color:#ffedd5; }
.chip.pin { background:#fff1f5; color:#b2163b; border-color:#ffd1dc; }
/* Pagination */
.nl-pager{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
/* =========================
PATCH – NEUTRALISER les formulaires imbriqués
========================= */
.auth-card form,
.section form,
.table-container form,
.nl-filters form,
.directory-section .filters form{
background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; max-width: none !important; width: 100% !important;
}
table td form{ display:inline; background:transparent!important; box-shadow:none!important; margin:0; padding:0; border:0; }
/* ===== FAQ (styles compacts, compatibles avec ton design) ===== */
/* Styles FAQ alignés sur la charte (cartes/tables déjà dans style.css) */
.faq-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.faq-section .form-plain{ max-width: none !important; width: 100% !important; margin: 0 !important; border: 0 !important; padding: 0 !important; }
.faq-section .form-plain-filter{ max-width: none !important; width: 100% !important; margin: 0 !important; border: 1px solid var(--border) !important; padding: 20px !important; }
.faq-section .filters{ display: grid; gap: 14px; }
.faq-section .filters-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.faq-section .filters-grid label{
display:block; font-weight:600; margin:0 0 6px; line-height:1.25; min-height:1.25em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.faq-section .filters-grid input[type="text"], .faq-section .filters-grid select{ width: 100%; }
.faq-section .filters-actions{ display:flex; gap:12px; justify-content:flex-end; }
.faq-actions{display:flex;gap:8px}
.btn-ghost{border:1px solid var(--border);background:#fff;color:#111;border-radius:10px;padding:9px 12px;font-weight:600;cursor:pointer}
.btn-ghost:hover{background:#f7f7f7}
.faq-list{display:grid;gap:8px}
details.faq-item{border:1px solid var(--border);border-radius:var(--panel-radius);background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}
details.faq-item[open]{border-color:#ffe3ea;background:linear-gradient(180deg,#fff,#fff5f7)}
summary.faq-q{list-style:none;cursor:pointer;padding:12px 14px;font-weight:700;display:flex;align-items:center;gap:10px}
summary.faq-q::-webkit-details-marker{display:none}
.faq-caret{flex:0 0 18px;height:18px;display:inline-block;transform:rotate(-90deg);transition:transform .15s ease}
.faq-caret::before{content:"";display:block;width:18px;height:18px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-top:1px}
details[open] .faq-caret{transform:rotate(0)}
.faq-a{padding:0 14px 14px;color:#444;line-height:1.55}
.faq-caret::before{content:"";display:block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-top: 3px; margin-left: 3px;}
/* Si déjà ajouté avec la page liste, tu peux ignorer .page-head / .seg-switch */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:8px}
.page-head-left{display:flex;flex-direction:column;gap:8px}
.page-title{margin:0}
.seg-switch{display:flex;gap:6px;background:#f6f7f9;border:1px solid #e7e7ea;border-radius:12px;padding:4px; width: fit-content;}
.seg-item{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;text-decoration:none;color:inherit;line-height:1;border:1px solid transparent;background:none;cursor:pointer;font:inherit}
.seg-item:hover{background:#f0f3f9}
.seg-item.is-active{background:#fff;border:1px solid #e7e7ea;box-shadow:0 1px 0 rgba(16,24,40,.04)}
.seg-badge{font-size:12px;padding:2px 6px;border-radius:999px;border:1px solid #e5e7eb;background:#f3f4f6}
@media (max-width:640px){ .seg-item span:nth-child(2){display:none} }
.detail-wrap{display:grid;grid-template-columns:1.6fr .9fr;gap:16px;margin-top:14px}
@media (max-width: 980px){ .detail-wrap{grid-template-columns:1fr} }
.kv-grid{display:grid;grid-template-columns:180px 1fr;gap:8px 12px;background:#fff;border:1px solid #e7e7ea;border-radius:12px;padding:14px}
.kv-grid .k{color:#6b7280}
.card{background:#fff;border:1px solid #e7e7ea;border-radius:12px;padding:14px}
.toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-danger{background:#fff0f0;border:1px solid #f5c2c7;color:#b42318}
.btn-danger:hover{color: #fff !important;}
.qr-square{display:grid;place-items:center;border:1px dashed #e2e8f0;border-radius:10px;padding:12px;background:#fafafa}
/* Cellule Actions */
.actions-cell{ position:relative; text-align:center!important; padding: 0!important }
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
.row-actions-btn{
display:inline-flex; align-items:center; justify-content:center;
width:28px; height:28px; border:1px solid #e7e7ea; border-radius:8px;
background:#fff; cursor:pointer; line-height:1; padding:0;
}
.row-actions-btn:hover{ background:#f6f7f9 }
.row-actions-btn[aria-expanded="true"]{ background:#eef2ff; border-color:#c7d2fe }
.row-actions-menu{
position:absolute; right:0; top:34px; min-width:160px;
background:#fff; border:1px solid #e7e7ea; border-radius:10px;
box-shadow:0 10px 30px rgba(16,24,40,.1);
padding:6px; margin:0; list-style:none; display:none; z-index:40;font-size: 14px;
}
.actions-cell.open .row-actions-menu{ display:block }
.row-actions-menu li{ margin:0; padding:0 }
.row-actions-menu a{
display:flex; align-items:center; gap:8px;
padding:8px 10px; border-radius:8px; text-decoration:none; color:#111;
font-size:14px; text-align: left;
}
.row-actions-menu button{
display:flex; align-items:center; gap:8px;
padding:8px 10px; border-radius:8px; background:none;
border:none; color:#111; font-size:14px; text-align:left;
width:100%; cursor:pointer; font-family:inherit;
}
.row-actions-menu a:hover{ background:#f6f7f9 }
.row-actions-menu button:hover{ background:#f6f7f9 }
.row-actions-menu a.danger{ color:#b42318 }
.row-actions-menu a.danger:hover{ background:#fff1f1 }
.row-actions-menu button.danger{ color:#b42318 }
.row-actions-menu button.danger:hover{ background:#fff1f1 }
.onb-tab-panels{margin-top:12px;}
.onb-tab-panel{display:none;}
.onb-tab-panel.is-active{display:block;}
/* ===== Onboarding ===== */
.onb-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:14px;margin-top:14px}
@media (max-width:860px){.onb-grid{grid-template-columns:1fr}}
.onb-card{
display:flex;
align-items:center;
padding:20px 210px 20px 24px;
border:1px solid var(--border);
border-radius:16px;
background-color:#fff;
text-decoration:none;
color:#1f2937;
transition:transform .06s ease, box-shadow .15s ease;
background-repeat:no-repeat;
background-size:auto 160%;
background-position:350px center;
}
.onb-card:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(16,24,40,.12)}
.onb-card--entry{
background-image:url('../images/onboarding.jpg');
}
.onb-card--exit{
background-image:url('../images/offboarding.jpg');
}
.onb-card__text{
flex:1;
display:flex;
flex-direction:column;
gap:4px;
}
.onb-card h3{margin:0;font-size:17px;font-weight:600;color:var(--tertiaire);}
.onb-card p{margin:0;color:#64748b;font-size:14px;line-height:1.45;}
.onb-section{
max-width:1200px;margin:14px auto 0;padding:24px;
border-radius:18px;background:#fff;border:1px solid rgba(222,226,230,.7);
}
.onb-section--overview{background:#f9fafc;}
.onb-section--requests{background:#fff;}
.onb-section--guide{background:#f8fdfb;}
.onb-section--restricted{background:#fff5f5;border-color:rgba(239,68,68,.32);}
.onb-overview-row{
max-width:1200px;
margin:14px auto 0;
display:flex;
gap:16px;
flex-wrap:wrap;
}
.onb-overview-row .onb-section{
margin:0;
flex:1 1 360px;
}
.onb-section__head{
display:flex;align-items:center;justify-content:space-between;
gap:12px;flex-wrap:wrap;margin-bottom:16px;
}
.onb-section__head--split{width:100%;}
.onb-heading{
margin:0;
font-size:1.125rem;
font-weight:600;
color:var(--tertiaire);
}
.onb-heading + p,
.onb-heading + .onb-overview__subtitle{margin-top:4px;}
.onb-overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;}
.onb-overview{
display:flex;flex-direction:column;gap:16px;
padding:18px 20px;border-radius:18px;background:#fff;border:1px solid rgba(222,226,230,.8);
}
.onb-overview__head{
display:flex;align-items:center;gap:12px;justify-content:space-between;
}
.onb-overview__subtitle{margin:4px 0 0;font-size:13px;color:var(--muted);}
.onb-chip{
display:inline-flex;align-items:center;gap:6px;
padding:4px 10px;border-radius:999px;
font-size:12px;font-weight:600;color:#374151;background:#f3f4f6;
}
.onb-chip--count{
min-width:36px;padding:4px 12px;
justify-content:center;
background:var(--principal);
color:#fff;
}
.onb-overview--exit .onb-chip--count{
background:var(--secondaire);
}
.onb-empty{
margin:0;padding:16px;border-radius:14px;
background:#fff;border:1px dashed rgba(148,163,184,.45);
color:#475569;font-size:14px;
}
.onb-table{
margin:0;border-collapse:collapse;width:100%;
background:#ffffff;border-radius:14px;border:1px solid #e2e8f0;
}
.onb-table thead th{background:#f8fafc;color:#0f172a;font-weight:600;}
.onb-table tbody tr:hover{background:#f1f5f9;}
.onb-table td,.onb-table th{border-color:#e2e8f0;}
.onb-muted{color:#64748b!important;}
.onb-mini-btn{
display:inline-flex;align-items:center;justify-content:center;
padding:8px 14px;font-size:12px;border-radius:9px;
border:1px solid transparent;font-weight:600;
transition:transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
background:var(--principal);color:#fff;border-color:var(--principal);
}
.onb-mini-btn--entry{background:var(--principal);border-color:var(--principal);font-weight: 500;}
.onb-mini-btn--entry:hover{background:#e44760;border-color:#e44760;}
.onb-mini-btn:hover{transform:translateY(-1px);background:#e44760;border-color:#e44760;}
.onb-mini-btn--exit{background:var(--secondaire);border-color:var(--secondaire);font-weight: 500;}
.onb-mini-btn--exit:hover{background:#aa0a35;border-color:#aa0a35;}
.onb-mini-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(253,82,109,.25);}
.onb-flash{
max-width:1200px;margin:18px auto 0;border-radius:14px;
border:1px solid rgba(148,163,184,.35);box-shadow:none;
}
.onb-toolbar{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;}
.onb-status-chip{
border:none;padding:6px 10px;font-size:13px;font-weight:600;border-radius:999px;
}
.onb-status-chip--todo{background:#fff8e1;color:#8a6d00;}
.onb-status-chip--progress{background:#e8f1ff;color:#1d4ed8;}
.onb-status-chip--done{background:#ecfdf5;color:#047857;}
.onb-steps{
list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px;
}
.onb-steps li{
display:flex;align-items:flex-start;gap:12px;
padding:12px 14px;border-radius:16px;background:#fff;border:1px solid rgba(222,226,230,.7);
color:var(--text);font-size:14px;
}
.onb-step-ico{
display:inline-flex;align-items:center;justify-content:center;
width:28px;height:28px;border-radius:50%;background:var(--principal);
color:#fff;font-weight:700;font-size:14px;flex:0 0 28px;
}
#dynamic{margin-top:12px;}
#dynamic .embed{
border:1px solid rgba(15,23,42,.08);
border-radius:18px;
background:#fff;
padding:32px;
box-shadow:none;
}
@media (max-width:720px){
#dynamic .embed{padding:22px;}
}
.toolbar{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}
.toolbar h2{margin:0;font-size: 1.25rem;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.step fieldset { border:0; padding:0; margin:0; }
legend { font-weight:700; margin-bottom:8px }
.mandatory:after { content:" *"; color:#EF4444; font-weight:700 }
.radio { display:inline-flex; align-items:center; gap:8px; margin-right:14px }
.download-link { text-decoration:none }
/* ===== Wizard look & feel ===== */
.wizard{display:flex;flex-direction:column;gap:24px;}
.wizard-head{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:10px;
margin:0;
}
.wizard-head h2{
margin:0;
font-size:1.5rem;
font-weight:600;
color:var(--tertiaire);
}
.wizard-title{ margin:0; font-size:22px; font-weight:600; letter-spacing:.2px; }
/* Stepper */
.wizard-steps{
position:relative;
display:flex;
flex-wrap:wrap;
gap:12px;
list-style:none;
padding:0;
margin:0 0 18px;
align-items:center;
}
.wizard-steps li{
display:inline-flex;
align-items:center;
gap:12px;
padding:10px 20px;
border:1px solid var(--border,#e5e7eb);
border-radius:999px;
background:#fff;
font-weight:500;
font-size:16px;
color:#374151;
box-shadow:0 1px 3px rgba(15,23,42,.06);
line-height:1.2;
}
.wizard-steps .num{
display:inline-flex;
align-items:center;
justify-content:center;
width:26px;
height:26px;
border-radius:50%;
background:#f3f4f6;
font-weight:700;
font-size:13px;
color:#475569;
}
.wizard-steps .lbl{ white-space:nowrap; display:inline-flex; align-items:center; }
.wizard-steps li.is-active{
border-color:#FB5373;
background:#FB5373;
color:#fff;
font-weight:600;
box-shadow:0 6px 18px rgba(251,83,115,.32);
}
.wizard-steps li.is-active .num{
background:rgba(255,255,255,.85);
color:#C41C4F;
}
.wizard-steps li.is-done{
border-color:#86efac;
background:#ecfdf5;
color:#047857;
box-shadow:0 4px 14px rgba(16,185,129,.22);
}
.wizard-steps li.is-done .num{
background:#10B981;
color:#fff;
}
.wizard-steps .wizard-progress{ display:none; }
.wizard-progress{ position:absolute; left:0px; right:0px; top:41px; height:4px; pointer-events:none; }
.wizard-progress > span{ position:absolute; left:0; top:0; height:4px; width:var(--p,0%); background:#FB5373; border-radius:999px; transition:width .25s ease; opacity:.6; }
/* Panels / fields */
.panel{
background:#fff;
border:1px solid rgba(15,23,42,.08);
border-radius:16px;
padding:26px 28px;
display:flex;
flex-direction:column;
}
.panel > legend{
margin:0 0 18px;
font-weight:600;
font-size:1.05rem;
letter-spacing:.01em;
text-transform:uppercase;
color:var(--tertiaire);
position:relative;
padding-bottom:12px;
}
.panel > legend::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:64px;
height:3px;
border-radius:999px;
background:var(--principal);
}
.panel-content{
display:flex;
flex-direction:column;
gap:22px;
}
.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
@media (max-width:720px){ .grid-2{ grid-template-columns:1fr; } }
.step{display:block;}
.step fieldset{border:0;padding:0;margin:0;}
.step[hidden]{display:none!important;}
.field{
display:flex;
flex-direction:column;
gap:6px;
margin:0;
}
.panel-content > .field:last-child{margin-bottom:0;}
.field-row{
display:flex;
flex-direction:column;
gap:16px;
}
.field-row.grid-2{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}
.label{
font-weight:500;
color:#111827;
font-size:14px;
line-height:1.4;
}
.label.req::after{ content:" *"; color:#EF4444; }
.choices{
display:flex;
flex-wrap:wrap;
gap:12px;
}
.choices-vertical{
flex-direction:column;
flex-wrap:nowrap;
align-items:flex-start;
}
.choices-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:14px;
}
.choices-grid .choice{
width:100%;
}
.choice{
position:relative;
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 16px 12px 50px;
border:1px solid #e5e7eb;
border-radius:14px;
background:#fff;
font-size:14px;
font-weight:500;
line-height:1.4;
min-height:48px;
cursor:pointer;
transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.choice span{
flex:1;
}
.exit-assets {
border: 1px solid var(--border, #e5e7eb);
border-radius: 12px;
padding: 16px;
background: #fff;
display: flex;
flex-direction: column;
gap: 12px;
}
.exit-assets-empty {
font-size: 14px;
color: #6b7280;
}
.exit-assets-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.exit-asset-card {
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.exit-asset-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.exit-asset-ref {
font-weight: 600;
color: #111;
}
.exit-asset-type {
color: #6b7280;
font-size: 13px;
}
.exit-asset-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.exit-asset-actions select {
width: 100%;
}
.exit-asset-assign {
display: none;
}
.exit-asset-assign.show {
display: block;
}
.choices-vertical .choice{
width:100%;
justify-content:flex-start;
}
.choice input{
position:absolute;
inset:0;
margin:0;
opacity:0;
cursor:pointer;
}
.choice::before{
content:"";
position:absolute;
left:18px;
top:50%;
transform:translateY(-50%);
width:22px;
height:22px;
border-radius:50%;
border:2px solid var(--principal);
background:#fff;
transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.choice::after{
content:"";
position:absolute;
left:29px;
top:50%;
transform:translate(-50%,-50%);
width:10px;
height:10px;
border-radius:50%;
background:#fff;
opacity:0;
transition:opacity .18s ease;
}
.choice--checkbox::before{
border-radius:6px;
}
.choice--checkbox::after{
width:10px;
height:10px;
border-radius:0;
border-right:2px solid #fff;
border-bottom:2px solid #fff;
transform:translate(-50%,-50%);
}
.choice:hover{
border-color:rgba(253,82,109,.45);
box-shadow:0 10px 24px rgba(253,82,109,.12);
}
.choice:focus-within{
border-color:var(--principal);
box-shadow:0 0 0 4px rgba(253,82,109,.18);
}
.choice:has(input:checked){
border-color:var(--principal);
background:rgba(253,82,109,.08);
color:var(--tertiaire);
}
.choice:has(input:checked)::before{
background:var(--principal);
border-color:var(--principal);
box-shadow:0 0 0 4px rgba(253,82,109,.16);
}
.choice--radio:has(input:checked)::after{
opacity:1;
}
.choice--checkbox:has(input:checked)::after{
opacity:1;
}
.choices-company .choice{font-size:14px;}
.form-help{margin:2px 0 0;font-size:12px;color:#6b7280;}
.form-note{
margin:0;
font-size:14px;
color:#64748b;
line-height:1.5;
}
.form-status{
margin:0;
font-size:14px;
line-height:1.45;
}
.form-status--success{color:#1a7f44;}
.form-status--error{color:#b91c1c;}
.field-group{
border:0;
margin:0;
padding:0;
min-inline-size:0;
display:flex;
flex-direction:column;
gap:10px;
}
.field-group > legend{
margin:0;
padding:0;
font-size:14px;
font-weight:500;
color:#111827;
line-height:1.4;
}
.wizard-nav{
margin-top:12px;
padding-top:18px;
border-top:1px solid rgba(15,23,42,.12);
display:flex;
gap:12px;
flex-wrap:wrap;
justify-content:flex-end;
}
.actions-row{
display:flex;
gap:12px;
flex-wrap:wrap;
justify-content:flex-end;
}
/* Inputs */
#onboardingEntry input[type="text"],
#onboardingEntry input[type="date"],
#onboardingEntry input[type="tel"],
#onboardingEntry textarea,
#onboardingEntry select{
border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; background:#fff; outline:none;
}
#onboardingEntry input:focus,
#onboardingEntry textarea:focus,
#onboardingEntry select:focus{
border-color:#c7d2fe; box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
#onboardingEntry,
#onboardingExit{
display:flex;
flex-direction:column;
gap:28px;
}
#onboardingExit input[type="text"],
#onboardingExit input[type="date"],
#onboardingExit input[type="email"],
#onboardingExit textarea,
#onboardingExit select{
border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; background:#fff; outline:none;
}
#onboardingExit input:focus,
#onboardingExit textarea:focus,
#onboardingExit select:focus{
border-color:#c7d2fe; box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.header-actions{position:relative;display:flex;align-items:center;gap:8px}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;background:transparent;border-radius:999px;cursor:pointer;color:var(--text,#111)}
.icon-btn:hover{background:rgba(0,0,0,.06)}
.badge{position:absolute;top:0;right:0;transform:translate(35%,-35%);min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:#e11d48;color:#fff;font-size:12px;line-height:18px;text-align:center}
.dropdown.notif-menu{position:absolute;right:0;top:46px;width:360px;max-height:70vh;overflow:auto;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.12);z-index:1000}
.dropdown.assistant-menu{position:absolute;right:44px;top:46px;width:360px;max-height:520px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.12);display:flex;flex-direction:column;overflow:hidden;z-index:999}
.assistant-menu[hidden]{display:none !important}
.assistant-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid #f1f5f9;font-size:15px}
.assistant-messages{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px;background:#f8fafc}
.assistant-placeholder{font-size:13px;color:#64748b}
.assistant-message{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.45;display:flex;flex-direction:column;gap:6px;color:#0f172a}
.assistant-message.user{align-self:flex-end;background:#2563eb;color:#fff;border-color:#1d4ed8}
.assistant-message ul{margin:0;padding-left:18px}
.assistant-meta{margin-top:4px;font-size:12px;color:#64748b}
.assistant-form{display:flex;gap:10px;padding:12px;border-top:1px solid #f1f5f9;background:#fff;box-shadow: none;}
.assistant-form input{flex:1;border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px;font-size:14px}
.assistant-form input:focus{border-color:#c7d2fe;box-shadow:0 0 0 3px rgba(59,130,246,.15);outline:none}
.assistant-form button{border:none;background:#111827;color:#fff;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}
.assistant-form button:hover{background:#1f2937}
.assistant-foot{padding:10px 14px;font-size:12px;color:#64748b;border-top:1px solid #f1f5f9;background:#f9fafb}
.assistant-foot a{color:#2563eb;text-decoration:none}
.assistant-foot a:hover{text-decoration:underline}
.notif-head,.notif-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #f1f5f9}
.notif-foot{border-top:1px solid #f1f5f9;border-bottom:0}
.notif-list{list-style:none;margin:0;padding:0}
.notif-list li{padding:10px 12px;border-bottom:1px solid #f8fafc;cursor:pointer}
.notif-list li.unread{background:#eef2ff}
.notif-row{display:flex;gap:10px}
.notif-ico{font-size:18px;margin-top:2px}
.notif-title{font-weight:600}
.notif-snippet{color:#4b5563;font-size:14px;margin-top:2px}
.notif-meta{color:#94a3b8;font-size:12px;margin-top:6px}
/* ===== Notifications (page) ===== */
.notifications-page { max-width: 1200px; margin: 0 auto; }
/* En-tête commun */
.page-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 6px;
}
/* Barre d'actions (à droite) */
.toolbar-actions { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.toolbar-actions--end { justify-content: flex-start; }
.notif-actions form { margin: 0; }
/* État vide */
.empty-state {
margin-top: 12px;
padding: 18px;
background: #fafafa;
border: 1px solid #eee;
border-radius: 10px;
color: #6b7280;
}
/* Liste */
.notif-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.notif-list.big .notif-row {
display: flex; gap: 12px; align-items: flex-start;
background: #fff; border: 1px solid #eaeaea;
border-radius: 12px; padding: 12px 14px;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.notif-list.big li.unread .notif-row {
border-color: #c7e3ff; background: #f8fbff;
box-shadow: 0 2px 6px rgba(37, 99, 235, .06);
}
/* Icône / pastille */
.notif-ico {
width: 40px; height: 40px; border-radius: 10px;
display: grid; place-items: center;
font-size: 18px; flex: 0 0 40px;
color: #1f2937; background: #f3f4f6;
}
/* Corps */
.notif-body { min-width: 0; }
.notif-title { font-weight: 600; font-size: 15px; line-height: 1.25; color: #111827; }
.notif-snippet { margin-top: 4px; color: #4b5563; }
.notif-meta { margin-top: 6px; font-size: 12px; color: #6b7280; }
.notif-meta a { text-decoration: underline; }
/* Point bleu sur titre si non lue */
.notif-list li.unread .notif-title::after {
content: ""; display: inline-block; margin-left: 6px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--notif-accent, #2563eb);
vertical-align: 1px;
}
/* Couleurs par type (via data-type) */
.notif-list li[data-type="news"] { --notif-accent: #2563eb; }
.notif-list li[data-type="faq"] { --notif-accent: #7c3aed; }
.notif-list li[data-type="task"] { --notif-accent: #059669; }
.notif-list li[data-type="warning"] { --notif-accent: #b91c1c; }
.notif-list li[data-type="info"] { --notif-accent: #0f766e; }
/* Déclinaisons de l'icône par type */
.notif-list li[data-type="news"] .notif-ico { color:#1d4ed8; background:#eef2ff; }
.notif-list li[data-type="faq"] .notif-ico { color:#6d28d9; background:#f5f3ff; }
.notif-list li[data-type="task"] .notif-ico { color:#047857; background:#ecfdf5; }
.notif-list li[data-type="warning"] .notif-ico { color:#b91c1c; background:#fef2f2; }
.notif-list li[data-type="info"] .notif-ico { color:#0f766e; background:#ecfeff; }
/* Hover / focus */
.notif-list li:hover {
border-color: #cbd5e1;
background-color: #eef2ff;
box-shadow: 0 4px 10px rgba(0,0,0,.06);
}
.notif-list .notif-row:focus-within {
outline: 2px solid var(--notif-accent, #2563eb);
outline-offset: 2px;
}
/* Boutons “seg-switch” (si pas déjà stylés globalement, sinon ignorer) */
.seg-switch { display:flex; gap:6px; background:#f6f7f9; border-radius:10px; padding:4px; border:1px solid #e7e7ea; }
.seg-item { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; color:#374151; border:1px solid transparent; transition:background .18s ease; }
.seg-item:hover { background:#e5e7eb; }
.seg-item.is-active { background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); border-color:#e7e7ea; color:var(--tertiaire); }
/* Badge “Non lues” */
.seg-badge-notif {
display:inline-flex; align-items:center; justify-content:center;
min-width: 1.35em; padding: 0 .35em;
font-size: .85em; line-height: 1.35; border-radius: 999px;
background: #111827; color: #fff;
}
#notifBtn { position: relative; cursor: pointer; }
#notifBtn .badge { pointer-events: none; } /* laisse le clic remonter au conteneur */
/* Responsive */
@media (max-width: 640px){
.notif-ico { width:36px; height:36px; font-size:16px; }
.notif-list.big .notif-row { padding: 12px; }
.page-head { flex-direction: column; align-items: stretch; gap: 8px; }
.toolbar-actions { justify-content: stretch; }
}
@media (max-width:720px){.form-grid{grid-template-columns:1fr}}
@media (max-width:600px){.faq-head{align-items:flex-start;gap:10px}.faq-tools{width:100%;justify-content:space-between}.faq-search{flex:1}.faq-search input[type="search"]{width:100%}.faq-actions{flex-wrap:wrap}}
/* =========================
BREAKPOINTS / RESPONSIVE
========================= */
/* Tablettes */
@media (max-width: 1024px){
.header-container{ gap: 10px; padding: 8px 20px; }
.intranet .intra-hero-inner{ grid-template-columns: 1fr; }
}
/* ===== Formations ===== */
.training-page .training-admin-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:20px;
margin-bottom:16px;
}
.training-card {
background:#fff;
border:1px solid #e5e7eb;
border-radius:14px;
padding:20px;
box-shadow:0 12px 30px rgba(15,23,42,0.08);
}
.training-card h2 {
margin-top:0;
margin-bottom:8px;
}
.training-card p.muted {
margin-top:0;
margin-bottom:18px;
}
.training-card .form-plain {
margin:0;
}
.link-action {
background:none;
border:none;
color:#2563eb;
padding:0;
font:inherit;
cursor:pointer;
}
.link-action.danger {
color:#b91c1c;
}
.inline-form {
display:inline;
}
.training-admin-table .row-actions {
display:flex;
flex-wrap:wrap;
gap:6px;
align-items:center;
}
.row-actions-menu form {
margin:0;
}
.training-first-slot {
margin-top:18px;
padding-top:14px;
border-top:1px solid #e5e7eb;
}
.training-first-slot h3 {
margin-top:0;
margin-bottom:12px;
font-size:16px;
}
.training-courses-admin .training-course-card {
border:1px solid #e5e7eb;
border-radius:14px;
padding:20px;
box-shadow:0 12px 28px rgba(15,23,42,0.05);
margin-bottom:20px;
}
.training-course-head {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
}
.training-course-desc {
margin-bottom:6px;
}
.training-publish-form {
margin:0;
}
.training-course-body {
margin-top:16px;
display:flex;
flex-direction:column;
gap:16px;
}
.training-session-card {
border:1px solid #e5e7eb;
border-radius:12px;
padding:16px;
background:#fafafb;
}
.training-reg-table td,
.training-reg-table th {
white-space:nowrap;
}
.training-add-slot {
border:1px solid #e5e7eb;
border-radius:12px;
padding:0 18px 18px;
background:#fff;
}
.training-add-slot summary {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:18px 0;
margin:0;
font-weight:600;
cursor:pointer;
list-style:none;
}
.training-add-slot summary::-webkit-details-marker{ display:none; }
.training-add-slot summary::after{
content:"+";
font-size:20px;
font-weight:400;
color:#6b7280;
}
.training-add-slot[open] summary {
border-bottom:1px solid #f1f5f9;
margin-bottom:16px;
}
.training-add-slot form {
margin:0;
display:flex;
flex-direction:column;
gap:12px;
}
.training-add-slot .toolbar-actions{
justify-content:flex-end;
}
.training-course {
border:1px solid #e5e7eb;
border-radius:12px;
padding:20px;
margin-bottom:18px;
}
.training-session-row {
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding:14px 0;
border-top:1px solid #e5e7eb;
}
.training-session-row:first-of-type {
border-top:none;
}
.training-session-row form {
margin:0;
}
.training-registration-form {
margin-top:14px;
padding-top:16px;
border-top:1px solid #e5e7eb;
display:flex;
flex-direction:column;
gap:8px;
max-width: 100%;
}
.training-registration-fields {
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:flex-end;
}
.training-registration-form select {
min-width:240px;
border:1px solid #d1d5db;
border-radius:10px;
padding:10px 14px;
font-size:15px;
background:#fff;
}
.time-row input[type="date"],
.time-row input[type="time"]{
border-radius:10px;
border:1px solid #d1d5db;
padding:10px 12px;
font-size:15px;
}
.training-course .course-registered-note {
margin-top:12px;
padding:12px 16px;
border-radius:10px;
border:1px solid #bbf7d0;
background:#ecfdf5;
color:#065f46;
font-size:14px;
}
.training-course-empty {
margin-top:12px;
color:#6b7280;
}
.training-sessions-block .page-head{ align-items:flex-start; }
.training-empty{ margin:18px 0; }
.session-list{ display:flex; flex-direction:column; gap:18px; }
.session-item{
border:1px solid #e5e7eb;
border-radius:16px;
background:#fff;
box-shadow:0 12px 30px rgba(15,23,42,.08);
}
.session-item-head{
padding:20px;
border-bottom:1px solid #f1f5f9;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:16px;
}
.session-info h3{ margin:4px 0; font-size:21px; }
.session-label{
margin:0;
font-size:11px;
letter-spacing:.08em;
text-transform:uppercase;
color:#6b7280;
}
.session-actions{
display:flex;
align-items: flex-start;
gap:10px;
}
.session-actions .actions-cell{
position:relative;
padding:0;
}
.session-item-body{
padding:18px 20px 22px;
display:flex;
flex-direction:column;
gap:20px;
}
.session-meta{
display:flex;
flex-wrap:wrap;
border:1px solid #f1f5f9;
border-radius:12px;
padding:12px 16px;
gap:18px;
}
.session-meta div{ min-width:140px; }
.session-meta dt{
font-size:12px;
text-transform:uppercase;
letter-spacing:.08em;
color:#94a3b8;
margin-bottom:4px;
}
.session-meta dd{
margin:0;
font-weight:600;
color:#0f172a;
}
.session-meta .meta-full{ width:100%; }
.session-meta .meta-full dd{ font-weight:400; }
.session-participants,
.session-files,
.session-feedback{
border:0;
border-radius:0;
padding:0;
background:transparent;
box-shadow:none;
}
.session-files-table .status-col{ width:200px; }
.session-files-table .actions-col{ width:220px; text-align:right; }
.session-files-table td.actions-col{ vertical-align:middle; }
.session-feedback{
border:1px solid #f1f5f9;
border-radius:12px;
padding:16px;
background:#fff;
box-shadow:inset 0 0 0 1px rgba(15,23,42,.02);
}
.session-feedback + .session-feedback{ margin-top:16px; }
.session-feedback-head{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:14px;
}
.session-feedback-head h4{
margin:0;
font-size:16px;
}
.session-feedback-empty{
margin:4px 0 0;
color:#6b7280;
}
.feedback-send-form{
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
text-align: right;
max-width: none;
width: fit-content;
}
.feedback-send-form .btn-ghost{
background:#fff;
border:1px solid #d1d5db;
color:#0f172a;
box-shadow:none;
padding:10px 14px;
}
.feedback-send-form .btn-ghost:hover{
background:#f8fafc;
border-color:#cbd5f5;
}
.session-panel{
border:1px solid #e5e7eb;
border-radius:16px;
background:#fff;
margin-top:22px;
box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.session-panel:first-of-type{
margin-top:0;
}
.session-panel-head{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 20px;
border-bottom:1px solid #f1f5f9;
gap:12px;
flex-wrap:wrap;
}
.session-panel-title{
display:flex;
align-items:center;
gap:12px;
}
.session-panel-title h4{
margin:0;
font-size:16px;
}
.session-panel-title p{
margin:2px 0 0;
}
.session-panel-body{
padding:18px 20px;
}
.session-panel-icon{
width:36px;
height:36px;
border-radius:12px;
display:inline-flex;
align-items:center;
justify-content:center;
color:#0f172a;
background:#e2e8f0;
}
.session-panel-icon.docs{ background:#fef3c7; color:#92400e; }
.session-panel-icon.participants{ background:#e0f2fe; color:#0c4a6e; }
.session-panel-icon.feedback{ background:#fce7f3; color:#9d174d; }
.quiz-card{
border:1px solid #e0e7ff;
border-radius:16px;
background:#f8fafc;
margin-top:18px;
padding:0;
box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.quiz-card-head{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 18px;
border-bottom:1px solid #e0e7ff;
gap:12px;
flex-wrap:wrap;
}
.quiz-card-title{
display:flex;
align-items:center;
gap:12px;
}
.quiz-card-icon{
width:36px;
height:36px;
border-radius:12px;
display:inline-flex;
align-items:center;
justify-content:center;
background:#eef2ff;
color:#312e81;
}
.quiz-card-body{
padding:18px 20px;
}
.quiz-sort{
display:flex;
gap:6px;
align-items:center;
}
.quiz-sort button{
border:1px solid #d1d5db;
background:#fff;
color:#374151;
border-radius:8px;
padding:6px 8px;
cursor:pointer;
transition:all .15s ease;
}
.quiz-sort button:hover{background:#f3f4f6;}
.quiz-sort button:active{transform:translateY(1px);}
.quiz-action-icon{
width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;
}
.feedback-stats{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:14px;
}
.feedback-stat-card{
flex:1 1 120px;
min-width:120px;
border:1px solid #e5e7eb;
border-radius:10px;
padding:12px 14px;
background:#f9fafb;
}
.feedback-stat-card .stat-label{
display:block;
font-size:12px;
text-transform:uppercase;
letter-spacing:.08em;
color:#94a3b8;
margin-bottom:6px;
}
.feedback-stat-card strong{
font-size:18px;
color:#0f172a;
}
.rating-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:56px;
padding:4px 10px;
border-radius:999px;
background:#ecfccb;
color:#166534;
font-weight:600;
font-size:13px;
}
.session-files-empty{
margin:4px 0 0;
color:#6b7280;
}
.session-file-actions{ padding:0; }
.session-file-actions-row{
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
flex-wrap:nowrap;
}
.session-file-actions-row form{
display:inline-flex;
}
.session-file-actions-group{
display:flex;
gap:8px;
}
.session-file-actions form{
margin:0;
}
.action-link{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
padding:0;
border-radius:50%;
border:1px solid #e5e7eb;
background:#f8fafc;
color:#0f172a;
text-decoration:none;
transition:background .2s,border-color .2s,color .2s;
}
.action-link .action-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:16px;
height:16px;
color:#475569;
}
.action-link:hover{
background:#eef2ff;
border-color:#c7d2fe;
color:#312e81;
}
.action-link.danger{
border-color:#fecaca;
background:#fef2f2;
color:#b91c1c;
}
.action-link.danger .action-icon{
color:#dc2626;
}
.action-link.danger:hover{
background:#fee2e2;
border-color:#fca5a5;
}
.action-link--download{
border-color:#dbeafe;
background:#eff6ff;
color:#1d4ed8;
}
.action-link--download .action-icon{
color:#1d4ed8;
}
.training-reg-table .reg-actions{
display:flex;
flex-direction:column;
gap:8px;
}
.training-reg-table .reg-actions form{
margin:0;
}
.no-registrations{
margin: 0;
color:#6b7280;
}
.row-actions-menu form{ margin:0; }
.row-actions-menu button.link-action{
width: 100%;
border: 0;
background: none;
padding: 8px 10px;
text-align: left;
font: inherit;
cursor: pointer;
color: #0f172a;
box-shadow: none;
}
.row-actions-menu button.link-action:hover{
background:#f3f4f6;
}
.row-actions-menu button.link-action.danger{
color:#dc2626;
}
.reg-slot select{
min-width:220px;
border:1px solid #d1d5db;
border-radius:8px;
padding:6px 10px;
font-size:14px;
background:#fff;
}
.training-sessions-block .page-head{ align-items:flex-start; }
.training-empty{ margin:18px 0; }
.session-list{
display:flex;
flex-direction:column;
gap:18px;
}
.session-item{
border:1px solid #e5e7eb;
border-radius:16px;
background: #f5f8fa;
box-shadow: none;
}
.session-item-head{
padding:20px;
border-bottom:1px solid #e5e7eb;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:16px;
}
.session-info h3{ margin:4px 0; font-size:21px; }
.session-label{
margin:0;
font-size:11px;
letter-spacing:.08em;
text-transform:uppercase;
color:#6b7280;
}
.session-actions{
display:flex;
align-items: flex-start;
gap:10px;
}
.session-item-body{
padding:18px 20px 22px;
display:flex;
flex-direction:column;
gap:20px;
}
.session-meta{
display:flex;
flex-wrap:wrap;
border:1px solid #f1f5f9;
border-radius:12px;
padding:12px 16px;
gap:18px;
justify-content: space-between;
}
.session-meta div{ min-width:140px; }
.session-meta dt{
font-size:12px;
text-transform:uppercase;
letter-spacing:.08em;
color:#94a3b8;
margin-bottom:4px;
}
.session-meta dd{
margin:0;
font-weight:600;
color:#0f172a;
}
.session-meta .meta-full{ width:100%; }
.session-meta .meta-full dd{ font-weight:400; }
.session-participants, .session-files{
border:1px solid #f1f5f9;
border-radius:12px;
padding:14px;
background:#fff;
box-shadow:inset 0 0 0 1px rgba(99,102,241,0.03);
}
.session-participants-head{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:10px;
margin-bottom:12px;
}
.session-participants-head h4{
margin:0;
font-size:16px;
}
.reg-slot select{
min-width:220px;
border:1px solid #d1d5db;
border-radius:8px;
padding:6px 10px;
font-size:14px;
background:#fff;
}
.training-reg-table .reg-actions{
display:flex;
flex-direction:column;
gap:8px;
}
.training-reg-table .reg-actions form{
margin:0;
}
.btn-link{
background:none;
border:0;
padding:0;
font-size:14px;
cursor:pointer;
color:#0f172a;
}
.btn-link.danger{
color:#dc2626; /* rouge de base */
text-decoration:none;
font-weight:500;
border-radius:999px;
padding:4px 8px;
transition:
color .15s ease,
background-color .15s ease,
transform .08s ease,
box-shadow .15s ease;
}
/* Hover : rouge + foncé + fond léger */
.btn-link.danger:hover{
color:#b91c1c; /* rouge plus profond */
background:rgba(248,113,113,0.08); /* léger halo rouge */
transform:translateY(-1px);
box-shadow:0 6px 14px rgba(0,0,0,0.08);
text-decoration:underline;
}
/* Active : on “rappuie” le bouton */
.btn-link.danger:active{
transform:translateY(0);
box-shadow:0 2px 6px rgba(0,0,0,0.12);
}
/* Focus clavier accessible */
.btn-link.danger:focus-visible{
outline:2px solid #f97373;
outline-offset:2px;
}
.btn-link:hover{ text-decoration:underline; }
.training-sessions-block .page-head.compact{ margin-bottom:12px; }
.training-sessions-grid{
display:grid;
gap:18px;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
}
.session-card{
border:1px solid #e5e7eb;
border-radius:16px;
background:#fff;
box-shadow:0 8px 20px rgba(15,23,42,0.08);
display:flex;
flex-direction:column;
}
.session-card--add{
border-style:dashed;
background:#fdf2f8;
box-shadow:none;
}
.session-card--add summary{
padding:20px;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
cursor:pointer;
list-style:none;
}
.session-card--add summary::-webkit-details-marker{ display:none; }
.session-card--add summary::after{
content:"+";
font-size:22px;
color:#be185d;
}
.session-card--add[open] summary::after{
transform:rotate(45deg);
}
.session-card--add .session-card-body{
border-top:1px solid #fbcfe8;
}
.summary-label{
text-transform:uppercase;
font-size:11px;
letter-spacing:.08em;
color:#6b7280;
margin:0;
}
.session-card-head{
padding:20px;
border-bottom:1px solid #f1f5f9;
display:flex;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
align-items:flex-start;
}
.session-head-main h3{
margin:4px 0;
font-size:20px;
}
.session-label{
margin:0;
font-size:11px;
letter-spacing:.08em;
text-transform:uppercase;
color:#6b7280;
}
.session-head-actions{
display:flex;
gap:10px;
align-items:center;
}
.session-card-body{
padding:20px;
display:flex;
flex-direction:column;
gap:16px;
}
.session-card-tools details{
margin-bottom:12px;
}
.session-card-tools details:last-child{
margin-bottom:0;
}
.participant-add-panel,
.session-edit-panel{
border:1px solid #e5e7eb;
border-radius:12px;
background:#f9fafb;
}
.participant-add-panel summary,
.session-edit-panel summary{
padding:10px 14px;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
list-style:none;
font-weight:600;
}
.participant-add-panel summary::-webkit-details-marker,
.session-edit-panel summary::-webkit-details-marker{ display:none; }
.participant-add-panel summary::after,
.session-edit-panel summary::after{
content:"";
width:9px;
height:9px;
border:solid #94a3b8;
border-width:0 2px 2px 0;
transform:rotate(45deg);
}
.participant-add-panel[open] summary::after,
.session-edit-panel[open] summary::after{
transform:rotate(-135deg);
}
.participant-add-panel[open] summary,
.session-edit-panel[open] summary{
border-bottom:1px solid #e5e7eb;
}
.participant-add-panel form,
.session-edit-panel form{
margin:0;
padding:12px 14px 14px;
display:flex;
flex-direction:column;
gap:12px;
}
.session-card-table{
border:1px solid #f1f5f9;
border-radius:12px;
padding:12px 0 0;
background:#fff;
}
.training-reg-table .reg-actions{
display:flex;
flex-direction:column;
gap:8px;
}
.training-reg-table .reg-actions form{
margin:0;
}
.reg-slot select{
min-width:220px;
border:1px solid #d1d5db;
border-radius:8px;
padding:6px 10px;
font-size:14px;
background:#fff;
}
.btn-link{
background:none;
border:0;
padding:0;
font-size:14px;
cursor:pointer;
color:#0f172a;
}
.btn-link.danger{
color:#dc2626;
}
.btn-link:hover{
text-decoration:underline;
}
.training-empty{
grid-column:1/-1;
color:#6b7280;
align-self:flex-start;
}
@media (max-width: 768px) {
.training-session-row {
flex-direction:column;
align-items:flex-start;
}
.training-course-head {
flex-direction:column;
}
.training-registration-fields {
flex-direction:column;
align-items:flex-start;
width:100%;
}
.training-registration-form select {
width:100%;
}
.training-session-panel summary{
flex-direction:column;
}
.summary-stats{
justify-content:flex-start;
}
}
.training-page .intra-main {
display: inline-grid;
gap: 12px;
}
.training-page .intra-title {
margin: 0 0 10px 0!important
}
.session-info .muted::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PgoNPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KDTx0aXRsZS8+Cg08ZyBkYXRhLW5hbWU9IkxheWVyIDEwIiBpZD0iTGF5ZXJfMTAiPgoNPHBhdGggZD0iTTE2LDJBMTAsMTAsMCwwLDAsNiwxMmMwLDUuMTUsOC4yNiwxNi4zNCw5LjIsMTcuNmExLDEsMCwwLDAsMS42LDBDMTcuNzQsMjguMzQsMjYsMTcuMTUsMjYsMTJBMTAsMTAsMCwwLDAsMTYsMlptMCwyNS4zQzEzLjIsMjMuMzksOCwxNS40Myw4LDEyYTgsOCwwLDAsMSwxNiwwQzI0LDE1LjQzLDE4LjgsMjMuMzksMTYsMjcuM1oiLz4KDTxwYXRoIGQ9Ik0xNiw3YTUsNSwwLDEsMCw1LDVBNSw1LDAsMCwwLDE2LDdabTAsOGEzLDMsMCwxLDEsMy0zQTMsMywwLDAsMSwxNiwxNVoiLz4KDTwvZz4KDTwvc3ZnPg==");
background-size: contain;
background-repeat: no-repeat;
margin-right: 4px;
}
.btn.btn-flat {
box-shadow:none;
background:#1f2937;
color:#fff;
}
.btn.btn-flat:hover {
background:#111827;
}
/* Large mobile */
@media (max-width: 920px){
.nl-grid{ grid-template-columns: 1fr 1fr; }
.nl-actions{ justify-content: stretch; }
}
/* 900 */
@media (max-width: 900px){
.intranet .k{ width: 160px; }
}
/* 880 => off-canvas déjà géré plus haut */
@media (max-width: 720px){
.profile-grid {
grid-template-columns: 1fr!important;
}
.result-wrapper{ padding: 0 16px; }
.bo-news .bo-fields-2{ grid-template-columns: 1fr; }
.directory-section .filters-grid{ grid-template-columns: 1fr; }
.directory-section .filters-actions{ justify-content: stretch; }
.intranet .news-rail{ grid-auto-columns: 85%; }
.intranet .week-cal{ grid-template-columns: repeat(4, 1fr); }
}
/* 600 */
@media (max-width: 600px){
.logo{ height: 32px; }
.otp-grid{ grid-template-columns: repeat(6, 44px); gap: 8px; }
.otp-grid .otp{ height: 48px; font-size: 20px; }
.intranet .intra-avatar{ width: 76px; height: 76px; }
}
/* 480 */
@media (max-width: 480px){
.intranet .week-cal{ grid-template-columns: repeat(3, 1fr); }
}
/* 420 */
@media (max-width: 420px){
body:not(:has(.main-header)) .auth-card{ border-radius: var(--radius); padding: 20px; }
}
/* 360 */
@media (max-width: 360px){
.intranet .week-cal{ grid-template-columns: repeat(2, 1fr); }
}
.invite-user-select{
position:relative;
display:flex;
flex-direction:column;
gap:8px;
}
.invite-user-select input[type="text"]{
border:1px solid #d1d5db;
border-radius:10px;
padding:10px 12px;
font:inherit;
}
.selected-users{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.selected-users .chip button{
border:0;
background:none;
color:#dc2626;
font-size:16px;
line-height:1;
padding:0 4px;
cursor:pointer;
}
.invite-modal-header{
padding:18px 20px 0;
display:flex;
flex-direction:column;
gap:6px;
}
.invite-modal-header h3{
margin:0;
font-size:18px;
color:#0f172a;
display:flex;
align-items:center;
gap:10px;
}
.invite-modal-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:10px;
background:#fee2e2;
}
.invite-modal-form{
padding:0 20px 24px;
display:flex;
flex-direction:column;
gap:18px;
}
.invite-section{
border:1px solid #e5e7eb;
border-radius:14px;
padding:16px;
background:#fff;
}
.invite-section-title{
font-size:12px;
text-transform:uppercase;
letter-spacing:.08em;
color:#94a3b8;
margin-bottom:10px;
}
.invite-targets{
display:flex;
flex-direction:column;
gap:10px;
}
.invite-target-card{
border:2px solid #e5e7eb;
border-radius:14px;
padding:14px;
display:flex;
gap:12px;
align-items:flex-start;
cursor:pointer;
transition:border-color .2s, background .2s;
}
.invite-target-card input{
position:absolute;
opacity:0;
}
.invite-target-radio{
width:18px;
height:18px;
border:2px solid #cbd5f5;
border-radius:50%;
margin-top:4px;
flex-shrink:0;
}
.invite-target-card .invite-target-icon{
font-size:20px;
}
.invite-target-card.selected{
border-color:#6366f1;
background:#f5f3ff;
}
.invite-target-card.selected .invite-target-radio{
border-color:#6366f1;
background:#6366f1;
box-shadow:0 0 0 3px rgba(99,102,241,.15);
}
.invite-target-card.is-disabled{
opacity:.5;
cursor:not-allowed;
pointer-events:none;
}
.invite-target-label{
font-weight:600;
color:#0f172a;
}
.invite-target-desc{
font-size:13px;
color:#64748b;
}
.invite-search{
display:flex;
align-items:center;
gap:8px;
border:1px solid #d1d5db;
border-radius:10px;
padding:8px 12px;
margin-bottom:12px;
color:#94a3b8;
}
.invite-search input{
border:0;
flex:1;
font:inherit;
color:#0f172a;
}
.invite-search input:focus{
outline:none;
}
.invite-dropdown{
max-height:210px;
overflow:auto;
border:1px solid #e5e7eb;
border-radius:12px;
background:#fff;
box-shadow:0 15px 25px rgba(15,23,42,.08);
}
.invite-dropdown-item{
width:100%;
border:0;
background:#fff;
display:flex;
gap:12px;
padding:10px 14px;
text-align:left;
cursor:pointer;
border-bottom:1px solid #f1f5f9;
}
.invite-dropdown-item:last-child{
border-bottom:none;
}
.invite-dropdown-item.is-selected{
background:#f5f3ff;
border-left:3px solid #6366f1;
}
.invite-dropdown-icon{
width:36px;
height:36px;
border-radius:10px;
background:#eef2ff;
display:inline-flex;
align-items:center;
justify-content:center;
}
.invite-dropdown-info{
display:flex;
flex-direction:column;
gap:2px;
color:#0f172a;
font-size:14px;
}
.invite-dropdown-info small{
font-size:12px;
color:#64748b;
}
.invite-dropdown-check{
margin-left:auto;
width:16px;
height:16px;
border-radius:50%;
border:2px solid #cbd5f5;
}
.invite-dropdown-item.is-selected .invite-dropdown-check{
border-color:#6366f1;
background:#6366f1;
}
.invite-summary{
background:linear-gradient(120deg, #fff7ed, #fffbeb);
border-radius:14px;
padding:14px;
border:1px solid #fed7aa;
}
.invite-summary-title{
font-size:12px;
font-weight:600;
text-transform:uppercase;
color:#c2410c;
margin-bottom:4px;
}
.invite-actions{
display:flex;
gap:12px;
}
.invite-actions .btn-secondary{
flex:1;
}
.invite-actions .btn{
flex:1;
}
.invite-dropdown .invite-empty{
padding:18px;
text-align:center;
color:#94a3b8;
font-size:13px;
}
.invite-empty{
padding:18px;
text-align:center;
color:#94a3b8;
font-size:13px;
}