/* =====================================================
   WebInventory - Dark Souls III
   Direction artistique : Dark Fantasy / Médiéval sombre
   Gaëlle Charpentier - BUT MMI - SAÉ 203 - 2026
   ===================================================== */

/* === RESET & BOX-MODEL (cours modele-de-boite.docx) === */
*, *::before, *::after {
    box-sizing: border-box; /* border-box recommandé dans le cours */
    margin: 0;
    padding: 0;
}

/* === VARIABLES CSS === */
:root {
    /* Palette Dark Souls : noir profond, or antique, rouge sang, gris cendré */
    --couleur-fond:         #0d0b09;
    --couleur-fond-carte:   #161210;
    --couleur-fond-nav:     #100e0c;
    --couleur-or:           #c9a84c;
    --couleur-or-clair:     #e8c97a;
    --couleur-rouge:        #8b1a1a;
    --couleur-rouge-clair:  #c0392b;
    --couleur-texte:        #ccc0a8;
    --couleur-texte-clair:  #e8dcc8;
    --couleur-gris:         #4a4540;
    --couleur-bordure:      #3a3228;
    --couleur-bordure-or:   #6b5c2e;

    /* Typographie */
    --police-titre:    'Cinzel', 'Times New Roman', serif;
    --police-corps:    'EB Garamond', 'Georgia', serif;
    --police-code:     'Courier New', monospace;

    /* Dimensions */
    --largeur-max:     1200px;
    --nav-hauteur:     70px;
}

/* === BASE HTML === */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--couleur-fond);
    color: var(--couleur-texte);
    font-family: var(--police-corps);
    font-size: 1rem;
    line-height: 1.7;
    min-height: 100vh;
    /* Texture de fond subtile */
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(139,26,26,0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(201,168,76,0.03) 0%, transparent 50%);
}

/* === TYPOGRAPHIE === */
h1, h2, h3, h4 {
    font-family: var(--police-titre);
    color: var(--couleur-or);
    letter-spacing: 0.08em;
    line-height: 1.3;
}

h1 { font-size: 2.4rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.3rem; }

p { margin-bottom: 1rem; }

a {
    color: var(--couleur-or);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: var(--couleur-or-clair); }
a:visited { color: var(--couleur-or); }

/* === NAVIGATION (cours flexbox) ===
   display:flex sur le conteneur nav
   justify-content pour répartir les éléments */
.nav-principale {
    position: sticky; /* cours position.docx - sticky */
    top: 0;
    z-index: 100;
    background-color: var(--couleur-fond-nav);
    border-bottom: 1px solid var(--couleur-bordure-or);
    height: var(--nav-hauteur);
    /* Légère ombre pour la profondeur */
    box-shadow: 0 2px 20px rgba(0,0,0,0.7);
}

.nav-interne {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 0 2rem;
    height: 100%;
    /* Flexbox : cours 01a-Flexbox.docx */
    display: flex;
    align-items: center;      /* axe secondaire (cross) */
    justify-content: space-between; /* axe principal (main) */
}

.nav-logo {
    font-family: var(--police-titre);
    font-size: 1.3rem;
    color: var(--couleur-or);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.nav-logo span {
    color: var(--couleur-rouge-clair);
}

.nav-liens {
    /* Flexbox horizontal pour les liens */
    display: flex;
    align-items: center;
    gap: 0.3rem;
    list-style: none;
}

.nav-liens a {
    font-family: var(--police-titre);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--couleur-texte);
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    transition: all 0.25s ease;
}

.nav-liens a:hover,
.nav-liens a.actif {
    color: var(--couleur-or);
    border-color: var(--couleur-bordure-or);
    background-color: rgba(201,168,76,0.06);
}

/* === MISE EN PAGE PRINCIPALE === */
.conteneur-principal {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 2rem;
}

/* === HERO / BANNIÈRE ACCUEIL === */
.hero {
    text-align: center;
    padding: 5rem 2rem 4rem;
    position: relative;
    /* Ligne décorative en pseudo-élément */
}

.hero::before {
    content: '';
    display: block;
    width: 120px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--couleur-or), transparent);
    margin: 0 auto 2rem;
}

.hero::after {
    content: '';
    display: block;
    width: 120px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--couleur-or), transparent);
    margin: 2rem auto 0;
}

.hero-titre {
    font-size: 3.2rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 0.5rem;
    /* Légère lueur sur le titre */
    text-shadow: 0 0 40px rgba(201,168,76,0.3);
}

.hero-sous-titre {
    font-family: var(--police-corps);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--couleur-texte);
    letter-spacing: 0.05em;
    margin-bottom: 2rem;
}

/* === FORMULAIRE DE RECHERCHE === */
.section-recherche {
    max-width: 600px;
    margin: 0 auto 3rem;
}

.section-recherche h2 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--couleur-texte);
}

/* Formulaire (cours 0-cours_formulaire.docx) */
.formulaire-recherche {
    /* Flexbox pour aligner input + bouton */
    display: flex;
    gap: 0.5rem;
}

.formulaire-recherche input[type="text"],
.formulaire-recherche input[type="search"] {
    flex: 1; /* L'input prend tout l'espace disponible */
    padding: 0.8rem 1.2rem;
    background-color: rgba(255,255,255,0.04);
    border: 1px solid var(--couleur-bordure-or);
    color: var(--couleur-texte-clair);
    font-family: var(--police-corps);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
}

/* Pseudo-classe :focus (cours formulaire) */
.formulaire-recherche input[type="text"]:focus,
.formulaire-recherche input[type="search"]:focus {
    border-color: var(--couleur-or);
    background-color: rgba(201,168,76,0.05);
}

/* Placeholder */
.formulaire-recherche input::placeholder {
    color: var(--couleur-gris);
    font-style: italic;
}

/* === BOUTONS === */
.btn {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    font-family: var(--police-titre);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--couleur-or);
    background-color: transparent;
    color: var(--couleur-or);
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn:hover {
    background-color: var(--couleur-or);
    color: var(--couleur-fond);
}

.btn-principal {
    background-color: var(--couleur-or);
    color: var(--couleur-fond);
}

.btn-principal:hover {
    background-color: var(--couleur-or-clair);
    border-color: var(--couleur-or-clair);
    color: var(--couleur-fond);
}

.btn-danger {
    border-color: var(--couleur-rouge-clair);
    color: var(--couleur-rouge-clair);
}
.btn-danger:hover {
    background-color: var(--couleur-rouge-clair);
    color: white;
}

/* === SECTION TITRES === */
.section-titre {
    text-align: center;
    margin-bottom: 2.5rem;
}

.section-titre h2 {
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    position: relative;
    display: inline-block;
    padding: 0 1.5rem;
}

/* Lignes décoratives autour des titres de section */
.section-titre h2::before,
.section-titre h2::after {
    content: '—';
    color: var(--couleur-rouge);
    margin: 0 0.5rem;
}

/* === GRILLE DE CARTES ARMES (CSS Grid - cours Intro-grid.docx) ===
   Grid bidirectionnel pour la liste des armes */
.grille-armes {
    display: grid;
    /* auto-fill : le navigateur calcule le nombre de colonnes */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

/* === CARTE ARME === */
.carte-arme {
    background-color: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    padding: 1.2rem;
    transition: border-color 0.25s ease, transform 0.2s ease;
    position: relative; /* cours position.docx */
}

.carte-arme:hover {
    border-color: var(--couleur-bordure-or);
    transform: translateY(-3px);
}

/* Pseudo-élément décoratif coin supérieur gauche */
.carte-arme::before {
    content: '';
    position: absolute; /* absolute par rapport à la carte (relative) */
    top: -1px;
    left: -1px;
    width: 20px;
    height: 20px;
    border-top: 2px solid var(--couleur-or);
    border-left: 2px solid var(--couleur-or);
}

.carte-arme-image {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
    margin: 0 auto 1rem;
    /* Filtre pour l'aspect médiéval */
    filter: brightness(0.9) sepia(0.2);
    transition: filter 0.2s;
}

.carte-arme:hover .carte-arme-image {
    filter: brightness(1.1) sepia(0) drop-shadow(0 0 8px rgba(201,168,76,0.4));
}

.carte-arme-nom {
    font-family: var(--police-titre);
    font-size: 0.95rem;
    color: var(--couleur-or);
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.carte-arme-type {
    font-size: 0.75rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--couleur-gris);
    margin-bottom: 0.8rem;
}

.carte-arme-lieu {
    font-size: 0.8rem;
    text-align: center;
    color: var(--couleur-texte);
    font-style: italic;
}

.carte-arme a {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* === BADGES COVENANT === */
.badge-covenant {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--couleur-rouge);
    color: var(--couleur-rouge-clair);
    margin: 0.2rem 0.1rem;
}

/* === FILTRES JS (barre de filtres) === */
.barre-filtres {
    background-color: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    padding: 1.2rem 1.5rem;
    margin-bottom: 2rem;
}

.barre-filtres-titre {
    font-family: var(--police-titre);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--couleur-texte);
    margin-bottom: 1rem;
}

/* Flexbox pour les contrôles de filtres */
.filtres-controles {
    display: flex;
    flex-wrap: wrap; /* cours flexbox : passage à la ligne autorisé */
    gap: 1rem;
    align-items: center;
}

.filtre-groupe {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.filtre-groupe label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--couleur-gris);
}

/* Sélect de filtre */
.filtre-select,
.filtre-input {
    padding: 0.5rem 0.8rem;
    background-color: rgba(255,255,255,0.04);
    border: 1px solid var(--couleur-bordure);
    color: var(--couleur-texte-clair);
    font-family: var(--police-corps);
    font-size: 0.85rem;
    min-width: 160px;
    outline: none;
    cursor: pointer;
}

.filtre-select:focus,
.filtre-input:focus {
    border-color: var(--couleur-or);
}

/* Option dans select */
.filtre-select option {
    background-color: var(--couleur-fond-carte);
    color: var(--couleur-texte);
}

/* Compteur de résultats */
.compteur-resultats {
    font-size: 0.85rem;
    color: var(--couleur-gris);
    font-style: italic;
    margin-bottom: 1rem;
}

/* Aucun résultat */
.aucun-resultat {
    text-align: center;
    padding: 3rem;
    color: var(--couleur-gris);
    font-style: italic;
    display: none;
}

/* === PAGE DÉTAIL ARME === */
.detail-arme {
    display: grid;
    /* Grid 2 colonnes : cours Intro-grid.docx */
    grid-template-columns: 200px 1fr;
    gap: 3rem;
    max-width: 900px;
    margin: 3rem auto;
    align-items: start;
}

.detail-arme-visuel {
    text-align: center;
}

.detail-arme-image {
    width: 160px;
    height: 160px;
    object-fit: contain;
    filter: brightness(0.9) sepia(0.15);
    margin-bottom: 1rem;
}

.detail-arme-info h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.detail-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.detail-table th,
.detail-table td {
    padding: 0.7rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--couleur-bordure);
}

.detail-table th {
    font-family: var(--police-titre);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--couleur-gris);
    width: 160px;
}

.detail-table td {
    color: var(--couleur-texte-clair);
}

/* === SECTION COVENANTS (page détail) === */
.covenants-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* === FORMULAIRE AJOUT === */
.formulaire-ajout {
    max-width: 650px;
    margin: 3rem auto;
    background-color: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure-or);
    padding: 2.5rem;
    position: relative;
}

/* Coins décoratifs */
.formulaire-ajout::before,
.formulaire-ajout::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
}

.formulaire-ajout::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--couleur-or);
    border-left: 2px solid var(--couleur-or);
}

.formulaire-ajout::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--couleur-or);
    border-right: 2px solid var(--couleur-or);
}

.formulaire-ajout h1 {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 2rem;
    letter-spacing: 0.15em;
}

/* Groupes de champs */
.champ-groupe {
    margin-bottom: 1.5rem;
}

/* Balise <label> (cours formulaire) */
.champ-groupe label {
    display: block;
    font-family: var(--police-titre);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--couleur-or);
    margin-bottom: 0.5rem;
}

/* Balise <input> (cours formulaire - différents types) */
.champ-groupe input[type="text"],
.champ-groupe select,
.champ-groupe textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    background-color: rgba(255,255,255,0.04);
    border: 1px solid var(--couleur-bordure);
    color: var(--couleur-texte-clair);
    font-family: var(--police-corps);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
}

.champ-groupe input[type="text"]:focus,
.champ-groupe select:focus,
.champ-groupe textarea:focus {
    border-color: var(--couleur-or);
    background-color: rgba(201,168,76,0.04);
}

.champ-groupe select option {
    background-color: var(--couleur-fond-carte);
}

/* Pseudo-class :required (cours formulaire) */
.champ-groupe input:required,
.champ-groupe select:required {
    border-left: 2px solid var(--couleur-rouge);
}

/* Pseudo-class :valid (cours formulaire) */
.champ-groupe input:valid:not(:placeholder-shown) {
    border-left: 2px solid var(--couleur-or);
}

/* Message d'erreur JS */
.erreur-champ {
    font-size: 0.78rem;
    color: var(--couleur-rouge-clair);
    margin-top: 0.3rem;
    display: none;
}

.erreur-champ.visible {
    display: block;
}

/* Checkboxes pour covenants */
.checkboxes-grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    accent-color: var(--couleur-or);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-item span {
    font-size: 0.85rem;
    color: var(--couleur-texte);
}

/* Bouton de soumission */
.btn-soumettre {
    width: 100%;
    padding: 1rem;
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* === MESSAGES FLASH === */
.message-succes,
.message-erreur {
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    font-family: var(--police-titre);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-align: center;
}

.message-succes {
    border: 1px solid var(--couleur-or);
    color: var(--couleur-or);
    background-color: rgba(201,168,76,0.08);
}

.message-erreur {
    border: 1px solid var(--couleur-rouge-clair);
    color: var(--couleur-rouge-clair);
    background-color: rgba(139,26,26,0.12);
}

/* === PAGE PROTÉGÉE (mot de passe) === */
.page-protegee {
    max-width: 420px;
    margin: 6rem auto;
    text-align: center;
}

.page-protegee .icone-cadenas {
    font-size: 3rem;
    color: var(--couleur-or);
    margin-bottom: 1.5rem;
    display: block;
}

/* === PAGE À PROPOS === */
.apropos-contenu {
    max-width: 800px;
    margin: 3rem auto;
}

.apropos-section {
    border-top: 1px solid var(--couleur-bordure);
    padding-top: 2rem;
    margin-top: 2rem;
}

.apropos-section h2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* === PIED DE PAGE === */
.pied-de-page {
    border-top: 1px solid var(--couleur-bordure);
    padding: 2rem;
    text-align: center;
    margin-top: 5rem;
    color: var(--couleur-gris);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.pied-de-page a {
    color: var(--couleur-gris);
    margin: 0 0.5rem;
}

.pied-de-page a:hover {
    color: var(--couleur-or);
}

/* === UTILITAIRES === */
.separateur {
    width: 80px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--couleur-or), transparent);
    margin: 2rem auto;
}

.texte-centre { text-align: center; }
.texte-or { color: var(--couleur-or); }
.texte-gris { color: var(--couleur-gris); }

/* Lien "retour" */
.lien-retour {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--couleur-gris);
    margin-bottom: 2rem;
}
.lien-retour:hover { color: var(--couleur-or); }

/* === RESPONSIVE (cours 01b-Flexbox-MQ.docx - Media Queries) ===
   Desktop à partir de 768px demandé par la SAÉ */
@media (max-width: 900px) {
    .grille-armes {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .detail-arme {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .nav-interne {
        flex-direction: column;
        height: auto;
        padding: 1rem;
        gap: 0.5rem;
    }

    .hero-titre { font-size: 2rem; }

    .formulaire-recherche {
        flex-direction: column;
    }

    .filtres-controles {
        flex-direction: column;
        align-items: stretch;
    }

    .checkboxes-grille {
        grid-template-columns: 1fr;
    }
}