/* ============================================================
   AU FIL DES ÂMES — assets/css/style.css
   Feuille de styles globale
   Toutes les couleurs, typographies et espacements passent
   par des variables CSS — modifier ici suffit pour tout changer.
   ============================================================ */


/* ── 1. VARIABLES ───────────────────────────────────────────── */

:root {

    /* Couleurs de fond */
    --fond-page        : #f5f3ef;   /* blanc cassé chaud — fond général */
    --fond-carte       : #ffffff;   /* cartes, panneaux */
    --fond-sombre      : #2e2820;   /* zones inversées (footer, etc.) */

    /* Texte */
    --texte-principal  : #1e1c1a;   /* corps de texte — charbon */
    --texte-secondaire : #6b5f52;   /* sous-titres, méta */
    --texte-discret    : #a89e92;   /* dates, compteurs, labels */
    --texte-inverse    : #f0ece6;   /* texte sur fond sombre */

    /* Couleur d'accent principale — à changer ici pour tout changer */
    --accent           : #4a6741;   /* vert sauge profond */
    --accent-hover     : #384f31;   /* vert plus sombre au survol */
    --accent-doux      : #eaf0e8;   /* fond léger teinté accent */

    /* Accents secondaires — bordures gauches des cartes */
    --accent-violet    : #6b5b9e;
    --accent-bleu      : #3d6b8a;
    --accent-or        : #b8943a;
    --accent-rose      : #9e5b6b;

    /* Bordures & séparateurs */
    --bordure          : #d8d0c8;
    --bordure-douce    : #e0d8d0;

    /* Ombres */
    --ombre-carte      : 0 1px 4px rgba(30, 28, 26, 0.06), 0 4px 16px rgba(30, 28, 26, 0.05);
    --ombre-survol     : 0 4px 12px rgba(30, 28, 26, 0.10), 0 12px 32px rgba(30, 28, 26, 0.08);

    /* Typographie — tout le site en sans-serif (Source Sans 3), choix
       définitif (session 26, acté s29). --font-serif ne pointe plus vers un
       serif : il garde ce nom par commodité (≈147 usages) mais vaut la police
       de lecture. Interface en DM Sans. */
    --font-lecture     : 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-serif       : 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-sans        : 'DM Sans', system-ui, -apple-system, sans-serif;

    /* Tailles */
    --taille-xl        : 2rem;
    --taille-lg        : 1.35rem;
    --taille-md        : 1rem;
    --taille-sm        : .875rem;
    --taille-xs        : .72rem;

    /* Layout */
    --rayon            : 10px;
    --rayon-lg         : 14px;
    --largeur-max      : 1060px;
    --largeur-texte    : 660px;
    --transition       : .18s ease;
}

html {
    overflow-y: scroll;
}

/* ── 2. RESET & BASE ────────────────────────────────────────── */

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--font-sans);
    background: var(--fond-page);
    color: var(--texte-principal);
    min-height: 100vh;
    line-height: 1.6;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }


/* ── 3. TYPOGRAPHIE ─────────────────────────────────────────── */

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.25;
    color: var(--texte-principal);
}

h1 { font-size: var(--taille-xl); }
h2 { font-size: var(--taille-lg); }
h3 { font-size: 1.1rem; }
p  { line-height: 1.7; }

.italic-serif { font-family: var(--font-serif); font-style: italic; }


/* ── 4. MISE EN PAGE ────────────────────────────────────────── */

.contenu-large {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 0 1.75rem;
}

.contenu-texte {
    max-width: var(--largeur-texte);
    margin: 0 auto;
    padding: 0 1.75rem;
}


/* ── 5. LABEL DE SECTION (inspiré dashboard) ────────────────── */

.section-label {
    font-family: var(--font-sans);
    font-size: var(--taille-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texte-discret);
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--bordure);   /* --bordure plus foncé que --bordure-douce */
    margin-bottom: 1.25rem;
    display: block;   /* force le comportement block même si utilisé sur un <p> ou <span> */
}


/* ── 6. CARTE GÉNÉRIQUE (bordure gauche colorée) ────────────── */

.carte {
    background: var(--fond-carte);
    border-radius: var(--rayon-lg);
    border: 1px solid var(--bordure-douce);
    border-left: 4px solid var(--accent);
    box-shadow: var(--ombre-carte);
    padding: 1.5rem 1.75rem;
    transition: box-shadow var(--transition), transform var(--transition);
}

.carte:hover              { box-shadow: var(--ombre-survol); transform: translateY(-2px); }
.carte-vert               { border-left: 4px solid var(--accent) !important; }
.carte-violet             { border-left: 4px solid var(--accent-violet) !important; }
.carte-bleu               { border-left: 4px solid var(--accent-bleu) !important; }
.carte-or                 { border-left: 4px solid var(--accent-or) !important; }
.carte-rose               { border-left: 4px solid var(--accent-rose) !important; }


/* ── 7. CARTES ARTICLES ─────────────────────────────────────── */

.carte-article {
    background: var(--fond-carte);
    border-radius: var(--rayon-lg);
    border: 1px solid var(--bordure-douce);
    border-left: 4px solid var(--accent);
    box-shadow: var(--ombre-carte);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition), transform var(--transition);
    text-decoration: none;
    color: inherit;
}

.carte-article:hover {
    box-shadow: var(--ombre-survol);
    transform: translateY(-3px);
}

.carte-article .vignette {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--fond-page);
}

.carte-article .vignette img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.carte-article:hover .vignette img { transform: scale(1.04); }

.carte-article .corps {
    padding: 1.2rem 1.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.carte-article .rubrique {
    font-size: var(--taille-xs);
    font-family: var(--font-sans);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin-bottom: .45rem;
}

.carte-article .titre {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    line-height: 1.3;
    margin-bottom: .45rem;
}

.carte-article .extrait {
    font-size: var(--taille-sm);
    color: var(--texte-secondaire);
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.carte-article .meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .85rem;
    padding-top: .7rem;
    border-top: 1px solid var(--bordure-douce);
    font-size: var(--taille-xs);
    color: var(--texte-discret);
    font-family: var(--font-sans);
}

.carte-article .meta .auteur { color: var(--texte-secondaire); font-weight: 500; }


/* ── 8. GRILLE D'ARTICLES ───────────────────────────────────── */

.grille-articles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.25rem;
}


/* ── 9. BADGES ──────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .7rem;
    border-radius: 20px;
    font-size: var(--taille-xs);
    font-family: var(--font-sans);
    font-weight: 500;
}

.badge-vert    { background: var(--accent-doux); color: var(--accent); }
.badge-discret { background: var(--fond-page); color: var(--texte-discret); border: 1px solid var(--bordure); }
.badge-rouge   { background: #fce8e8; color: #a03030; }
.badge-or      { background: #fdf3e0; color: #8a6020; }


/* ── 10. BOUTONS ────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 1.5rem;
    border-radius: var(--rayon);
    font-family: var(--font-sans);
    font-size: var(--taille-sm);
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

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

.btn-principal { background: var(--accent); color: #fff; }
.btn-principal:hover { background: var(--accent-hover); box-shadow: 0 3px 12px rgba(74, 103, 65, .28); }

.btn-secondaire { background: var(--fond-carte); color: var(--texte-secondaire); border: 1px solid var(--bordure); }
.btn-secondaire:hover { background: var(--fond-page); color: var(--texte-principal); }


/* ── 11. LIENS DE NAVIGATION ────────────────────────────────── */

/* Lien "← Retour à l'accueil" — utilisé sur edito_lire, guide_lire,
   et toute page de lecture en profondeur. */
.retour-lien {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--taille-sm);
    color: var(--texte-discret);
    text-decoration: none;
    margin-bottom: 2.5rem;
    transition: color var(--transition);
}

.retour-lien:hover {
    color: var(--accent);
}


/* ── 12. MESSAGES ───────────────────────────────────────────── */

.message-succes,
.message-erreur {
    padding: .85rem 1.2rem;
    border-radius: var(--rayon);
    font-family: var(--font-sans);
    font-size: var(--taille-sm);
    margin-bottom: 1.5rem;
}

.message-succes { background: var(--accent-doux); color: #2e5228; border-left: 3px solid var(--accent); }
.message-erreur { background: #fce8e8; color: #8a3030; border-left: 3px solid #c05050; }


/* ── 13. RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 640px) {
    :root { --taille-xl: 1.6rem; --taille-lg: 1.15rem; }
    .grille-articles { grid-template-columns: 1fr; }
    .contenu-large, .contenu-texte { padding: 0 1rem; }
}

/* ============================================================ */
/* BANDEAUX GLOBAUX                                             */
/* Utilisés sur toutes les pages du site (édition, validation,  */
/* superadmin, etc.) pour les messages de feedback à l'auteur   */
/* ou à l'admin : succès, erreur, information, refus.           */
/* ============================================================ */

.bandeau-succes,
.bandeau-erreur,
.bandeau-info,
.bandeau-refus,
.erreurs {
    padding: 0.95rem 1.2rem;
    border-radius: 6px;
    margin: 1.2rem 0 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
    border-left: 4px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.bandeau-succes p,
.bandeau-erreur p,
.bandeau-info p,
.bandeau-refus p,
.erreurs p {
    margin: 0;
}

.bandeau-succes p + p,
.bandeau-erreur p + p,
.bandeau-info p + p,
.bandeau-refus p + p,
.erreurs p + p {
    margin-top: 0.4rem;
}

/* Liens à l'intérieur d'un bandeau (ex : "Modifier") */
.bandeau-succes a,
.bandeau-erreur a,
.bandeau-info a,
.bandeau-refus a,
.erreurs a {
    color: inherit;
    text-decoration: underline;
    font-weight: 500;
}

/* ---- Succès — vert apaisant ---- */
.bandeau-succes {
    background: #eaf4ee;
    color: #2d6a3f;
    border-left-color: #4caf50;
}

/* ---- Erreur — rouge sobre ---- */
.bandeau-erreur,
.erreurs {
    background: #fdf0f0;
    color: #a33;
    border-left-color: #e55;
}

/* ---- Information — bleu doux ---- */
.bandeau-info {
    background: #eef4f8;
    color: #2c4a5e;
    border-left-color: #5c8aa8;
}

/* ---- Refus / commentaire de la jardinière — ton chaud ---- */
.bandeau-refus {
    background: #fdf6ec;
    color: #7a4f1e;
    border-left-color: #c0883a;
}

.bandeau-refus .commentaire-refus {
    margin-top: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    font-style: italic;
}

/* Animation discrète d'apparition à l'arrivée sur la page */
@keyframes bandeau-apparition {
    0%   { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 1; transform: translateY(0); }
}

.bandeau-succes,
.bandeau-erreur,
.bandeau-info,
.bandeau-refus,
.erreurs {
    animation: bandeau-apparition 0.35s ease-out;
}
/* ─── Mention de bonnes pratiques sur les photos ─────────────────── */
.aide-droits {
    border-left: 2px solid var(--accent, #4a6741);
    padding-left: 0.85rem;
    margin-top: 0.6rem;
    font-size: 0.93em;
    line-height: 1.55;
}

.aide-droits a {
    color: var(--accent, #4a6741);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.aide-droits a:hover {
    text-decoration: none;
}