/* CODEVE Flux bancaires — feuille unique à la charte CODEVE (thème SSO codeve-flux),
   sans dépendance externe ni police distante (CSP style-src 'self'). CDC IHM v1.0 §4. */
:root {
  --cf-marque: #0F2E2E;
  --cf-noir: #1A1A1A;
  --cf-noir-survol: #2D2D2D;
  --cf-accent: #E89B23;            /* jamais pour du texte sur fond clair */
  --cf-fond: #FBFBFA;
  --cf-surface: #FFFFFF;
  --cf-texte-discret: #5B6168;
  --cf-bord: #D6D9DC;
  --cf-neutre: #3D4247;  --cf-neutre-fond: #EEF0F2;
  --cf-info: #1F4E79;    --cf-info-fond: #E7F0F8;
  --cf-succes: #1E5E3A;  --cf-succes-fond: #E6F2EA;
  --cf-alerte: #7A4100;  --cf-alerte-fond: #FDF0DC;
  --cf-danger: #A3241B;  --cf-danger-fond: #FBE9E7;
  --cf-rayon: 6px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--cf-fond);
       color: var(--cf-noir); min-width: 0; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 12px; letter-spacing: -0.2px; }
h2 { font-size: 1.2rem; margin: 24px 0 8px; }
h3 { font-size: 1.05rem; margin: 0 0 6px; }
a { color: var(--cf-marque); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--cf-accent); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--cf-accent); outline-offset: 2px; box-shadow: 0 0 0 2px var(--cf-noir); }
a:focus, button:focus, input:focus, select:focus, summary:focus, textarea:focus { outline: 3px solid var(--cf-accent); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--cf-noir); }  /* anneau sombre : l'accent seul fait 2,3:1 sur blanc */
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9em; overflow-wrap: anywhere; }
small { color: var(--cf-texte-discret); }

.evitement { position: absolute; left: -999px; top: 0; }
.evitement:focus { left: 8px; top: 8px; z-index: 10; background: var(--cf-surface); padding: 6px 10px; }

/* En-tête */
.entete { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 10px 16px; background: var(--cf-marque);
          color: #FFFFFF; }
.entete a, .entete .lien { color: #FFFFFF; }
.marque { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; font-size: 1.05rem; }
.marque img { display: block; border-radius: 6px; }
.etiquette { font-size: 13px; color: var(--cf-alerte); background: var(--cf-alerte-fond); border-radius: 4px; padding: 1px 8px;
             white-space: nowrap; }
.entete .etiquette { font-weight: 600; }
.entete-droite { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.utilisateur { opacity: 0.95; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entete button.lien { font-weight: 600; }
.selecteur { position: relative; }
.selecteur > summary { cursor: pointer; list-style: none; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: var(--cf-rayon);
                       padding: 3px 10px; }
.selecteur > summary::-webkit-details-marker { display: none; }
.selecteur > summary::after { content: " ▾"; }
.selecteur-liste { position: absolute; z-index: 5; left: 0; top: calc(100% + 6px); min-width: 260px; max-width: 90vw;
                   background: var(--cf-surface); border: 1px solid var(--cf-bord); border-radius: var(--cf-rayon);
                   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); color: var(--cf-noir); }
.selecteur-espace { margin: 0; padding: 8px 14px 6px; border-bottom: 1px solid var(--cf-bord); font-size: 14px; color: var(--cf-texte-discret); }
.selecteur-espace strong { color: var(--cf-marque); font-size: 1rem; }
.selecteur-liste ul { margin: 0; padding: 6px 0; list-style: none; }
.selecteur-liste li a { display: block; padding: 6px 14px; color: var(--cf-noir); text-decoration: none; }
.selecteur-liste li a:hover, .selecteur-liste li a[aria-current] { background: var(--cf-neutre-fond); }
.selecteur-liste li a[aria-current] { box-shadow: inset 3px 0 0 var(--cf-accent); font-weight: 600; }
.selecteur-liste .separateur { border-top: 1px solid var(--cf-bord); margin-top: 4px; padding-top: 4px; }

/* Disposition : navigation latérale + contenu */
.page { display: block; }
.avec-menu { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
.menu { background: var(--cf-surface); border-right: 1px solid var(--cf-bord); min-height: calc(100vh - 56px); }
.menu > summary { cursor: pointer; padding: 10px 16px; font-weight: 600; list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::before { content: "☰ "; }
.menu nav { padding: 8px 0 16px; }
.menu-groupe { margin: 6px 16px 2px; font-size: 13px; color: var(--cf-texte-discret); }
.menu-groupe strong { color: var(--cf-noir); }
.bloc-univers, .bloc-espace { border-top: 1px solid var(--cf-bord); padding: 10px 0 6px; }
.bloc-univers:first-of-type { border-top: 0; }
.univers { display: flex; align-items: center; gap: 8px; margin: 0 16px 4px; font-size: 1.0625rem; font-weight: 700; line-height: 1.3;
           color: var(--cf-marque); }
.univers .icone { flex: none; color: var(--cf-marque); }
a.univers-lien { margin: 0; padding: 4px 16px 4px 13px; border-left: 3px solid transparent; text-decoration: none; }
a.univers-lien:hover { background: var(--cf-neutre-fond); }
a.univers-lien[aria-current="page"] { border-left-color: var(--cf-accent); background: var(--cf-neutre-fond); }
.bloc-espace { margin-top: 14px; border-top: 2px solid var(--cf-marque); background: var(--cf-fond); }
.sous-univers { display: block; margin: 8px 16px 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
                color: var(--cf-texte-discret); }
.menu ul { list-style: none; margin: 0 0 0 25px; padding: 0 0 0 0; border-left: 2px solid var(--cf-bord); }
.menu li a { display: block; padding: 4px 12px 4px 13px; margin-left: -2px; border-left: 3px solid transparent; font-size: 0.9375rem;
             color: var(--cf-noir); text-decoration: none; }
.menu li a:hover { background: var(--cf-neutre-fond); }
.menu li a[aria-current="page"] { border-left-color: var(--cf-accent); background: var(--cf-neutre-fond); font-weight: 600; }
@supports selector(::details-content) {
  @media (min-width: 960px) {
    .menu > summary { display: none; }
    .menu::details-content { content-visibility: visible; display: block; }
  }
}

main { padding: 16px 24px 32px; max-width: 1180px; min-width: 0; }
.fil ol { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px;
          color: var(--cf-texte-discret); }
.fil li + li::before { content: "›"; margin-right: 4px; }
.fil a { color: var(--cf-texte-discret); }
.pied { padding: 16px 24px; color: var(--cf-texte-discret); font-size: 13px; border-top: 1px solid var(--cf-bord); background: var(--cf-surface); }

/* Titres de page et actions */
.titre-page { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.titre-page h1 { margin-right: auto; }
.sous-titre { color: var(--cf-texte-discret); margin: -6px 0 12px; }

/* Messages */
.message { border-radius: var(--cf-rayon); padding: 10px 14px; margin: 0 0 14px; border-left: 4px solid; }
.message.succes { background: var(--cf-succes-fond); color: var(--cf-succes); border-color: var(--cf-succes); }
.message.info { background: var(--cf-info-fond); color: var(--cf-info); border-color: var(--cf-info); }
.avertissement { background: var(--cf-alerte-fond); color: var(--cf-alerte); border-left: 4px solid var(--cf-alerte);
                 border-radius: var(--cf-rayon); padding: 10px 14px; margin: 10px 0; }
.message.erreur { background: var(--cf-danger-fond); color: var(--cf-danger); border-color: var(--cf-danger); }
.discret { color: var(--cf-texte-discret); }

/* Badges d'état */
.badge { display: inline-block; font-size: 13px; font-weight: 600; line-height: 1.4; border-radius: 999px; padding: 1px 10px;
         white-space: nowrap; }
.badge-neutre { background: var(--cf-neutre-fond); color: var(--cf-neutre); }
.badge-info { background: var(--cf-info-fond); color: var(--cf-info); }
.badge-succes { background: var(--cf-succes-fond); color: var(--cf-succes); }
.badge-alerte { background: var(--cf-alerte-fond); color: var(--cf-alerte); }
.badge-danger { background: var(--cf-danger-fond); color: var(--cf-danger); }

/* Boutons */
button, .bouton { font: inherit; font-weight: 600; display: inline-block; cursor: pointer; text-decoration: none; text-align: center;
                  border-radius: var(--cf-rayon); padding: 7px 14px; border: 1px solid var(--cf-noir); background: var(--cf-noir);
                  color: #FFFFFF; line-height: 1.3; }
button:hover, .bouton:hover { background: var(--cf-noir-survol); border-color: var(--cf-noir-survol); color: #FFFFFF; }
.secondaire, button.secondaire { background: var(--cf-surface); color: var(--cf-noir); border-color: var(--cf-noir); }
.secondaire:hover, button.secondaire:hover { background: var(--cf-neutre-fond); color: var(--cf-noir); }
.danger, button.danger { background: var(--cf-surface); color: var(--cf-danger); border-color: var(--cf-danger); }
.danger:hover, button.danger:hover { background: var(--cf-danger-fond); color: var(--cf-danger); border-color: var(--cf-danger); }
button.lien { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; font-weight: 400; }
button.lien:hover { background: none; color: inherit; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }

/* Cartes, sections, formulaires repliés */
.carte { background: var(--cf-surface); border: 1px solid var(--cf-bord); border-radius: var(--cf-rayon); padding: 14px 16px; margin: 12px 0; }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.cartes .carte { margin: 0; }
a.carte { display: block; text-decoration: none; color: var(--cf-noir); }
a.carte:hover { border-color: var(--cf-noir); }
.carte .nombre { display: block; font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.a-faire .carte.vide .nombre { color: var(--cf-texte-discret); }
.a-faire .carte.signal { box-shadow: inset 4px 0 0 var(--cf-accent); }
details.depliable { background: var(--cf-surface); border: 1px solid var(--cf-bord); border-radius: var(--cf-rayon); margin: 12px 0; }
details.depliable > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; }
details.depliable[open] > summary { border-bottom: 1px solid var(--cf-bord); }
details.depliable > :not(summary) { margin-left: 14px; margin-right: 14px; }
details.a-savoir { margin: 8px 0; color: var(--cf-texte-discret); }
details.a-savoir > summary { cursor: pointer; font-weight: 600; color: var(--cf-noir); }
.formulaire { display: grid; gap: 6px; max-width: 560px; margin: 12px 0; }
.formulaire label { font-weight: 600; margin-top: 4px; }
.formulaire label:has(input[type="checkbox"]), fieldset label { font-weight: 400; }
.formulaire button { justify-self: start; margin-top: 8px; }
.aide { color: var(--cf-texte-discret); font-size: 14px; margin: -2px 0 2px; }
.en-ligne { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
input, select, textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--cf-bord); border-radius: 4px; background: var(--cf-surface);
                          color: var(--cf-noir); max-width: 100%; }
fieldset { border: 1px solid var(--cf-bord); border-radius: var(--cf-rayon); padding: 8px 12px; }
legend { font-weight: 600; padding: 0 4px; }
.cases { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.grille { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.grille dt { color: var(--cf-texte-discret); }
.grille dd { margin: 0; }

/* Tableaux : défilement dans leur conteneur, jamais la page */
.tableau { overflow-x: auto; margin: 12px 0; background: var(--cf-surface); border: 1px solid var(--cf-bord); border-radius: var(--cf-rayon); }
table { border-collapse: collapse; width: 100%; background: var(--cf-surface); }
.tableau table { margin: 0; }
caption { text-align: left; color: var(--cf-texte-discret); padding: 8px 12px; caption-side: top; font-size: 14px; }
th, td { border-bottom: 1px solid var(--cf-bord); padding: 8px 12px; text-align: left; vertical-align: top; }
thead th { background: var(--cf-neutre-fond); font-size: 14px; position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: 0; }
.montant, td.montant, th.montant { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.selection { user-select: all; background: var(--cf-surface); border: 1px solid var(--cf-bord); padding: 6px 10px; display: inline-block;
             max-width: 100%; overflow-wrap: anywhere; }

/* Indicateur d'étapes */
.etapes { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 8px 0 16px; counter-reset: etape; }
.etapes li { counter-increment: etape; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px;
             background: var(--cf-neutre-fond); color: var(--cf-neutre); font-size: 14px; }
.etapes li::before { content: counter(etape); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
                     background: var(--cf-surface); border: 1px solid var(--cf-bord); font-weight: 700; font-size: 13px; }
.etapes li.faite { background: var(--cf-succes-fond); color: var(--cf-succes); }
.etapes li.faite::before { content: "✓"; border-color: var(--cf-succes); }
.etapes li.courante { background: var(--cf-surface); color: var(--cf-noir); font-weight: 700; box-shadow: inset 0 0 0 2px var(--cf-accent); }
.etapes li.courante::before { background: var(--cf-accent); border-color: var(--cf-accent); color: var(--cf-noir); }

/* Organisations (accueil) */
.organisations { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.organisations ul { margin: 6px 0 0; padding-left: 18px; }

@media (max-width: 959px) {
  .avec-menu { display: block; }
  .menu { min-height: 0; border-right: 0; border-bottom: 1px solid var(--cf-bord); }
  main { padding: 14px 16px 28px; }
}
@media (max-width: 720px) {
  h1 { font-size: 1.35rem; }
  .entete { padding: 8px 12px; }
  .entete-droite { margin-left: 0; width: 100%; }
  .grille { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .grille dd { margin-bottom: 8px; }
  .formulaire { max-width: none; }
  .formulaire button { justify-self: stretch; }
  input, select, textarea { width: 100%; }
  input[type="checkbox"], input[type="radio"] { width: auto; }
  .en-ligne input, .en-ligne select { width: auto; }
  .selecteur-liste { position: static; box-shadow: none; margin-top: 6px; }
}
.nowrap { white-space: nowrap; }