/*
 * CapSecur — surcharges propres à l'application, au-delà du design system
 * (`fonts.css`, `tokens.css`, `base.css`, `components.css`, `layout.css`).
 */

/*
 * Gabarit minimal pour les pages publiques hors connexion (connexion,
 * invitation, mot de passe oublié) : pas d'en-tête/menu/pied de page, rien à
 * montrer avant qu'un utilisateur ne soit authentifié. Voir
 * templates/layout_minimal.html.twig.
 */
.auth-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: var(--space-7) var(--space-4);
  background: var(--color-bg);
}

.auth-layout__card {
  width: 100%;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  padding: var(--space-6);
}

.auth-layout__brand {
  justify-content: center;
}

.auth-layout__links {
  margin: 0;
  text-align: center;
  font-size: var(--text-sm);
}

/* Formulaires courts dans la carte : pas de barre d'actions collée en bas,
   dont le fond de page tranchait sur le fond de la carte. */
.auth-layout__card .form-actions {
  position: static;
  background: none;
}

/* Dev uniquement : connexion en un clic sous un compte de démo
   (templates/security/connexion.html.twig, DevConnexionController). */
.dev-login {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px dashed var(--color-border);
}

.dev-login__title {
  margin: 0;
  font-size: var(--text-md);
}

.dev-login__hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.dev-login__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dev-login__btn {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.dev-login__btn:hover {
  background: var(--color-surface-sunken);
}


/*
 * Liste de cases à cocher d'un formulaire (bloc `checkbox_list_row` de
 * templates/form/capsecur.html.twig) : fieldset sans cadre, cases empilées.
 */
.checkbox-list {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.checkbox-list > .field__label {
  padding: 0;
  margin-bottom: var(--space-1);
}

/* Liste des documents d'une fiche (voir design/maquettes/bateau.html). */
.doc-list {
  display: grid;
  gap: var(--space-2);
}

/* Colonne d'une fiche en deux colonnes (.grid-2), panneaux empilés. */
.stack {
  display: grid;
  align-content: start;
  gap: var(--space-5);
  min-width: 0;
}

/* Cartes des rôles de la page « Rôles et droits » (design/maquettes/droits.html). */
.role-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-4);
}

.role-cards .panel {
  gap: var(--space-2);
  align-content: start;
}

.role-cards .tag {
  justify-self: start;
}

/* Message d'une liste vide dans un panneau sans marge interne (.panel--flush). */
.panel__empty {
  margin: 0;
  padding: var(--space-4) var(--space-5);
}

/*
 * Développement : la barre de debug Symfony, collée en bas d'écran, masquait
 * la barre d'onglets mobile. On la remonte au-dessus.
 */
@media (max-width: 56rem) {
  .sf-toolbar .sf-toolbarreset {
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
  }
}

/* Aide : rubrique précédente / index / suivante. */
.aide-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
}

/*
 * Éditeur de texte mis en forme (Trix) — App\Form\EditeurTexteType,
 * contrôleur Stimulus `editeur`. Les styles de Trix (trix.css) ne sont pas
 * chargés : barre et contenu suivent le design system. `.editeur__contenu`
 * affiche ce HTML hors de l'éditeur, avec la même mise en forme.
 */
.editeur {
  display: grid;
}

.editeur__barre {
  display: grid;
  padding: var(--space-1);
  border: var(--border-width) solid var(--color-border-strong);
  border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-surface-sunken);
}

.editeur__boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.editeur__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.editeur__bouton:hover {
  background: var(--color-surface);
}

/* Mise en forme active à l'emplacement du curseur (aussi annoncée par aria-pressed). */
.editeur__bouton[data-trix-active] {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.editeur__bouton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.editeur__dialogue {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
}

.editeur__dialogue:not([data-trix-active]) {
  display: none;
}

.editeur__dialogue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.editeur__zone {
  display: block;
  min-height: 12rem;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.editeur__zone:focus-visible {
  border-color: var(--color-primary);
}

.field--error .editeur__barre,
.field--error .editeur__zone {
  border-color: var(--color-danger);
  border-width: 2px;
}

.field--error .editeur__barre {
  border-bottom: 0;
}

.editeur__zone :is(ul, ol),
.editeur__contenu :is(ul, ol) {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
}

.editeur__zone blockquote,
.editeur__contenu blockquote {
  margin: var(--space-2) 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-border-strong);
  color: var(--color-text-muted);
}

.editeur__zone pre,
.editeur__contenu pre {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre-wrap;
}

.editeur__zone a,
.editeur__contenu a {
  color: var(--color-primary);
}

/*
 * Boutons « Tout cocher / Tout décocher » d'un groupe de cases (contrôleur
 * Stimulus `tout-cocher`, page Exports).
 */
.tout-cocher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}