/* =====================================================================
   Chœur mixte de Rossens – feuille de style unique

   Organisation :
     1. Couleurs et polices (à changer ici, et seulement ici)
     2. Base
     3. En-tête, menu, bannière, bas de page
     4. Mise en page (cartes, colonnes, tuiles)
     5. Formulaires et boutons
     6. Tableaux, pastilles, messages
   ===================================================================== */

/* ---------- 1. Couleurs et polices ---------- */

@font-face { font-family: "Tenor Sans"; font-weight: 400; font-display: swap;
             src: url("../fonts/tenor-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 300; font-display: swap;
             src: url("../fonts/oswald-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 400; font-display: swap;
             src: url("../fonts/oswald-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 600; font-display: swap;
             src: url("../fonts/oswald-latin-600-normal.woff2") format("woff2"); }

:root {
    --anthracite: #343434;   /* barre du haut */
    --marine:     #0c202e;   /* boutons, liens */
    --sarcelle:   #16727d;   /* accents (couleur des notes de la bannière) */
    --menthe:     #e4f1ee;   /* fonds doux */
    --bordeaux:   #9d296f;   /* titres d'événements */
    --ardoise:    #4a5568;   /* textes secondaires */
    --texte:      #222;
    --fond:       #fff;
    --bordure:    #d5dfdc;

    --police-titre: "Tenor Sans", Georgia, serif;
    --police-texte: "Oswald", "Arial Narrow", Arial, sans-serif;

    --rayon: 10px;
    --largeur: 1100px;
}

/* ---------- 2. Base ---------- */

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

html { font-size: 112.5%; }            /* 18 px : lisible pour tous */

body {
    margin: 0;
    font-family: var(--police-texte);
    font-weight: 300;
    line-height: 1.55;
    color: var(--texte);
    background: var(--fond);
    letter-spacing: 0.01em;
}

h1, h2, h3 {
    font-family: var(--police-titre);
    font-weight: 400;
    line-height: 1.25;
    color: #000;
}
h1 { font-size: 2rem; margin: 0 0 1rem; }
h2 { font-size: 1.4rem; margin: 0 0 0.8rem; }
h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }

a { color: var(--marine); text-underline-offset: 3px; }
a:hover { color: var(--sarcelle); }

strong, b { font-weight: 600; }

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

.petit { font-size: 0.85rem; color: var(--ardoise); }
.centre { text-align: center; }
.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- 3. En-tête, menu, bannière, bas de page ---------- */

.barre {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--anthracite);
}

.marque {
    font-family: var(--police-titre);
    font-size: 1.6rem;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.03em;
}
.marque:hover { color: #fff; }

.menu { position: relative; }
.menu summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    list-style: none;
    color: #fff;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: rgba(255, 255, 255, 0.12); }

.burger, .burger::before, .burger::after {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -7px; }
.burger::after  { top: 7px; }

.menu nav {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 240px;
    padding: 0.5rem 0;
    background: var(--anthracite);
    border-radius: var(--rayon);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.menu nav a, .menu nav .lien-bouton {
    display: block;
    width: 100%;
    padding: 0.6rem 1.2rem;
    color: #fff;
    text-decoration: none;
    text-align: left;
    font: inherit;
    font-weight: 400;
}
.menu nav a:hover, .menu nav .lien-bouton:hover { background: rgba(255, 255, 255, 0.12); }

.lien-bouton { background: none; border: 0; cursor: pointer; }

.banniere {
    position: relative;
    max-width: 820px;          /* bannière plus discrète sur les pages intérieures */
    margin: 0 auto;
}
.banniere img { display: block; width: 100%; }
.banniere-titre {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-family: var(--police-titre);
    font-size: clamp(1.1rem, 4vw, 2rem);
    color: #000;
}

.page {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.pied {
    text-align: center;
    color: var(--ardoise);
    font-size: 0.9rem;
}
.pied img { display: block; width: 100%; max-width: 640px; margin: 2rem auto 0; }
.pied p { margin: 0; padding: 0.5rem 1rem 1.5rem; }

/* ---------- 4. Mise en page ---------- */

.carte {
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1.5rem;
}
.etroite { max-width: 520px; margin: 0 auto; }

.encadre {
    background: var(--menthe);
    border-radius: var(--rayon);
    padding: 0.8rem 1rem;
}

.colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.titre-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.tuiles {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}
.tuile {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    height: 100%;
    padding: 1.2rem;
    border-radius: var(--rayon);
    background: var(--menthe);
    color: var(--texte);
    text-decoration: none;
    border: 2px solid transparent;
}
a.tuile:hover { border-color: var(--sarcelle); color: var(--texte); }
.tuile strong { font-family: var(--police-titre); font-weight: 400; font-size: 1.3rem; }
.tuile span { color: var(--ardoise); font-size: 0.95rem; }
.tuile-bientot { opacity: 0.6; }
.tuile em { font-style: normal; font-size: 0.8rem; color: var(--sarcelle); font-weight: 400; }

/* ---------- 5. Formulaires et boutons ---------- */

.formulaire { display: flex; flex-direction: column; gap: 0.35rem; }
.formulaire label { margin-top: 0.7rem; font-weight: 400; }
.formulaire .bouton { margin-top: 1.2rem; align-self: flex-start; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"], select {
    width: 100%;
    padding: 0.65rem 0.8rem;
    font: inherit;
    font-weight: 400;
    color: var(--texte);
    background: #fafcfb;
    border: 1px solid #b9c6c2;
    border-radius: 8px;
}
input:focus, select:focus, button:focus-visible, a:focus-visible {
    outline: 3px solid rgba(22, 114, 125, 0.45);
    outline-offset: 1px;
    border-color: var(--sarcelle);
}

.mot-de-passe { display: flex; gap: 0.5rem; }
.mot-de-passe input { flex: 1; }
.afficher {
    font: inherit;
    font-size: 0.85rem;
    padding: 0 0.8rem;
    border: 1px solid #b9c6c2;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.formulaire label.case, label.case {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 300;
}
.case input { width: 1.2rem; height: 1.2rem; margin-top: 0.3rem; accent-color: var(--sarcelle); }

.bouton {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    font: inherit;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: #fff;
    background: var(--marine);
    border: 2px solid var(--marine);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
}
.bouton:hover { background: var(--sarcelle); border-color: var(--sarcelle); color: #fff; }
.bouton-clair { color: var(--marine); background: #fff; }
.bouton-clair:hover { color: #fff; }

.carte form + form { margin-top: 0.6rem; }

.aide { margin-top: 1.5rem; }

.erreur-champ { margin: 0; color: #b42318; font-size: 0.9rem; }

.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1rem 0;
}
.filtres input { flex: 2 1 220px; width: auto; }
.filtres select { flex: 1 1 160px; width: auto; }

.lien-copie { display: flex; gap: 0.5rem; }
.lien-copie input { flex: 1; font-size: 0.8rem; }

/* ---------- 6. Tableaux, pastilles, messages ---------- */

.tableau-defilant { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tableau th, .tableau td { padding: 0.55rem 0.6rem; text-align: left; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.tableau th { font-weight: 400; color: var(--ardoise); background: var(--menthe); }
.tableau tbody tr:hover { background: #f6faf9; }

.pastille {
    display: inline-block;
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 400;
    white-space: nowrap;
}
.pastille.vert   { background: #e3f4e6; color: #1e6b33; }
.pastille.orange { background: #fdf0d9; color: #8a5300; }
.pastille.rouge  { background: #fbe6e6; color: #a02424; }
.pastille.gris   { background: #eceeef; color: #555; }

.message {
    padding: 0.8rem 1rem;
    border-radius: 8px;
    border-left: 5px solid;
}
.message p { margin: 0.3rem 0; }
.message-ok     { background: #e9f6ee; border-color: #2f8a4f; }
.message-erreur { background: #fdecec; border-color: #c0392b; }

.journal { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; }
.journal li { padding: 0.3rem 0; border-bottom: 1px solid var(--bordure); }

/* ---------- 7. Espace membres ---------- */

textarea {
    width: 100%; padding: 0.65rem 0.8rem; font: inherit; font-weight: 400;
    background: #fafcfb; border: 1px solid #b9c6c2; border-radius: 8px;
}
input[type="date"], input[type="time"], input[type="url"] {
    width: 100%; padding: 0.6rem 0.8rem; font: inherit; font-weight: 400;
    background: #fafcfb; border: 1px solid #b9c6c2; border-radius: 8px;
}
.deux-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.deux-champs label { display: block; }
.bouton-danger { background: #a02424; border-color: #a02424; }
.bouton-danger:hover { background: #7d1b1b; border-color: #7d1b1b; }
.sans-marge { margin: 0; }

/* Agenda */
.mois-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 0.5rem; }
.mois-nav h2 { margin: 0; }
.mois-nav.petite { margin: 0 0 1rem; font-size: 0.9rem; }
.agenda { list-style: none; padding: 0; margin: 0; }
.agenda-jour { display: flex; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--bordure); }
.agenda-jour.passe { opacity: 0.55; }
.agenda-jour.aujourdhui .agenda-date { background: var(--sarcelle); color: #fff; }
.agenda-date {
    flex: 0 0 3.6rem; height: 3.6rem; border-radius: var(--rayon); background: var(--menthe);
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.agenda-jour-nom { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.agenda-jour-num { font-family: var(--police-titre); font-size: 1.5rem; }
.agenda-liste { list-style: none; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }
.agenda-item { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.2rem 0.8rem; align-items: baseline; }
.agenda-heure { font-weight: 400; color: var(--ardoise); }
.agenda-titre { font-weight: 400; }
.agenda-etiquettes { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.pastille.type { background: var(--menthe); color: var(--marine); }
.type-concert .agenda-titre { color: var(--bordeaux); }
.type-messe .pastille.type { background: #efe6f3; color: #5b2a73; }
.type-concert .pastille.type { background: #f6e4ee; color: var(--bordeaux); }
.type-sortie .pastille.type { background: #fdf0d9; color: #8a5300; }
a.pastille { text-decoration: none; }

/* Présences */
.liste-dates { list-style: none; padding: 0; margin: 0; }
.liste-dates a {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 0.8rem 0.4rem; border-bottom: 1px solid var(--bordure); color: var(--texte); text-decoration: none;
}
.liste-dates a:hover { background: #f6faf9; }
.feuille { padding-bottom: 5rem; }
.feuille-registre { font-size: 1.15rem; margin: 1.5rem 0 0.3rem; color: var(--sarcelle); }
.feuille-ligne {
    display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0.6rem;
    border-bottom: 1px solid var(--bordure); cursor: pointer; font-weight: 400; font-size: 1.05rem;
}
.feuille-ligne input { width: 1.6rem; height: 1.6rem; accent-color: var(--sarcelle); flex: none; }
.feuille-ligne:has(input:checked) { background: var(--menthe); }
.feuille-barre {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    display: flex; justify-content: center; align-items: center; gap: 1.5rem;
    padding: 0.7rem 1rem; background: #fff; border-top: 1px solid var(--bordure);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

/* Membres */
.fiches { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.fiche { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1rem 1.1rem; }
.fiche p { margin: 0.4rem 0; }
.fiche-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.fiche-tete strong { font-size: 1.1rem; }
.fiche-contacts { display: flex; flex-direction: column; gap: 0.1rem; }
.fiche-contacts a { text-decoration: none; word-break: break-all; }
.pastille.registre { background: var(--menthe); color: var(--marine); }

/* Enregistrements */
.onglets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0; }
.onglets a {
    padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid var(--bordure);
    text-decoration: none; color: var(--marine); font-weight: 400;
}
.onglets a.actif { background: var(--marine); color: #fff; border-color: var(--marine); }
.projet { border-top: 2px solid var(--menthe); padding: 0.4rem 0; }
.projet summary { display: flex; align-items: center; gap: 0.8rem; cursor: pointer; list-style: none; padding: 0.6rem 0; }
.projet summary::-webkit-details-marker { display: none; }
.projet summary::before { content: "▸"; color: var(--sarcelle); }
.projet[open] summary::before { content: "▾"; }
.projet summary h2 { margin: 0; }
.chants { list-style: none; padding: 0; margin: 0 0 1rem; }
.chant { padding: 0.6rem 0 0.8rem; border-bottom: 1px solid var(--bordure); }
.chant h3 { margin: 0 0 0.4rem; }
.pistes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.piste { display: grid; grid-template-columns: 6.5rem 1fr 2rem; align-items: center; gap: 0.6rem; }
.piste audio { width: 100%; height: 2.4rem; }
.piste-voix { font-weight: 400; }
.piste.ma-voix .piste-voix { color: var(--sarcelle); font-weight: 600; }
.piste-telecharger { text-decoration: none; font-size: 1.2rem; text-align: center; }

/* Photos */
details.ajout { margin: 0 0 1.5rem; }
details.ajout > summary { cursor: pointer; font-weight: 400; color: var(--marine); }
details.ajout[open] > summary { margin-bottom: 0.8rem; }
.albums { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.2rem; }
.album { display: flex; flex-direction: column; gap: 0.2rem; text-decoration: none; color: var(--texte); }
.album img, .album-vide { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); background: var(--menthe); }
.album-vide { display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--sarcelle); }
.album:hover img { opacity: 0.85; }
.galerie { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; }
.galerie li { position: relative; }
.galerie img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
.galerie .choix { position: absolute; top: 0.3rem; right: 0.3rem; background: rgba(255,255,255,0.9); border-radius: 4px; padding: 0.1rem 0.3rem; }
.galerie .choix input { width: 1.2rem; height: 1.2rem; accent-color: var(--sarcelle); }
.visionneuse { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; }
.visionneuse[hidden] { display: none; }
.visionneuse img { max-width: 94vw; max-height: 86vh; object-fit: contain; }
.visionneuse button { position: absolute; background: none; border: 0; color: #fff; text-shadow: 0 0 6px #000; font-size: 2.6rem; line-height: 1; padding: 0.5rem 0.9rem; cursor: pointer; }
.visionneuse-fermer { top: 0.5rem; right: 0.5rem; }
.visionneuse-prec { left: 0.2rem; top: 50%; transform: translateY(-50%); }
.visionneuse-suiv { right: 0.2rem; top: 50%; transform: translateY(-50%); }
.visionneuse-telecharger { position: absolute; bottom: 1rem; color: #fff; }
body.sans-defilement { overflow: hidden; }

.doublon { margin: -0.3rem 0 0.6rem; padding: 0.4rem 0.7rem; background: #fdf3e1; border-radius: 6px; color: #7a4a00; }

/* Vidéos */
.video { padding: 1rem 0 1.5rem; border-bottom: 1px solid var(--bordure); }
.video h2 { margin-bottom: 0.2rem; }
.video video { width: 100%; max-height: 75vh; background: #000; border-radius: var(--rayon); display: block; margin-top: 0.6rem; }
.video details.ajout { margin: 0.8rem 0 0; }
code { font-size: 0.9em; background: var(--menthe); padding: 0.05rem 0.3rem; border-radius: 4px; }

/* Documents */
.documents { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.documents li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--bordure); }
.doc-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.3rem 1rem; font-size: 0.9rem; }
.documents li > a { flex: 1; min-width: 0; }
.documents li > a { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--texte); }
.documents a strong { display: block; color: var(--marine); }
.documents a:hover strong { text-decoration: underline; }
.doc-type { flex: none; width: 3.2rem; padding: 0.35rem 0; text-align: center; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em;
            color: #fff; background: var(--sarcelle); border-radius: 6px; }
form.en-ligne { display: inline; margin: 0; }
.lien-discret { background: none; border: 0; padding: 0; font: inherit; font-size: 0.85rem; color: var(--ardoise); text-decoration: underline; cursor: pointer; }
.lien-discret:hover { color: #a02424; }

/* Gestion des enregistrements */
.gestion-liste { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.gestion-liste .carte { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1.1rem; margin: 0; }
.gestion-liste .petit { display: block; }
.ordre { display: flex; gap: 0.3rem; }
.bouton-icone { width: 2.4rem; height: 2.4rem; border: 1px solid var(--bordure); border-radius: 6px; background: #fff; color: var(--marine); font-size: 1.1rem; cursor: pointer; }
.bouton-icone:hover { background: var(--menthe); }
.gestion-pistes { margin: 1rem 0; }
.gestion-pistes li { display: grid; grid-template-columns: 13rem 1fr auto; align-items: center; gap: 0.6rem; }
.gestion-pistes audio { width: 100%; height: 2.4rem; }
form.voix-piste { display: flex; gap: 0.4rem; margin: 0; }
form.voix-piste input { min-width: 0; flex: 1; }
form.voix-piste .bouton { padding: 0.3rem 0.8rem; }
.actions-chant { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin: 0.8rem 0 1rem; }
.projet-reglages { margin-top: 2rem; }
@media (max-width: 600px) {
    .documents li { flex-wrap: wrap; }
    .doc-actions { width: 100%; justify-content: flex-start; padding-left: 4rem; }
    .gestion-pistes li { grid-template-columns: 1fr auto; }
    .gestion-pistes audio { grid-column: 1 / -1; grid-row: 2; }
}

/* Import de la liste des membres */
.import-liste { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.import-liste .carte { padding: 0.9rem 1.1rem; margin: 0; }
.import-liste .carte p { margin: 0.3rem 0 0.3rem 1.8rem; }
.changement { margin-top: 0.3rem; }
.changement del { color: #a02424; }
.changement ins { color: #1d6b38; text-decoration: none; font-weight: 400; }

/* ---------- 8. Pages publiques ---------- */

.menu nav hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 0.4rem 1.2rem; }
h1.banniere-titre { font-weight: 400; }
.pied-liens { font-size: 0.85rem; }
.pied-liens a { color: var(--ardoise); }

.contenu h2 { margin-top: 1.6rem; }
.contenu h2:first-child { margin-top: 0; }
.contenu figure { margin: 1rem 0; }
.contenu img, .deux-colonnes img, .texte-page-image { border-radius: var(--rayon); }
.etroite-texte { max-width: 760px; margin-left: auto; margin-right: auto; }
.boutons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }

.annonce { background: #f6e4ee; border-left: 5px solid var(--bordeaux); border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 2rem; }

.bande { background: var(--menthe); border-radius: var(--rayon); padding: 1.5rem 1.2rem; margin-bottom: 2.5rem; }
.bande h2 { margin-top: 0; }
.prestations { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.prestations.liste { grid-template-columns: 1fr; }
.prestation { background: #fff; border-radius: var(--rayon); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.2rem; border: 1px solid var(--bordure); }
.prestation-date { color: var(--ardoise); font-size: 0.9rem; }
.prestation-titre { font-family: Georgia, var(--police-titre); color: var(--bordeaux); font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.programme-mois { color: var(--sarcelle); margin-top: 2rem; }

.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; margin: 2.5rem 0; }
.deux-colonnes img { width: 100%; }
.deux-colonnes.inverse img { order: 2; }

.accordeon { border-bottom: 1px solid var(--bordure); }
.accordeon summary {
    cursor: pointer; list-style: none; padding: 0.8rem 2rem 0.8rem 0; position: relative;
    font-family: var(--police-titre); font-size: 1.1rem;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::after { content: "+"; position: absolute; right: 0.3rem; top: 0.6rem; font-size: 1.4rem; color: var(--sarcelle); }
.accordeon[open] summary::after { content: "–"; }
.accordeon > div { padding: 0 0 1rem; }

.texte-page.avec-image { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; align-items: start; }
.texte-page-image { width: 100%; }
.dates { display: grid; grid-template-columns: 4rem 1fr; gap: 0.5rem 1rem; margin: 2rem 0 0; }
.dates dt { font-family: var(--police-titre); color: var(--sarcelle); font-size: 1.1rem; }
.dates dd { margin: 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--bordure); }

.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.editeur { grid-template-columns: minmax(300px, 3fr) minmax(260px, 2fr); }
.texte-source { font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; line-height: 1.5; min-height: 28rem; }
.aide-texte ul { padding-left: 1.1rem; font-size: 0.9rem; }
.aide-texte code { background: var(--menthe); padding: 0 0.25rem; border-radius: 4px; font-size: 0.85em; }
.apercu { max-height: 26rem; overflow: auto; border-top: 1px solid var(--bordure); padding-top: 0.6rem; font-size: 0.9rem; }

/* ---------- 9. Carte d'accès simplifié ---------- */

.carte-acces {
    max-width: 420px; margin: 1.5rem auto; padding: 1.4rem 1.6rem; text-align: center;
    border: 2px dashed var(--sarcelle); border-radius: var(--rayon); background: #fff;
}
.carte-acces-titre { font-family: var(--police-titre); font-size: 1.4rem; margin: 0 0 0.5rem; }
.carte-acces .qr { width: 220px; height: 220px; image-rendering: pixelated; margin: 0.5rem auto; display: block; }
.carte-acces ol { text-align: left; padding-left: 1.2rem; font-size: 0.95rem; }
.lien-brut { word-break: break-all; font-size: 0.65rem; }

@media print {
    .barre, .banniere, .pied, .non-imprime, .message, .page > section > p:first-child, .page > section > h1 { display: none !important; }
    .carte-acces { margin: 0 auto; }
}

/* ---------- Petits écrans ---------- */

@media (max-width: 600px) {
    html { font-size: 106.25%; }       /* 17 px */
    .marque { font-size: 1.2rem; }
    .menu-texte { display: none; }
    .carte { padding: 1.1rem; }
    h1 { font-size: 1.6rem; }
    .piste { grid-template-columns: 1fr 2rem; }
    .piste audio { grid-column: 1 / -1; grid-row: 2; }
    .agenda-item { grid-template-columns: 3.6rem 1fr; }
    .deux-colonnes, .texte-page.avec-image, .editeur { grid-template-columns: 1fr; }
    .deux-colonnes.inverse img { order: 0; }
    .texte-page-image { max-width: 260px; }
}