/* Système de design du squelette — produit par Skwik.
   Le choix de couleurs chaudes (cuir, bois) et de typographies classiques reflète le caractère patrimonial et élégant du musée, tout en restant accueillant et lisible pour tous les publics. */

:root {
    --fond: #f5f0e8;
    --surface: #ffffff;
    --texte: #3a2e2a;
    --texte-faible: #6b5d55;
    --primaire: #8b4513;
    --accent: #b87333;
    --bordure: #d4c4b0;
    --police-titres: Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    --police-corps: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --corps: 16px;
    --h1: 41.6px;
    --h2: 28.0px;
    --h3: 20.0px;
    --petit: 13.1px;
    --espace: 8px;
    --rayon: 4px;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font: var(--corps)/1.65 var(--police-corps);
}
h1, h2, h3 { font-family: var(--police-titres); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
a { color: var(--primaire); }

.banniere {
    margin: 0;
    padding: calc(var(--espace) / 2) var(--espace);
    background: var(--accent);
    color: var(--fond);
    font-size: var(--petit);
    text-align: center;
}
nav[aria-label="Navigation principale"] {
    display: flex; flex-wrap: wrap; gap: var(--espace);
    padding: var(--espace);
    border-bottom: 1px solid var(--bordure);
}
nav a { text-decoration: none; font-weight: 600; }
nav a[aria-current="page"] { color: var(--texte); text-decoration: underline; }

main { max-width: 72rem; margin: 0 auto; padding: calc(var(--espace) * 2) var(--espace); }
section { margin-bottom: calc(var(--espace) * 3); }
.fil { font-size: var(--petit); color: var(--texte-faible); }
.chapeau { font-size: calc(var(--corps) * 1.15); color: var(--texte-faible); max-width: 46rem; }
p { max-width: 46rem; }

.hero { padding: calc(var(--espace) * 2) 0; border-bottom: 1px solid var(--bordure); }
.bouton {
    display: inline-block; margin-top: var(--espace);
    padding: .7em 1.4em; border-radius: var(--rayon);
    background: var(--primaire); color: var(--fond);
    text-decoration: none; font-weight: 600; border: 0; cursor: pointer;
}
.grille { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace);
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.carte { padding: var(--espace); border: 1px solid var(--bordure);
    border-radius: var(--rayon); background: var(--surface); }
.galerie { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace);
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.cadre { aspect-ratio: 4 / 3; border: 1px dashed var(--bordure);
    border-radius: var(--rayon); background: var(--surface); }
.appel { padding: calc(var(--espace) * 2); border-radius: var(--rayon); background: var(--surface); }

.formulaire { display: grid; gap: var(--espace); max-width: 34rem; }
.formulaire label { display: grid; gap: .35em; font-size: var(--petit); font-weight: 600; }
.formulaire input, .formulaire textarea {
    padding: .6em; border: 1px solid var(--bordure); border-radius: var(--rayon);
    background: var(--fond); color: var(--texte); font: inherit;
}
details { border-bottom: 1px solid var(--bordure); padding: var(--espace) 0; }
summary { cursor: pointer; font-weight: 600; }

.suite ul { padding-left: 1.2em; }
footer { border-top: 1px solid var(--bordure); padding: calc(var(--espace) * 2) var(--espace); }
footer nav { display: flex; flex-wrap: wrap; gap: var(--espace); margin-bottom: var(--espace); }
.mention { color: var(--texte-faible); font-size: var(--petit); }

/* Le remplissage se voit : un squelette qui passerait pour du contenu
   définitif serait un mensonge. */
[data-remplissage] { opacity: .82; }

@media (max-width: 40rem) {
    main { padding: var(--espace); }
    h1 { font-size: calc(var(--h1) * .7); }
}