/* ==========================================================
   styles.css - Ressources documentaires Phosphénisme
   ========================================================== */

:root{
    --couleur-principale:#5b3a3a;
    --texte:#20242a;
    --fond:#f7f5ef;
    --accent:#b28a3b;
    --bordure:#ddd6c7;
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    line-height:1.7;
    color:var(--texte);
    background:var(--fond);
}

a{color:#704b00}

header,
footer{
    background:var(--couleur-principale);
    color:#fff;
}

header .wrap,
footer .wrap,
main{
    max-width:980px;
    margin:auto;
    padding:1.25rem;
}

nav{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
}

nav a{
    color:#fff;
    text-decoration:none;
}

.brand{
    font-weight:700;
    font-size:1.1rem;
}

main{
    background:#fff;
    min-height:70vh;
    padding:2rem 1.5rem;
}

h1{
    font-size:clamp(2rem,5vw,3.3rem);
    line-height:1.1;
    color:var(--couleur-principale);
}

h2{
    margin-top:2.2rem;
    line-height:1.25;
    color:var(--couleur-principale);
}

h3,h4{
    color:#111;
}

.lead{
    font-size:1.2rem;
    border-left:4px solid var(--accent);
    padding-left:1rem;
}

.meta{
    color:#626a73;
    font-size:.95rem;
}

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:1rem;
}

.card{
    border:1px solid var(--bordure);
    border-radius:10px;
    padding:1rem;
    background:#fffdf8;
}

.card h2{
    margin-top:0;
    font-size:1.25rem;
    color:var(--couleur-principale);
}

.note{
    background:#f1eee5;
    border-radius:8px;
    padding:1rem;
}

.breadcrumbs{
    font-size:.9rem;
}

.breadcrumbs a{
    color:#704b00;
}

dt{
    font-weight:700;
    margin-top:1rem;
}

footer a{
    color:#fff;
}

img{
    max-width:100%;
    height:auto;
    border-radius:12px;
}

@media (max-width:768px){
    nav{justify-content:center}
}