/* ===== Palette inspirée du logo CréaTili ===== */
:root {
    --creme: #faf6f0;
    --creme-fonce: #f2ebe1;
    --blanc-casse: #fffdf9;
    --brun: #4a3a33;
    --brun-doux: #6b5a52;
    --sauge: #7a9a7e;
    --sauge-fonce: #5f7d63;
    --sauge-clair: #e6eee5;
    --rose: #d9707a;
    --rose-fonce: #c0525d;
    --rose-clair: #f9e6e7;
    --texte: #4a3a33;
    --texte-doux: #8a7b73;
    --bordure: #e8dfd3;
    --succes: var(--sauge-fonce);
    --danger: var(--rose-fonce);
    --ombre: 0 6px 18px rgba(74, 58, 51, .08);
    --rayon: 16px;
    --police-script: 'Dancing Script', 'Brush Script MT', cursive;
    --police-texte: 'Nunito', 'Segoe UI', sans-serif;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--creme);
    color: var(--texte);
    font-family: var(--police-texte);
    font-size: 16px;
    line-height: 1.65;
}

h1, h2, h3 {
    font-family: var(--police-script);
    font-weight: 700;
    color: var(--brun);
    line-height: 1.2;
}

h1 { font-size: 2.8rem; margin: 0 0 1.4rem; }
h2 { font-size: 2rem; margin: 2rem 0 1rem; }
h3 { font-size: 1.5rem; margin: .6rem 0 .3rem; }

/* Petit fil rose sous les titres principaux, comme sur le logo */
h1::after {
    content: "";
    display: block;
    width: 70px;
    height: 2px;
    margin-top: .5rem;
    background: var(--rose);
    border-radius: 2px;
}

a { color: var(--sauge-fonce); }
a:hover { color: var(--rose-fonce); }

h1:focus { outline: none; }

.text-end { text-align: right; }
.ms-2 { margin-left: .5rem; }
.mx-2 { margin-left: .5rem; margin-right: .5rem; }

/* ===== En-tête ===== */
.entete {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: .5rem 2.5rem;
    background: var(--creme);
    border-bottom: 1px solid var(--bordure);
    box-shadow: 0 2px 12px rgba(74, 58, 51, .05);
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    display: block;
    height: 80px;
    width: auto;
    transition: transform .25s;
}

.logo:hover img { transform: rotate(-2deg) scale(1.03); }

.menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.4rem;
}

.menu a {
    position: relative;
    color: var(--brun);
    text-decoration: none;
    font-weight: 600;
    padding: .2rem 0;
    transition: color .2s;
}

.menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: var(--rose);
    border-radius: 2px;
    transition: width .25s;
}

.menu a:hover { color: var(--sauge-fonce); }
.menu a:hover::after,
.menu a.active::after { width: 100%; }
.menu a.active { color: var(--sauge-fonce); font-weight: 700; }

.menu form { margin: 0; }

.utilisateur {
    font-style: italic;
    color: var(--texte-doux);
    font-size: .9rem;
}

.btn-lien {
    background: none;
    border: 1px solid var(--sauge);
    border-radius: 20px;
    padding: .25rem .9rem;
    color: var(--sauge-fonce);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}

.btn-lien:hover { background: var(--sauge); color: #fff; }

/* ===== Panier (bandeau) ===== */
.lien-panier {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.icone-panier {
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
}

.pastille-panier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background-color: var(--rose);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
}

/* ===== Contenu ===== */
.contenu {
    max-width: 1150px;
    min-height: 65vh;
    margin: 2.5rem auto;
    padding: 0 1.5rem;
}

/* ===== Hero (accueil) ===== */
.hero {
    position: relative;
    text-align: center;
    padding: 4.5rem 1.5rem;
    margin-bottom: 3rem;
    border-radius: var(--rayon);
    background:
        radial-gradient(circle at 15% 20%, rgba(217, 112, 122, .12), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(122, 154, 126, .15), transparent 45%),
        var(--blanc-casse);
    border: 2px dashed var(--bordure);
}

.hero h1 { font-size: 3.6rem; margin-bottom: .6rem; }
.hero h1::after { margin: .6rem auto 0; }

.hero p {
    max-width: 600px;
    margin: 0 auto 2rem;
    font-size: 1.15rem;
    color: var(--texte-doux);
}

/* ===== Boutons ===== */
.btn {
    display: inline-block;
    padding: .65rem 1.6rem;
    border: none;
    border-radius: 30px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
    background: var(--sauge);
    color: #fff;
    box-shadow: 0 4px 12px rgba(122, 154, 126, .35);
}

.btn-primary:hover { background: var(--sauge-fonce); color: #fff; }

.btn-secondary,
.btn-outline-secondary {
    background: transparent;
    color: var(--brun);
    border: 2px solid var(--bordure);
}

.btn-secondary:hover,
.btn-outline-secondary:hover { border-color: var(--sauge); color: var(--sauge-fonce); }

.btn-success {
    background: var(--rose);
    color: #fff;
    box-shadow: 0 4px 12px rgba(217, 112, 122, .35);
}

.btn-success:hover { background: var(--rose-fonce); color: #fff; }

.btn-danger { background: transparent; color: var(--danger); border: 2px solid var(--rose); }
.btn-danger:hover { background: var(--rose); color: #fff; }

.btn-sm { padding: .3rem .9rem; font-size: .85rem; }
.btn-lg { padding: .85rem 2.2rem; font-size: 1.1rem; margin-top: 1.5rem; }

/* ===== Articles ===== */
.grille-articles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.8rem;
}

.carte-article {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1rem 1rem 1.3rem;
    background: var(--blanc-casse);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    transition: transform .2s, box-shadow .2s;
}

.carte-article:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(74, 58, 51, .13);
}

.carte-article img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: .5rem;
}

.carte-article p { color: var(--texte-doux); font-size: .95rem; margin: 0; }
.carte-article strong { font-size: 1.3rem; color: var(--rose-fonce); margin-top: auto; }
.carte-article small { color: var(--texte-doux); }
.carte-article .btn { margin-top: .6rem; }

/* ===== Formulaires ===== */
form label { display: block; font-weight: 700; color: var(--brun); }

.form-control {
    display: block;
    width: 100%;
    max-width: 520px;
    margin: .35rem 0 1.2rem;
    padding: .6rem .9rem;
    background: var(--blanc-casse);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    font: inherit;
    font-weight: 400;
    color: var(--texte);
    transition: border-color .2s, box-shadow .2s;
}

.form-control:focus {
    outline: none;
    border-color: var(--sauge);
    box-shadow: 0 0 0 3px rgba(122, 154, 126, .25);
}

textarea.form-control { min-height: 140px; resize: vertical; }

.valid.modified:not([type=checkbox]) { border-color: var(--succes); }
.invalid { border-color: var(--danger) !important; }
.validation-message, .validation-errors { color: var(--danger); font-size: .9rem; }

/* ===== Tableaux ===== */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--blanc-casse);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre);
}

.table th {
    background: var(--sauge);
    color: #fff;
    font-weight: 700;
    text-align: left;
    padding: .8rem 1rem;
}

.table tfoot th { background: var(--creme-fonce); color: var(--brun); font-size: 1.1rem; }
.table th.text-end { text-align: right; }

.table td { padding: .75rem 1rem; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.table tbody tr:hover { background: var(--creme); }
.table td .btn + .btn { margin-left: .4rem; }

/* ===== Factures ===== */
.facture {
    margin-bottom: 1rem;
    padding: 1rem 1.2rem;
    background: var(--blanc-casse);
    border: 1px solid var(--bordure);
    border-left: 4px solid var(--sauge);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

.facture summary { cursor: pointer; font-weight: 700; color: var(--brun); }
.facture[open] summary { margin-bottom: 1rem; }

.statut {
    display: inline-block;
    margin-left: .6rem;
    padding: .1rem .7rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    vertical-align: middle;
}

.statut-payee { background: var(--sauge-clair); color: var(--sauge-fonce); border: 1px solid var(--sauge); }
.statut-attente { background: #fbf3e2; color: #9a6b12; border: 1px solid #d9b25f; }
.statut-annulee { background: var(--rose-clair); color: var(--rose-fonce); border: 1px solid var(--rose); }

/* ===== Alertes ===== */
.alert,
.alert-success {
    margin-bottom: 1.5rem;
    padding: 1rem 1.3rem;
    border-radius: 12px;
}

.alert-success {
    background: var(--sauge-clair);
    border-left: 4px solid var(--sauge);
    color: var(--sauge-fonce);
}

.alert-danger {
    background: var(--rose-clair);
    border-left: 4px solid var(--rose);
    color: var(--rose-fonce);
}

/* ===== Pied de page ===== */
.pied {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: 2.2rem 1rem;
    text-align: center;
    background: var(--brun);
    color: var(--creme-fonce);
    font-size: .9rem;
}

.pied-titre {
    font-family: var(--police-script);
    font-size: 2rem;
    font-weight: 700;
    color: var(--creme);
}

.pied-titre span { color: var(--sauge); }

.pied-copyright { opacity: .7; font-size: .8rem; }

hr { border: none; border-top: 1px dashed var(--rose); margin: 2.5rem 0; opacity: .6; }

/* ===== Erreurs Blazor ===== */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    padding: .8rem 1.5rem;
    background: var(--rose-clair);
    color: var(--texte);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .15);
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .6rem; }

.blazor-error-boundary { background: var(--danger); padding: 1rem; color: #fff; }
.blazor-error-boundary::after { content: "Une erreur est survenue."; }

/* ===== Mobile ===== */
@media (max-width: 720px) {
    .entete { padding: .6rem 1rem; justify-content: center; }
    .logo img { height: 64px; }
    .menu { justify-content: center; gap: .9rem; font-size: .95rem; }
    .hero { padding: 3rem 1rem; }
    .hero h1 { font-size: 2.6rem; }
    h1 { font-size: 2.2rem; }
}

/* ===== Admin : articles sur 2 colonnes ===== */
.admin-entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-entete h1 { margin: 0; }

.admin-articles {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 1.5rem;
    align-items: start;
}

.panneau {
    background: var(--blanc-casse);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    overflow: hidden;
}

.panneau-titre {
    padding: .8rem 1.2rem;
    background: var(--creme-fonce);
    font-weight: 700;
    color: var(--brun);
    border-bottom: 1px solid var(--bordure);
}

.panneau-corps { padding: 1.2rem; }

.panneau .table { box-shadow: none; border-radius: 0; }

.panneau-edition {
    position: sticky;
    top: 110px; /* sous l'en-tête collant */
}

.panneau-edition .form-control { max-width: none; margin-bottom: .9rem; }
.panneau-edition textarea.form-control { min-height: 100px; }

.champs-ligne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
}

.ligne-cliquable { cursor: pointer; }
.ligne-selectionnee td { background: var(--sauge-clair); }

.miniature {
    display: block;
    width: 50px !important;
    height: 50px !important;
    max-width: none;
    object-fit: cover;
    border-radius: 6px;
}
.apercu { max-height: 140px; border-radius: 10px; border: 1px solid var(--bordure); }

.text-muted { color: var(--texte-doux); }
.text-danger { color: var(--danger); }
.text-nowrap { white-space: nowrap; }

/* ===== Admin : page d'accueil ===== */
.admin-choix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
    max-width: 700px;
}

.carte-admin {
    display: block;
    padding: 1.8rem 1.5rem;
    background: var(--blanc-casse);
    border: 1px solid var(--bordure);
    border-left: 4px solid var(--sauge);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    color: var(--texte);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.carte-admin:hover {
    transform: translateY(-4px);
    border-left-color: var(--rose);
    box-shadow: 0 12px 26px rgba(74, 58, 51, .13);
    color: var(--texte);
}

.carte-admin-icone { font-size: 2.2rem; }
.carte-admin h3 { margin: .4rem 0; }
.carte-admin p { margin: 0; color: var(--texte-doux); font-size: .95rem; }

/* ===== Icônes du menu ===== */
.menu a,
.utilisateur,
.btn-lien {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.icone-menu {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    transition: transform .2s;
}

.menu a:hover .icone-menu { transform: translateY(-2px); }
.menu a.active .icone-menu { color: var(--rose); }