/* =================================================================
   Référentiel Support Équipements & Logiciels — Université Paris-Saclay
   Feuille de style principale
   ================================================================= */

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

:root {
    /* Couleurs de marque */
    --plum:        #4d1c3f;   /* aubergine logo / accents       */
    --plum-dot:    #b5197d;   /* point rose du logo             */
    --title:       #45123a;   /* titre principal                */
    --ink:         #2b2b33;   /* texte courant                  */
    --nav-grey:    #4a4a55;   /* libellés navigation            */

    /* Couleurs des cartes catégories */
    --c-materiel:    #5a1a3e;  /* Matériel — prune profond      */
    --c-metiers:     #2c7d80;  /* Logiciels métiers — sarcelle  */
    --c-licence:     #11507e;  /* Soumis à licence — bleu       */
    --c-specifiques: #7e2c70;  /* Spécifiques — magenta-violet  */
    --c-doc:         #5f7488;  /* Documentations — ardoise      */

    /* Fonds & décor */
    --bg:          #fbfafc;
    --bg-deco:     #ece9f1;
    --line:        #e6e3ec;

    --maxw:        1440px;
    --radius:      7px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Mukta', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.4;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: inherit; text-decoration: none; }

/* -----------------------------------------------------------------
   En-tête
   ----------------------------------------------------------------- */
.site-header {
    position: relative;
    z-index: 10;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.site-header__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 1.05rem 2.4rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem 1.6rem;
}

/* Logo université */
.brand {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-shrink: 0;
}

.brand__logo { line-height: 1; user-select: none; }

.brand__logo .u1 {
    display: block;
    white-space: nowrap;
    font-weight: 400;
    font-size: 1.85rem;
    letter-spacing: .01em;
    color: var(--plum);
    position: relative;
}
.brand__logo .u1 .dot {
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--plum-dot);
    top: .15em; right: -.32em;
}
.brand__logo .u2 {
    display: block;
    white-space: nowrap;
    font-weight: 800;
    font-size: 1.18rem;
    letter-spacing: .04em;
    color: var(--plum);
    margin-top: .05em;
}

.brand__divider {
    width: 1px;
    align-self: stretch;
    background: #c9c4d2;
    margin: .25rem 0;
}

.brand__subtitle {
    white-space: nowrap;
    font-weight: 700;
    font-size: 1.32rem;
    line-height: 1.18;
    color: var(--ink);
}

/* Navigation à droite */
.site-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}
.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.1rem;
    white-space: nowrap;
    color: var(--nav-grey);
    transition: color .15s ease;
}
.site-nav a:hover { color: var(--plum); }
.site-nav a svg { width: 22px; height: 22px; }
.site-nav .nav-home svg { color: var(--plum); }

/* Éléments d'authentification dans la nav */
.site-nav .nav-admin { color: var(--plum); font-weight: 700; }
.site-nav .nav-admin svg { color: var(--plum); }
.site-nav .nav-user {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: .5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    padding-left: .6rem;
    border-left: 1px solid #d9d5e0;
}
.site-nav .nav-user svg { width: 20px; height: 20px; color: #9a96a4; }
.site-nav .nav-logout { font-size: 1.05rem; }
.site-nav .nav-login { font-weight: 700; color: var(--plum); }
.site-nav .nav-login svg { color: var(--plum); }

/* -----------------------------------------------------------------
   Décor de fond
   ----------------------------------------------------------------- */
.page {
    position: relative;
    flex: 1;
    overflow: hidden;
}
.page__deco {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.page__deco .ring {
    position: absolute;
    border-radius: 50%;
    border: 120px solid var(--bg-deco);
    opacity: .55;
}
.page__deco .ring--1 {
    width: 760px; height: 760px;
    top: 60px; right: -180px;
}
.page__deco .wave {
    position: absolute;
    left: -5%; bottom: -40px;
    width: 70%;
    color: var(--bg-deco);
    opacity: .8;
}

/* -----------------------------------------------------------------
   Hero
   ----------------------------------------------------------------- */
.hero {
    position: relative;
    z-index: 1;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 5.2rem 2.4rem 5.5rem;
    text-align: center;
}

.hero__title {
    font-weight: 800;
    color: var(--title);
    font-size: clamp(2.4rem, 5.2vw, 4.6rem);
    line-height: 1.08;
    letter-spacing: -.005em;
}

.hero__rule {
    width: 220px;
    height: 4px;
    border-radius: 4px;
    background: var(--plum);
    margin: 1.8rem auto 0;
}

/* -----------------------------------------------------------------
   Cartes catégories
   ----------------------------------------------------------------- */
.cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.6rem;
    margin-top: 3.6rem;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 22.5rem;
    padding: 2.6rem 1.4rem 2.2rem;
    border-radius: var(--radius);
    color: #fff;
    background: var(--card-color, var(--c-materiel));
    box-shadow: 0 10px 24px -14px rgba(40,15,40,.45);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.card:hover,
.card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 22px 38px -16px rgba(40,15,40,.5);
    filter: brightness(1.06);
    outline: none;
}

.card--materiel    { --card-color: var(--c-materiel); }
.card--metiers     { --card-color: var(--c-metiers); }
.card--licence     { --card-color: var(--c-licence); }
.card--specifiques { --card-color: var(--c-specifiques); }
.card--doc         { --card-color: var(--c-doc); }

.card__icon {
    margin-top: 1.4rem;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card__icon svg {
    width: 78px;
    height: 78px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.card__title {
    margin-top: 1.7rem;
    font-weight: 700;
    font-size: 1.42rem;
    line-height: 1.2;
    max-width: 12ch;
}

.card__chevron {
    margin-top: auto;
    padding-top: 1.6rem;
}
.card__chevron svg {
    width: 26px; height: 26px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
}
.card:hover .card__chevron svg { transform: translateX(5px); }

/* Lien englobant la carte (accessibilité) */
.card__link { position: absolute; inset: 0; border-radius: var(--radius); }

/* -----------------------------------------------------------------
   Pied de page
   ----------------------------------------------------------------- */
.site-footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--line);
    background: #fff;
    color: #6a6675;
    font-size: .92rem;
    text-align: center;
    padding: 1.4rem;
}

/* -----------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------- */
@media (max-width: 1150px) {
    .cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
    .site-header__inner { flex-wrap: wrap; gap: 1rem 1.4rem; }
    .site-nav { margin-left: 0; width: 100%; justify-content: flex-start; }
    .hero { padding: 3.4rem 1.4rem 3.6rem; }
    .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .brand__subtitle { font-size: 1.12rem; }
    .cards { grid-template-columns: 1fr; }
    .card { min-height: 16rem; }
}

@media (prefers-reduced-motion: reduce) {
    .card, .card__chevron svg { transition: none; }
}

/* Pastille de démo (aperçu uniquement) */
.demo-chip {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #2a2433;
    color: #efeaf4;
    padding: .55rem .7rem .55rem .85rem;
    border-radius: 999px;
    font-size: .86rem;
    box-shadow: 0 10px 26px -10px rgba(0,0,0,.5);
}
.demo-chip strong { color: #fff; }
.demo-chip__dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #b98a4a;
}
.demo-chip__dot.is-admin { background: #5fc28a; }
.demo-chip button {
    font: inherit;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    padding: .35rem .8rem;
    background: #fff;
    color: #2a2433;
    cursor: pointer;
}
.demo-chip button:hover { background: #f0ecf5; }
@media (max-width: 560px) {
    .demo-chip { left: 12px; right: 12px; justify-content: center; flex-wrap: wrap; }
}