/* Styles communs aux pages Web de la suite : thème, barre, cartes, formulaires, tableaux, fiches, noms des comptes. */
:root {
  --fond: #f4f5f7;
  --carte: #ffffff;
  --texte: #1f2328;
  --discret: #636c76;
  --bordure: #d0d7de;
  --accent: #2563c9;
  --accent-survol: #c2410c;
  --erreur: #c62828;
  --declarant-responsable: #7c3aed;
  --declarant-admin: #b45309;
  --succes: #1a7f37;
  --sur-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #16181c;
    --carte: #22252b;
    --texte: #e6e8eb;
    --discret: #9aa3ad;
    --bordure: #3a3f47;
    --accent: #6ea2ff;
    --accent-survol: #ffb366;
    --erreur: #ff8a80;
    --declarant-responsable: #c4a5ff;
    --declarant-admin: #fbbf24;
    --succes: #4ac26b;
    --sur-accent: #0d1b33;
  }
}
:root[data-theme="sombre"] {
  --fond: #16181c;
  --carte: #22252b;
  --texte: #e6e8eb;
  --discret: #9aa3ad;
  --bordure: #3a3f47;
  --accent: #6ea2ff;
  --accent-survol: #ffb366;
  --erreur: #ff8a80;
  --declarant-responsable: #c4a5ff;
  --declarant-admin: #fbbf24;
  --succes: #4ac26b;
  --sur-accent: #0d1b33;
}
* { box-sizing: border-box; }
/* L'attribut hidden doit l'emporter sur les display: flex des blocs */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--fond);
  color: var(--texte);
  /* Pied de page en bas de la fenêtre même quand l'écran est court */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.barre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px 24px;
  background: var(--carte);
  border-bottom: 1px solid var(--bordure);
}
:root { --decalage-barre: 0px; }   /* hauteur a laisser libre en haut pour une zone fixee : celle de la barre quand elle est fixe */
/* Barre du haut fixe quand l'ecran est assez large et haut : sur un petit ecran elle revient a la ligne et prendrait la place du contenu */
@media (min-width: 700px) and (min-height: 500px) {
  .barre { position: sticky; top: 0; z-index: 20; }
  :root { --decalage-barre: var(--hauteur-barre, 0px); }
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 18px;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
/* Faute de place, le nom et « Se déconnecter » passent ensemble à la ligne, le menu reste d'un bloc */
.compte-barre { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.utilisateur { color: var(--discret); white-space: nowrap; }
.barre .bouton { white-space: nowrap; }
main { flex: 1 0 auto; width: 100%; max-width: 1280px; margin: 32px auto; padding: 0 16px; }
.carte {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 24px;
}
.carte h1 { margin: 0 0 8px; font-size: 22px; font-weight: 600; }
.erreur h1 { color: var(--erreur); }
.bouton {
  font: inherit;
  padding: 6px 14px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  background: transparent;
  color: var(--texte);
  cursor: pointer;
}
.bouton:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.discret { color: var(--discret); margin-top: 0; }
.formulaire { max-width: 380px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.formulaire label { margin-top: 8px; font-size: 14px; color: var(--discret); }
.formulaire input, .formulaire select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  background: var(--fond);
  color: var(--texte);
}
.formulaire input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; padding: 0; margin: 0; accent-color: var(--accent); cursor: pointer; }
.formulaire input:focus, .formulaire select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.message { color: var(--erreur); margin: 8px 0 0; }
.message.attente { color: var(--discret); }
.principal { margin-top: 16px; background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.principal:hover { color: var(--sur-accent); filter: brightness(1.1); }
/* « .bouton:hover » (plus spécifique) rendait le texte des boutons principaux de la couleur de leur fond au survol */
.bouton.principal:hover:not(:disabled) { color: var(--sur-accent); border-color: var(--accent); }
.principal:disabled, .bouton:disabled, .bouton.petit:disabled { opacity: .6; cursor: default; }

/* Menu des écrans */
.menu { display: flex; gap: 4px; flex-wrap: nowrap; white-space: nowrap; }
.onglet {
  font: inherit;
  padding: 6px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--discret);
  cursor: pointer;
}
.onglet:hover { color: var(--texte); }
.onglet.actif { background: var(--fond); color: var(--accent); font-weight: 600; }

/* Écran en liste (tableaux DataTables) */
.entete-vue { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.entete-vue h1 { margin: 0; font-size: 22px; font-weight: 600; }
.entete-vue .principal { margin: 0 0 0 auto; }
.tableau-conteneur { padding: 16px; overflow-x: auto; }
table.tableau { width: 100%; }
table.tableau th { font-size: 13px; font-weight: 600; color: var(--discret); }
.tableau .ou { color: var(--discret); font-size: 14px; }
.tableau tbody tr.cliquable { cursor: pointer; }
.tableau tbody tr.cliquable:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.tableau tbody tr.inactif td { color: var(--discret); }
/* Au-delà de la licence : grisé (visible et supprimable, sans connexion possible) */
.tableau tbody tr.hors-licence td { color: var(--discret); opacity: .55; }
.tableau tbody tr.hors-licence td .etat-suspendu, .tableau tbody tr.hors-licence td .etat-actif,
.tableau tbody tr.hors-licence td [class^="declarant-"] { color: inherit; }
.licence-info { margin: 0 0 12px; font-size: 14px; color: var(--discret); }
.licence-info.depassee { color: var(--erreur); }
.dt-container { color: var(--texte); }
.dt-container .dt-input, .dt-container select.dt-input {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  background: var(--fond);
  color: var(--texte);
}
.dt-container .dt-search input { margin-left: 6px; }
div.dt-container .dt-buttons button.dt-button {
  font: inherit;
  font-size: 14px;
  padding: 4px 12px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  background: transparent;
  color: var(--texte);
}
/* Boutons CSV, PDF et Actualiser de même hauteur (étirés par le flex), l'icône centrée dans le sien ;
   line-height ne sert plus à rien, overflow: hidden des boutons rognait l'icône */
div.dt-container .dt-buttons { display: inline-flex; align-items: stretch; }
div.dt-container .dt-buttons button.dt-button.bouton-actualiser {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
}
div.dt-container .dt-buttons button.dt-button.bouton-actualiser > span { display: flex; }
div.dt-container .dt-buttons button.dt-button.bouton-actualiser svg { display: block; }
div.dt-container .dt-buttons button.dt-button:hover:not(.disabled) {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
div.dt-container .dt-paging .dt-paging-button { color: var(--texte) !important; border-radius: 6px; }
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled) {
  background: var(--fond) !important;
  border: 1px solid var(--bordure) !important;
  color: var(--accent) !important;
}

/* Fiche de saisie */
.fiche {
  width: min(560px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: var(--carte);
  color: var(--texte);
}
.fiche::backdrop { background: rgba(0, 0, 0, .45); }
.fiche h2 { margin: 0 0 4px; font-size: 20px; font-weight: 600; }
/* Les messages d'une fiche gardent leur place (deux lignes), vides ou non : la fenetre ne change pas de taille a l'enregistrement */
.fiche p.message { min-height: 2.8em; }
.fiche p.message[hidden] { display: block !important; visibility: hidden; }
.formulaire.large { max-width: none; }
.ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ligne > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ligne input { width: 100%; }
.aide { margin: 2px 0 0; font-size: 13px; color: var(--discret); }
.formulaire .case { display: flex; align-items: center; gap: 8px; color: var(--texte); font-size: 15px; }
.boutons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.boutons .principal { margin-top: 0; }
/* Bouton de suppression : rouge, à gauche des autres */
.bouton.danger { color: var(--sur-accent); background: var(--erreur); border-color: var(--erreur); margin-right: auto; }
.bouton.danger:hover { color: var(--sur-accent); border-color: var(--erreur); filter: brightness(1.1); }
.liste-detail { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bordure); border-radius: 6px; font-size: 14px; }
.liste-detail li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 10px; border-bottom: 1px solid var(--bordure); }
.liste-detail li:last-child { border-bottom: 0; }
.liste-detail li.vide { color: var(--discret); }
.liste-detail .discret { white-space: nowrap; }
.liste-detail.defilante { max-height: 180px; overflow-y: auto; }
@media (max-width: 560px) {
  .ligne { grid-template-columns: 1fr; }
  .barre { flex-wrap: wrap; padding: 12px 16px; }
  .menu { flex-wrap: wrap; }
  .compte-barre { flex-wrap: wrap; gap: 8px 16px; }
}

/* Fiche compte */
.avec-bouton { display: flex; gap: 8px; }
.avec-bouton input { flex: 1; min-width: 0; }
.avec-bouton .bouton { white-space: nowrap; }
.rattachements { margin: 12px 0 0; padding: 8px 12px 12px; border: 1px solid var(--bordure); border-radius: 6px; }
.rattachements legend { padding: 0 6px; font-size: 14px; color: var(--discret); }
.rattachement { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--bordure); }
.rattachement:last-child { border-bottom: 0; }
.rattachement .case { flex: 1; min-width: 0; margin: 0; align-items: flex-start; }
.rattachement .case input { flex-shrink: 0; margin-top: 4px; }
.rattachement-nom { min-width: 0; overflow-wrap: anywhere; }
.rattachement .droit { display: flex; flex-shrink: 0; align-items: center; gap: 6px; font-size: 13px; color: var(--discret); white-space: nowrap; }
.rattachement .droit input:disabled + span { opacity: .5; }
.droits-tous { display: flex; flex-shrink: 0; gap: 12px; }
.droits-tous .droit { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--discret); white-space: nowrap; }
.droits-tous .droit input:disabled + span { opacity: .5; }
#compte-tous-ligne { border-bottom: 1px solid var(--bordure); }
#compte-etablissements-liste[hidden] { display: none; }
/* La molette au-dessus d'une fiche ne fait jamais défiler la page derrière elle (fiche courte ou arrivée en bas) */
.fiche { max-height: calc(100vh - 32px); overflow: auto; overscroll-behavior: contain; }
/* La ligne des boutons reste visible en bas de la fiche, meme quand celle-ci defile */
.fiche .boutons { flex-wrap: wrap; }
.fiche .boutons > .message { flex: 0 0 100%; margin: 0 0 4px; }   /* message d'erreur dans la barre de boutons, toujours visible */
.fiche .boutons { position: sticky; bottom: -24px; z-index: 1; margin: 16px 0 -24px; padding: 12px 0 24px; background: var(--carte); border-top: 1px solid var(--bordure); }
.ok { color: var(--accent); }
/* Bandeau temporaire (voir bandeau() dans socle.js) */
#socle-bandeau { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); max-width: min(640px, calc(100vw - 32px)); padding: 12px 18px;
  border-radius: 8px; background: var(--erreur); color: #fff; font-weight: 600; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); z-index: 1000;
  opacity: 0; pointer-events: none; transition: opacity .4s; cursor: pointer; }
#socle-bandeau.visible { opacity: 1; pointer-events: auto; }
#socle-bandeau.ok { background: var(--accent); }
.formulaire input[readonly], .formulaire select:disabled { color: var(--discret); }

.formulaire textarea {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  background: var(--fond);
  color: var(--texte);
  resize: vertical;
}
.formulaire textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.ligne.trois { grid-template-columns: 2fr 1fr; }
.separateur { border: 0; border-top: 1px solid var(--bordure); margin: 20px 0 4px; width: 100%; }
/* Anomalies (écrans des responsables) */
.selecteur {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  background: var(--carte);
  color: var(--texte);
  max-width: 100%;
}
.entete-vue { flex-wrap: wrap; }
.tableau td.date { white-space: nowrap; }
/* Les textes longs (détail du journal, libellés) vont à la ligne plutôt que d'élargir le tableau */
table.tableau td { overflow-wrap: break-word; }
.tableau-conteneur .dt-layout-table { overflow-x: auto; }
.statut { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 13px; border: 1px solid var(--bordure); white-space: nowrap; }
.statut-nouvelle { color: var(--erreur); border-color: var(--erreur); }
.statut-en_cours { color: var(--accent); border-color: var(--accent); }
.statut-resolue, .statut-rejetee { color: var(--discret); }
.fiche-large { width: min(760px, calc(100vw - 32px)); }
.fiche h3 { margin: 20px 0 4px; font-size: 16px; font-weight: 600; }
/* Journal */
.gravite-information { color: var(--discret); }
.gravite-avertissement { color: var(--accent); border-color: var(--accent); }
.gravite-erreur { color: var(--erreur); border-color: var(--erreur); }
/* Comptes : la couleur du nom indique l'état */
.etat-suspendu { color: var(--erreur); }
.declarant-responsable, .declarant-visiteur { color: var(--declarant-responsable); font-weight: 600; }
.declarant-admin { color: var(--declarant-admin); font-weight: 600; }
.etat-suspendu[class*="declarant-"] { color: var(--erreur); }
/* Compte suspendu : italique, sans gras, où que le nom apparaisse */
.etat-suspendu, .etat-suspendu [class*="declarant-"] { color: var(--erreur); font-style: italic; font-weight: normal; }
.declarant-supprime { color: var(--discret); font-style: italic; }
.tableau tbody tr.inactif td .etat-suspendu { color: var(--erreur); }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Accessibilité : lien d'évitement visible au premier Tab, focus toujours visible au clavier */
.evitement { position: absolute; left: 8px; top: -60px; z-index: 10; padding: 8px 14px; border-radius: 6px;
  background: var(--accent); color: var(--sur-accent); text-decoration: none; font-weight: 600; }
.evitement:focus { top: 8px; }
main:focus { outline: none; }
button:focus-visible, a:focus-visible, select:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible,
summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Aide dans la page (iframe sous le menu) */
.aide-barre { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.aide-barre h1 { margin: 0; font-size: 1.3rem; }
.aide-nouvel-onglet { margin-left: auto; font-size: 1.3rem; line-height: 1; text-decoration: none; padding: 2px 8px;
  border: 1px solid var(--bordure); border-radius: 6px; color: var(--accent); }
.aide-nouvel-onglet:hover { background: var(--accent); color: var(--sur-accent); }
.aide-cadre { width: 100%; height: calc(100vh - 170px); min-height: 400px; border: 1px solid var(--bordure); border-radius: 8px;
  background: var(--fond); }

/* Nouvelle version du serveur (administrateurs), dans le pied de page */
.alerte-maj { color: var(--declarant-admin); cursor: pointer; }

/* Suggestions de l'annuaire sous le champ identifiant d'un nouveau compte : superposees, elles ne changent pas la taille de la fenetre */
.suggestions-conteneur { position: relative; height: 0; }
.suggestions { position: absolute; top: 2px; left: 0; right: 0; z-index: 5; margin: 0; padding: 4px 0; list-style: none;
  background: var(--carte); color: var(--texte); border: 1px solid var(--bordure); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18); max-height: 280px; overflow-y: auto; }
.suggestions li { padding: 7px 12px; cursor: pointer; }
.suggestions li:hover, .suggestions li.actif { background: rgba(127, 127, 127, .18); }

/* Paramètres : toutes les cartes de tous les onglets ont la même largeur (classe posée par afficher() de socle.js) */
.vue-parametre .carte.carte { max-width: 640px; box-sizing: border-box; margin-left: 0; margin-right: auto; }   /* cartes alignées à gauche (les .formulaire se centraient) */
.vue-parametre .carte .carte { max-width: none; }
/* Même espace entre deux cartes de Paramètres, quel que soit l'écran (les règles propres à chaque logiciel, par identifiant, posaient 0 ou 16 px) */
.vue-parametre > .carte { margin-top: 0 !important; margin-bottom: 20px !important; }

/* Titre des cartes de Paramètres : même rendu partout (taille, marges), plus l'indication de portée à droite : « Tous » (réglage commun) ou « Moi seulement » (réglage personnel, carte marquée data-portee="personnelle") */
.vue-parametre .carte h2, .carte[data-portee] h2 { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 20px; font-weight: 600; }
.vue-parametre .carte h2:first-child, .carte[data-portee] h2:first-child { margin-top: 0; }
.portee { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: help; color: var(--accent); }
.portee svg { display: block; width: 22px; height: 22px; }
.portee.personnelle { color: var(--declarant-admin); }
.vue-parametre .carte h3, .carte[data-portee] h3 { margin: 16px 0 4px; font-size: 16px; font-weight: 600; }   /* sous-titre : toujours plus petit que le titre de la carte (20 px) */
.vue-parametre .carte h4 { margin: 12px 0 4px; font-size: 14px; font-weight: 600; }

/* Éditeur du message d'accueil (Trumbowyg) aux couleurs de l'affichage */
.formulaire .trumbowyg-box { margin: 6px 0 0; border-color: var(--bordure); border-radius: 6px; background: var(--carte); }
.formulaire .trumbowyg-box, .formulaire .trumbowyg-editor { min-height: 180px; }
.formulaire .trumbowyg-editor { color: var(--texte); line-height: 1.5; }
.formulaire .trumbowyg-button-pane { background: var(--fond); border-bottom-color: var(--bordure); border-radius: 6px 6px 0 0; }
.formulaire .trumbowyg-button-pane::after { background: var(--bordure); }
.formulaire .trumbowyg-button-pane .trumbowyg-button-group + .trumbowyg-button-group::before { background: var(--bordure); }
.formulaire .trumbowyg-button-pane button { color: var(--texte); }
.formulaire .trumbowyg-button-pane button svg { fill: var(--texte); }
.formulaire .trumbowyg-button-pane button:not(.trumbowyg-disable):hover,
.formulaire .trumbowyg-button-pane button.trumbowyg-active { background: var(--carte); }
.trumbowyg-modal-box { background: var(--carte); color: var(--texte); }
.trumbowyg-modal-box .trumbowyg-modal-title { background: var(--fond); color: var(--texte); border-bottom-color: var(--bordure); }
.trumbowyg-modal-box label .trumbowyg-input-infos span { background: var(--fond); color: var(--texte); border-color: var(--bordure); }
.trumbowyg-modal-box label input { background: var(--carte); color: var(--texte); border-color: var(--bordure); }

/* Accueil des référents numériques : message des administrateurs */
.message-accueil {
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: var(--fond);
  line-height: 1.5;
}
.message-accueil p { margin: 0 0 8px; }
.message-accueil p:last-child { margin-bottom: 0; }
.message-accueil a { color: var(--accent); }

/* Fiches agrandissables : bouton en haut a droite (meme style que celui de l'aide), fiche presque plein ecran une fois agrandie,
   barre des boutons toujours en bas de la fiche */
.fiche-agrandir { position: absolute; top: 24px; right: 24px; margin: 0; background: transparent; font-family: inherit; cursor: pointer; }
.fiche-entete > .fiche-agrandir { top: 24px; right: 0; }
.fiche-agrandissable h2 { padding-right: 56px; }
.fiche-agrandir:hover, .fiche-agrandir[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); }
/* Fiche agrandie : au survol, le bouton de reduction prend l'aspect qu'il a quand la fiche est reduite (repos), pour montrer ce qu'un clic va rendre */
.fiche-agrandir[aria-pressed="true"]:hover { background: transparent; color: var(--accent); }
.fiche-agrandissable[open] { display: flex; flex-direction: column; }
.fiche-agrandissable > form, .fiche-agrandissable > .formulaire { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; margin: 0; }
.fiche-agrandissable > form > .boutons, .fiche-agrandissable > .formulaire > .boutons:last-child, .fiche-agrandissable > .boutons:last-child { margin-top: auto; }
.fiche-agrandissable.fiche-agrandie { width: calc(100vw - 16px); max-width: none; height: calc(100vh - 16px); max-height: none; margin: 8px; }