:root {
    --bleu-nuit: #1B2A4A;
    --bleu-nuit-clair: #2C4270;
    --bleu-bandeau: #E8EEF7;
    --fond: #F6F7FA;
    --texte: #1F2430;
    --texte-doux: #6B7280;
    --accent: #C98A3E;
    --accent-fonce: #A96F2C;
    --trait: #DDE3EC;
    --blanc: #FFFFFF;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: 'Public Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    display: flex;
    min-height: 100vh;
  }

  /* --- Bandeau latéral --- */
  .bandeau {
    width: 220px;
    flex-shrink: 0;
    background: var(--bleu-nuit);
    color: white;
    display: flex;
    flex-direction: column;
    padding: 24px 0;
  }

  .bandeau_logo {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 21px;
    color: white;
    padding: 0 24px 28px;
  }

  .bandeau_nav {
    display: flex;
    flex-direction: column;
  }

  .bandeau_lien {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
  }

  .bandeau_lien:hover {
    color: white;
    background: rgba(255,255,255,0.06);
  }

  .bandeau_lien.actif {
    color: white;
    background: rgba(255,255,255,0.08);
    border-left-color: var(--accent);
    font-weight: 600;
  }

  /* --- Zone principale --- */
  .zone_principale {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .entete {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 18px 32px;
    background: var(--blanc);
    border-bottom: 1px solid var(--trait);
  }

  .entete_droite {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .lien_idee {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--texte-doux);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.15s ease;
  }

  .lien_idee:hover { color: var(--accent-fonce); }

  .profil {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--texte);
  }

  .avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bleu-nuit);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Public Sans', sans-serif;
  }

  .profil_nom {
    font-size: 14px;
    font-weight: 600;
  }

  main {
    max-width: none;
    margin: 0;
    padding: 32px 48px 80px;
  }

  h1 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 32px;
    margin: 0 0 6px;
    color: var(--bleu-nuit);
  }

  .sous_titre {
    color: var(--texte-doux);
    font-size: 15px;
    margin: 0 0 36px;
  }

  .grille {
    display: flex;
  }

  .grille .carte {
    flex: 1;
    min-width: 0;
  }

  .grille .carte:not(:last-child) {
    margin-right: 64px;
  }

  /* Note : la version mobile/tablette sera traitée plus tard, on reste sur desktop pour l'instant */

  .carte {
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: 10px;
    overflow: hidden;
  }

  .carte_bandeau {
    background: var(--bleu-bandeau);
    color: var(--bleu-nuit);
    padding: 12px 18px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--trait);
  }

  .carte_contenu {
    padding: 20px 18px;
  }

  .ligne_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--trait);
    font-size: 14px;
  }

  .ligne_info:last-of-type { border-bottom: none; }

  .ligne_info .label {
    color: var(--texte-doux);
  }

  .code_chip {
    font-family: monospace;
    font-size: 14px;
    background: var(--bleu-bandeau);
    color: var(--bleu-nuit);
    padding: 3px 10px;
    border-radius: 5px;
    letter-spacing: 0.05em;
    font-weight: 600;
  }

  .lien_texte {
    display: inline-block;
    margin-top: 14px;
    color: var(--bleu-nuit);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--bleu-nuit-clair);
    padding-bottom: 1px;
  }

  .lien_texte:hover { color: var(--accent-fonce); border-color: var(--accent-fonce); }

  .liste_cultes {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .liste_cultes li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--trait);
    font-size: 14px;
  }

  .liste_cultes li:last-child { border-bottom: none; }

  .liste_cultes a {
    color: var(--texte);
    text-decoration: none;
    font-weight: 500;
  }

  .liste_cultes a:hover { color: var(--bleu-nuit); }

  .etiquette_passe {
    font-size: 12px;
    color: var(--texte-doux);
  }

  .btn_creer {
    display: inline-block;
    margin-top: 16px;
    background: var(--accent);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .btn_creer:hover { background: var(--accent-fonce); }

  .carte_pleine_largeur { grid-column: 1 / -1; }

  .liste_membres {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .liste_membres li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--trait);
  }

  .liste_membres li:last-child { border-bottom: none; }

  .badge_role {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--bleu-bandeau);
    color: var(--bleu-nuit);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
  }

  .carte_pleine {
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: 10px;
    overflow: hidden;
  }

  .carte_pleine .carte_bandeau {
    background: var(--bleu-bandeau);
    color: var(--bleu-nuit);
    padding: 14px 24px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--trait);
  }

  .liste_types_evenement {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .liste_types_evenement li {
    border-bottom: 1px solid var(--trait);
  }

  .liste_types_evenement li:last-child {
    border-bottom: none;
  }

  .ligne_type_evenement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--trait);
    text-decoration: none;
    color: var(--texte);
    transition: background 0.15s ease;
  }

  .ligne_type_evenement:hover {
    background: var(--fond);
  }

  .liste_types_evenement li:last-child .ligne_type_evenement {
    border-bottom: none;
  }

  .ligne_type_evenement .nom_type {
    font-size: 16px;
    font-weight: 600;
  }

  .ligne_type_evenement .fleche {
    color: var(--texte-doux);
    font-size: 18px;
  }

  .zone_creer_evenement {
    padding: 18px 24px;
  }

  .lien_creer_evenement {
    color: var(--texte-doux);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
  }

  .lien_creer_evenement:hover {
    color: var(--bleu-nuit);
  }

  #vue_dates .carte_bandeau {
    display: flex;
    align-items: center;
  }

  .lien_retour {
    margin-right: 10px;
  }

  .lien_retour {
    color: var(--bleu-nuit);
    text-decoration: none;
    font-weight: 700;
  }

  .lien_retour:hover {
    color: var(--accent-fonce);
  }

  .liste_dates_evenement {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ligne_date_evenement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--trait);
    text-decoration: none;
    color: var(--texte);
    transition: background 0.15s ease;
  }

  .ligne_date_evenement:hover {
    background: var(--fond);
  }

  .liste_dates_evenement li:last-child .ligne_date_evenement {
    border-bottom: none;
  }

  .ligne_date_evenement .date_titre {
    font-size: 15px;
    font-weight: 600;
  }

  .etiquette_passe {
    font-size: 12px;
    color: var(--texte-doux);
    font-weight: 400;
    margin-left: 8px;
  }

  .zone_programmer {
    padding: 18px 24px;
  }

  .btn_creer {
    display: inline-block;
    background: var(--accent);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .btn_creer:hover { background: var(--accent-fonce); }

  .liste_types_evenement .ligne_type_evenement {
    border-bottom: none;
  }

  .panel_dates {
    background: #F0F1F4;
    border-top: 1px solid var(--trait);
    padding-left: 32px;
  }

  .panel_dates .liste_dates_evenement {
    padding: 0 24px;
  }

  .panel_dates .ligne_date_evenement {
    padding: 14px 0;
  }

  .panel_dates .zone_programmer {
    padding: 16px 24px 20px;
  }

  .barre_actions {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .champ_recherche {
    padding: 9px 14px;
    border: 1px solid var(--trait);
    border-radius: 7px;
    font-size: 14px;
    font-family: 'Public Sans', sans-serif;
    width: 260px;
    margin-right: 14px;
  }

  .btn_filtre {
    background: white;
    border: 1px solid var(--trait);
    color: var(--texte);
    padding: 9px 14px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-right: 14px;
  }

  .btn_filtre:hover {
    background: var(--fond);
  }

  .lien_ajouter_chant {
    margin-left: auto;
    color: var(--bleu-nuit);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
  }

  .lien_ajouter_chant:hover {
    color: var(--accent-fonce);
  }

  .table_chants {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid var(--trait);
    border-radius: 10px;
    overflow: hidden;
  }

  .table_chants thead th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--texte-doux);
    background: var(--bleu-bandeau);
    padding: 12px 20px;
    font-weight: 600;
  }

  .table_chants tbody td {
    padding: 14px 20px;
    border-top: 1px solid var(--trait);
    font-size: 14px;
  }

  .lien_titre_chant {
    color: var(--texte);
    text-decoration: none;
    font-weight: 600;
  }

  .lien_titre_chant:hover {
    color: var(--bleu-nuit);
    text-decoration: underline;
  }

  .lien_action {
    color: var(--texte-doux);
    text-decoration: none;
    font-size: 13px;
    margin-right: 16px;
    white-space: nowrap;
  }

  .lien_action:hover {
    color: var(--bleu-nuit);
  }

  .conteneur_transposition {
    position: relative;
    display: inline-block;
  }

  .bulle_transposition {
    position: absolute;
    top: 22px;
    left: 0;
    background: white;
    border: 1px solid var(--trait);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(27, 42, 74, 0.12);
    padding: 8px;
    display: flex;
    flex-direction: column;
    min-width: 190px;
    z-index: 10;
  }

  .bulle_transposition a {
    color: var(--texte);
    text-decoration: none;
    font-size: 13px;
    padding: 7px 10px;
    border-radius: 5px;
    font-family: monospace;
    white-space: nowrap;
  }

  .bulle_transposition a:hover {
    background: var(--fond);
    color: var(--bleu-nuit);
  }

  /* --- Page d'un chant --- */
  .entete_chant {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
  }

  .titre_chant {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 32px;
    margin: 0 0 8px;
    color: var(--bleu-nuit);
  }

  .icone_partition {
    font-size: 20px;
    text-decoration: none;
    margin-left: 8px;
    vertical-align: middle;
    opacity: 0.75;
  }

  .icone_partition:hover { opacity: 1; }

  .meta_chant {
    margin: 0 0 2px;
    font-size: 14px;
    color: var(--texte-doux);
  }

  .meta_chant strong { color: var(--texte); }

  .lien_modifier {
    color: var(--bleu-nuit);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--trait);
    background: white;
    padding: 8px 16px;
    border-radius: 7px;
    white-space: nowrap;
  }

  .lien_modifier:hover {
    background: var(--fond);
    color: var(--accent-fonce);
  }

  .partition {
    padding: 22px 24px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 14px;
  }

  .section_chant {
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bleu-nuit-clair);
    /* Deux lignes d'espace avant chaque section, pour aérer la partition */
    margin: 38px 0 8px;
  }

  .section_chant:first-child { margin-top: 0; }

  .ligne_accords {
    white-space: pre;
    color: var(--accent-fonce);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
  }

  .ligne_paroles {
    white-space: pre;
    color: var(--texte);
    line-height: 1.25;
    margin: 0 0 6px;
  }

  .bloc_transposition {
    margin-top: 24px;
  }

  .contenu_transposition {
    padding: 20px 24px;
  }

  .ligne_form_transposition {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .ligne_form_transposition label {
    font-size: 14px;
    color: var(--texte-doux);
    margin-right: 12px;
  }

  .ligne_form_transposition select {
    padding: 8px 12px;
    border: 1px solid var(--trait);
    border-radius: 7px;
    font-size: 14px;
    font-family: 'Public Sans', sans-serif;
    margin-right: 12px;
  }

  .label_transpositions {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--texte-doux);
    font-weight: 600;
    margin: 0 0 10px;
  }

  .liste_pdf_transposes {
    display: flex;
    flex-wrap: wrap;
  }

  .liste_pdf_transposes a {
    font-family: monospace;
    font-size: 13px;
    color: var(--bleu-nuit);
    text-decoration: none;
    background: var(--bleu-bandeau);
    padding: 7px 12px;
    border-radius: 6px;
    margin-right: 10px;
    margin-bottom: 8px;
  }

  .liste_pdf_transposes a:hover {
    background: #DCE5F2;
  }

  /* --- Page détail d'un culte --- */
  .liste_chants_culte {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .liste_chants_culte > li {
    border-bottom: 1px solid var(--trait);
  }

  .liste_chants_culte > li:last-child {
    border-bottom: none;
  }

  .ligne_chant_culte {
    display: block;
    padding: 16px 24px;
    text-decoration: none;
    color: var(--texte);
    transition: background 0.15s ease;
  }

  .ligne_chant_culte:hover {
    background: var(--fond);
  }

  .titre_chant_culte {
    font-size: 15px;
    font-weight: 600;
  }

  .panel_chant {
    background: #F0F1F4;
    padding: 20px 24px 22px 40px;
  }

  .grille_details {
    display: flex;
    flex-wrap: wrap;
  }

  .mini_carte {
    background: white;
    border-radius: 10px;
    padding: 16px 18px;
    width: 47%;
    margin-right: 3%;
    margin-bottom: 16px;
    box-sizing: border-box;
  }

  .mini_carte_titre {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bleu-nuit);
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px dashed var(--trait);
  }

  .lien_pdf_simple {
    font-family: monospace;
    font-size: 13px;
    color: var(--bleu-nuit);
    text-decoration: none;
    background: var(--bleu-bandeau);
    padding: 7px 12px;
    border-radius: 6px;
    display: inline-block;
  }

  .lien_pdf_simple:hover { background: #DCE5F2; }

  .form_transposition_mini {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
  }

  .form_transposition_mini select {
    padding: 7px 10px;
    border: 1px solid var(--trait);
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Public Sans', sans-serif;
    margin-right: 10px;
    min-width: 90px;
  }

  .btn_generer_mini {
    background: var(--accent);
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Public Sans', sans-serif;
  }

  .btn_generer_mini:hover { background: var(--accent-fonce); }

  .liste_pdf_mini {
    display: flex;
    flex-direction: column;
  }

  .liste_pdf_mini a {
    font-family: monospace;
    font-size: 13px;
    color: var(--bleu-nuit);
    text-decoration: none;
    padding: 5px 0;
  }

  .liste_pdf_mini a:hover { text-decoration: underline; }

  .aucun_pdf {
    font-size: 13px;
    color: var(--texte-doux);
    font-style: italic;
  }

  .detail_ligne {
    margin: 0 0 8px;
    font-size: 14px;
  }

  .detail_ligne:last-child { margin-bottom: 0; }

  .detail_label {
    display: inline-block;
    width: 130px;
    color: var(--texte-doux);
    font-size: 13px;
  }

  .lien_media {
    display: block;
    font-size: 14px;
    color: var(--bleu-nuit);
    text-decoration: none;
    margin-bottom: 10px;
  }

  .lien_media:hover { text-decoration: underline; }

  .lien_ajouter_media {
    font-size: 13px;
    color: var(--texte-doux);
    text-decoration: none;
  }

  .lien_ajouter_media:hover { color: var(--bleu-nuit); }

  .bloc_optionnel {
    margin-bottom: 24px;
  }

/* --- Formulaires --- */
.form_standard {
  display: flex;
  flex-direction: column;
  max-width: 560px;
}

.form_standard label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: var(--texte-doux);
  margin-bottom: 16px;
}

.form_standard input[type="text"],
.form_standard input[type="email"],
.form_standard input[type="password"],
.form_standard input[type="url"],
.form_standard input[type="date"],
.form_standard select,
.form_standard textarea {
  margin-top: 5px;
  padding: 9px 12px;
  border: 1px solid var(--trait);
  border-radius: 7px;
  font-size: 14px;
  font-family: 'Public Sans', sans-serif;
  color: var(--texte);
  background: white;
}

.form_standard textarea {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  line-height: 1.4;
  resize: vertical;
}

.form_standard input:focus,
.form_standard select:focus,
.form_standard textarea:focus {
  outline: none;
  border-color: var(--bleu-nuit-clair);
}

.btn_principal {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Public Sans', sans-serif;
  align-self: flex-start;
  text-decoration: none;
  display: inline-block;
}

.btn_principal:hover { background: var(--accent-fonce); }

.btn_secondaire {
  background: white;
  color: var(--bleu-nuit);
  border: 1px solid var(--trait);
  padding: 9px 16px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Public Sans', sans-serif;
  text-decoration: none;
  display: inline-block;
}

.btn_secondaire:hover { background: var(--fond); }

.message_erreur {
  background: #FDECEC;
  color: #A32020;
  border: 1px solid #F5C6C6;
  padding: 10px 14px;
  border-radius: 7px;
  font-size: 14px;
  margin-bottom: 18px;
}

.message_succes {
  background: #EAF6EE;
  color: #1A6B36;
  border: 1px solid #C3E4CE;
  padding: 10px 14px;
  border-radius: 7px;
  font-size: 14px;
  margin-bottom: 18px;
}

.lien_retour_page {
  display: inline-block;
  font-size: 13px;
  color: var(--texte-doux);
  text-decoration: none;
  margin-bottom: 10px;
}

.lien_retour_page:hover { color: var(--bleu-nuit); }

/* --- Pages de connexion / inscription --- */
.page_auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  background: var(--fond);
}

.carte_auth {
  background: white;
  border: 1px solid var(--trait);
  border-radius: 12px;
  padding: 34px 36px;
  width: 100%;
  max-width: 420px;
}

.logo_auth {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 26px;
  color: var(--bleu-nuit);
  margin: 0 0 4px;
}

.sous_titre_auth {
  color: var(--texte-doux);
  font-size: 14px;
  margin: 0 0 24px;
}

.carte_auth .form_standard { max-width: none; }

.lien_bas_auth {
  margin-top: 18px;
  font-size: 14px;
  text-align: center;
}

.lien_bas_auth a {
  color: var(--bleu-nuit);
  font-weight: 600;
  text-decoration: none;
}

.lien_bas_auth a:hover { color: var(--accent-fonce); }

.bloc_code_genere {
  background: var(--bleu-bandeau);
  border-radius: 8px;
  padding: 18px;
  text-align: center;
  margin-bottom: 18px;
}

.bloc_code_genere .code_valeur {
  font-family: monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bleu-nuit);
  display: block;
  margin-top: 6px;
}

/* --- Éditeur d'accords --- */
.zone_apercu_accords {
  background: white;
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14px;
}

.ligne_edition {
  line-height: 1.15;
  margin-bottom: 8px;
  white-space: pre-wrap;
}

.mot_cliquable {
  display: inline-block;
  cursor: pointer;
  border-radius: 3px;
  padding: 0 1px;
}

.mot_cliquable:hover { background: var(--bleu-bandeau); }

.accord_pose {
  display: block;
  color: var(--accent-fonce);
  font-weight: 700;
  font-size: 12px;
  min-height: 15px;
  line-height: 1.1;
}

.puce_tag {
  display: inline-block;
  background: var(--bleu-bandeau);
  color: var(--bleu-nuit);
  padding: 3px 10px;
  border-radius: 12px;
  margin: 2px 5px 2px 0;
  font-size: 12px;
  cursor: pointer;
}

.puce_tag:hover { background: #DCE5F2; }

/* --- Modale de recherche --- */
.fond_modale {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(27, 42, 74, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.contenu_modale {
  background: white;
  border-radius: 12px;
  padding: 22px;
  width: 90%;
  max-width: 460px;
}

.contenu_modale h3 {
  margin: 0 0 14px;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  color: var(--bleu-nuit);
}

.contenu_modale input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--trait);
  border-radius: 7px;
  font-size: 14px;
  font-family: 'Public Sans', sans-serif;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.resultats_modale {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--trait);
  border-radius: 7px;
  margin-bottom: 14px;
}

.resultat_item {
  padding: 11px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--trait);
  font-size: 14px;
}

.resultat_item:last-child { border-bottom: none; }
.resultat_item:hover { background: var(--fond); }

/* --- Liste de chants d'un formulaire d'événement --- */
.ligne_chant_form {
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
}

.ligne_chant_form .nom {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.ligne_chant_form select,
.ligne_chant_form input[type="text"] {
  padding: 6px 9px;
  border: 1px solid var(--trait);
  border-radius: 6px;
  font-size: 13px;
  margin-right: 10px;
  font-family: 'Public Sans', sans-serif;
}

.btn_retirer {
  background: none;
  border: none;
  color: var(--texte-doux);
  cursor: pointer;
  font-size: 13px;
  font-family: 'Public Sans', sans-serif;
}

.btn_retirer:hover { color: #A32020; }

.sous_titre_section {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bleu-nuit);
  margin: 22px 0 10px;
}

.texte_vide {
  color: var(--texte-doux);
  font-size: 14px;
  font-style: italic;
}

.formulaire_inline_media {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.formulaire_inline_media input[type="text"],
.formulaire_inline_media input[type="url"] {
  padding: 6px 9px;
  border: 1px solid var(--trait);
  border-radius: 6px;
  font-size: 13px;
  margin-right: 8px;
  font-family: 'Public Sans', sans-serif;
  width: 120px;
}

.btn_mini {
  background: var(--bleu-nuit);
  color: white;
  border: none;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Public Sans', sans-serif;
}

.btn_mini:hover { background: var(--bleu-nuit-clair); }

/* --- Page de validation des imports (usage local) --- */
.entete_validation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.navigation_validation {
  display: flex;
  align-items: center;
}

.compteur_validation {
  font-size: 14px;
  color: var(--texte-doux);
  margin-right: 14px;
}

.navigation_validation .btn_secondaire { margin-left: 8px; }

.entete_champs {
  display: flex;
  margin-bottom: 14px;
}

.entete_champs label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--texte-doux);
  flex: 1;
  margin-right: 14px;
}

.entete_champs label:last-child { margin-right: 0; }

.entete_champs input {
  margin-top: 4px;
  padding: 8px 11px;
  border: 1px solid var(--trait);
  border-radius: 7px;
  font-size: 14px;
  font-family: 'Public Sans', sans-serif;
  background: white;
  color: var(--texte);
}

.comparaison {
  display: flex;
  align-items: stretch;
}

.colonne_comparaison {
  width: 50%;
  box-sizing: border-box;
  padding-right: 12px;
}

.colonne_comparaison:last-child {
  padding-right: 0;
  padding-left: 12px;
}

.colonne_carte {
  height: 720px;
  display: flex;
  flex-direction: column;
}

.colonne_carte .carte_bandeau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.apercu_pdf {
  width: 100%;
  flex: 1;
  border: none;
  display: block;
}

.zone_resultat {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
}

.btn_mode_paroles {
  background: white;
  border: 1px solid var(--trait);
  color: var(--bleu-nuit);
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Public Sans', sans-serif;
  text-transform: none;
  letter-spacing: 0;
}

.btn_mode_paroles:hover { background: var(--fond); }

.partition_validation {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
}

.section_validation {
  font-family: 'Public Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bleu-nuit);
  margin: 16px 0 6px;
}

.section_validation:first-child { margin-top: 0; }

.ligne_validation {
  line-height: 1.15;
  margin-bottom: 9px;
  white-space: pre-wrap;
}

.mot_validation {
  display: inline-block;
  cursor: pointer;
  border-radius: 3px;
  padding: 0 1px;
}

.mot_validation:hover { background: var(--bleu-bandeau); }

.espaces_validation { white-space: pre; }

.accord_validation {
  display: block;
  color: var(--accent-fonce);
  font-weight: 700;
  font-size: 12px;
  min-height: 15px;
  line-height: 1.1;
}

.edition_paroles {
  width: 100%;
  min-height: 600px;
  border: 1px solid var(--trait);
  border-radius: 7px;
  padding: 12px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.4;
  box-sizing: border-box;
  resize: vertical;
}

.barre_validation {
  display: flex;
  align-items: center;
  margin-top: 18px;
}

.barre_validation .btn_secondaire { margin-left: 12px; }

.bandeau_alerte {
  background: #FDF4E6;
  border: 1px solid #F0DCB8;
  color: #8A5A18;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bandeau_alerte a {
  color: #8A5A18;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.bandeau_alerte a:hover { text-decoration: underline; }

/* --- Partition : accords au-dessus de chaque mot (évite les chevauchements) --- */
.ligne_mots {
  line-height: 1.15;
  margin-bottom: 10px;
}

.bloc_mot {
  display: inline-block;
  vertical-align: bottom;
}

.espaces_mots {
  display: inline-block;
  vertical-align: bottom;
  white-space: pre;
}

.accord_au_dessus {
  display: block;
  color: #A96F2C;
  font-weight: 700;
  font-size: 12px;
  min-height: 15px;
  line-height: 1.1;
  white-space: nowrap;
}

/* --- Menu du profil --- */
.menu_profil { position: relative; }

.menu_profil .profil {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Public Sans', sans-serif;
  padding: 0;
}

.liste_menu_profil {
  position: absolute;
  top: 46px;
  right: 0;
  background: white;
  border: 1px solid var(--trait);
  border-radius: 9px;
  box-shadow: 0 6px 18px rgba(27, 42, 74, 0.14);
  display: flex;
  flex-direction: column;
  min-width: 210px;
  padding: 6px;
  z-index: 50;
}

.liste_menu_profil a {
  padding: 9px 12px;
  font-size: 14px;
  color: var(--texte);
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
}

.liste_menu_profil a:hover { background: var(--fond); }
.liste_menu_profil .lien_danger { color: #A32020; }
.liste_menu_profil .lien_danger:hover { background: #FDECEC; }

.btn_danger {
  background: #A32020;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Public Sans', sans-serif;
}

.btn_danger:hover { background: #871A1A; }

/* --- Champ téléphone avec préfixe figé --- */
.champ_telephone {
  display: flex;
  align-items: stretch;
  margin-top: 5px;
}

.prefixe_telephone {
  background: var(--bleu-bandeau);
  color: var(--bleu-nuit);
  border: 1px solid var(--trait);
  border-right: none;
  border-radius: 7px 0 0 7px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.champ_telephone input {
  flex: 1;
  border-radius: 0 7px 7px 0 !important;
  margin-top: 0 !important;
  min-width: 0;
}

/* --- Postes --- */
.puce_poste {
  display: inline-flex;
  align-items: center;
  background: var(--bleu-bandeau);
  color: var(--bleu-nuit);
  padding: 4px 6px 4px 11px;
  border-radius: 13px;
  margin: 0 6px 6px 0;
  font-size: 13px;
  font-weight: 500;
}

.croix_poste {
  background: none;
  border: none;
  color: var(--bleu-nuit);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 3px;
  opacity: 0.55;
}

.croix_poste:hover { opacity: 1; color: #A32020; }

/* --- Planning de l'équipe --- */


.nom_poste {
  font-weight: 600;
  color: var(--bleu-nuit);
  min-width: 130px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}



.bloc_poste_edition .nom_poste {
  display: block;
  margin: 0 0 8px;
}



.case_membre input { margin-right: 8px; }



.liste_whatsapp {
  display: flex;
  flex-wrap: wrap;
}

.btn_whatsapp {
  display: inline-block;
  background: #25D366;
  color: white;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  margin: 0 8px 8px 0;
}

.btn_whatsapp:hover { background: #1EB855; }

.btn_whatsapp.desactive {
  background: var(--fond);
  color: var(--texte-doux);
  border: 1px solid var(--trait);
  font-weight: 400;
  cursor: not-allowed;
}

.liste_membres li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- Tableau du planning --- */
.table_planning {
  width: 100%;
  border-collapse: collapse;
}

.table_planning td {
  padding: 11px 24px;
  border-top: 1px solid var(--trait);
  font-size: 14px;
  vertical-align: middle;
}

.table_planning tr:first-child td { border-top: none; }

.cellule_poste {
  font-weight: 600;
  color: var(--bleu-nuit);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: 170px;
}

.cellule_membre {
  font-weight: 600;
  width: 190px;
}

.cases_postes {
  display: flex;
  flex-wrap: wrap;
}

.case_poste {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--texte-doux);
  background: white;
  border: 1px solid var(--trait);
  border-radius: 14px;
  padding: 4px 11px 4px 8px;
  margin: 0 7px 6px 0;
  cursor: pointer;
}

.case_poste input { margin-right: 6px; }

.case_poste:hover { background: var(--fond); }

/* Un poste que la personne sait tenir est mis en avant */
.case_poste.competent {
  color: var(--bleu-nuit);
  border-color: var(--bleu-nuit-clair);
  font-weight: 600;
}

.case_poste:has(input:checked) {
  background: var(--bleu-bandeau);
  border-color: var(--bleu-nuit);
  color: var(--bleu-nuit);
  font-weight: 600;
}

/* --- Carte Mon compte : lecture / édition --- */
#mon_compte .ligne_info {
  align-items: center;
  min-height: 40px;
}

.valeur_lecture { text-align: right; }

.valeur_edition { align-items: center; }

.valeur_edition .champ_telephone { margin-top: 0; }

.valeur_edition .champ_telephone input {
  width: 130px;
  padding: 6px 10px;
  border: 1px solid var(--trait);
  font-size: 14px;
  font-family: 'Public Sans', sans-serif;
}

.valeur_edition .prefixe_telephone {
  padding: 6px 10px;
  font-size: 14px;
}

/* --- Menu déroulant des postes --- */
.menu_postes {
  position: relative;
  display: inline-block;
}

.bouton_menu_postes {
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid var(--trait);
  border-radius: 7px;
  padding: 7px 11px;
  font-size: 14px;
  font-family: 'Public Sans', sans-serif;
  color: var(--texte);
  cursor: pointer;
  min-width: 150px;
  justify-content: space-between;
}

.bouton_menu_postes:hover { background: var(--fond); }

.fleche_menu {
  color: var(--texte-doux);
  margin-left: 10px;
  font-size: 11px;
}

.liste_menu_postes {
  position: absolute;
  top: 40px;
  right: 0;
  background: white;
  border: 1px solid var(--trait);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(27, 42, 74, 0.14);
  display: flex;
  flex-direction: column;
  padding: 6px;
  min-width: 175px;
  z-index: 40;
}

.liste_menu_postes label {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  font-size: 14px;
  color: var(--texte);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.liste_menu_postes label:hover { background: var(--fond); }
.liste_menu_postes input { margin-right: 8px; }

.valeur_edition input[type="text"],
.valeur_edition input[type="email"] {
  padding: 6px 10px;
  border: 1px solid var(--trait);
  border-radius: 7px;
  font-size: 14px;
  font-family: 'Public Sans', sans-serif;
  color: var(--texte);
  background: white;
  min-width: 210px;
  text-align: right;
}

.valeur_edition input:focus { outline: none; border-color: var(--bleu-nuit-clair); }

/* --- Personnalisation du message envoyé à l'équipe --- */
.lien_modifier_modele {
  font-size: 12px;
  font-weight: 400;
  color: var(--texte-doux);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 12px;
}

.lien_modifier_modele:hover { color: var(--bleu-nuit); text-decoration: underline; }

.zone_modele {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid var(--trait);
  border-radius: 7px;
  font-size: 14px;
  font-family: 'Public Sans', sans-serif;
  line-height: 1.45;
  resize: vertical;
  color: var(--texte);
}

.zone_modele:focus { outline: none; border-color: var(--bleu-nuit-clair); }

.aide_variables {
  font-size: 12px;
  color: var(--texte-doux);
  margin: 10px 0 18px;
}

.aide_variables code {
  background: var(--bleu-bandeau);
  color: var(--bleu-nuit);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 3px;
}

.apercu_message {
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 7px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--texte);
  line-height: 1.5;
  margin: 0 0 20px;
}

/* --- Le menu des postes doit pouvoir dépasser de la carte --- */
#mon_compte,
#mon_compte .carte_contenu {
  overflow: visible;
}

/* La carte perd son overflow:hidden, on arrondit donc le bandeau à la main */
#mon_compte .carte_bandeau {
  border-radius: 9px 9px 0 0;
}

.liste_menu_postes {
  max-height: 260px;
  overflow-y: auto;
}

/* --- Boutons compacts de la carte Mon compte --- */
/* Les boutons sont poussés en bas de la carte, sans trait supplémentaire :
   le dernier champ apporte déjà sa propre bordure */
.actions_compte {
  margin-top: auto;
  padding-top: 20px;
}

#mon_compte .ligne_info:last-of-type {
  border-bottom: 1px solid var(--trait);
}

/* La carte s'étire pour que les boutons restent en bas */
#mon_compte { display: flex; flex-direction: column; }
#mon_compte .carte_contenu { flex: 1; display: flex; flex-direction: column; }
#mon_compte form { flex: 1; display: flex; flex-direction: column; }

.btn_mini_secondaire {
  background: white;
  border: 1px solid var(--trait);
  color: var(--bleu-nuit);
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Public Sans', sans-serif;
}

.btn_mini_secondaire:hover { background: var(--fond); }

/* --- Zone de suppression, volontairement discrète --- */
.zone_suppression {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--trait);
  display: flex;
  align-items: center;
}

.zone_suppression form {
  display: flex;
  align-items: center;
}

.btn_lien_danger {
  background: none;
  border: none;
  color: #A32020;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'Public Sans', sans-serif;
  padding: 0;
  text-decoration: underline;
}

.btn_lien_danger:hover { color: #871A1A; }

.note_suppression {
  font-size: 12px;
  color: var(--texte-doux);
  margin-left: 12px;
  font-style: italic;
}

/* ============================================
   Version mobile et tablette
   ============================================ */

/* Le logo devient un lien : il ramène au tableau de bord */
.bandeau_logo {
  text-decoration: none;
  display: block;
}

.bandeau_logo:hover { opacity: 0.85; }

/* Bouton d'ouverture du menu, masqué sur grand écran */
.bouton_menu_mobile {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 200;
  width: 42px;
  height: 42px;
  background: white;
  border: 1px solid var(--trait);
  border-radius: 9px;
  cursor: pointer;
  padding: 11px 10px;
  flex-direction: column;
  justify-content: space-between;
}

.bouton_menu_mobile span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--bleu-nuit);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Les trois barres se transforment en croix quand le menu est ouvert */
.bouton_menu_mobile.actif span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.bouton_menu_mobile.actif span:nth-child(2) { opacity: 0; }
.bouton_menu_mobile.actif span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Voile sombre derrière le menu ouvert */
.voile_menu {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(27, 42, 74, 0.45);
  z-index: 150;
}

.voile_menu.visible { display: block; }

@media (max-width: 900px) {
  body { display: block; }

  .bouton_menu_mobile { display: flex; }

  /* Le bandeau se replie hors de l'écran et se déplie par-dessus la page */
  .bandeau {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 230px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 160;
    padding-top: 70px;
  }

  .bandeau.ouvert { transform: translateX(0); }

  .zone_principale { width: 100%; }

  /* On laisse la place au bouton du menu */
  .entete { padding: 14px 18px 14px 70px; }

  main { padding: 22px 18px 60px; }

  h1, .titre_chant { font-size: 26px; }

  /* Les cartes s'empilent */
  .grille { flex-direction: column; }
  .grille .carte:not(:last-child) { margin-right: 0; margin-bottom: 20px; }

  /* Les tableaux occupent toute la largeur et défilent si besoin */
  .table_chants,
  .table_planning,
  .partition {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cellule_poste, .cellule_membre { width: auto; min-width: 110px; }

  /* Barre de recherche et actions passent à la ligne */
  .barre_actions { flex-wrap: wrap; }
  .champ_recherche { width: 100%; margin-right: 0; margin-bottom: 10px; }
  .lien_ajouter_chant { margin-left: 0; margin-top: 4px; }

  /* Les mini-cartes d'un chant programmé passent l'une sous l'autre */
  .mini_carte { width: 100%; margin-right: 0; }

  /* Le panneau déplié d'un chant se resserre */
  .panel_chant { padding: 16px 16px 18px 20px; }
  .panel_dates { padding-left: 18px; }

  /* Comparaison PDF / résultat : l'une sous l'autre */
  .comparaison { flex-direction: column; }
  .colonne_comparaison { width: 100%; padding: 0 0 16px 0; }
  .colonne_comparaison:last-child { padding-left: 0; }
  .colonne_carte { height: 520px; }

  /* Champs et menus adaptés */
  .entete_champs { flex-direction: column; }
  .entete_champs label { margin-right: 0; margin-bottom: 10px; max-width: none !important; }

  .entete_chant { flex-direction: column; align-items: flex-start; }
  .entete_chant .lien_modifier { margin-top: 12px; }

  .valeur_edition input[type="text"],
  .valeur_edition input[type="email"] { min-width: 0; width: 150px; }

  .form_standard { max-width: none; }
}

/* Très petits écrans : on resserre encore */
@media (max-width: 480px) {
  main { padding: 18px 14px 50px; }

  h1, .titre_chant { font-size: 23px; }

  .carte_contenu, .contenu_transposition { padding: 16px 16px; }
  .table_chants thead th, .table_chants tbody td { padding: 10px 14px; }
  .table_planning td { padding: 10px 14px; }

  .ligne_info { flex-wrap: wrap; }

  .btn_whatsapp { width: 100%; text-align: center; margin-right: 0; }

  .liste_menu_profil { right: 0; min-width: 190px; }
}