/* ==================================================================
   CAPELIO — Back office. Même charte, densité plus élevée.
   ================================================================== */

body.admin {
  background: var(--ivoire);
  font-size: 15px;
}

/* ------------------------------------------------------------------
   Barre de navigation
   ------------------------------------------------------------------ */

.barre {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  /* Les marges suivent celles du contenu : le menu reste aligné sur la page,
     quelle que soit la largeur de l'écran. */
  padding: 0 max(30px, calc((100% - 1480px) / 2 + 30px));
  background: var(--espresso);
  color: var(--ivoire);
}

.barre__marque {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: .20em;
  color: var(--sable);
  text-decoration: none;
  padding: 16px 0;
  line-height: 1.15;
}
.barre__marque span {
  display: block;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--champagne);
}

.barre__menu { display: flex; gap: 4px; flex-wrap: wrap; margin-right: auto; }
.barre__menu a {
  padding: 20px 15px;
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--sable);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.barre__menu a:hover { color: var(--blanc); }
.barre__menu a.actif { color: var(--champagne-clair); border-bottom-color: var(--champagne); }

.barre__fin { display: flex; gap: 18px; }
.barre__fin a {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--champagne);
  text-decoration: none;
  padding: 20px 0;
}
.barre__fin a:hover { color: var(--blanc); }

/* Un paragraphe reste lisible : au-delà d'environ 80 caractères par ligne,
   l'œil peine à retrouver le début de la ligne suivante. Les tableaux et les
   champs, eux, profitent de toute la largeur. */
.bloc p,
.bloc .aide,
.bloc ul,
.message p { max-width: 84ch; }

/* Le back office profite de la largeur disponible : sur un grand écran,
   se brider à 1180 px laissait la colonne latérale à l'étroit sans raison. */
.admin-page {
  /* width:100% est nécessaire : le corps de page est un conteneur flex, et
     des marges automatiques y suppriment l'étirement — la page se dimensionnait
     alors sur son contenu, d'où un centrage flottant selon les écrans. */
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 32px 30px 70px;
}

/* ------------------------------------------------------------------
   Titres et barres d'action
   ------------------------------------------------------------------ */

.titre-ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.titre-ligne h1 { margin: 0; font-size: 27px; }
.titre-ligne .actions { display: flex; gap: 10px; flex-wrap: wrap; }

.admin h2 { margin-top: 0; font-size: 19px; }

/* ------------------------------------------------------------------
   Tuiles de statistiques
   ------------------------------------------------------------------ */

/* Trois colonnes fixes : six indicateurs tiennent sur deux lignes lisibles,
   là où six colonnes tronquaient les montants à quatre chiffres. */
.tuiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.tuile {
  background: var(--blanc);
  border: 1px solid var(--sable);
  border-left: 3px solid var(--champagne);
  padding: 18px 18px;
}
/* La taille s'adapte : un montant à quatre chiffres ne doit pas passer à la ligne */
.tuile__valeur {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  color: var(--or);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tuile__sous {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}

.tuile__libelle {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
  margin-top: 7px;
}
.tuile-lien { text-decoration: none; display: block; }
.tuile-lien:hover .tuile { border-color: var(--champagne); box-shadow: 0 6px 18px rgba(39,31,24,.07); }

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

.tableau-boite {
  background: var(--blanc);
  border: 1px solid var(--sable);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.tableau th {
  text-align: left;
  padding: 13px 16px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or);
  background: var(--ivoire);
  border-bottom: 1px solid var(--sable);
  white-space: nowrap;
}
table.tableau td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--sable);
  vertical-align: middle;
}
table.tableau tr:last-child td { border-bottom: 0; }
table.tableau tbody tr:hover { background: var(--ivoire); }
table.tableau .droite { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tableau a.lien-ligne { color: var(--espresso); text-decoration: none; }
table.tableau a.lien-ligne:hover { color: var(--or); text-decoration: underline; }
.sous { display: block; font-size: 12.5px; color: var(--gris); }

.vide {
  padding: 46px 26px;
  text-align: center;
  color: var(--gris);
}

/* ------------------------------------------------------------------
   Filtres
   ------------------------------------------------------------------ */

.filtres {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--blanc);
  border: 1px solid var(--sable);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.filtres .champ { grid-column: auto; min-width: 165px; }
.filtres .champ--large { flex: 1; min-width: 220px; }

/* ------------------------------------------------------------------
   Formulaires du back office
   ------------------------------------------------------------------ */

.bloc {
  background: var(--blanc);
  border: 1px solid var(--sable);
  padding: 24px 26px;
  margin-bottom: 20px;
}
.bloc > h2 {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sable);
  margin-bottom: 20px;
}

.deux-colonnes {
  display: grid;
  /* La colonne latérale grandit avec l'écran, entre 340 et 460 px. */
  grid-template-columns: minmax(0, 1fr) clamp(340px, 28%, 460px);
  gap: 26px;
  align-items: start;
}

.interrupteur {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 0;
  cursor: pointer;
}
.interrupteur input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--or); flex: none; }
.interrupteur span { font-size: 14.5px; }
.interrupteur small { display: block; color: var(--gris); font-size: 12.5px; }

.barre-enregistrer {
  position: sticky;
  bottom: 0;
  background: var(--ivoire);
  border-top: 1px solid var(--sable);
  padding: 14px 0;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  z-index: 10;
}

/* Lignes d'options éditables */
.option-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 130px 120px 40px;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--sable);
}
.option-ligne:last-of-type { border-bottom: 0; }
.option-ligne__entete {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or);
  padding-bottom: 6px;
}
.supprimer-case { text-align: center; }
.supprimer-case input { accent-color: var(--alerte); width: 17px; height: 17px; }

/* Aperçu de la photo */
.apercu {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--sable);
  background: var(--sable);
  margin-bottom: 12px;
}

/* Journal des paiements */
.paiement-ligne {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sable);
  font-size: 14px;
}
.paiement-ligne:last-child { border-bottom: 0; }
.paiement-ligne__meta { color: var(--gris); font-size: 12.5px; }

/* Page de connexion */
.connexion {
  max-width: 400px;
  margin: 9vh auto;
  background: var(--blanc);
  border: 1px solid var(--sable);
  border-top: 3px solid var(--champagne);
  padding: 38px 34px;
}
.connexion__marque {
  text-align: center;
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: .22em;
  text-indent: .22em;
  color: var(--or);
  margin-bottom: 4px;
}
.connexion__sous {
  text-align: center;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 28px;
}

/* Impression de la liste de présence */
@media print {
  .barre, .entete-fixe, .titre-ligne .actions, .filtres,
  .barre-enregistrer,
  .ajout-option, .lien-discret { display: none !important; }
  .admin-page { padding: 0; }
  /* Le fond ivoire vide une cartouche pour rien. */
  body.admin, .admin-page, .bloc { background: #fff; }
  .tableau-boite {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; border: 0; }
}

/* Sous 1100 px la colonne latérale devient trop étroite pour ses formulaires :
   mieux vaut la passer sous le contenu principal. */
@media (max-width: 1100px) {
  /* minmax(0, 1fr) et non 1fr : sans largeur minimale explicite, un tableau
     large étire la colonne au-delà de l'écran et fait déborder toute la page. */
  .deux-colonnes { grid-template-columns: minmax(0, 1fr); }
  .option-ligne { grid-template-columns: 1fr 1fr; }
  .option-ligne__entete { display: none; }
}

@media (max-width: 900px) {
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .tuiles { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .barre { padding: 0 16px; gap: 14px; }
  .barre__menu a { padding: 14px 10px; font-size: 12px; }
  .admin-page { padding: 22px 16px 60px; }
  .option-ligne { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Réglages : une seule colonne, des sections nommées.
   Deux colonnes tassaient les e-mails et le SMTP dans un filet étroit,
   alors que ce sont les réglages les plus longs de la page.
   ------------------------------------------------------------------ */

.reglages { max-width: 780px; }

/* Chaque section se replie : la page tient à l'écran, on ouvre ce qu'on cherche */
.reglages__section {
  background: var(--blanc);
  border: 1px solid var(--sable);
  border-left: 3px solid var(--sable);
  margin-bottom: 12px;
  scroll-margin-top: 90px;
  transition: border-color .18s ease;
}
.reglages__section[open] { border-left-color: var(--champagne); }
.reglages__section:hover { border-left-color: var(--champagne); }

.reglages__section > summary {
  cursor: pointer;
  padding: 18px 22px;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.reglages__section > summary::-webkit-details-marker { display: none; }

/* Chevron discret, qui bascule à l'ouverture */
.reglages__section > summary::after {
  content: '';
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--or);
  border-bottom: 1.5px solid var(--or);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
  flex: none;
}
.reglages__section[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

.reglages__titre {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--espresso);
}
.reglages__resume {
  font-size: 13px;
  color: var(--gris);
}

.reglages__intro {
  margin: 0 22px 20px;
  font-size: 14px;
  color: var(--gris);
  max-width: 62ch;
}

/* Le contenu de la section */
.reglages__section > .bloc { margin: 0 22px 22px; }

/* Les blocs internes s'allègent : la section porte déjà le cadre */
.reglages .bloc {
  border: 0;
  border-top: 1px solid var(--sable);
  padding: 20px 0 0;
  background: transparent;
}
.reglages .bloc > h2 {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--or);
  padding-bottom: 10px;
}


/* Le bandeau d'essai passe au-dessus de la barre de navigation collante */
body.admin .bandeau-essai { position: relative; z-index: 40; }

/* La section « Mode essai » se signale quand elle est active */
.reglages__section--essai { border-left-color: var(--alerte) !important; }
.reglages__section--essai .reglages__resume { color: var(--alerte); }

.liste-essai { margin: 6px 0 16px; padding-left: 20px; }
.liste-essai li { margin: 8px 0; font-size: 14.5px; }
.liste-essai code {
  background: var(--ivoire);
  padding: 1px 5px;
  font-size: 13px;
}

/* Tableau des codes promo : beaucoup de colonnes, des actions à droite.
   Les boutons y sont plus compacts pour éviter le débordement. */
.tableau--promos td, .tableau--promos th { padding: 11px 10px; }
.tableau--promos td:last-child { padding-right: 12px; }
.tableau--promos .bouton--discret {
  padding: 6px 9px;
  font-size: 10.5px;
  letter-spacing: .04em;
}
.tableau--promos form { margin: 0; }
.tableau--promos td:last-child { white-space: nowrap; }

/* ------------------------------------------------------------------
   Remboursements de garantie
   ------------------------------------------------------------------ */

.remb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--sable);
}
.remb:last-child { border-bottom: 0; }
.remb__qui { min-width: 0; }
.remb__montant {
  text-align: right;
  font-size: 17px;
  color: var(--or);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.remb__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.remb__iban {
  display: block;
  margin-top: 3px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--succes);
}

/* Bouton WhatsApp, avec sa pastille verte */
.bouton--wa { display: inline-flex; align-items: center; gap: 7px; }
.wa-icone {
  width: 11px; height: 11px; border-radius: 50%;
  background: #25D366; flex: none;
}

@media (max-width: 780px) {
  .remb { grid-template-columns: 1fr; }
  .remb__montant, .remb__actions { text-align: left; justify-content: flex-start; }
}


/* ------------------------------------------------------------------
   Liste déroulante compacte, pour les tableaux et les lignes d'action.
   Le retrait à droite doit rester supérieur à la largeur de la flèche,
   sinon celle-ci se superpose au texte. C'est ce qui arrivait quand un
   style en ligne remplaçait le padding complet.
   ------------------------------------------------------------------ */

.select--compact {
  width: auto;
  min-width: 126px;
  padding: 6px 30px 6px 12px;
  font-size: 12px;
  background-position: right 10px center;
}

/* Un formulaire qui aligne une liste et son bouton : sans cet espacement,
   les deux se touchent, la liste paraissant faire partie du bouton. */
.remb__actions form {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ------------------------------------------------------------------
   Pointage des présences

   Deux niveaux : la personne inscrite, puis ses accompagnants en retrait.
   Le tout en grille plutôt qu'en tableau, un tableau ne permettant pas
   d'imbriquer proprement deux niveaux de lignes.
   ------------------------------------------------------------------ */

.presence-entete,
.presence-ligne {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 180px 130px 140px;
  gap: 14px;
  align-items: center;
}
.presence-entete.avec-garantie,
.presence-ligne.avec-garantie {
  grid-template-columns: 150px minmax(0, 1fr) 180px 120px 140px 140px;
}

.presence-entete {
  padding: 0 18px 10px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or);
}

/* Le dossier forme un bloc : on voit d'un coup qui vient avec qui */
.dossier {
  background: var(--blanc);
  border: 1px solid var(--sable);
  border-left: 3px solid var(--sable);
  margin-bottom: 10px;
  transition: border-color .18s ease;
}
.dossier--complet { border-left-color: var(--succes); }

.presence-ligne { padding: 13px 18px; }
.presence-ligne + .presence-ligne { border-top: 1px dashed var(--sable); }

/* Les accompagnants sont décalés et sur fond légèrement teinté */
.presence-ligne--accompagnant {
  padding-left: 42px;
  background: var(--ivoire);
  font-size: 14.5px;
}
.fleche-accompagnant {
  display: inline-block;
  width: 12px;
  height: 8px;
  margin-right: 8px;
  border-left: 1.5px solid var(--champagne);
  border-bottom: 1.5px solid var(--champagne);
  vertical-align: 3px;
}

.presence-ligne--presente { background: #F4F8F5; }
.presence-ligne--accompagnant.presence-ligne--presente { background: #EFF5F0; }

.presence-case { display: flex; align-items: center; gap: 9px; }
.presence-heure { font-size: 11.5px; color: var(--gris); font-variant-numeric: tabular-nums; }

/* La case sert au pointage groupé */
.case-presence { display: inline-flex; cursor: pointer; flex: none; }
.case-presence input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.case-presence__marque {
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--champagne);
  background: var(--blanc);
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.case-presence input:checked + .case-presence__marque {
  background: var(--succes);
  border-color: var(--succes);
}
/* Coche dessinée en CSS : rien à charger, nette à l'impression */
.case-presence input:checked + .case-presence__marque::after {
  content: '';
  position: absolute;
  left: 7px; top: 3px;
  width: 7px; height: 12px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg);
}
.case-presence input:focus-visible + .case-presence__marque {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}

/* Le bouton de validation immédiate, une personne à la fois */
.bouton-eclair {
  padding: 5px 10px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--or);
  background: transparent;
  border: 1px solid var(--sable);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bouton-eclair:hover {
  background: var(--succes);
  border-color: var(--succes);
  color: #fff;
}
.bouton-eclair--annule { color: var(--gris); }
.bouton-eclair--annule:hover { background: var(--alerte); border-color: var(--alerte); }

/* La marque qui atteste qu'un dossier est au complet */
.marque-complet {
  display: inline-block;
  width: 19px;
  height: 19px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  background: var(--succes);
  color: #fff;
  font-size: 12px;
  margin-left: 7px;
  vertical-align: 1px;
}

.presence-signature { border-bottom: 1px solid var(--sable); height: 22px; }

.bloc--presence { position: sticky; bottom: 0; z-index: 20; margin-top: 18px; }
.presence-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

@media (max-width: 1000px) {
  .presence-entete { display: none; }
  .presence-ligne,
  .presence-ligne.avec-garantie { grid-template-columns: 150px minmax(0, 1fr); }
  .presence-ligne > div:nth-child(n+3) { grid-column: 2; }
  .presence-signature { display: none; }
}

@media print {
  /* La case reste : c'est avec elle qu'on pointe sur le papier. En la
     masquant, on retirait aussi sa piste de la grille, et toutes les colonnes
     se décalaient d'un cran — d'où des noms écrasés sur trois lignes. */
  .bloc--presence, .bouton-eclair, .presence-heure { display: none; }

  /* La page imprimée est plus étroite que 1000 px : la mise en page mobile
     s'y appliquait, empilant toutes les colonnes sous le nom. On rétablit la
     grille complète, qui tient largement sur une A4. */
  .presence-entete { display: grid; }
  /* « Présent » ne tient pas au-dessus d'une colonne de 20 px et débordait
     sur l'intitulé voisin : la case se passe d'étiquette. */
  .presence-entete > span:first-child { font-size: 0; }
  .presence-signature { display: block; }
  .presence-ligne > div:nth-child(n+3) { grid-column: auto; }

  .presence-case { gap: 0; }
  .case-presence__marque {
    width: 15px;
    height: 15px;
    border-width: 1px;
    background: #fff !important;
  }
  /* Sur le papier, une case déjà cochée reste vide : la feuille sert à
     pointer ceux qui arrivent, pas à relire ce qui est déjà enregistré. */
  .case-presence input:checked + .case-presence__marque::after { display: none; }

  .presence-entete, .presence-ligne {
    grid-template-columns: 20px minmax(0, 1fr) 130px 80px 110px;
    gap: 10px;
    padding: 5px 8px;
    font-size: 12px;
  }
  .presence-entete.avec-garantie, .presence-ligne.avec-garantie {
    grid-template-columns: 20px minmax(0, 1fr) 130px 78px 78px 104px;
  }
  .presence-ligne--accompagnant { padding-left: 22px; font-size: 11.5px; }
  .dossier { break-inside: avoid; page-break-inside: avoid; }
}

/* Outils de la liste de présence : recherche et filtre */
.presence-outils {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sable);
}
.presence-chercher { display: flex; gap: 8px; align-items: center; flex: 1 1 320px; }
.presence-chercher input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  font-size: 14.5px;
}
.presence-compte {
  font-size: 12.5px;
  color: var(--gris);
  margin-left: auto;
  white-space: nowrap;
}

@media print { .presence-outils { display: none; } }

/* ------------------------------------------------------------------ */
/*  Volet repliable à l'intérieur d'un bloc (édition ponctuelle)        */
/* ------------------------------------------------------------------ */

.repli { border-top: 1px solid var(--sable); padding-top: 14px; }

.repli > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--or);
  transition: color .15s ease;
}
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary:hover { color: var(--espresso); }

.repli > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
  flex: none;
}
.repli[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }

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

.variables {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 4px;
}

.variable {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 11px;
  background: var(--ivoire);
  border: 1px solid var(--sable);
}
.variable code {
  font-size: 13px;
  color: var(--or);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
.variable small { font-size: 11.5px; color: var(--gris); }

.actions-modele {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 22px 20px;
}

.reglages__section textarea {
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
}

/* ------------------------------------------------------------------ */
/*  Banc d'essai                                                       */
/* ------------------------------------------------------------------ */

.ligne-essai {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 6px;
  background: var(--ivoire);
  border-left: 2px solid var(--sable);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
.ligne-essai:hover { border-left-color: var(--or); }
.ligne-essai .sous { display: block; }

.essai-ligne,
.envoi-ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--sable);
}
.essai-ligne:last-child,
.envoi-ligne:last-child { border-bottom: 0; }
.essai-ligne .sous,
.envoi-ligne .sous { display: block; }

/* Les deux boutons gardent leur largeur : une note un peu longue à gauche
   poussait « Aperçu ↗ » à se replier sur deux lignes. */
.essai-ligne .bouton { white-space: nowrap; }

.diag {
  padding: 11px 0 11px 14px;
  margin-bottom: 8px;
  border-left: 3px solid var(--sable);
}
.diag--oui { border-left-color: var(--succes); }
.diag--non { border-left-color: var(--gris); }
.diag .sous { display: block; margin-top: 3px; }

@media (max-width: 620px) {
  .essai-ligne,
  .envoi-ligne { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ------------------------------------------------------------------ */
/*  Sous-navigation d'une section                                      */
/* ------------------------------------------------------------------ */

.entete-fixe { position: sticky; top: 0; z-index: 20; }

.sous-barre {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 max(30px, calc((100% - 1480px) / 2 + 30px));
  background: var(--blanc);
  border-bottom: 1px solid var(--sable);
}

.sous-barre a {
  padding: 13px 16px;
  font-size: 13.5px;
  color: var(--gris);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.sous-barre a:hover { color: var(--espresso); }
.sous-barre a.actif { color: var(--or); border-bottom-color: var(--champagne); }

@media (max-width: 720px) {
  /* Sur un téléphone, un en-tête collant sur trois lignes mangerait la moitié
     de l'écran : il défile avec la page. */
  .entete-fixe { position: static; }
  .sous-barre { padding-left: 16px; padding-right: 16px; }
  .sous-barre a { padding: 11px 12px; font-size: 13px; }
}

/* ------------------------------------------------------------------ */
/*  Liste des invités                                                  */
/* ------------------------------------------------------------------ */

.invites-outils {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
  background: var(--blanc);
  border: 1px solid var(--sable);
}
.invites-filtre { display: flex; align-items: center; gap: 12px; margin: 0; }
.invites-filtre label { margin: 0; font-size: 13px; color: var(--gris); }
.invites-filtre select { min-width: 280px; }
.invites-compte { font-size: 13.5px; color: var(--or); white-space: nowrap; }

/* Deux colonnes : une liste de noms tient alors sur une seule page. */
.invites-liste { columns: 2; column-gap: 34px; }

.invites-groupe {
  break-inside: avoid;
  page-break-inside: avoid;
  position: relative;
  padding: 10px 0 10px 12px;
  margin-bottom: 10px;
  border-left: 2px solid var(--sable);
}

.invites-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 15.5px;
}
.invites-ligne--accompagnant { padding-left: 20px; color: var(--gris); }

.invites-numero {
  min-width: 26px;
  font-size: 12px;
  color: var(--champagne);
  text-align: right;
  flex: none;
}
.invites-case {
  width: 13px;
  height: 13px;
  border: 1px solid var(--champagne);
  flex: none;
}
.invites-nom { overflow-wrap: anywhere; }

.invites-ensemble {
  display: block;
  padding-left: 36px;
  margin-top: 2px;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--champagne);
}

.invites-legende { margin-top: 20px; max-width: 620px; }

@media (max-width: 820px) {
  .invites-liste { columns: 1; }
  .invites-filtre { flex-wrap: wrap; }
  .invites-filtre select { min-width: 0; width: 100%; }
}

@media print {
  .invites-outils, .invites-legende { display: none; }
  .titre-ligne { border-bottom: 1px solid #C7AD83; padding-bottom: 10px; margin-bottom: 16px; }
  /* Une seule colonne sur le papier : le multi-colonnes CSS se répartit mal
     entre deux pages dans Chrome, au point de couper une ligne en deux et de
     la répéter. Une colonne coûte une feuille de plus et ne trahit jamais. */
  .invites-liste { columns: auto; }
  .invites-groupe { padding: 6px 0 6px 12px; margin-bottom: 6px; }
  .invites-ligne { font-size: 12.5px; padding: 2px 0; }
  .invites-ensemble { font-size: 10.5px; padding-left: 36px; }
}

/* Filtre de la page des reçus et avoirs */
.doc-filtre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  background: var(--blanc);
  border: 1px solid var(--sable);
}
.doc-filtre label { margin: 0; font-size: 13px; color: var(--gris); }
.doc-filtre select { min-width: 300px; }
.doc-filtre__compte { margin-left: auto; font-size: 13.5px; color: var(--or); }

@media (max-width: 720px) {
  .doc-filtre select { min-width: 0; width: 100%; }
  .doc-filtre__compte { margin-left: 0; }
}

/* ------------------------------------------------------------------ */
/*  Ajout d'une option sur un dossier déjà enregistré                   */
/* ------------------------------------------------------------------ */

/* Replié par défaut : la fiche se lit d'abord, elle ne se remplit qu'ensuite.
   Un formulaire ouvert sous chaque participant noierait le récapitulatif. */
.ajout-option { margin-top: 10px; padding-left: 14px; }

.ajout-option > summary {
  display: inline-block;
  font-size: 12.5px;
  color: var(--or);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ajout-option > summary::-webkit-details-marker { display: none; }
.ajout-option > summary::before { content: '+ '; }
.ajout-option > summary:hover { color: var(--espresso); }
.ajout-option[open] > summary { color: var(--gris); }
.ajout-option[open] > summary::before { content: '− '; }

.ajout-option__form {
  max-width: 520px;
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--ivoire);
  border-left: 3px solid var(--champagne);
}
.ajout-option__form label {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}
.ajout-option__form select,
.ajout-option__form input[type=text] { width: 100%; margin-bottom: 12px; }

/* Le libellé prend la place, le prix n'a besoin que de quelques caractères. */
.ajout-option__libre { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }

/* Nommée avec son conteneur : sans cela, la règle des libellés ci-dessus
   l'emporte et la phrase part en capitales, ce qu'une case à cocher ne
   supporte pas — on ne lit plus rien. */
.ajout-option__form label.ajout-option__case {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 2px 0 14px;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--espresso);
  cursor: pointer;
}
.ajout-option__form label.ajout-option__case input { flex: none; }

/* Retirer une option : discret, car c'est le geste rare. */
.lien-discret {
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--gris);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--sable);
  cursor: pointer;
}
.lien-discret:hover { color: var(--alerte); border-bottom-color: var(--alerte); }

@media (max-width: 720px) {
  .ajout-option__libre { grid-template-columns: 1fr; gap: 0; }
}

/* ------------------------------------------------------------------ */
/*  Ce que le dossier attend maintenant                                 */
/* ------------------------------------------------------------------ */

/* Encadré léger plutôt qu'une ligne de plus : c'est le seul chiffre du
   bloc sur lequel on agit, les autres ne font que constater. */
.recap__attente {
  margin: 12px 0 2px;
  padding: 11px 13px;
  background: var(--ivoire);
  border-left: 3px solid var(--champagne);
}
.recap__attente .montant { font-size: 16px; }

/* Plus petite que les étiquettes de titre : elle accompagne un montant,
   elle ne doit pas lui voler la vedette. Fond blanc, car l'ivoire hérité
   de .etiquette est celui de l'encadré — l'étiquette s'y effaçait. */
.etiquette--attente {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 9.5px;
  letter-spacing: .14em;
  vertical-align: 1px;
  background: #fff;
  border-color: var(--champagne-clair);
}

@media print { .recap__attente { background: #fff; } }