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

:root {
    --ardoise: #0b1f3a;
    --ardoise-2: #123058;
    --azur: #2f6fed;
    --azur-clair: #eaf1ff;
    --craie: #f6f8fc;
    --encre: #1b2430;
    --encre-douce: #5b6472;
    --ligne-grille: rgba(47, 111, 237, 0.07);
    --corail: #ff7a59;
    --corail-fond: #fff1ec;
    --menthe: #16a34a;
    --menthe-fond: #e9f8ef;
    --rouge: #e0453b;
    --rouge-fond: #fdeceb;
    --contour: #e1e7f2;
    --ombre: 0 10px 30px -14px rgba(11, 31, 58, 0.22);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    background-color: var(--craie);
    background-image:
        linear-gradient(var(--ligne-grille) 1px, transparent 1px),
        linear-gradient(90deg, var(--ligne-grille) 1px, transparent 1px);
    background-size: 28px 28px;
    color: var(--encre);
}

h1, h2, h3, .display {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
}

/* ---------- En-tête ---------- */

.padlet-header {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--ardoise);
    color: #fff;
    padding: 26px 32px;
}

.padlet-header::before {
    content: "";
    position: absolute;
    top: -60%;
    right: -8%;
    width: 380px;
    height: 380px;
    background: var(--ardoise-2);
    border-radius: 38% 62% 55% 45% / 45% 40% 60% 55%;
    opacity: 0.9;
}

.padlet-header::after {
    content: "";
    position: absolute;
    bottom: -70%;
    right: 10%;
    width: 220px;
    height: 220px;
    background: var(--azur);
    border-radius: 50%;
    opacity: 0.18;
}

.padlet-header img.logo {
    position: relative;
    width: 50px;
    height: 50px;
    z-index: 1;
}

.padlet-header .titre-bloc {
    position: relative;
    z-index: 1;
}

.padlet-header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.padlet-header .sous-titre {
    font-size: 0.9rem;
    color: #b7c8ec;
    margin-top: 3px;
}

.padlet-header .header-actions {
    position: relative;
    z-index: 1;
    margin-left: auto;
    display: flex;
    gap: 10px;
}

/* ---------- Boutons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 10px;
    border: none;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primaire { background: #fff; color: var(--ardoise); }
.btn-primaire:hover { box-shadow: 0 6px 16px -6px rgba(0,0,0,0.35); }

.btn-secondaire { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.28); }
.btn-secondaire:hover { background: rgba(255,255,255,0.2); }

.btn-clair { background: var(--azur-clair); color: var(--azur); }
.btn-clair:hover { background: #dbe8ff; }

.btn-valider { background: var(--menthe); color: #fff; }
.btn-valider:hover { box-shadow: 0 6px 16px -8px rgba(22,163,74,0.55); }

.btn-refuser { background: var(--corail); color: #fff; }
.btn-refuser:hover { box-shadow: 0 6px 16px -8px rgba(255,122,89,0.55); }

.btn-supprimer { background: transparent; color: var(--rouge); border: 1px solid #f3c9c6; }
.btn-supprimer:hover { background: var(--rouge-fond); }

/* ---------- Structure ---------- */

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 22px 70px;
}

.section-titre {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ardoise);
    margin: 34px 0 14px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.section-titre::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--contour);
}

/* ---------- Mur de documents ---------- */

.mur-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.carte-doc {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 20px 20px 18px 22px;
    box-shadow: var(--ombre);
    border: 1px solid var(--contour);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: apparition 0.4s ease backwards;
}

.mur-grille .carte-doc:nth-child(1) { animation-delay: 0.02s; }
.mur-grille .carte-doc:nth-child(2) { animation-delay: 0.06s; }
.mur-grille .carte-doc:nth-child(3) { animation-delay: 0.10s; }
.mur-grille .carte-doc:nth-child(4) { animation-delay: 0.14s; }
.mur-grille .carte-doc:nth-child(5) { animation-delay: 0.18s; }
.mur-grille .carte-doc:nth-child(n+6) { animation-delay: 0.20s; }

@keyframes apparition {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.carte-doc::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 4px;
    background: var(--accent-carte, var(--azur));
}

.carte-doc:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px -16px rgba(11, 31, 58, 0.32);
}

.carte-doc .ligne-haut {
    display: flex;
    align-items: center;
    gap: 12px;
}

.carte-doc .icone-type {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--accent-fond, var(--azur-clair));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.carte-doc h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--encre);
    line-height: 1.3;
}

.carte-doc p.description {
    font-size: 0.88rem;
    color: var(--encre-douce);
    line-height: 1.5;
    margin: 0;
}

.carte-doc .meta {
    font-size: 0.76rem;
    color: #8993a3;
    font-variant-numeric: tabular-nums;
}

.carte-doc .telecharger {
    align-self: flex-start;
    background: var(--azur-clair);
    color: var(--azur);
    padding: 7px 15px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.12s ease;
}

.carte-doc .telecharger:hover { background: #dbe8ff; }

/* Couleurs d'accent selon le type de fichier */
.type-pdf { --accent-carte: #e0453b; --accent-fond: #fdeceb; }
.type-image { --accent-carte: #9333ea; --accent-fond: #f4e9fd; }
.type-doc { --accent-carte: #2f6fed; --accent-fond: #eaf1ff; }
.type-tableur { --accent-carte: #16a34a; --accent-fond: #e9f8ef; }
.type-diaporama { --accent-carte: #ff7a59; --accent-fond: #fff1ec; }
.type-archive { --accent-carte: #64748b; --accent-fond: #eef1f5; }

/* ---------- États vides / verrouillé ---------- */

.etat-vide {
    text-align: center;
    color: var(--encre-douce);
    padding: 70px 20px;
    font-size: 1rem;
    background: #fff;
    border-radius: 18px;
    border: 1px dashed var(--contour);
}

.etat-vide .pictogramme {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
}

/* ---------- Formulaire de dépôt ---------- */

form.formulaire-depot {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: var(--ombre);
    border: 1px solid var(--contour);
    display: flex;
    flex-direction: column;
    gap: 13px;
    max-width: 560px;
}

form.formulaire-depot label {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ardoise);
}

form.formulaire-depot input[type="text"],
form.formulaire-depot textarea,
form.formulaire-depot input[type="file"] {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--contour);
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--craie);
}

form.formulaire-depot input:focus,
form.formulaire-depot textarea:focus {
    outline: 2px solid var(--azur);
    outline-offset: 1px;
}

/* ---------- Alertes ---------- */

.alerte {
    padding: 11px 16px;
    border-radius: 10px;
    font-size: 0.87rem;
    margin-bottom: 16px;
    font-weight: 500;
}

.alerte-succes { background: var(--menthe-fond); color: #157a3d; }
.alerte-erreur { background: var(--rouge-fond); color: #b5352c; }

/* ---------- Tableau admin ---------- */

.tableau-admin {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--ombre);
    border: 1px solid var(--contour);
}

.tableau-admin th, .tableau-admin td {
    padding: 13px 15px;
    text-align: left;
    font-size: 0.87rem;
    border-bottom: 1px solid #eef2f9;
}

.tableau-admin th {
    background: var(--craie);
    color: var(--ardoise);
    font-weight: 600;
}

.tableau-admin tr:last-child td { border-bottom: none; }
.tableau-admin tr:hover td { background: #fafbfe; }

.actions-cell { display: flex; gap: 6px; flex-wrap: wrap; }

.badge-statut {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 20px;
}

.badge-attente { background: var(--corail-fond); color: #c5561f; }
.badge-valide { background: var(--menthe-fond); color: #157a3d; }
.badge-refuse { background: var(--rouge-fond); color: #b5352c; }

@media (max-width: 640px) {
    .padlet-header { flex-wrap: wrap; padding: 22px; }
    .padlet-header .header-actions { margin-left: 0; }
}