/* =====================================================================
   LYCÉE VICTOR DURUY — PORTAIL DES APPLICATIONS
   Charte graphique commune (reprise des applications existantes)
   ===================================================================== */

*{box-sizing:border-box;}

:root{
  --ink:#15171c; --muted:#6b7280; --line:#e6e8ee;
  --bg:#f4f5f8; --card:#ffffff;
  --brand:#2f54eb; --brand-d:#1f3fd0; --brand-soft:#eef2ff;
  --ok:#0f9d58; --ok-bg:#e7f6ee;
  --warn:#d98300; --warn-bg:#fdf3e3;
  --bad:#e5484d; --bad-bg:#fdecec;
  --r:16px; --r-sm:11px;
  --sh-sm:0 1px 2px rgba(16,24,40,.05);
  --sh:0 1px 3px rgba(16,24,40,.05), 0 18px 40px -22px rgba(16,24,40,.35);
  --sh-lg:0 30px 70px -30px rgba(16,24,40,.45);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --display:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;
}

html,body{margin:0;padding:0;}
body{
  font-family:var(--font);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 520px at 10% -12%, #e6ecff 0%, rgba(230,236,255,0) 60%),
    radial-gradient(900px 480px at 100% -4%, #e7f8f0 0%, rgba(231,248,240,0) 55%),
    var(--bg);
  background-attachment:fixed;
}
a{color:var(--brand);}
:focus-visible{outline:3px solid rgba(47,84,235,.45);outline-offset:2px;border-radius:6px;}

/* ---------- En-tête ---------- */
header.top{
  display:flex;align-items:center;gap:15px;max-width:1080px;margin:0 auto;
  padding:26px 24px 12px;
}
.logo{
  width:58px;height:58px;border-radius:14px;flex-shrink:0;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh-sm);display:grid;place-items:center;
}
.logo img{width:100%;height:100%;object-fit:contain;display:block;}
.titre-etab h1{font-family:var(--display);font-size:22px;margin:0;font-weight:800;letter-spacing:-.5px;}
.titre-etab p{margin:2px 0 0;font-size:13px;color:var(--muted);}

.compte{margin-left:auto;display:flex;align-items:center;gap:10px;}
.compte .pastille{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:var(--brand-soft);color:var(--brand-d);font-weight:800;font-size:13.5px;
  border:1px solid #dbe3ff;
}
.compte .qui{line-height:1.25;}
.compte .qui strong{display:block;font-size:14px;font-weight:700;}
.compte .qui span{font-size:12.5px;color:var(--muted);}
.compte .liens{display:flex;gap:6px;margin-left:6px;}
@media(max-width:700px){.compte .qui{display:none;}}

main{max-width:1080px;margin:0 auto;padding:22px 24px 90px;}
@media(max-width:560px){header.top,main{padding-left:16px;padding-right:16px;}}

/* ---------- Accroche ---------- */
.hero{margin:10px 0 30px;}
.hero h2{font-family:var(--display);font-size:36px;font-weight:800;letter-spacing:-1.1px;margin:0 0 10px;line-height:1.06;}
.hero p{color:var(--muted);font-size:16px;max-width:60ch;margin:0;}
@media(max-width:560px){.hero h2{font-size:26px;}}

/* ---------- Tuiles des applications ---------- */
.tuiles{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));}

.tuile{
  display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 22px 18px;box-shadow:var(--sh);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s;
}
.tuile:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:#d7dcea;}
.tuile:active{transform:translateY(-1px);}

.tuile .marque{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;
}
.tuile .marque svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.tuile h3{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.4px;margin:0;}
.tuile p{margin:6px 0 0;font-size:14.2px;color:var(--muted);}
.tuile .ouvrir{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font-size:13.5px;font-weight:700;color:var(--brand);
}

/* Teintes disponibles pour les tuiles */
.t-bleu     .marque{background:#eef2ff;color:#2f54eb;}
.t-bleu     .ouvrir{color:#2f54eb;}
.t-vert     .marque{background:#e7f6ee;color:#0f8a4d;}
.t-vert     .ouvrir{color:#0f8a4d;}
.t-violet   .marque{background:#f2ecfd;color:#6b3fd4;}
.t-violet   .ouvrir{color:#6b3fd4;}
.t-ambre    .marque{background:#fdf3e3;color:#b8700a;}
.t-ambre    .ouvrir{color:#b8700a;}
.t-rose     .marque{background:#fdecf2;color:#c4265e;}
.t-rose     .ouvrir{color:#c4265e;}
.t-sarcelle .marque{background:#e4f5f6;color:#0d7d87;}
.t-sarcelle .ouvrir{color:#0d7d87;}

/* Application annoncée mais pas encore ouverte */
.tuile.prepare{opacity:.62;pointer-events:none;box-shadow:var(--sh-sm);}
.tuile.prepare .ouvrir{color:var(--muted);}

.vide{
  background:var(--card);border:1px dashed #d3d8e6;border-radius:var(--r);
  padding:34px;text-align:center;color:var(--muted);
}

/* ---------- Bas de page ---------- */
footer.bas{
  max-width:1080px;margin:0 auto;padding:0 24px 60px;color:var(--muted);font-size:12.8px;
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;
}
footer.bas .separe{margin-left:auto;}

/* ---------- Boutons et champs ---------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-size:14.5px;font-weight:700;cursor:pointer;
  padding:11px 20px;border-radius:11px;border:1px solid transparent;
  background:var(--brand);color:#fff;text-decoration:none;
  box-shadow:0 12px 24px -14px rgba(47,84,235,.9);transition:.18s;
}
.bouton:hover{background:var(--brand-d);}
.bouton.large{width:100%;padding:13px 20px;font-size:15.5px;}
.bouton.discret{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--sh-sm);}
.bouton.discret:hover{background:#f7f8fc;}
.bouton.danger{background:#fff;color:var(--bad);border-color:#f3c9ca;box-shadow:none;}
.bouton.danger:hover{background:var(--bad-bg);}
.bouton.petit{padding:7px 13px;font-size:13px;border-radius:9px;}

label{display:block;font-size:13.5px;font-weight:700;margin:0 0 6px;}
input[type=text],input[type=password],input[type=email],select,textarea{
  width:100%;font-family:var(--font);font-size:15px;color:var(--ink);
  padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(47,84,235,.14);
}
.champ{margin-bottom:16px;}
.aide{font-size:12.8px;color:var(--muted);margin:6px 0 0;}

/* ---------- Messages ---------- */
.message{border-radius:12px;padding:12px 15px;font-size:14px;margin:0 0 18px;border:1px solid transparent;}
.message.erreur{background:var(--bad-bg);border-color:#f3c9ca;color:#9b1c20;}
.message.succes{background:var(--ok-bg);border-color:#bfe6d1;color:#0b6b3c;}
.message.info{background:var(--brand-soft);border-color:#dbe3ff;color:var(--brand-d);}

/* ---------- Pages simples : connexion, mot de passe, refus ---------- */
body.page-simple{display:grid;place-items:center;min-height:100vh;padding:28px 18px;}
.carte-simple{
  width:100%;max-width:412px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:34px 32px;box-shadow:var(--sh-lg);
}
.carte-simple .logo{margin:0 auto 18px;}
.carte-simple h1{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.6px;margin:0 0 6px;text-align:center;}
.carte-simple .muted{color:var(--muted);font-size:14px;text-align:center;margin:0 0 24px;}
.carte-simple .bouton{margin-top:4px;}

/* ---------- Tableaux (administration) ---------- */
.panneau{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:24px;margin-bottom:22px;
}
.panneau h2{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.4px;margin:0 0 4px;}
.panneau .sous{color:var(--muted);font-size:14px;margin:0 0 18px;}

.tableau-cadre{overflow-x:auto;}
table.liste{width:100%;border-collapse:collapse;font-size:14px;min-width:620px;}
table.liste th{
  text-align:left;font-size:12.5px;font-weight:700;color:var(--muted);
  padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.liste td{padding:10px;border-bottom:1px solid #f0f2f7;vertical-align:middle;}
table.liste tr:last-child td{border-bottom:none;}
table.liste .inactif td{opacity:.5;}

.etiquette{
  display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand-d);white-space:nowrap;
}
.etiquette.gris{background:#f0f1f5;color:var(--muted);}
.etiquette.vert{background:var(--ok-bg);color:#0b6b3c;}

.grille-2{display:grid;gap:16px;grid-template-columns:1fr 1fr;}
@media(max-width:640px){.grille-2{grid-template-columns:1fr;}}

.actions-ligne{display:flex;gap:8px;flex-wrap:wrap;}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
  .tuile:hover{transform:none;}
}