/* ==========================================================================
   PORTAIL D'ACCUEIL ULN — design institutionnel
   Chargé après bootstrap.min.css : classes préfixées .portal-* uniquement,
   aucune classe Bootstrap globale (.btn-primary, .card, ...) n'est modifiée
   afin de ne jamais impacter les autres pages du système.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --primary:#1E3A8A;
  --primary-dark:#172554;
  --primary-light:#3B82F6;
  --primary-50:#EFF3FC;

  --background:#F8FAFC;
  --surface:#FFFFFF;

  --text:#0F172A;
  --text-secondary:#64748B;

  --border:#E2E8F0;

  --success:#10B981;
  --danger:#DC2626;
  --warning:#F59E0B;
  --gold:#B08D57;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 8px 24px rgba(15,23,42,.08);
  --shadow-lg:0 20px 48px rgba(15,23,42,.12);
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;}
html,body{height:100%;}

.portal-page{
  margin:0;
  background:var(--background);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow-x:hidden;
}

.portal-page a{color:var(--primary-light);}
.portal-page :focus-visible{outline:2px solid var(--primary-light); outline-offset:2px;}

/* Motif de fond très discret + zone bleue institutionnelle subtile */
.portal-page::before{
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(30,58,138,.05) 1px, transparent 1px);
  background-size:26px 26px;
  pointer-events:none;
  z-index:0;
}
.portal-page::after{
  content:'';
  position:absolute; top:-220px; right:-180px;
  width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(59,130,246,.10), transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.portal-header{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:22px 40px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(6px);
}

.portal-brand{display:flex; align-items:center; gap:14px;}
.brand-logo{
  height:60px;
  width:auto;
  max-width:120px;
  object-fit:contain;
  border-radius:8px;
  flex-shrink:0;
}
.portal-brand-fallback{
  height:60px; width:60px; border-radius:12px;
  background:var(--primary-50);
  border:1px solid var(--border);
  color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
  flex-shrink:0;
}
.portal-brand-text{line-height:1.3;}
.portal-brand-text .brand-name{
  display:block; font-size:16px; font-weight:800; color:var(--text);
  letter-spacing:-.2px;
}
.portal-brand-text .brand-tagline{
  display:block; font-size:12.5px; color:var(--text-secondary); font-weight:500;
}

.portal-header-badge{
  font-size:12px; font-weight:600; color:var(--primary);
  background:var(--primary-50);
  border:1px solid rgba(30,58,138,.12);
  border-radius:20px;
  padding:6px 14px;
  display:flex; align-items:center; gap:6px;
  white-space:nowrap;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.portal-hero{
  position:relative; z-index:1;
  text-align:center;
  padding:72px 20px 40px;
  max-width:780px;
  margin:0 auto;
}
.portal-hero-title{
  font-size:44px; font-weight:800; letter-spacing:-.8px; line-height:1.15;
  color:var(--text);
  margin:0 0 12px;
}
.portal-hero-subtitle{
  font-size:19px; font-weight:600; color:var(--primary);
  margin:0 0 14px;
}
.portal-hero-desc{
  font-size:15px; color:var(--text-secondary); line-height:1.65;
  max-width:560px; margin:0 auto;
}

@media (max-width:640px){
  .portal-hero{padding:48px 18px 28px;}
  .portal-hero-title{font-size:29px;}
  .portal-hero-subtitle{font-size:16px;}
}

/* ==========================================================================
   SECTION "ACCÉDER À VOTRE ESPACE"
   ========================================================================== */
.portal-section-label{
  position:relative; z-index:1;
  text-align:center;
  margin:12px auto 36px;
}
.portal-section-label h2{
  font-size:20px; font-weight:800; color:var(--text); margin:0 0 6px;
}
.portal-section-label p{
  font-size:13.5px; color:var(--text-secondary); margin:0;
}

/* ==========================================================================
   GRID DES CARTES
   ========================================================================== */
.portal-grid{
  position:relative; z-index:1;
  max-width:920px;
  margin:0 auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
@media (max-width:767px){
  .portal-grid{grid-template-columns:1fr;}
}

.portal-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  box-shadow:var(--shadow-sm);
  text-align:left;
  display:flex;
  flex-direction:column;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.portal-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(30,58,138,.18);
}
.portal-card:hover .portal-card-icon i{transform:scale(1.08) rotate(-2deg);}

.portal-card-icon{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:18px;
}
.portal-card-icon i{transition:transform .2s var(--ease);}

.portal-card--enseignant .portal-card-icon{background:var(--primary-50); color:var(--primary-light);}
.portal-card--admin .portal-card-icon{background:#EEF0F4; color:var(--primary-dark);}

.portal-card-title{
  font-size:21px; font-weight:800; color:var(--text);
  margin:0 0 8px; letter-spacing:-.2px;
}
.portal-card-desc{
  font-size:14px; color:var(--text-secondary); line-height:1.55;
  margin:0 0 16px;
}

.portal-card-list{
  list-style:none; margin:0 0 24px; padding:0;
  display:flex; flex-direction:column; gap:7px;
}
.portal-card-list li{
  font-size:13px; color:var(--text); display:flex; align-items:center; gap:8px;
}
.portal-card-list li i{color:var(--success); font-size:12px;}

.portal-card-content{flex:1;}

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.portal-actions{display:flex; flex-direction:column; gap:10px;}

.portal-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border-radius:10px;
  padding:11px 18px;
  font-size:14.5px; font-weight:600;
  text-decoration:none;
  border:1.5px solid transparent;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.portal-btn:hover{transform:translateY(-1px);}

.portal-btn-primary{
  background:var(--primary-light);
  color:#fff;
  box-shadow:0 1px 2px rgba(59,130,246,.15);
}
.portal-btn-primary:hover{background:var(--primary); color:#fff; box-shadow:0 10px 22px rgba(59,130,246,.28);}

.portal-btn-secondary{
  background:var(--surface);
  color:var(--primary);
  border-color:var(--border);
}
.portal-btn-secondary:hover{background:var(--primary-50); border-color:rgba(30,58,138,.2); color:var(--primary-dark);}

.portal-btn-dark{
  background:var(--primary-dark);
  color:#fff;
}
.portal-btn-dark:hover{background:#0F1B3D; color:#fff; box-shadow:0 10px 22px rgba(23,37,84,.3);}

/* ==========================================================================
   SÉCURITÉ
   ========================================================================== */
.portal-security{
  position:relative; z-index:1;
  max-width:520px;
  margin:44px auto 8px;
  text-align:center;
  padding:14px 20px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
}
.portal-security i{color:var(--success); font-size:15px; margin-right:6px;}
.portal-security strong{display:block; font-size:13.5px; color:var(--text); margin-bottom:2px;}
.portal-security span{display:block; font-size:12px; color:var(--text-secondary);}

/* ==========================================================================
   INDICATEURS INSTITUTIONNELS
   ========================================================================== */
.portal-indicators{
  position:relative; z-index:1;
  max-width:820px;
  margin:36px auto 0;
  padding:0 20px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
@media (max-width:640px){ .portal-indicators{grid-template-columns:1fr;} }

.portal-indicator{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
}
.portal-indicator i{font-size:17px; color:var(--primary-light);}
.portal-indicator .k{display:block; font-size:10.5px; font-weight:700; letter-spacing:.5px; color:var(--text-secondary); text-transform:uppercase;}
.portal-indicator .v{display:block; font-size:13px; font-weight:600; color:var(--text);}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.portal-footer{
  position:relative; z-index:1;
  margin-top:auto;
  padding:28px 20px;
  text-align:center;
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--text-secondary);
  line-height:1.7;
}
.portal-footer strong{color:var(--text); font-weight:700;}

/* ==========================================================================
   RESPONSIVE HEADER
   ========================================================================== */
@media (max-width:640px){
  .portal-header{padding:16px 18px;}
  .brand-logo, .portal-brand-fallback{height:48px; width:48px;}
  .portal-brand-text .brand-name{font-size:14px;}
  .portal-brand-text .brand-tagline{font-size:11px;}
  .portal-header-badge{display:none;}
}