/* 
 * CSS personnalisé Atelier Ash
 * Charte graphique: bleu #6393A6, bruns #BF785E/#A65B4B/#733B36, pêche #F2CBBD
 */

/* Variables CSS pour la charte graphique */
:root {
    --ash-blue: #6393A6;
    --ash-brown-light: #BF785E;
    --ash-brown-medium: #A65B4B;
    --ash-brown-dark: #733B36;
    --ash-peach: #F2CBBD;
    --ash-white: #ffffff;
}

/* Polices selon charte Atelier Ash */
body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
}

/* Titres avec police Lucida */
h1, h2, h3, h4, h5, h6 {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif;
    font-weight: 700;
    color: var(--ash-brown-dark);
}

h1 { font-size: 40px; }
h2 { font-size: 35px; }
h3 { font-size: 30px; }
h4 { font-size: 25px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

/* Logo header */
.logo-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.logo-container img {
    height: 50px;
    margin-right: 15px;
}

.logo-container .brand-text {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--ash-brown-dark);
}

/* Navigation personnalisée */
.navbar-ash {
    background-color: var(--ash-blue) !important;
    border-bottom: 3px solid var(--ash-brown-medium);
}

.navbar-ash .navbar-brand,
.navbar-ash .nav-link {
    color: var(--ash-white) !important;
    font-weight: 500;
}

.navbar-ash .nav-link:hover {
    color: var(--ash-peach) !important;
}

/* Boutons personnalisés Atelier Ash */
.btn-ash-primary {
    background-color: var(--ash-blue);
    border-color: var(--ash-blue);
    color: var(--ash-white);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
}

.btn-ash-primary:hover {
    background-color: var(--ash-brown-medium);
    border-color: var(--ash-brown-medium);
    color: var(--ash-white);
}

.btn-ash-secondary {
    background-color: var(--ash-brown-light);
    border-color: var(--ash-brown-light);
    color: var(--ash-white);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
}

.btn-ash-secondary:hover {
    background-color: var(--ash-brown-dark);
    border-color: var(--ash-brown-dark);
    color: var(--ash-white);
}

/* Cards avec thème Atelier Ash */
.card-ash {
    border: 1px solid var(--ash-brown-light);
    border-radius: 8px;
}

.card-ash .card-header {
    background-color: var(--ash-peach);
    border-bottom: 1px solid var(--ash-brown-light);
    color: var(--ash-brown-dark);
    font-weight: 600;
}

.card-ash.admin-card .card-header {
    background-color: var(--ash-blue);
    color: var(--ash-white);
}

/* Tableaux avec style Atelier Ash */
.table-ash {
    border: 1px solid var(--ash-brown-light);
}

.table-ash thead th {
    background-color: var(--ash-blue);
    color: var(--ash-white);
    border-color: var(--ash-brown-light);
    font-weight: 600;
}

.table-ash tbody tr:nth-child(even) {
    background-color: rgba(191, 120, 94, 0.1); /* ash-brown-light avec transparence */
}

.table-ash tbody tr:hover {
    background-color: rgba(99, 147, 166, 0.1); /* ash-blue avec transparence */
}

/* Badges avec couleurs Atelier Ash */
.badge-ash-blue {
    background-color: var(--ash-blue);
    color: var(--ash-white);
}

.badge-ash-brown {
    background-color: var(--ash-brown-medium);
    color: var(--ash-white);
}

.badge-ash-peach {
    background-color: var(--ash-peach);
    color: var(--ash-brown-dark);
}

/* Alerts avec thème Atelier Ash */
.alert-ash-info {
    background-color: rgba(99, 147, 166, 0.1);
    border-color: var(--ash-blue);
    color: var(--ash-brown-dark);
}

.alert-ash-success {
    background-color: rgba(191, 120, 94, 0.1);
    border-color: var(--ash-brown-light);
    color: var(--ash-brown-dark);
}

/* Liens sur fond sombre */
.dark-bg a {
    color: var(--ash-peach);
}

.dark-bg a:hover {
    color: var(--ash-white);
}

/* Formulaires avec style Atelier Ash */
.form-control:focus {
    border-color: var(--ash-blue);
    box-shadow: 0 0 0 0.2rem rgba(99, 147, 166, 0.25);
}

.form-label {
    color: var(--ash-brown-dark);
    font-weight: 500;
}

/* Page d'administration */
.admin-page {
    background-color: #f8f9fa;
}

.admin-page .container {
    background-color: var(--ash-white);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(115, 59, 54, 0.1);
    padding: 30px;
    margin-top: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .logo-container {
        flex-direction: column;
        text-align: center;
    }
    
    .logo-container img {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 24px; }
}