/* ==========================================================
   Maz Musique - feuille de style commune à toutes les pages
   Pour changer une couleur partout : modifier les variables ci-dessous
   ========================================================== */

:root {
    --terre: #8a4b2a;         /* couleur principale (terre cuite) */
    --terre-fonce: #6b3820;
    --foret: #2f4a3a;         /* vert du Perche */
    --creme: #f7f1e6;         /* fond */
    --sable: #ecdfc8;         /* fonds des encadrés */
    --texte: #2b2420;
    --texte-doux: #5e524a;
    --blanc: #fffdf9;
    --whatsapp: #1f8f4e;
    --rayon: 14px;
    --largeur: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--creme);
    color: var(--texte);
    font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1.08rem;
    line-height: 1.65;
}

h1, h2, h3 {
    font-family: "Fraunces", Georgia, serif;
    line-height: 1.2;
    color: var(--foret);
    margin: 0 0 .6em;
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; }

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

img { max-width: 100%; height: auto; display: block; }

.conteneur {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 0 16px;
}

/* ---------- En-tête et menu ---------- */

.entete {
    background: var(--blanc);
    border-bottom: 1px solid var(--sable);
    position: sticky;
    top: 0;
    z-index: 10;
}
.entete .conteneur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    gap: 16px;
}
.logo {
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foret);
    text-decoration: none;
}
.logo span { color: var(--terre); }

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
}
.menu a {
    text-decoration: none;
    color: var(--texte);
    font-weight: 600;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.menu a:hover,
.menu a[aria-current="page"] {
    color: var(--terre);
    border-bottom-color: var(--terre);
}

.bouton-menu {
    display: none;
    background: none;
    border: 1px solid var(--sable);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 1rem;
    color: var(--foret);
    cursor: pointer;
}

@media (max-width: 860px) {
    .bouton-menu { display: block; }
    .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--blanc);
        border-bottom: 1px solid var(--sable);
        padding: 8px 16px 16px;
    }
    .menu.ouvert { display: block; }
    .menu ul { flex-direction: column; gap: 0; }
    .menu a { display: block; padding: 10px 0; }
}

/* ---------- Bandeau d'accueil ---------- */

.bandeau {
    background: linear-gradient(135deg, var(--foret), #1f3328);
    color: var(--creme);
    padding: 72px 0 64px;
}
.bandeau h1 { color: var(--creme); }
.bandeau .sous-titre {
    font-size: 1.25rem;
    max-width: 640px;
    color: #e6dccb;
}
.bandeau-petit { padding: 48px 0 40px; }

/* ---------- Boutons ---------- */

.boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}
.bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    background: var(--terre);
    color: var(--blanc);
    border: 2px solid var(--terre);
}
.bouton:hover { background: var(--terre-fonce); border-color: var(--terre-fonce); color: var(--blanc); }
.bouton-whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); }
.bouton-whatsapp:hover { background: #17733e; border-color: #17733e; }
.bouton-clair { background: transparent; color: var(--creme); border-color: var(--creme); }
.bouton-clair:hover { background: var(--creme); color: var(--foret); }

/* ---------- Sections ---------- */

section { padding: 56px 0; }
section.fond-sable { background: var(--sable); }

.intro { max-width: 720px; }

.grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.carte {
    background: var(--blanc);
    border-radius: var(--rayon);
    padding: 24px;
    box-shadow: 0 2px 10px rgba(43, 36, 32, .07);
    display: flex;
    flex-direction: column;
}
.carte h3 { margin-bottom: .4em; }
.carte p { color: var(--texte-doux); flex-grow: 1; }
.carte .lien-carte { font-weight: 700; text-decoration: none; }

.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.etiquettes li {
    font-size: .85rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--sable);
    color: var(--foret);
}

.liste-points { padding-left: 1.2em; }
.liste-points li { margin-bottom: .4em; }

/* ---------- Tableau des tarifs ---------- */

.tableau {
    width: 100%;
    border-collapse: collapse;
    background: var(--blanc);
    border-radius: var(--rayon);
    overflow: hidden;
}
.tableau th, .tableau td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--sable);
}
.tableau th { background: var(--foret); color: var(--creme); }
.tableau-defile { overflow-x: auto; }

/* ---------- Encadré d'appel au contact ---------- */

.appel {
    background: var(--terre);
    color: var(--blanc);
    border-radius: var(--rayon);
    padding: 32px;
    text-align: center;
}
.appel h2 { color: var(--blanc); }
.appel .boutons { justify-content: center; }
.appel .bouton { background: var(--blanc); color: var(--terre); border-color: var(--blanc); }
.appel .bouton-whatsapp { background: var(--whatsapp); color: var(--blanc); border-color: var(--whatsapp); }

/* ---------- Pied de page ---------- */

.pied {
    background: #1f3328;
    color: #d8cfbf;
    padding: 40px 0;
    font-size: .95rem;
}
.pied a { color: #f0e3cc; }
.pied .conteneur {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 6px; }
.pied h3 { color: #f0e3cc; font-size: 1.1rem; }

/* ---------- Texte à compléter (à supprimer quand tout est rempli) ---------- */

.a-completer {
    background: #fff2a8;
    outline: 2px dashed #d4a800;
    padding: 0 4px;
    border-radius: 4px;
}

/* ==========================================================
   Photos (les fichiers sont dans le dossier images/ :
   pour changer une photo, remplacer le fichier en gardant le même nom)
   ========================================================== */

/* Grande photo en haut de page, avec le titre par-dessus */
.bandeau-photo {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: flex-end;
    color: var(--creme);
    background-size: cover;
    background-position: center;
    padding: 0 0 56px;
}
.bandeau-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(31, 51, 40, .15) 30%, rgba(31, 51, 40, .85) 100%);
}
.bandeau-photo .conteneur { position: relative; width: 100%; }
.bandeau-photo h1 { color: var(--creme); max-width: 760px; }
.bandeau-photo .sous-titre { font-size: 1.25rem; max-width: 600px; color: #efe6d6; }
.bandeau-photo-petit { min-height: 46vh; }

/* Les 4 grandes vignettes des cours */
.vignettes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 900px) { .vignettes { grid-template-columns: repeat(2, 1fr); } }

.vignette {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--rayon);
    overflow: hidden;
    text-decoration: none;
    color: var(--creme);
}
.vignette img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.vignette:hover img { transform: scale(1.05); }
.vignette::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(31, 51, 40, .9) 100%);
}
.vignette-texte {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 1;
}
.vignette-texte strong {
    display: block;
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.5rem;
}
.vignette-texte span { font-size: .9rem; color: #e6dccb; }

/* Photo + texte côte à côte */
.photo-texte {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.photo-texte img, .photos img {
    width: 100%;
    border-radius: var(--rayon);
    object-fit: cover;
}
@media (max-width: 760px) { .photo-texte { grid-template-columns: 1fr; gap: 20px; } }

/* Rangée de 2 photos */
.photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.photos img { aspect-ratio: 4 / 3; }
@media (max-width: 600px) { .photos { grid-template-columns: 1fr; } }

/* Bandeau de 3 infos courtes */
.infos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
}
.infos strong { display: block; font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; color: var(--foret); }
.infos span { color: var(--texte-doux); }
@media (max-width: 700px) { .infos { grid-template-columns: 1fr; gap: 16px; } }

.centre { text-align: center; }
.texte-court { max-width: 640px; }

/* Photo en haut des pages intérieures, sans texte par-dessus (le titre est dans la bande verte en dessous).
   --cadrage : hauteur de la partie de la photo à montrer (0% = le haut, 100% = le bas) */
.photo-haut {
    aspect-ratio: 3 / 1;
    max-height: 60vh;
    width: 100%;
    background-size: cover;
    background-position: center var(--cadrage, 50%);
    background-color: var(--foret);
}
@media (max-width: 700px) { .photo-haut { aspect-ratio: 4 / 3; } }

/* Sur téléphone, photo d'accueil plus haute : le titre passe sous le visage au lieu de le recouvrir */
@media (max-width: 700px) {
    .bandeau-photo { min-height: 88vh; }
}

/* En-tête avec le titre à gauche et la photo entière à droite (pour les photos verticales) */
.bandeau-cote-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.bandeau-cote-grille img {
    width: 100%;
    max-height: 70vh;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--rayon);
    justify-self: end;
    max-width: 440px;
}
@media (max-width: 700px) {
    .bandeau-cote-grille { grid-template-columns: 1fr; gap: 24px; }
    .bandeau-cote-grille img { order: -1; justify-self: center; max-height: 60vh; }
}

/* Bouton SMS (vert) et petite note sous les boutons de contact */
.bouton-sms { background: var(--whatsapp); border-color: var(--whatsapp); }
.bouton-sms:hover { background: #17733e; border-color: #17733e; }
.appel .bouton-sms { background: var(--whatsapp); color: var(--blanc); border-color: var(--whatsapp); }
.note-contact { margin-top: 14px; font-size: .95rem; opacity: .9; max-width: 560px; }
.centre .note-contact { margin-left: auto; margin-right: auto; }

/* Au survol, les textes posés sur fond sombre restent clairs (la règle générale a:hover les passait en marron, illisible) */
.vignette, .vignette:hover { color: var(--creme); }
.pied a:hover { color: var(--blanc); }

/* Vignette de cours sans photo (en attendant une vraie photo) */
.vignette-sans-photo { background: linear-gradient(160deg, var(--terre) 0%, var(--foret) 100%); }

/* Rangée qui ne contient qu'une seule photo */
.photos.photo-seule { grid-template-columns: 1fr; max-width: 760px; }

/* Photo avec le nom du photographe en dessous */
.photo-credit { margin: 0; justify-self: end; max-width: 440px; width: 100%; }
.photo-credit img { width: 100%; max-height: 70vh; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--rayon); }
.photo-credit figcaption { font-size: .85rem; opacity: .8; margin-top: 6px; text-align: right; }
@media (max-width: 700px) { .photo-credit { order: -1; justify-self: center; } }

/* Photo affichée en entier, jamais rognée (pour garder par exemple la signature du photographe) */
img.photo-entiere,
.bandeau-cote-grille img.photo-entiere {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 75vh;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: var(--rayon);
    justify-self: center;
}
.photo-texte img.photo-entiere { max-height: 620px; margin: 0 auto; }