/* ═══════════════════════════════════════════════════════════
   Loge Manager — feuille de style unique.
   UX sobre et solennelle : bleu nuit, or discret, beaucoup
   d'air. Pas de framework : ~150 lignes suffisent et chacune
   se comprend.
   ═══════════════════════════════════════════════════════════ */

:root {
  --bleu-nuit: #1b2a4a;
  --bleu-profond: #14203a;
  --or: #c9a227;
  --or-pale: #e8d9a0;
  --parchemin: #f7f5f0;
  --encre: #23272f;
  --gris-doux: #8a8f99;
  --vert: #2e7d52;
  --ambre: #b07d18;
  --rouge: #a33a3a;
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--parchemin);
  color: var(--encre);
}

/* ─── Disposition générale : sidebar + contenu ─── */

.cadre { display: flex; min-height: 100vh; }

.colonne-gauche {
  width: 230px;
  background: linear-gradient(180deg, var(--bleu-nuit), var(--bleu-profond));
  color: var(--parchemin);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0;
}

.embleme { padding: 0 1.5rem 1.5rem; border-bottom: 1px solid rgba(201,162,39,.3); }
.embleme h1 { font-size: 1.25rem; letter-spacing: .05em; color: var(--or-pale); }
.sous-titre { font-size: .85rem; color: var(--gris-doux); margin-top: .25rem; }

/* Le logo de la loge (Paramètres → Apparence) : discret, jamais
   envahissant — la colonne garde sa solennité. */
.logo-loge { display: block; max-width: 100%; max-height: 72px; margin-bottom: .75rem; }
.logo-apercu { max-height: 60px; vertical-align: middle; margin-right: .5rem; }

nav { display: flex; flex-direction: column; padding: 1rem 0; flex: 1; }
nav a, nav .a-venir {
  padding: .6rem 1.5rem;
  color: var(--parchemin);
  text-decoration: none;
  font-size: .95rem;
}
nav a:hover, nav a.actif { background: rgba(201,162,39,.15); border-left: 3px solid var(--or); }
nav .a-venir { color: var(--gris-doux); cursor: default; }
nav .a-venir em { font-size: .7rem; font-style: normal; color: var(--or); margin-left: .4rem; }

.pied-colonne { padding: 1rem 1.5rem 0; border-top: 1px solid rgba(201,162,39,.3); font-size: .85rem; }
.pied-colonne p { margin-bottom: .5rem; color: var(--or-pale); }

.contenu { flex: 1; padding: 2.5rem 3rem; max-width: 1100px; }

.entete-page h2 { font-size: 1.6rem; color: var(--bleu-nuit); }
.entete-page p { color: var(--gris-doux); margin: .35rem 0 1.5rem; }

/* ─── Pages de seuil (connexion, mot de passe) ─── */

.page-seuil {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--bleu-nuit), var(--bleu-profond));
}

.carte-seuil {
  background: var(--parchemin);
  padding: 2.5rem;
  border-radius: 6px;
  border-top: 4px solid var(--or);
  width: min(380px, 90vw);
  text-align: center;
}
.carte-seuil h1 { color: var(--bleu-nuit); font-size: 1.4rem; }
.carte-seuil form { text-align: left; margin-top: 1.5rem; }

/* ─── Formulaires ─── */

label { display: block; font-size: .9rem; margin: .9rem 0 .3rem; color: var(--bleu-nuit); }
input, select {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid #cfc9bb;
  border-radius: 4px;
  font: inherit;
  background: white;
}
input:focus, select:focus { outline: 2px solid var(--or); border-color: var(--or); }

button {
  margin-top: 1.2rem;
  padding: .6rem 1.4rem;
  background: var(--bleu-nuit);
  color: var(--or-pale);
  border: none;
  border-radius: 4px;
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
}
button:hover { background: var(--bleu-profond); }
.bouton-discret {
  margin: 0;
  padding: .3rem .7rem;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  font-size: .8rem;
  opacity: .8;
}

.formulaire-ligne { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }

/* Formulaire empilé : une ligne par champ, pleine largeur — pour
   le chapeau du programme (thème + mot d'accompagnement, dont la
   zone s'étire à volonté : certaines loges écrivent une demi-page). */
.formulaire-colonne { display: flex; flex-direction: column; gap: .75rem; max-width: 46rem; }
.formulaire-colonne input[type=text], .formulaire-colonne textarea { width: 100%; }
.formulaire-colonne textarea { resize: vertical; min-height: 5rem; }
.formulaire-colonne button { align-self: flex-start; }
.formulaire-ligne label { flex: 1; min-width: 180px; margin: 0; }
.formulaire-ligne button { margin: 0; }

/* ─── Panneaux, tableaux, messages ─── */

.panneau {
  background: white;
  border: 1px solid #e4dfd3;
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.panneau h3 { color: var(--bleu-nuit); margin-bottom: 1rem; font-size: 1.05rem; }

/* Cartes pliables (Administration) : repliées par défaut, dépliées
   au clic sur leur titre. On masque le marqueur natif et on pose
   un chevron doré, pour rester dans l'habillage de la maison. */
details.carte-pliable > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}
details.carte-pliable > summary::-webkit-details-marker { display: none; }
details.carte-pliable > summary::before {
  content: "▸";
  color: var(--or);
  font-size: .85rem;
}
details.carte-pliable[open] > summary::before { content: "▾"; }
details.carte-pliable > summary h3 { margin-bottom: 0; }
details.carte-pliable[open] > summary h3 { margin-bottom: 0; }
details.carte-pliable[open] > summary { margin-bottom: 1rem; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; color: var(--gris-doux); font-weight: normal; padding: .4rem .6rem; border-bottom: 1px solid #e4dfd3; }
td { padding: .5rem .6rem; border-bottom: 1px solid #f0ece2; }

.message { padding: .7rem 1rem; border-radius: 4px; margin-bottom: 1.2rem; font-size: .92rem; }
.message-erreur { background: #f7e8e8; color: var(--rouge); border: 1px solid #e3c4c4; }
.message-succes { background: #e9f3ec; color: var(--vert); border: 1px solid #c4dccd; }

.etiquette { font-size: .75rem; padding: .15rem .5rem; border-radius: 10px; }
.etiquette-verte { background: #e9f3ec; color: var(--vert); }
.etiquette-ambre { background: #f7efdc; color: var(--ambre); }
.etiquette-grise { background: #eee; color: var(--gris-doux); }

/* ─── Module Membres ─── */

textarea {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid #cfc9bb;
  border-radius: 4px;
  font: inherit;
  background: white;
}
textarea:focus { outline: 2px solid var(--or); border-color: var(--or); }

.barre-actions { display: flex; gap: .8rem; align-items: center; margin-bottom: 1.2rem; flex-wrap: wrap; }
.bouton-lien {
  display: inline-block;
  padding: .45rem 1rem;
  background: var(--bleu-nuit);
  color: var(--or-pale);
  border-radius: 4px;
  text-decoration: none;
  font-size: .9rem;
}
.bouton-lien:hover { background: var(--bleu-profond); }
.en-ligne { display: inline; }
.lien-annuler { margin-left: 1rem; color: var(--gris-doux); }

.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 900px) { .deux-colonnes { grid-template-columns: 1fr; } }

dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; font-size: .92rem; }
dt { color: var(--gris-doux); }
dd { margin: 0; }

.case { display: flex; align-items: center; gap: .5rem; }
.case input[type="checkbox"] { width: auto; }

.vide { color: var(--gris-doux); font-style: italic; padding: .8rem 0; }
.liste-erreurs li { color: var(--rouge); }
td a { color: var(--bleu-nuit); }
pre {
  background: var(--parchemin);
  border: 1px solid #e4dfd3;
  padding: .8rem;
  border-radius: 4px;
  font-size: .85rem;
  overflow-x: auto;
}

/* ─── Calendrier : vues mois et année, pastilles de couleur ─── */

.point {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  margin-right: .35rem;
  vertical-align: baseline;
}
.point-grand { width: 1rem; height: 1rem; margin-right: .5rem; }

.calendrier { table-layout: fixed; }
.calendrier th { text-align: center; }
.calendrier td {
  vertical-align: top;
  height: 5.5rem;
  border: 1px solid #f0ece2;
  padding: .3rem;
}
.case-vide { background: #faf8f3; }
.case-evenement { background: #f1efe9; }
.numero-jour { font-size: .8rem; color: var(--gris-doux); display: block; }
.pastille {
  display: block;
  color: white;
  font-size: .72rem;
  padding: .1rem .35rem;
  border-radius: 3px;
  margin-top: .2rem;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.repere-externe {
  display: block;
  font-size: .7rem;
  color: var(--gris-doux);
  font-style: italic;
  margin-top: .2rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.legende { font-size: .82rem; color: var(--gris-doux); margin-top: .8rem; }

.carte-mois h3 a { color: var(--bleu-nuit); text-decoration: none; }
.ligne-miniature { font-size: .85rem; margin: .25rem 0; }
.ligne-miniature a { color: var(--encre); text-decoration: none; }
.ligne-miniature a:hover { text-decoration: underline; }

.table-regles td, .table-regles th { text-align: center; }
.table-regles td:first-child, .table-regles th:first-child { text-align: left; }
.table-regles input[type="checkbox"] { width: auto; }
.table-regles select { width: auto; min-width: 9rem; }

.discret { color: var(--gris-doux); font-size: .85rem; }
.pre-ligne { white-space: pre-line; }
.champ-autre { font-size: .85rem; color: var(--gris-doux); }
.grille-cases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .25rem .8rem;
  margin: .5rem 0 1rem;
}

/* ─── Finances ─── */

.etiquette-rouge { background: #f7e8e8; color: var(--rouge); }
.champ-montant { width: 6.5rem; }
.colonne-montant { text-align: right; }
.montant-recette { color: var(--vert); }
.montant-depense { color: var(--rouge); }
.chiffre { font-size: 1.5rem; color: var(--bleu-nuit); }
.chiffre-negatif { color: var(--rouge); }
.cellule-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cellule-actions input[type="color"] { width: 2.4rem; height: 1.8rem; padding: 0; border: 1px solid #cfc9bb; }
.formulaire-ligne input[type="color"] { width: 2.8rem; height: 2.2rem; padding: 0; border: 1px solid #cfc9bb; }

/* ─── Cartes du tableau de bord ─── */

.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.2rem;
}
.carte {
  background: white;
  border: 1px solid #e4dfd3;
  border-top: 3px solid var(--or);
  border-radius: 6px;
  padding: 1.3rem;
}
.carte h3 { color: var(--bleu-nuit); margin-bottom: .4rem; }
.carte p { font-size: .9rem; color: var(--gris-doux); }
.carte-inactive { opacity: .65; }
a.carte { display: block; text-decoration: none; }
a.carte:hover { border-color: var(--or); box-shadow: 0 2px 8px rgba(27,42,74,.12); }

/* ─── Petits écrans : la sidebar passe en bandeau ─── */

@media (max-width: 720px) {
  .cadre { flex-direction: column; }
  .colonne-gauche { width: 100%; padding: 1rem 0; }
  nav { flex-direction: row; flex-wrap: wrap; }
  .contenu { padding: 1.5rem; }
}

/* ─── Travaux en lignes ─── */
.liste-travaux { margin: 0 0 0 1.1rem; padding: 0; }
.liste-travaux li { margin: .3rem 0; }
.table-travaux input, .table-travaux select { width: 100%; }
.table-travaux td:first-child { width: 50%; }

/* ─── Visionneuse modale (aperçu PDF) ─── */
.modale { display: none; position: fixed; inset: 0; z-index: 50; }
.modale.ouverte { display: block; }
.modale-fond { position: absolute; inset: 0; background: rgba(20,32,58,.55); }
.modale-cadre {
  position: absolute;
  inset: 4vh 5vw;
  background: white;
  border-radius: 8px;
  border-top: 4px solid var(--or);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
}
.modale-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem 1.2rem;
  border-bottom: 1px solid #e4dfd3;
  color: var(--bleu-nuit);
  font-weight: bold;
}
.modale-entete .bouton-discret { color: var(--bleu-nuit); text-decoration: none; }
#apercu-cadre { flex: 1; width: 100%; border: none; }

/* ─── Tenues : 2e ligne « Travaux du jour » dans la liste ─── */
.ligne-travaux td { border-bottom: 1px solid #e4dfd3; padding-top: 0; }
.ligne-travaux textarea { width: 100%; font-size: .85rem; }
.ligne-travaux label { margin: 0 0 .2rem; }
.table-travaux td:last-child { width: 2.5rem; text-align: center; }

/* ─── Bouton danger (suppression en masse) ─── */
.bouton-danger { background: var(--rouge); }
.bouton-danger:hover { background: #872f2f; }

/* ─── Sélection par lot dans la liste des tenues ───
   Le bouton rouge dort (estompé, inerte) tant qu'aucune carte
   n'est cochée : l'œil comprend qu'il faut d'abord choisir. */
.barre-lot { display: flex; gap: .8rem; align-items: center; margin: 0 0 1rem; }
.barre-lot .bouton-danger[disabled] { opacity: .4; cursor: default; pointer-events: none; }
.coche-lot {
  width: 1.05rem;
  height: 1.05rem;
  margin-right: .35rem;
  vertical-align: -.15rem;
  accent-color: var(--rouge);
  cursor: pointer;
}

/* ─── Sections repliables (émargement) ─── */
.depliable summary { cursor: pointer; list-style: none; }
.depliable summary::-webkit-details-marker { display: none; }

/* ─── Cartes de saison : une année se déplie, les autres dorment.
   Même vêtement que les cartes de tenue, un cran plus solennel
   (c'est une année entière qui se tient derrière le volet). ─── */
.carte-saison {
  border: 1px solid #e4dfd3;
  border-radius: 6px;
  padding: .6rem 1rem;
  margin-bottom: .9rem;
  background: rgba(255, 255, 255, .35);
}
.carte-saison > summary { padding: .15rem 0; }
.carte-saison[open] > summary { margin-bottom: .9rem; }
.titre-depliable {
  display: inline-block;
  margin: 0;
  color: var(--bleu-nuit);
  font-size: 1.05rem;
}
.titre-depliable::before { content: "▸ "; color: var(--or); }
/* Le chevron ne suit QUE l'état du volet auquel appartient ce
   sommaire (« > summary ») : sinon un volet ouvert retournait aussi
   le chevron de tous les volets imbriqués, qui semblaient ouverts
   sans l'être. */
.depliable[open] > summary .titre-depliable::before { content: "▾ "; }

/* ─── Bloc d'une saison : un titre, puis deux cartes pliables
   distinctes (Programme · Tenues de l'année). ─── */
.titre-saison {
  margin: 0 0 .7rem;
  color: var(--bleu-nuit);
  font-size: 1.15rem;
}
/* Un peu de coquetterie : chaque volet (Programme, Tenues) porte
   son fin liseré, et respire grâce à l'espace qui les sépare. */
.carte-volet {
  /* Teinte plus marquée que le panneau blanc (#e4dfd3 s'y noierait),
     et un fond très légèrement chaud : le liseré se lit sur blanc. */
  border: 1px solid #cfc4ad;
  border-radius: 6px;
  padding: .45rem .9rem;
  /* Juste quelques pixels pour laisser respirer, sans grand vide. */
  margin-bottom: .45rem;
  background: #faf8f3;
}
.carte-volet:last-child { margin-bottom: 0; }
.carte-volet[open] > summary { margin-bottom: .6rem; }

/* ─── Édition en ligne d'une tenue : carte-formulaire ─── */
.tenue-edit {
  border: 1px solid #e4dfd3;
  border-radius: 6px;
  padding: .8rem 1rem;
  margin-bottom: 1rem;
}
.tenue-edit-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .8rem;
}
.tenue-edit-tete label { margin: 0; font-size: .8rem; }
.tenue-edit-tete select { min-width: 9rem; }
.tenue-edit-tete button { margin: 0; }
.tenue-edit-date { font-weight: bold; align-self: center; min-width: 12rem; }
.tenue-edit-soustitre { margin: .8rem 0 .3rem; }

/* ─── Modale étroite (réglages d'envoi) ─── */
.modale-cadre-etroite {
  inset: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(34rem, 92vw);
  max-height: 88vh;
}
.modale-corps { padding: 1.2rem 1.4rem; overflow-y: auto; }
.separateur { border: none; border-top: 1px solid #e4dfd3; margin: 1.4rem 0; }