/* ============================================================
   SesseRoots Academy — shared.css
   Variables CSS canoniques + composants globaux
   Importé dans toutes les pages : <link rel="stylesheet" href="/assets/shared.css">
   ============================================================ */

/* ── Palette canonique ──────────────────────────────────────── */
:root {
  /* Verts */
  --sr-brand:        #1a5f3f;   /* couleur primaire unifiée */
  --sr-brand-dark:   #0f3f25;   /* hover / focus */
  --sr-brand-deeper: #062e1f;   /* titres sombres */
  --sr-brand-light:  #e8f5ee;   /* backgrounds légers */
  --sr-brand-alpha:  rgba(26, 95, 63, 0.08);

  /* Crème / neutres */
  --sr-cream:        #fdf9f2;
  --sr-cream2:       #f5efe3;
  --sr-cream3:       #ede3d2;

  /* Or */
  --sr-gold:         #c8860a;
  --sr-gold2:        #e8a020;
  --sr-gold3:        #f5c842;
  --sr-gold-bg:      rgba(200, 134, 10, 0.10);
  --sr-gold-border:  rgba(200, 134, 10, 0.25);

  /* Texte */
  --sr-text:         #1a1a2e;
  --sr-text2:        #4a4a6a;
  --sr-text3:        #6b7280;
  --sr-muted:        #6b7280;

  /* Utilitaires */
  --sr-white:        #ffffff;
  --sr-bg:           #f8fafc;
  --sr-card:         #ffffff;
  --sr-border:       #e5e7eb;
  --sr-border-alpha: rgba(26, 26, 46, 0.10);

  /* Sémantiques */
  --sr-success:      #16a34a;
  --sr-success-bg:   #dcfce7;
  --sr-success-text: #166534;
  --sr-danger:       #dc2626;
  --sr-danger-dark:  #b91c1c;
  --sr-warning-bg:   #fef3c7;
  --sr-warning-text: #92400e;
  --sr-star:         #f59e0b;

  /* Ombres */
  --sr-shadow:   0 2px 16px rgba(26, 26, 46, 0.08);
  --sr-shadow2:  0 8px 40px rgba(26, 26, 46, 0.12);
  --sr-shadow3:  0 20px 60px rgba(6, 46, 31, 0.15);

  /* Rayons */
  --sr-radius:   12px;
  --sr-radius-lg: 18px;
}

/* ── Reset minimal partagé ──────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── Focus visible accessible ───────────────────────────────── */
/* On évite outline:none seul — on redéfinit un focus propre */
:focus-visible {
  outline: 2px solid var(--sr-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Toast global (Auth.showToast) ──────────────────────────── */
#sr-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 14px 20px;
  border-radius: 10px;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  max-width: min(90vw, 360px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.20);
  z-index: 9999;
  transition: opacity 0.3s ease;
}
#sr-toast.toast-success { background: var(--sr-success); }
#sr-toast.toast-error   { background: var(--sr-danger); }
#sr-toast.toast-info    { background: #3b82f6; }
#sr-toast.toast-warning { background: var(--sr-star); }

/* ── Skip link accessibilité ────────────────────────────────── */
.sr-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--sr-brand);
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  transition: top 0.2s;
}
.sr-skip-link:focus {
  top: 0;
}

/* ── Utilitaires partagés ───────────────────────────────────── */
.sr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.logo-img{height:32px;width:32px;object-fit:contain;flex-shrink:0;border-radius:4px;}
.logo{display:flex;align-items:center;gap:.5rem;}

/* ── Toast notifications ── */
.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:.6rem;pointer-events:none;max-width:min(90vw,340px);}
.toast{padding:.85rem 1.2rem;border-radius:12px;font-size:.88rem;font-weight:500;box-shadow:0 4px 20px rgba(0,0,0,.2);animation:toastIn .3s ease;max-width:100%;line-height:1.5;pointer-events:auto;word-break:break-word;}
.toast.info{background:#062e1f;color:#fff;}
.toast.success{background:#16a34a;color:#fff;}
.toast.error{background:#dc2626;color:#fff;}
.toast.warning{background:#c8860a;color:#fff;}
@keyframes toastIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes toastOut{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(10px);}}

/* ── Mobile nav (mnav) — disponible sur toutes les pages ── */
.mob-menu-btn{display:none;width:38px;height:38px;border-radius:10px;border:1px solid #dbe7df;background:#fff;color:#14532d;font-size:1.15rem;font-weight:700;align-items:center;justify-content:center;cursor:pointer;line-height:1;flex-shrink:0;}
.mnav-backdrop{display:none;position:fixed;inset:0;background:rgba(6,46,31,.45);backdrop-filter:blur(3px);z-index:349;opacity:0;pointer-events:none;transition:opacity .25s;}
.mnav-backdrop.on{opacity:1;pointer-events:auto;}
.mnav{display:none;position:fixed;top:0;right:0;height:100vh;width:min(360px,88vw);background:#fff;z-index:350;transform:translateX(100%);transition:transform .28s ease;border-left:1px solid #e5e7eb;padding:5.3rem 1.2rem 1.4rem;box-shadow:-14px 0 50px rgba(6,46,31,.16);overflow-y:auto;}
.mnav.on{transform:translateX(0);}
.mnav-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.mnav-ttl{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#14532d;}
.mnav-close{width:34px;height:34px;border-radius:10px;border:1px solid #e5e7eb;background:#f8faf9;color:#374151;font-size:1rem;cursor:pointer;}
.mnav-links{list-style:none;display:flex;flex-direction:column;gap:.2rem;margin:1rem 0 1.2rem;padding:0;}
.mnav-links a{display:flex;padding:.82rem .75rem;border-radius:12px;font-size:.92rem;font-weight:600;color:#14532d;text-decoration:none;}
.mnav-links a:hover{background:#f0f9f4;}
.mnav-actions{display:flex;flex-direction:column;gap:.65rem;}
@media(max-width:900px){.mob-menu-btn{display:inline-flex;}.mnav,.mnav-backdrop{display:block;}}