/* ===== Polices ===== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800&family=Rajdhani:wght@400;600&display=swap');

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

:root {
    --bg: #030711;
    --nebula: #0a1830;
    --panel: rgba(9, 22, 48, 0.62);
    --panel-strong: rgba(9, 22, 48, 0.85);
    --border: rgba(47, 143, 255, 0.22);
    --border-strong: #2f8fff;
    --accent: #3fa8ff;
    --accent-soft: #7cc4ff;
    --accent-dim: #1f6fe0;
    --text: #dce6f7;
    --text-muted: #93a8cf;
    --glow: rgba(47, 143, 255, 0.35);
    --error: #ff8a8a;
}

body {
    font-family: 'Rajdhani', sans-serif;
    background: var(--bg);
    color: var(--text);
    padding-top: 70px;
    line-height: 1.6;
}

/* ===== Rideau de transition entre les pages (bascule 3D) ===== */
/* La perspective est dans le transform du rideau (et pas sur body) : sinon body devient
   le bloc conteneur des elements fixes et le rideau bascule agrandit toute la page. */
#veil {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #020409 0%, #08182f 55%, #020409 100%);
    transform: perspective(1400px) rotateX(0deg);
    transform-origin: bottom;
    backface-visibility: hidden;
    transition: transform .55s cubic-bezier(.76,0,.24,1), visibility 0s linear 0s;
    pointer-events: none;
}
#veil.veil-open {
    transform: perspective(1400px) rotateX(-90deg);
    transform-origin: bottom;
    visibility: hidden;
    transition: transform .55s cubic-bezier(.76,0,.24,1), visibility 0s linear .55s;
}
#veil.veil-close {
    transform: perspective(1400px) rotateX(0deg);
    transform-origin: top;
    pointer-events: auto;
}
#veil::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 15% 20%, #bfe0ff, transparent),
        radial-gradient(1.5px 1.5px at 35% 65%, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 60% 30%, #8ec8ff, transparent),
        radial-gradient(1.5px 1.5px at 80% 75%, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 90% 15%, #bfe0ff, transparent);
    opacity: .8;
}

body.no-anim, body.no-anim * { animation: none !important; transition: none !important; }

/* ===== Barre de navigation ===== */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 10px 30px;
    background: rgba(3, 7, 17, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

nav h1 a {
    font-family: 'Orbitron', sans-serif;
    text-decoration: none;
    color: var(--accent);
    font-size: 32px;
    text-shadow: 0 0 10px var(--glow);
}

nav .ligne ul { display: flex; list-style: none; }
nav .ligne li { margin-left: 30px; }

nav .ligne li a {
    text-decoration: none;
    color: var(--text);
    font-size: 18px;
    position: relative;
    transition: color 0.3s;
}

nav .ligne li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background: var(--border-strong);
    box-shadow: 0 0 8px var(--glow);
    transition: width 0.3s;
}

nav .ligne li a:hover { color: var(--accent); }
nav .ligne li a:hover::after { width: 100%; }

/* ===== Hero avec éclairs animés (canvas) ===== */
.premier-plan {
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: var(--bg);
}

.lightning-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.premier-plan::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 160px;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
    z-index: 1;
}

.premier-plan h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 55px;
    color: #f2f6ff;
    text-shadow: 0 0 22px var(--glow), 0 0 60px rgba(47, 143, 255, .35);
    position: relative;
    z-index: 2;
}

.premier-plan p {
    margin-top: 15px;
    font-size: 20px;
    color: var(--text-muted);
    text-shadow: 0 2px 10px rgba(2, 4, 10, .8);
    position: relative;
    z-index: 2;
    opacity: 0;
    animation: montee .8s ease .3s forwards;
}

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

/* ===== Barre de recherche / filtre par thème ===== */
.barre-filtre { max-width: 1100px; margin: 0 auto 10px; }

.barre-outils {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 35px;
}

.recherche-zone { position: relative; }

.recherche-zone .icone {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 17px;
    pointer-events: none;
}

.recherche {
    padding: 12px 16px 12px 40px;
    border-radius: 30px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    min-width: 240px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    transition: border-color .3s, box-shadow .3s;
}
.recherche:focus { outline: none; border-color: var(--border-strong); box-shadow: 0 0 10px var(--glow); }

.filtre-themes { position: relative; }

.filtre-themes summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 12px 20px;
    border-radius: 30px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--accent-soft);
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    list-style: none;
    user-select: none;
    transition: border-color .3s, box-shadow .3s;
}
.filtre-themes summary::-webkit-details-marker { display: none; }
.filtre-themes[open] summary,
.filtre-themes summary:hover { border-color: var(--border-strong); box-shadow: 0 0 10px var(--glow); }

.filtre-themes .fleche { display: inline-block; transition: transform .25s ease; }
.filtre-themes[open] .fleche { transform: rotate(180deg); }

.filtre-themes .options {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 5;
    min-width: 260px;
    max-width: 320px;
    max-height: 280px;
    overflow-y: auto;
    padding: 16px;
    background: var(--panel-strong);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(2, 4, 10, .65), 0 0 20px var(--glow);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    animation: apparait .22s ease forwards;
}

.filtre-themes .options .puce {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .03);
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: border-color .25s, background .25s, color .25s, box-shadow .25s;
}
.filtre-themes .options .puce:hover { border-color: var(--border-strong); color: var(--accent-soft); }

.filtre-themes .options .puce input[type="checkbox"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.filtre-themes .options .puce.actif,
.filtre-themes .options .puce:has(input:checked) {
    background: var(--border-strong);
    border-color: var(--border-strong);
    color: var(--bg);
    font-weight: 600;
    box-shadow: 0 0 14px var(--glow);
}

.reinitialiser {
    padding: 12px 18px;
    border-radius: 30px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    cursor: pointer;
    transition: border-color .3s, color .3s, box-shadow .3s;
}
.reinitialiser:hover { border-color: var(--error); color: var(--error); box-shadow: 0 0 10px rgba(255, 138, 138, .3); }

.etiquette-theme {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(47, 143, 255, .14);
    border: 1px solid var(--border);
    color: var(--accent-soft);
    font-size: 12px;
    font-family: 'Orbitron', sans-serif;
}

.carte .date {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

/* ===== Actions admin (renommer / supprimer un fichier) ===== */
.carte-admin { display: flex; flex-direction: column; }
.carte-admin .lien-titre { text-decoration: none; color: inherit; }

.actions-fichier {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.actions-fichier .form-renommer {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.actions-fichier .form-supprimer { display: flex; }

.actions-fichier input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    transition: border-color .3s, box-shadow .3s;
}
.actions-fichier input[type="text"]:focus { outline: none; border-color: var(--border-strong); box-shadow: 0 0 8px var(--glow); }

.actions-fichier button {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--accent-soft);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: border-color .25s, box-shadow .25s, color .25s;
}
.actions-fichier button:hover { border-color: var(--border-strong); box-shadow: 0 0 10px var(--glow); }
.actions-fichier .bouton-danger { color: var(--error); }
.actions-fichier .bouton-danger:hover { border-color: var(--error); box-shadow: 0 0 10px rgba(255, 138, 138, .3); }

.vide { color: #a99fc4; text-align: center; width: 100%; margin-top: 10px; }

/* ===== Section STI2D ===== */
#prestation { padding: 60px 20px; }

#prestation h2 {
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    color: var(--accent);
    font-size: 38px;
    margin-bottom: 50px;
    text-shadow: 0 0 12px var(--glow);
}

.cartes { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }

.carte {
    display: block;
    text-decoration: none;
    color: inherit;
    width: 280px;
    padding: 30px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-align: center;
    transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
}

.carte:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--border-strong);
    box-shadow: 0 0 28px var(--glow);
}

.carte:active { transform: translateY(-4px) scale(0.98); }

/* Liseré lumineux qui tourne autour de la carte au survol */
@property --angle-bord {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.carte { position: relative; }
.carte::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--angle-bord), transparent 0 45%, var(--accent-dim) 60%, var(--accent-soft) 78%, #ffffff 85%, var(--accent) 92%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 3px #ffffff);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
    animation: tourBord 2.2s linear infinite;
}
.carte:hover::before { opacity: 1; }
@keyframes tourBord { to { --angle-bord: 360deg; } }

.carte h3 {
    font-family: 'Orbitron', sans-serif;
    color: var(--accent-soft);
    font-size: 22px;
    margin-bottom: 12px;
}

.carte p { color: var(--text-muted); }

/* Apparition en cascade des cartes */
.cartes .reveal:nth-child(1) { animation-delay: .05s; }
.cartes .reveal:nth-child(2) { animation-delay: .2s; }
.cartes .reveal:nth-child(3) { animation-delay: .35s; }
.cartes .reveal:nth-child(4) { animation-delay: .5s; }
.cartes .reveal:nth-child(5) { animation-delay: .65s; }
.cartes .reveal:nth-child(6) { animation-delay: .8s; }

/* ===== À propos ===== */
.a-propos {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(180deg, var(--bg), var(--nebula), var(--bg));
}

.a-propos h2 {
    font-family: 'Orbitron', sans-serif;
    color: var(--accent);
    font-size: 38px;
    margin-bottom: 20px;
}

.a-propos p { max-width: 700px; margin: 0 auto; color: var(--text-muted); }

/* ===== Contact ===== */
.Contact { text-align: center; padding: 70px 20px; }

.Contact h2 {
    font-family: 'Orbitron', sans-serif;
    color: var(--accent);
    font-size: 38px;
    margin-bottom: 20px;
}

.Contact a {
    display: inline-block;
    margin-top: 20px;
    padding: 14px 34px;
    font-family: 'Orbitron', sans-serif;
    text-decoration: none;
    color: var(--accent);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    transition: all 0.3s;
}

.Contact a:hover {
    background: var(--border-strong);
    color: var(--bg);
    box-shadow: 0 0 20px var(--glow);
    transform: translateY(-3px);
}

/* ===== Footer ===== */
.bas-de-page {
    display: flex;
    justify-content: space-between;
    padding: 40px;
    background: #020409;
    border-top: 1px solid var(--border);
}

.bas-de-page a {
    color: var(--text-muted);
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s;
}

.bas-de-page a:hover { color: var(--accent); }

/* ===== Animation d'apparition ===== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    animation: apparait 0.8s ease forwards;
}

@keyframes apparait { to { opacity: 1; transform: translateY(0); } }

/* ===== Boutons / badges admin ===== */
.badge {
    animation: pulseBadge 2.4s ease-in-out infinite;
}
@keyframes pulseBadge {
    0%, 100% { text-shadow: 0 0 6px var(--glow); }
    50% { text-shadow: 0 0 18px var(--glow); }
}

/* ===== Comptes & contact : panneaux de formulaire ===== */
.panneau {
    max-width: 440px;
    margin: 60px auto;
    padding: 32px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-align: center;
    opacity: 0;
    animation: apparait .6s ease forwards;
}
.panneau-large { max-width: 720px; text-align: left; }
.panneau h3 { font-family: 'Orbitron', sans-serif; color: var(--accent-soft); margin-bottom: 14px; text-align: center; }
.panneau-info { color: var(--text-muted); font-size: 15px; margin-bottom: 18px; text-align: center; }
.panneau-info a, .panneau-lien a { color: var(--accent); }
.panneau-erreur { color: var(--error); margin: 10px 0; text-align: center; }
.panneau-lien { margin-top: 16px; color: var(--text-muted); font-size: 14px; text-align: center; }

.panneau input, .panneau textarea {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    resize: vertical;
    transition: border-color .3s, box-shadow .3s;
}
.panneau input:focus, .panneau textarea:focus { outline: none; border-color: var(--border-strong); box-shadow: 0 0 10px var(--glow); }

.panneau button, .panneau-bouton {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 30px;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all .3s;
}
.panneau button:hover, .panneau-bouton:hover {
    background: var(--border-strong);
    color: var(--bg);
    box-shadow: 0 0 18px var(--glow);
    transform: translateY(-2px);
}
.panneau form { text-align: center; }

/* ===== Fil de conversation ===== */
.fil-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 420px;
    overflow-y: auto;
    margin: 10px 0 16px;
    padding: 6px;
}
.fil-vide { color: var(--text-muted); text-align: center; }
.bulle-msg { max-width: 80%; padding: 10px 14px; border-radius: 14px; }
.bulle-msg p { margin: 0; line-height: 1.5; word-wrap: break-word; }
.bulle-auteur { display: block; font-size: 12px; opacity: .75; margin-bottom: 4px; }
.bulle-moi { align-self: flex-end; background: var(--border-strong); color: var(--bg); }
.bulle-autre { align-self: flex-start; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); color: var(--text); }
.titre-fil { margin-top: 26px; }

.liste-conversations { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.liste-conversations a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    transition: border-color .25s, box-shadow .25s;
}
.liste-conversations a:hover, .liste-conversations li.active a { border-color: var(--border-strong); box-shadow: 0 0 10px var(--glow); }
.liste-conversations span { color: var(--text-muted); font-size: 14px; }
.pastille {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 20px;
    background: rgba(255, 138, 138, .15);
    border: 1px solid var(--error);
    color: var(--error);
    font-size: 12px;
    font-style: normal;
}

/* ===== Badge de notification sur "Messages" (menu admin) ===== */
.notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ff4d6d;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: 2px;
    animation: pulseNotif 1.8s ease-in-out infinite;
}
@keyframes pulseNotif {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, .7); }
    50% { box-shadow: 0 0 0 6px rgba(255, 77, 109, 0); }
}

/* ===== Fenetre d'accueil "creer un compte" ===== */
.modal-compte {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(2, 4, 10, .7);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .3s;
}
.modal-compte.visible { opacity: 1; }
.modal-compte-boite {
    position: relative;
    max-width: 420px;
    width: 100%;
    padding: 32px 28px 24px;
    background: var(--panel-strong);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 0 40px var(--glow);
    transform: translateY(20px) scale(.96);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.modal-compte.visible .modal-compte-boite { transform: none; }
.modal-compte-boite h3 { font-family: 'Orbitron', sans-serif; color: var(--accent-soft); margin-bottom: 12px; }
.modal-compte-boite p { color: var(--text-muted); margin-bottom: 20px; }
.modal-compte-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.modal-compte-secondaire { color: var(--accent); font-size: 15px; }
.modal-compte-fermer, .modal-compte-plus-tard {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
}
.modal-compte-fermer { position: absolute; top: 10px; right: 14px; font-size: 18px; }
.modal-compte-plus-tard { margin-top: 18px; font-size: 14px; text-decoration: underline; }
.modal-compte-fermer:hover, .modal-compte-plus-tard:hover { color: var(--accent-soft); }

/* ===== Responsive ===== */
@media (max-width: 700px) {
    nav { flex-direction: column; gap: 10px; }
    nav .ligne li { margin: 0 12px; }
    .premier-plan h2 { font-size: 36px; }
}

/* ===== Logo dans la barre de navigation (toutes les pages) ===== */
/* Deux faces (::before devant, ::after derriere) tournent ensemble : la lettre n'apparait
   jamais a l'envers pendant la rotation. */
nav h1 a {
    display: inline-flex;
    align-items: center;
    position: relative;
}
nav h1 a::before,
nav h1 a::after {
    content: "";
    width: 44px;
    height: 44px;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICA8cG9seWdvbiBwb2ludHM9IjUwLDYgODgsMjggODgsNzIgNTAsOTQgMTIsNzIgMTIsMjgiIGZpbGw9IiMwODE1MmIiIHN0cm9rZT0iIzJmOGZmZiIgc3Ryb2tlLXdpZHRoPSI2Ii8+CiAgPHRleHQgeD0iNTAiIHk9IjcwIiBmb250LWZhbWlseT0iQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSI1NiIgZm9udC13ZWlnaHQ9ImJvbGQiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiM3Y2M0ZmYiPlI8L3RleHQ+Cjwvc3ZnPgo=") no-repeat center;
    background-size: contain;
    flex-shrink: 0;
    backface-visibility: hidden;
    filter: drop-shadow(0 0 6px var(--glow));
}
nav h1 a::before {
    margin-right: 12px;
    animation: logoPulse 3s ease-in-out infinite, logoTourAvant 4s linear infinite;
}
nav h1 a::after {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -22px;
    animation: logoPulse 3s ease-in-out infinite, logoTourArriere 4s linear infinite;
}
@keyframes logoPulse {
    0%, 100% { filter: drop-shadow(0 0 6px var(--glow)); }
    50% { filter: drop-shadow(0 0 14px var(--glow)); }
}
@keyframes logoTourAvant {
    from { transform: perspective(300px) rotateY(0deg); }
    to { transform: perspective(300px) rotateY(360deg); }
}
@keyframes logoTourArriere {
    from { transform: perspective(300px) rotateY(180deg); }
    to { transform: perspective(300px) rotateY(540deg); }
}