/* Compléments à la maquette v4 sombre : ce qu'elle ne montre pas (logos
   d'entreprise, repli sans JavaScript, encoches, page Réglages). Rien ici ne
   change ce qu'elle montre. Le nom du fichier le place après sombre.css dans
   la page : à spécificité égale, ces règles l'emportent. */

/* Le focus clavier porte la lueur partout, comme dans la maquette (qui ne
   montre que des liens et des boutons) : champs, dépliants et zones focalisables compris. */
.identite-jfb.theme-sombre :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Les messages de l'app, au-dessus du contenu. */
.theme-sombre main > :is([role="alert"], [role="status"]) {
  margin-bottom: 24px;
}

/* Logos d'entreprise : celui de l'application tel quel ; à défaut, celui des
   documents (pensé pour un fond clair) sur une plaque claire ; à défaut, le nom. */
.theme-sombre :is(.logo, .logo-page) .logo-entreprise {
  width: auto;
  max-width: 160px;
  max-height: 48px;
}

.theme-sombre .logo-page .logo-entreprise {
  max-width: 200px;
  max-height: 56px;
}

.theme-sombre .logo-plaque {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--blanc);
}

.theme-sombre :is(.logo, .logo-page) span:is(.logo-mot, .logo-mono) {
  font: 600 1.25rem/1.2 var(--titre);
  letter-spacing: -0.02em;
  color: var(--blanc);
  overflow-wrap: anywhere;
}

body.theme-sombre[data-nav="rail"] .logo .logo-entreprise {
  max-width: 56px;
  max-height: 40px;
}

body.theme-sombre[data-nav="rail"] .logo .logo-plaque {
  padding: 4px;
}

/* Colonne ou rail plus hauts que l'écran (petite fenêtre, texte agrandi). */
body.theme-sombre:is([data-nav="index"], [data-nav="rail"]) nav.p {
  overflow-y: auto;
}

/* Encoches et barre d'accueil des téléphones : le dock reste au-dessus, et
   le contenu garde les marges de la maquette, ou l'encoche si elle est plus large. */
body.theme-sombre[data-nav="dock"] nav.p {
  bottom: max(14px, env(safe-area-inset-bottom));
}

.theme-sombre main {
  padding-left: max(clamp(16px, 3.5vw, 48px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 3.5vw, 48px), env(safe-area-inset-right));
}

/* Le dock est fixe : le défilement lui réserve sa hauteur, pour que l'élément
   qui reçoit le focus ne se retrouve jamais dessous (WCAG 2.4.11). */
html:has(body.theme-sombre[data-nav="dock"]) {
  scroll-padding-bottom: 96px;
}

/* Pendant la saisie, le dock s'efface : le clavier ne laisse pas de place aux deux. */
body.theme-sombre[data-nav="dock"]:has(main :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"]), textarea, select):focus) nav.p {
  display: none;
}

/* Sans JavaScript, personne ne choisit le dock : sous 1100 px, la colonne
   se range au-dessus du contenu au lieu de le recouvrir, et la bascule,
   sans effet, disparaît. */

@media (max-width: 1099px) {
  body.theme-sombre:is([data-nav="index"], [data-nav="rail"]) nav.p {
    position: static;
    width: auto;
    margin: 12px 12px 0;
  }

  body.theme-sombre:is([data-nav="index"], [data-nav="rail"]) main {
    margin-left: 0;
  }
}

/* Compte à sécuriser d'abord (double authentification) : aucune navigation. */
body.theme-sombre[data-nav="aucune"] main {
  margin-inline: auto;
}

body.theme-sombre[data-nav="aucune"] .logo-page {
  display: block;
}

/* Page Réglages : des rangées sobres, sur les jetons de la maquette. */
.theme-sombre .reglages {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 720px;
  overflow-wrap: anywhere;
}

.theme-sombre .reglages h2 {
  margin: 0 0 4px;
}

.theme-sombre .reglages .rangees {
  margin: 0;
  padding: 0;
  list-style: none;
}

.theme-sombre .reglages .rangees > li {
  border-top: 1px solid var(--ligne);
}

.theme-sombre .reglages .rangees :is(a, button) {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.theme-sombre .reglages .rangees :is(a, button):hover {
  color: var(--accent);
}

.theme-sombre .reglages .rangees svg.i {
  width: 16px;
  height: 16px;
  color: var(--discret);
}

.theme-sombre .reglages .personne strong {
  display: block;
  font: 600 1.15rem var(--titre);
}

.theme-sombre .reglages .personne span {
  color: var(--doux);
  font-size: 14px;
}

.theme-sombre .reglages details {
  border-top: 1px solid var(--ligne);
}

.theme-sombre .reglages summary {
  min-height: 48px;
  padding: 12px 0;
  font-weight: 600;
  cursor: pointer;
}

.theme-sombre .reglages details p {
  margin: 0 0 12px;
  color: var(--doux);
}

/* Écart voulu à la maquette (J-F, 2026-11-10) : son voile tombe à 25 % au bas
   de la colonne ; sur une image claire, « Réglages » et « Replier » ne se
   lisaient plus. Un voile dense, de la hauteur des liens du bas, s'ajoute
   par-dessus ; l'image se révèle toujours au-dessus. */
body.theme-sombre[data-nav="index"] nav.p {
  --voile-bas: 100px;
}

body.theme-sombre[data-nav="rail"] nav.p {
  --voile-bas: 168px;
}

body.theme-sombre:is([data-nav="index"], [data-nav="rail"]) nav.p {
  background:
    linear-gradient(0deg, rgba(18, 18, 18, 0.9) 0, rgba(18, 18, 18, 0.9) var(--voile-bas), rgba(18, 18, 18, 0) calc(var(--voile-bas) + 56px)),
    linear-gradient(180deg, rgba(18, 18, 18, 0.96) 0%, rgba(18, 18, 18, 0.94) 52%, rgba(18, 18, 18, 0.25) 80%, rgba(18, 18, 18, 0.55) 92%, rgba(18, 18, 18, 0.85) 100%),
    var(--image) 84% center / cover;
}

/* Réglages, sécurité : l'état de la double authentification et sa désactivation. */
.theme-sombre .reglages .etat-securite {
  padding: 12px 0;
}

.theme-sombre .reglages .etat-securite > p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 0;
}

.theme-sombre .reglages .etat-securite .etat {
  border-color: var(--accent);
  color: var(--accent);
}

.theme-sombre .reglages .etat-securite .aide {
  margin-top: 6px;
  color: var(--doux);
  font-size: 14px;
}

.theme-sombre .reglages .etat-securite details {
  margin-top: 8px;
}

.theme-sombre .reglages .etat-securite form {
  display: grid;
  gap: 8px;
  max-width: 320px;
  padding-bottom: 8px;
}

.theme-sombre .reglages .etat-securite label {
  color: var(--doux);
  font-size: 14px;
}

.theme-sombre .reglages .etat-securite input[type="password"] {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--ligne-forte);
  border-radius: 4px;
}

/* Réglages, mon compte : « Votre nom », que chacun inscrit (en solo, la
   section Équipe des Paramètres est cachée). Mêmes pièces que la sécurité. */
.theme-sombre .reglages .nom-personne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  max-width: 360px;
  margin: 12px 0 8px;
}

.theme-sombre .reglages .nom-personne label {
  color: var(--doux);
  font-size: 14px;
}

.theme-sombre .reglages .nom-personne input[type="text"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--ligne-forte);
  border-radius: 4px;
  background: var(--noir);
  color: var(--blanc);
  font: inherit;
}

.theme-sombre .reglages .nom-personne input[aria-describedby] {
  border-color: #b37e88;
}

.theme-sombre .reglages .nom-personne .erreur {
  margin: 0;
  color: #ffbdc8;
  font-size: 14px;
}

.theme-sombre .reglages .nom-personne .aide {
  margin: 0;
  color: var(--doux);
  font-size: 14px;
}

.theme-sombre .reglages .nom-personne input[type="submit"] {
  justify-self: start;
}

/* Accueil : dans la maquette, la loupe de « Rechercher » porte sa taille en
   attribut ; ici, elle la reçoit de la feuille. */
.theme-sombre .recherche svg.i {
  width: 18px;
  height: 18px;
}

/* Le logo de page est une image en ligne dans la maquette ; le preflight de
   Tailwind en fait un bloc et lui retire sa ligne de base (6 px d'écart). */
.theme-sombre .logo-page > img {
  display: inline;
  vertical-align: baseline;
}

/* « Ensuite » : un détail trop long pour sa ligne reste appuyé à droite. */
.theme-sombre .ensuite span {
  text-align: right;
}

/* Actions rapides, écran très étroit ou libellés longs (anglais, 320 px) :
   les colonnes de la maquette ne s'élargissent pas au-delà de l'écran. */
.theme-sombre .actions > a,
.theme-sombre .actions > a > span {
  min-width: 0;
}

.theme-sombre .actions > a > span {
  overflow-wrap: anywhere;
}

/* Un bouton masqué le reste, malgré la mise en rangée de Réglages. */
.theme-sombre .reglages .rangees button[hidden] {
  display: none;
}

/* Fenêtre « Personnaliser » : ce que la maquette ne montre pas. Le champ de
   fichier est habillé en bouton (son libellé), le refus d'une image s'écrit
   sous le bouton, et le formulaire de retrait de l'image n'occupe aucune place. */
.theme-sombre dialog label.secondaire {
  display: inline-flex;
  align-items: center;
}

.theme-sombre dialog label.secondaire:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.theme-sombre dialog .refus {
  color: var(--blanc);
}

.theme-sombre dialog form#perso-retirer {
  display: none;
}

/* Sans JavaScript : la même fenêtre, posée dans la page. */
.theme-sombre dialog.en-page {
  position: static;
  width: min(520px, 100%);
  max-height: none;
  margin: 0;
  border: 1px solid var(--ligne-forte);
  border-radius: 8px;
}

/* Page « Comment créer mon image ». */
.theme-sombre .aide-image .chapeau {
  color: var(--doux);
}

.theme-sombre .aide-image pre {
  margin: 10px 0;
  padding: 14px;
  border: 1px solid var(--ligne);
  border-radius: 4px;
  background: var(--noir);
  font: 14px/1.6 var(--texte);
  white-space: pre-wrap;
}

.theme-sombre .aide-image :is(ul, ol) {
  display: grid;
  gap: 6px;
  margin: 8px 0 12px;
  padding-left: 20px;
  list-style: revert;
}

.theme-sombre .aide-image .geste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--doux);
}

/* Le preflight de Tailwind retire la marge automatique qui centre une
   fenêtre modale ; la maquette compte sur elle. Sous 701 px, sa règle de
   feuille du bas garde la main. */
@media (min-width: 701px) {
  .theme-sombre dialog:not(.en-page) {
    margin: auto;
  }
}

/* Un nom de mandat long et sans espace se coupe au lieu de déborder. */
.theme-sombre .mandat a > span:nth-child(2) {
  min-width: 0;
  overflow-wrap: anywhere;
}