/* =========================================================
   LYCÉE HOUPHOUËT-BOIGNY — Espace Élève / Parent
   Feuille de style partagée pour les pages "application"
   (connectées, usage mobile prioritaire).
   ========================================================= */

:root{
  --green-900:#0E2A1D;
  --green-800:#164B35;
  --green-700:#1C6244;
  --green-100:#E7F0EA;
  --gold-600:#A9791A;
  --gold-500:#C9971F;
  --cream-50:#FCFAF4;
  --cream-100:#F6F1E3;
  --ink-900:#1B231E;
  --ink-500:#657167;
  --border:#E6E1CE;
  --red:#B3261E;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}

html{scroll-behavior:smooth;}

body{
  background:var(--cream-100);
  color:var(--ink-900);
  padding-bottom:100px;
  min-height:100vh;
}

/* =========================
   TOPBAR
   ========================= */

.app-topbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--cream-50);
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--border);
}

.app-back{
  color:var(--green-800);
  font-size:20px;
  text-decoration:none;
  flex-shrink:0;
  width:28px;
  text-align:center;
}

.app-logo{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 2px 8px rgba(14,42,29,.12);
  flex-shrink:0;
}

.app-topbar-text h1{
  font-size:15.5px;
  font-weight:700;
  color:var(--green-900);
  line-height:1.3;
}

.app-topbar-text p{
  font-size:11px;
  color:var(--gold-600);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-top:1px;
}

/* =========================
   WELCOME CARD
   ========================= */

.app-hero{
  margin:20px;
  background:linear-gradient(135deg,var(--green-800),var(--green-900));
  border-radius:22px;
  padding:26px 24px;
  box-shadow:0 10px 28px rgba(14,42,29,.22);
  position:relative;
  overflow:hidden;
}

.app-hero::after{
  content:"★";
  position:absolute;
  right:18px;
  top:14px;
  color:rgba(228,181,74,.35);
  font-size:36px;
}

.app-hero h2{font-size:21px;color:#fff;margin-bottom:10px;position:relative;z-index:1;}
.app-hero p{font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.85);position:relative;z-index:1;}

/* =========================
   SECTIONS / CARDS
   ========================= */

.app-section-title{
  padding:0 20px;
  margin:22px 0 14px;
  font-size:13px;
  font-weight:700;
  color:var(--gold-600);
  text-transform:uppercase;
  letter-spacing:.05em;
}

.app-list{
  padding:0 20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.app-card{
  background:var(--cream-50);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  color:inherit;
  box-shadow:0 2px 10px rgba(14,42,29,.05);
  transition:.2s;
}

.app-card:active{transform:scale(.98);}

.app-card-icon{
  width:54px;height:54px;
  border-radius:16px;
  background:var(--green-100);
  color:var(--green-800);
  display:flex;align-items:center;justify-content:center;
  font-size:23px;
  flex-shrink:0;
}

.app-card-body h3{font-size:15px;font-weight:600;margin-bottom:4px;color:var(--green-900);}
.app-card-body p{font-size:12.5px;color:var(--ink-500);line-height:1.5;}

.app-card-extra{margin-left:auto;flex-shrink:0;}

.app-badge{
  font-size:11px;font-weight:700;
  padding:5px 11px;border-radius:999px;
  white-space:nowrap;
}
.app-badge-green{background:var(--green-100);color:var(--green-800);}
.app-badge-red{background:#FBEAE9;color:var(--red);}
.app-badge-gold{background:#FBF0D9;color:var(--gold-600);}

/* =========================
   EMPTY STATE
   ========================= */

.app-empty{
  margin:20px;
  padding:50px 20px;
  text-align:center;
  color:var(--ink-500);
  font-size:14px;
  background:var(--cream-50);
  border:1.5px dashed var(--border);
  border-radius:18px;
}

/* =========================
   BUTTONS
   ========================= */

.app-btn{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  width:100%;
  padding:15px;
  border:none;
  border-radius:16px;
  font-size:14.5px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
}

.app-btn-gold{
  background:linear-gradient(135deg,var(--gold-500),var(--gold-600));
  color:var(--green-900);
  box-shadow:0 8px 20px rgba(201,151,31,.28);
}

.app-btn-green{
  background:var(--green-800);
  color:#fff;
}

.app-btn-block{padding:20px;}

/* =========================
   BOTTOM NAV
   ========================= */

.app-bottom-nav{
  position:fixed;
  bottom:0;left:0;width:100%;
  background:var(--cream-50);
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-around;
  padding:12px 0;
  z-index:999;
}

.app-nav-item{
  display:flex;flex-direction:column;align-items:center;
  text-decoration:none;
  color:var(--ink-500);
  font-size:11px;
  gap:5px;
  position:relative;
  padding-top:6px;
}

.app-nav-item.active{color:var(--green-800);font-weight:700;}
.app-nav-item.active::before{
  content:"";
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  width:26px;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-600));
}
.app-nav-item.active .app-nav-icon{
  background:var(--green-100);
  border-radius:10px;
  padding:2px 8px;
}
.app-nav-icon{font-size:20px;}

/* =========================
   RESPONSIVE (desktop preview)
   ========================= */

@media (min-width:768px){
  body{
    max-width:520px;
    margin:0 auto;
    background:var(--cream-100);
    box-shadow:0 0 40px rgba(14,42,29,.06);
  }
}