/* ==========================================================================
   Chorale Mavy — feuille de style unique.
   Modifiable directement : aucun outil à installer, aucune compilation.
   Les couleurs et mesures de la charte sont regroupées ci-dessous.
   ========================================================================== */

:root {
    /* Couleurs de la charte */
    --creme: #EDE6DC;        /* fond de page */
    --encre: #2B3140;        /* texte, header, footer */
    --terracotta: #A85A38;   /* accent, boutons principaux, liens */
    --badge: #F0E4D3;        /* fond des étiquettes claires */
    --pupitres: rgba(197, 205, 217, .5);  /* cartes « pupitres » */
    --partitions: rgba(240, 228, 211, .6);/* cartes « partitions » */
    --blanc: #FFFFFF;

    /* Formes */
    --rayon-pilule: 100px;
    --rayon-carte: 20px;
    --rayon-champ: 14px;
    --rayon-footer: 32px;

    /* Ombres */
    --ombre-principale: 0 6px 14px rgba(168, 90, 56, .35);
    --ombre-secondaire: 0 4px 10px rgba(0, 0, 0, .1);
    --ombre-carte: 0 8px 20px rgba(43, 49, 64, .08);
    --ombre-image: 0 12px 28px rgba(0, 0, 0, .18);

    /* Typographie */
    --titres: 'Jost', 'Trebuchet MS', sans-serif;
    --texte: 'Nunito Sans', 'Segoe UI', sans-serif;
}

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

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--creme);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--titres); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }
@media (min-width: 768px) { h1 { font-size: 3.25rem; } h2 { font-size: 1.75rem; } }

a { color: var(--terracotta); }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; }

.discret { color: rgba(43, 49, 64, .7); }
.petit { font-size: .875rem; }
.centre { text-align: center; }
.rien { color: rgba(43, 49, 64, .6); font-style: italic; }

/* --- Structure ---------------------------------------------------------- */

.contenu {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
    flex: 1;
}
.contenu.etroit { max-width: 720px; }
.contenu.tres-etroit { max-width: 480px; }

/* --- En-tête ------------------------------------------------------------ */

.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(237, 230, 220, .95);
    backdrop-filter: blur(8px);
}
.entete-interieur {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.12)); }
.logo-nom { font-family: var(--titres); font-size: 1.5rem; font-weight: 600; color: var(--encre); }
.logo-nom span { color: var(--terracotta); }
.logo-sous-titre { margin-top: .35rem; font-size: .65rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(43,49,64,.6); }
@media (min-width: 768px) { .logo-nom { font-size: 1.85rem; } }

/* Le logo a un fond quasi blanc alors que la page est crème. Le mode de
   fusion « multiply » fait disparaître ce fond clair dans la couleur de la
   page tout en conservant les traits du dessin : le logo paraît détouré,
   sans qu'il ait fallu retoucher le fichier. */
.logo-image {
    display: block;
    height: 72px;
    width: auto;
    mix-blend-mode: multiply;
}
@media (min-width: 768px)  { .logo-image { height: 104px; } }
@media (min-width: 1100px) { .logo-image { height: 124px; } }

/* Le logo étant plus haut que le texte qu'il remplace, l'en-tête se resserre
   pour ne pas occuper trop de hauteur. */
.entete-interieur { padding-top: .6rem; padding-bottom: .6rem; }

.navigation { display: none; gap: 1.75rem; align-items: center; }
.navigation a { font-family: var(--titres); font-size: .95rem; font-weight: 500; color: var(--encre); text-decoration: none; }
.navigation a:hover, .navigation a.actif { color: var(--terracotta); }
@media (min-width: 900px) { .navigation { display: flex; } .entete-actions { display: flex; } .bouton-menu { display: none; } }

.entete-actions { display: none; align-items: center; gap: .75rem; }

.bouton-menu {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: var(--blanc); border: 0; border-radius: var(--rayon-pilule);
    box-shadow: var(--ombre-secondaire); cursor: pointer;
}
.bouton-menu span { display: block; width: 20px; height: 2px; background: var(--encre); position: relative; }
.bouton-menu span::before, .bouton-menu span::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--encre); }
.bouton-menu span::before { top: -6px; }
.bouton-menu span::after { top: 6px; }

.menu-mobile { display: none; flex-direction: column; padding: .5rem 1.5rem 1.5rem; border-top: 1px solid rgba(43,49,64,.1); }
.menu-mobile.ouvert { display: flex; }
.menu-mobile a { padding: .85rem 1rem; border-radius: var(--rayon-pilule); font-family: var(--titres); font-weight: 500; color: var(--encre); text-decoration: none; }
.menu-mobile a:hover { background: var(--badge); }
@media (min-width: 900px) { .menu-mobile, .menu-mobile.ouvert { display: none; } }

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

.pied {
    margin-top: 3rem;
    background: var(--encre);
    color: rgba(255,255,255,.85);
    border-radius: var(--rayon-footer) var(--rayon-footer) 0 0;
    padding: 3rem 1.5rem 2rem;
}
.pied-interieur { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 640px) { .pied-interieur { flex-direction: row; justify-content: space-between; } .pied-contact { text-align: right; } }
.pied a { color: rgba(255,255,255,.85); text-decoration: none; display: block; padding: .15rem 0; }
.pied a:hover { color: #fff; }
.pied-nom { font-family: var(--titres); font-size: 1.25rem; font-weight: 600; color: #fff; }
.pied-sous-titre { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: .25rem; }
.pied-bas { max-width: 1100px; margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .75rem; color: rgba(255,255,255,.5); }

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

.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: 15px 30px;
    border: 0; border-radius: var(--rayon-pilule);
    font-family: var(--titres); font-size: 1rem; font-weight: 500;
    text-decoration: none; cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}
.bouton:hover { filter: brightness(1.06); }
.bouton:active { transform: translateY(1px); }
.bouton:disabled, .bouton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.bouton-principal { background: var(--terracotta); color: #fff; box-shadow: var(--ombre-principale); }
.bouton-secondaire { background: var(--blanc); color: var(--encre); box-shadow: var(--ombre-secondaire); }
.bouton-petit { padding: 9px 20px; font-size: .875rem; }
.bouton-lien { background: none; border: 0; padding: 0; color: var(--terracotta); font-size: .8rem; font-family: var(--texte); cursor: pointer; text-decoration: underline; }

/* --- Cartes ------------------------------------------------------------- */

.carte { border-radius: var(--rayon-carte); padding: 1.75rem; background: var(--blanc); box-shadow: var(--ombre-carte); }
@media (min-width: 768px) { .carte { padding: 2.25rem; } }
.carte-pupitres { background: var(--pupitres); box-shadow: none; }
.carte-partitions { background: var(--partitions); box-shadow: none; }
.carte + .carte { margin-top: 1.25rem; }

.grille { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grille-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grille-3 { grid-template-columns: repeat(3, 1fr); } }

.etiquette {
    display: inline-block; padding: .3rem 1rem;
    background: var(--badge); color: var(--terracotta);
    border-radius: var(--rayon-pilule);
    font-size: .78rem; font-weight: 700;
}
.etiquette-claire { background: var(--blanc); color: rgba(43,49,64,.7); text-transform: uppercase; letter-spacing: .05em; }

/* --- Formulaires -------------------------------------------------------- */

.champ { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.champ > span, .champ > label { font-size: .875rem; font-weight: 600; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="password"],
.champ input[type="tel"], .champ input[type="date"], .champ input[type="datetime-local"],
.champ input[type="search"], .champ select, .champ textarea,
input.champ-saisie, select.champ-saisie, textarea.champ-saisie {
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid rgba(43,49,64,.15);
    border-radius: var(--rayon-champ);
    background: var(--blanc);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 1rem;
}
.champ input:focus, .champ select:focus, .champ textarea:focus,
.champ-saisie:focus { outline: none; border-color: var(--terracotta); }
.champ textarea { resize: vertical; min-height: 8rem; }
.champ-aide { font-size: .8rem; color: rgba(43,49,64,.6); font-weight: 400; }

.champ-case { flex-direction: row; align-items: flex-start; gap: .75rem; }
.champ-case input { margin-top: .25rem; flex-shrink: 0; }
.champ-case span { font-weight: 400; }

.ligne-champs { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ligne-champs { grid-template-columns: 1fr 1fr; } }

fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
legend { font-size: .875rem; font-weight: 600; padding: 0; margin-bottom: .5rem; }

/* Cases à cocher présentées comme des étiquettes cliquables */
.choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.choix label {
    padding: .45rem 1rem; border-radius: var(--rayon-pilule);
    background: var(--badge); color: rgba(43,49,64,.75);
    font-size: .8rem; font-weight: 700; cursor: pointer;
}
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix input:checked + span, .choix label:has(input:checked) { background: var(--terracotta); color: #fff; }
.choix label:has(input:checked) { background: var(--terracotta); color: #fff; }

/* --- Messages ----------------------------------------------------------- */

.message { padding: .9rem 1.25rem; border-radius: var(--rayon-champ); margin-bottom: 1.25rem; font-size: .9rem; }
.message-succes { background: #E4EFE4; color: #2C5F2D; }
.message-erreur { background: #F7E2DC; color: #8C3A22; }
.message-info { background: var(--badge); color: #6B4423; }

/* --- Tableaux ----------------------------------------------------------- */

.tableau-defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .75rem .85rem; text-align: left; border-bottom: 1px solid rgba(43,49,64,.1); white-space: nowrap; }
th { font-family: var(--titres); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: rgba(43,49,64,.6); }
tbody tr:hover { background: rgba(255,255,255,.5); }

/* --- Éléments spécifiques ----------------------------------------------- */

.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--blanc); flex-shrink: 0; }
.avatar-grand { width: 88px; height: 88px; }

.membre { display: flex; align-items: center; gap: 1rem; }

.liste-nue { list-style: none; padding: 0; margin: 0; }
.liste-nue li + li { margin-top: .5rem; }

.entete-page { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.suggestions { position: relative; }
.suggestions-liste {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    margin: .25rem 0 0; padding: 0; list-style: none;
    background: var(--blanc); border-radius: var(--rayon-champ);
    box-shadow: var(--ombre-carte); overflow: hidden;
}
.suggestions-liste button { display: block; width: 100%; padding: .6rem 1rem; border: 0; background: none; text-align: left; font-size: .9rem; font-family: var(--texte); cursor: pointer; }
.suggestions-liste button:hover { background: var(--badge); }

audio { width: 100%; max-width: 320px; height: 38px; }

#carte-covoiturage { height: 480px; width: 100%; border-radius: var(--rayon-carte); box-shadow: var(--ombre-image); }

.fichier-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .5rem 0; }

details > summary { cursor: pointer; font-family: var(--titres); font-weight: 600; font-size: 1.1rem; padding: .5rem 0; }

.separateur { border: 0; border-top: 1px solid rgba(43,49,64,.1); margin: 2rem 0; }