/* ═══════════════════════════════════════════════════════════════════════════
   Mon Espace Formation — styles de base
   (Tailwind gère l'essentiel via CDN ; ici les styles personnalisés)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens (dérivés du logo) ── */
:root {
  --brand-50:#ecfdfb; --brand-100:#cbf9f2; --brand-200:#98f2e8; --brand-300:#5fe5d9;
  --brand-400:#2ed3c6; --brand-500:#17C2BB; --brand-600:#0fa39c; --brand-700:#14807b;
  --brand-800:#2A6D69; --brand-900:#1a4b48;
  --mint:#02FCC2; --mint-dark:#05c79a; --blue:#2894B5; --deep:#2A6D69;
  --ink:#0f172a;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #1e293b;
  background: #f4f8f8;
  background-image: radial-gradient(1200px 400px at 15% -5%, rgba(23,194,187,.10) 0%, transparent 60%), radial-gradient(1000px 360px at 100% 0%, rgba(40,148,181,.09) 0%, transparent 55%);
  background-attachment: fixed;
}

/* ── Ombres douces & cartes ── */
.shadow-soft { box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); }

/* ── Typographie ── */
h1, h2, h3, .font-heading { font-family: 'Poppins', Arial, sans-serif; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }

/* ── Focus (WCAG 2.1 AA) ── */
:focus-visible { outline: 2.5px solid var(--brand-600); outline-offset: 2px; border-radius: 6px; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(15,163,156,0.18); border-color: var(--brand-500) !important; }

/* ── Sidebar ── */
.sidebar-item { transition: background 0.12s, color 0.12s; }
.sidebar-item-active { background: linear-gradient(90deg, var(--brand-50) 0%, #d7f6f1 100%); color: var(--brand-700); position: relative; }
.sidebar-item-active::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: var(--brand-500); border-radius: 0 3px 3px 0; }

/* ── Animations ── */
.modal-overlay { animation: fadeIn 0.15s ease; }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
.modal-box { animation: slideUp 0.2s cubic-bezier(0.16,1,0.3,1); }
@keyframes slideUp { from { opacity:0; transform:translateY(14px) scale(0.99) } to { opacity:1; transform:translateY(0) scale(1) } }
@keyframes toastIn { from { opacity:0; transform:translateY(10px) scale(0.95) } to { opacity:1; transform:translateY(0) scale(1) } }
.toast-item { animation: toastIn 0.22s cubic-bezier(0.16,1,0.3,1); }
@keyframes popIn { from { opacity:0; transform:scale(0.88) } to { opacity:1; transform:scale(1) } }
.bento-pop { animation: popIn 0.25s cubic-bezier(.34,1.56,.64,1); }
@keyframes fadeUp { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:translateY(0) } }
/* Pas de fill "both" : sinon le transform translateY(0) persiste et casse le
   position:fixed des modales imbriquées (elles se calent sur la page, pas l'écran). */
.fade-up { animation: fadeUp 0.3s ease; }

/* ── Cartes ── */
.bento-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.bento-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(20,110,105,0.13); }
.card-hover { transition: border-color 0.15s, box-shadow 0.15s; }
.card-hover:hover { border-color: var(--brand-200); box-shadow: 0 4px 16px rgba(15,163,156,0.10); }

/* ── Boutons ── */
.btn-primary { transition: background 0.15s, transform 0.1s, box-shadow 0.15s; }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:hover { box-shadow: 0 4px 12px rgba(15,163,156,0.32); }

/* ── Bouton + flottant (FAB) ── */
.fab-btn { box-shadow: 0 8px 20px rgba(15,163,156,.38); transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease; }
.fab-btn:hover { transform: scale(1.04); box-shadow: 0 16px 34px rgba(15,163,156,.52); }
.fab-btn:active { transform: scale(.92); }
.fab-plus { transition: transform .45s cubic-bezier(.34,1.56,.64,1); }

/* ── Impression ── */
@media print { .no-print { display: none !important; } body { background: white; } }

/* ─── PLANNING (agenda hebdo) ─── */
.pl-head, .pl-body { display: grid; grid-template-columns: 56px repeat(7, minmax(0,1fr)); }
.pl-dayhead { text-align: center; padding: 4px 2px 8px; }
.pl-dayhead .pl-dn { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; }
.pl-dayhead .pl-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: 3px; border-radius: 50%; font-size: 13px; font-weight: 700; color: #475569; }
.pl-dayhead.pl-today .pl-dn { color: var(--brand-600); }
.pl-dayhead.pl-today .pl-num { background: var(--brand-600); color: #fff; }
.pl-hours { position: relative; }
.pl-hourlabel { position: absolute; right: 8px; font-size: 10px; color: #b6c0cf; }
.pl-col { position: relative; border-left: 1px solid #f1f5f9; cursor: pointer; }
.pl-col:last-child { border-right: 1px solid #f1f5f9; }
.pl-col.pl-col-today { background: rgba(23,194,187,.045); }
.pl-col.pl-drop { background: rgba(23,194,187,.14); box-shadow: inset 0 0 0 2px var(--formation); }
.pl-line { position: absolute; left: 0; right: 0; border-top: 1px solid #f4f6fa; pointer-events: none; }
.pl-block { position: absolute; left: 3px; right: 3px; border-radius: 8px; padding: 4px 7px; text-align: left; color: #fff; overflow: hidden; transition: filter .12s, box-shadow .12s; box-shadow: 0 1px 3px rgba(16,24,40,.18); cursor: grab; }
.pl-block.pl-dragging { opacity: .8; cursor: grabbing; box-shadow: 0 8px 20px rgba(16,24,40,.3); z-index: 20; }
.pl-handle { position: absolute; left: 0; right: 0; height: 10px; cursor: ns-resize; z-index: 2; }
.pl-handle-top { top: 0; }
.pl-handle-bottom { bottom: 0; }
.pl-block:hover .pl-handle::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 22px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.7); }
.pl-handle-top::after { top: 2px; }
.pl-handle-bottom::after { bottom: 2px; }
.pl-block:hover { filter: brightness(1.06); box-shadow: 0 5px 14px rgba(16,24,40,.26); z-index: 5; }
.pl-block .pl-bt { font-size: 10px; font-weight: 700; opacity: .95; }
.pl-block .pl-btitle { font-size: 11px; font-weight: 600; line-height: 1.2; }
.pl-block .pl-bsub { font-size: 9px; opacity: .85; margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODULE CALENDRIER ALTERNANCE (scopé sous .cal-mod)
   ═══════════════════════════════════════════════════════════════════════════ */
.cal-mod {
  --formation:#02ABD1; --entreprise:#FFFEF7; --ferie:#e0e0e0; --exam:#5cbf88;
  --cal-border:#dde3ec; --cal-accent:#02ABD1;
}
.cal-mod .legend-bar { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-bottom:18px; padding:10px 14px; background:#fff; border:1px solid var(--cal-border); border-radius:12px; }
.cal-mod .legend-item { display:flex; align-items:center; gap:7px; font-size:.82rem; color:#555; }
.cal-mod .legend-dot { width:16px; height:16px; border-radius:4px; flex-shrink:0; }

.cal-mod .month-section { margin-bottom:30px; }
.cal-mod .month-title { font-size:.95rem; font-weight:800; color:#1a2236; text-transform:uppercase; letter-spacing:.08em; padding-bottom:8px; border-bottom:2px solid var(--cal-accent); margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.cal-mod .month-title .badge { font-size:.72rem; font-weight:600; background:var(--cal-accent); color:#fff; padding:2px 8px; border-radius:20px; letter-spacing:0; text-transform:none; }

.cal-mod .weeks-grid { display:flex; flex-direction:column; gap:6px; }
.cal-mod .week-row { display:grid; grid-template-columns:56px repeat(5,1fr); gap:5px; align-items:stretch; }
.cal-mod .week-head { opacity:.5; margin-bottom:2px; font-size:.7rem; }
.cal-mod .week-head > div { text-align:center; font-weight:700; color:#aab; padding:2px 0; }
.cal-mod .week-label { display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; color:#aab; background:#fff; border-radius:8px; border:1px solid var(--cal-border); padding:4px; }
.cal-mod .week-label .wnum { font-size:.85rem; color:#1a2236; }

.cal-mod .day-cell { border-radius:10px; padding:7px 9px; min-height:94px; display:flex; flex-direction:column; gap:3px; transition:box-shadow .15s, transform .1s; position:relative; cursor:default; overflow:hidden; }
.cal-mod .day-cell.clickable { cursor:pointer; }
.cal-mod .day-cell.clickable:hover { box-shadow:0 4px 16px rgba(0,0,0,.16); transform:translateY(-1px); z-index:5; }
.cal-mod .day-cell.dimmed { opacity:.2; filter:grayscale(.5); transition:opacity .15s; }
.cal-mod .day-cell.dimmed:hover { opacity:.55; }
.cal-mod .day-cell.formation { background:#e3f5fb; border:1.5px solid var(--formation); }
.cal-mod .day-cell.formation.has-data { background:#d0eef8; }
.cal-mod .day-cell.entreprise { background:var(--entreprise); border:1.5px solid #f0eccc; }
.cal-mod .day-cell.ferie { background:var(--ferie); border:1.5px dashed #bbb; opacity:.75; }
.cal-mod .day-cell.exam-day { background:var(--exam); border:1.5px solid #45ab77; }
.cal-mod .day-head { display:flex; align-items:baseline; gap:5px; flex-shrink:0; }
.cal-mod .day-name { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; opacity:.55; }
.cal-mod .formation .day-name, .cal-mod .exam-day .day-name { opacity:1; }
.cal-mod .day-date { font-size:.95rem; font-weight:800; color:#1a2236; line-height:1; }
.cal-mod .ferie .day-date { color:#999; }
.cal-mod .day-theme { font-size:.64rem; color:#3a7a90; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-style:italic; flex:1; min-height:0; }
.cal-mod .day-label { font-size:.64rem; font-weight:700; padding:3px 7px; border-radius:5px; margin-top:auto; display:flex; align-items:center; gap:4px; max-width:100%; flex-shrink:0; }
.cal-mod .day-label .lbl-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.cal-mod .day-label .lbl-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-mod .formation .day-label { background:var(--formation); color:#fff; }
.cal-mod .entreprise .day-label { background:#faf8ea; color:#b8a860; }
.cal-mod .ferie .day-label { background:#ccc; color:#666; }
.cal-mod .exam-day .day-label { background:#eafaf1; color:#237a52; }
.cal-mod .edit-icon { position:absolute; bottom:5px; right:6px; font-size:.7rem; opacity:0; transition:opacity .15s; }
.cal-mod .day-cell.clickable:hover .edit-icon { opacity:.7; }
.cal-mod .day-drive { margin-left:auto; display:inline-flex; align-items:center; line-height:0; opacity:.9; border-radius:4px; padding:1px; transition:opacity .12s, background .12s; }
.cal-mod .day-drive:hover { opacity:1; background:rgba(255,255,255,.7); }

.cal-mod .trainer-item { display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:10px; border:1.5px solid var(--cal-border); background:#fafbfc; }
.cal-mod .trainer-color-pill { width:26px; height:26px; border-radius:50%; flex-shrink:0; box-shadow:0 1px 4px rgba(0,0,0,.15); }
.cal-mod .trainer-default-theme { font-size:.68rem; color:#aaa; font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-mod .pastel-palette { display:flex; flex-wrap:wrap; gap:6px; }
.cal-mod .pastel-swatch { width:24px; height:24px; border-radius:6px; border:2px solid #fff; box-shadow:0 0 0 1px var(--cal-border); cursor:pointer; padding:0; transition:transform .1s, box-shadow .1s; }
.cal-mod .pastel-swatch:hover { transform:scale(1.15); }
.cal-mod .pastel-swatch.active { box-shadow:0 0 0 2px var(--cal-accent); }
.cal-mod .stat-row { display:flex; justify-content:space-between; font-size:.8rem; color:#555; padding:4px 0; border-bottom:1px solid rgba(0,0,0,.06); }
.cal-mod .stat-row:last-child { border:none; }
.cal-mod .stat-val { font-weight:700; color:#1a2236; }
.cal-mod .stat-section-title { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:#aab; margin:8px 0 2px; }

@media (max-width:900px) {
  .cal-mod .week-row { grid-template-columns:44px repeat(5,1fr); gap:3px; }
  .cal-mod .day-cell { min-height:80px; padding:5px 6px; }
}

/* Téléphones : calendrier ultra-compact mais lisible (rentre dans l'écran, sans scroll horizontal) */
@media (max-width:520px) {
  .cal-mod { margin-left:-8px; margin-right:-8px; }        /* grignote les marges latérales */
  .cal-mod .legend-bar { gap:6px 10px; padding:6px 8px; margin-bottom:10px; }
  .cal-mod .legend-item { font-size:.66rem; gap:4px; }
  .cal-mod .legend-dot { width:11px; height:11px; }
  .cal-mod .month-title { font-size:.74rem; margin-bottom:6px; gap:5px; }
  .cal-mod .month-title .badge { font-size:.56rem; padding:1px 5px; }
  .cal-mod .weeks-grid { gap:2px; }
  .cal-mod .week-row { grid-template-columns:20px repeat(5,1fr); gap:2px; }
  .cal-mod .week-head { font-size:.48rem; }
  .cal-mod .week-label { padding:1px; border-radius:5px; }
  .cal-mod .week-label .wnum { font-size:.46rem; }
  .cal-mod .day-cell { min-height:52px; padding:3px 4px; gap:1px; border-width:1px; border-radius:7px; }
  .cal-mod .day-name { display:none; }                     /* redondant avec l'en-tête Lun–Ven */
  .cal-mod .day-head { gap:2px; }
  .cal-mod .day-date { font-size:.62rem; }
  .cal-mod .day-theme { font-size:.46rem; line-height:1.1; }
  .cal-mod .day-label { font-size:.44rem; padding:1px 3px; gap:2px; border-radius:4px; }
  .cal-mod .day-label .lbl-dot { width:4px; height:4px; }
  .cal-mod .day-drive svg { width:10px; height:10px; }
  /* Journées « entreprise »/« férié » : peu importantes → cases 2× plus courtes, sans étiquette */
  .cal-mod .day-cell.entreprise, .cal-mod .day-cell.ferie { min-height:26px; }
  .cal-mod .day-cell.entreprise .day-label, .cal-mod .day-cell.ferie .day-label { display:none; }
}