/* Variables issues de Docs/espace_client_cede.txt - ne pas coder de couleur en dur ailleurs. */
:root {
  /* Couleurs */
  --c-ink:          #0b1520;  /* fond sombre principal, topbar, menus */
  --c-ink-deep:     #060d16;  /* fond sombre le plus foncé */
  --c-ink-soft:     #101d2b;  /* surfaces sombres secondaires */
  --c-gold:         #c2a25f;  /* or principal (boutons, accents) */
  --c-gold-light:   #d8bd83;  /* or clair (survol, titres sur fond sombre) */
  --c-gold-dark:    #a98b4c;  /* or foncé (survol des aplats) */
  --c-text:         #1b2430;  /* texte sur fond clair */
  --c-text-muted:   #5b6673;  /* texte secondaire sur fond clair */
  --c-text-invert:  #ffffff;  /* texte sur fond sombre */
  --c-text-invert-muted: rgba(255, 255, 255, .72);
  --c-bg:           #ffffff;
  --c-bg-alt:       #f6f5f2;  /* fond des bandeaux clairs */
  --c-border:       #e4e2dd;
  --c-border-dark:  rgba(255, 255, 255, .16);
  --c-ok:           #1f6b4a;
  --c-ok-deep:      #124630;
  --c-ok-bg:        #edf5f0;
  --c-ko:           #a4342c;
  --c-ko-bg:        #fbeeec;

  --c-alert:        #d8271c;  /* pastille de messages en attente */
  --c-info:         #2f6fd0;  /* pastilles d'aide contextuelle */

  /* Typographie */
  /* Serif d'origine (spec), conservee ici au cas ou : */
  /* --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; */
  --font-display: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
  --font-ui:      "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;

  /* Divers */
  --radius:         2px;
  --transition:     .2s ease;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg-alt);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
a { color: var(--c-gold-dark); }

/* --- Topbar ---------------------------------------------------------------- */
.topbar {
  background: var(--c-ink);
  color: var(--c-text-invert);
  border-bottom: 1px solid var(--c-border-dark);
}
.topbar__inner {
  max-width: 1100px; margin: 0 auto; padding: .75rem 1rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center;
  font-family: var(--font-ui);
}
.topbar__brand {
  font-family: var(--font-ui); font-size: 1.05rem; font-weight: 600; letter-spacing: .02em;
  color: var(--c-gold-light); text-decoration: none; margin-right: auto;
}
.topbar__brand span { color: var(--c-text-invert-muted); font-family: var(--font-ui); font-weight: 400; font-size: .8rem; display: block; }

/* Menu : uniquement des icones tracees en blanc, le libelle passe par title/aria-label. */
.topbar__nav { display: flex; align-items: center; gap: .35rem; }
.topbar__nav a {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; color: var(--c-text-invert); text-decoration: none;
  border-radius: var(--radius); transition: color var(--transition), background var(--transition);
}
.topbar__nav a:hover { color: var(--c-gold-light); background: rgba(255, 255, 255, .08); }
.topbar__nav a[aria-current="page"] { color: var(--c-gold-light); background: rgba(255, 255, 255, .1); }
.icon { display: block; flex: none; }
.topbar__user { color: var(--c-text-invert-muted); font-size: .85rem; }

/* Deconnexion : meme gabarit que les icones du menu, dans un <form> POST. */
.topbar__logout {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; padding: 0; cursor: pointer;
  color: var(--c-text-invert); background: none; border: none;
  border-radius: var(--radius); transition: color var(--transition), background var(--transition);
}
.topbar__logout:hover { color: var(--c-gold-light); background: rgba(255, 255, 255, .08); }

/* --- Structure ------------------------------------------------------------- */
.page { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.page__head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.25rem; }
.muted { color: var(--c-text-muted); font-size: .9rem; margin: 0; }

.card {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.card--pad { padding: 1.5rem; }

/* --- Formulaires ----------------------------------------------------------- */
label { display: block; font-size: .85rem; color: var(--c-text-muted); margin-bottom: .3rem; }
input[type=text], input[type=password], input[type=email], input[type=search], select, textarea {
  width: 100%; padding: .6rem .7rem; font: inherit; color: var(--c-text);
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius);
  transition: border-color var(--transition);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-gold); }
.field { margin-bottom: 1rem; }
/* Champ de mot de passe avec bouton « Afficher / Masquer » accole a droite. */
.password-field { position: relative; }
.password-field input { padding-right: 5.5rem; }
.password-field__toggle {
  position: absolute; top: 50%; right: .3rem; transform: translateY(-50%);
  padding: .3rem .6rem; font: inherit; font-size: .8rem; cursor: pointer;
  color: var(--c-gold-dark); background: transparent; border: none; border-radius: var(--radius);
}
.password-field__toggle:hover { background: var(--c-bg-alt); }
.password-field__toggle:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 0; }
.password-field__toggle[hidden] { display: none; }

.btn {
  display: inline-block; padding: .6rem 1.1rem; font: inherit; cursor: pointer;
  color: var(--c-ink); background: var(--c-gold); border: 1px solid var(--c-gold);
  border-radius: var(--radius); text-decoration: none; transition: background var(--transition), border-color var(--transition);
}
.btn:hover { background: var(--c-gold-dark); border-color: var(--c-gold-dark); }
.btn--ghost { background: transparent; color: var(--c-text); border-color: var(--c-border); }
.btn--ghost:hover { background: var(--c-bg-alt); border-color: var(--c-text-muted); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* Bouton carre ne portant qu'une icone (libelle dans title/aria-label). */
.btn--icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; padding: 0; color: var(--c-text-invert);
}
label.btn, label.btn--icon { margin-bottom: 0; cursor: pointer; }
.btn--block { display: block; width: 100%; }

/* Utilitaires d'espacement : la CSP (default-src 'self') interdit style="…". */
.card--spaced, .spaced-top { margin-top: 1.25rem; }
.spaced-top-sm { margin-top: .75rem; }
.field--narrow { max-width: 320px; }
.field--medium { max-width: 420px; }

/* Champ de recherche : la loupe est decorative, la touche Entree valide. */
/* Un bouton fantome garde son encre sombre, meme en version icone. */
.btn--ghost.btn--icon { color: var(--c-text); }

.search { position: relative; }
.search__icon {
  position: absolute; top: 50%; left: .6rem; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--c-text-muted); pointer-events: none;
}
.search input[type=search] { padding-left: 2.1rem; min-width: 15rem; }

/* --- Messages -------------------------------------------------------------- */
.alert { padding: .7rem .9rem; border-radius: var(--radius); border: 1px solid; margin-bottom: 1rem; font-size: .9rem; }
.alert--ko { color: var(--c-ko); background: var(--c-ko-bg); border-color: var(--c-ko); }
.alert--ok { color: var(--c-ok-deep); background: var(--c-ok-bg); border-color: var(--c-ok); }
.alert ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* --- Tableaux -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--c-bg); font-size: .88rem; }
th, td { padding: .55rem .8rem; text-align: left; border-bottom: 1px solid var(--c-border); }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); font-weight: 600; }
table .muted { font-size: .8rem; }
tbody tr:hover { background: var(--c-bg-alt); }
.cell-strong { font-weight: 600; }

/* Ligne entierement cliquable : le lien de la premiere cellule s'etend sur la
   ligne via un ::after, sans JavaScript. La ligne ne doit alors contenir aucun
   autre lien, qui serait recouvert. */
.row-link { position: relative; cursor: pointer; }
.row-link:hover { background: var(--c-bg-alt); }
.row-link__target::after { content: ""; position: absolute; inset: 0; }
.row-link__target { text-decoration: none; }
.row-link:hover .row-link__target { text-decoration: underline; }
.row-link__target:focus-visible { outline: none; }
.row-link:focus-within { outline: 2px solid var(--c-gold); outline-offset: -2px; }

/* Etat d'un compte : rond vert (actif) ou rouge (desactive), libelle en title + .sr-only. */
.dot {
  display: inline-block; width: .7rem; height: .7rem; border-radius: 50%;
  vertical-align: middle;
}
.dot--ok { background: var(--c-ok); }
.dot--ko { background: var(--c-ko); }
.col-status { text-align: center; }

.sr-only, input[type=file].sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.badge { display: inline-block; padding: .15rem .5rem; font-size: .75rem; border-radius: var(--radius); border: 1px solid; }
.badge--ok { color: var(--c-ok-deep); background: var(--c-ok-bg); border-color: var(--c-ok); }
.badge--ko { color: var(--c-ko); background: var(--c-ko-bg); border-color: var(--c-ko); }

/* --- Pagination ------------------------------------------------------------ */
.pagination { display: flex; gap: .5rem; align-items: center; justify-content: center; margin-top: 1.25rem; font-size: .9rem; }
.pagination span { color: var(--c-text-muted); }

/* --- Pied de page ----------------------------------------------------------- */
body { display: flex; flex-direction: column; min-height: 100vh; }
/* width: 100% est indispensable : dans un conteneur flex en colonne, le
   « margin: 0 auto » de .page annule l'etirement transversal et le <main> se
   reduirait alors a la largeur de son contenu. */
body > main { flex: 1 0 auto; width: 100%; }

.sitefoot {
  flex: none; margin-top: auto;
  background: var(--c-ink); color: var(--c-text-invert-muted);
  border-top: 1px solid var(--c-border-dark); font-family: var(--font-ui);
}
.sitefoot__inner { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem; font-size: .8rem; text-align: center; }
.sitefoot p { margin: 0; }
.sitefoot .sitefoot__legal { color: var(--c-gold-light); margin-bottom: .35rem; }
.sitefoot a { color: var(--c-text-invert); }
.sitefoot a:hover { color: var(--c-gold-light); }
/* Sur les ecrans pleine page (connexion), le pied prolonge le fond sombre. */
.sitefoot--bare { background: var(--c-ink-deep); border-top-color: transparent; }

/* --- Ecran de connexion ---------------------------------------------------- */
.auth {
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background: var(--c-ink-deep);
}
.auth__box { width: 100%; max-width: 380px; }
.auth__brand { text-align: center; margin-bottom: 1.5rem; }
.auth__brand strong { display: block; font-family: var(--font-display); font-size: 1.4rem; color: var(--c-gold-light); }
.auth__brand span { color: var(--c-text-invert-muted); font-size: .85rem; }
.auth .card { padding: 1.5rem; }
.auth__foot { margin-top: 1rem; text-align: center; font-size: .85rem; }
.auth__foot a { color: var(--c-text-invert-muted); }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 640px) {
  .page { padding: 1rem .9rem 2.5rem; }
  .page__head { align-items: flex-start; }
  th, td { padding: .5rem .5rem; }
  .topbar__inner { padding: .6rem .9rem; }
  .head-actions { width: 100%; }
  .search { flex: 1 1 auto; }
  .search input[type=search] { min-width: 0; }
}

/* --- Fiche compte / formulaires longs -------------------------------------- */
.head-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.head-actions form { display: flex; align-items: center; margin: 0; }
/* Filet vertical decoratif entre deux groupes d'actions. */
.sep { flex: none; align-self: stretch; min-height: 1.8rem; border-left: 1px solid var(--c-border); margin: 0 .35rem; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.cols h2 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; }
.cols section > h2:first-of-type { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }

.dl { display: grid; grid-template-columns: 9rem 1fr; gap: .35rem 1rem; margin: 0; }
.dl dt { color: var(--c-text-muted); font-size: .85rem; }
.dl dd { margin: 0; }

.fieldset { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1rem; margin: 0 0 1.25rem; }
/* --- Aide contextuelle ------------------------------------------------------ */
/* Pastille [i] bleue : la case a cocher invisible posee dessus porte l'etat,
   le CSS seul ouvre et ferme la bulle (aucun JavaScript dans le projet). */
.label-row { display: flex; align-items: center; margin-bottom: .3rem; }
.label-row label { margin-bottom: 0; }

.hint { position: relative; display: inline-block; width: 1rem; height: 1rem; vertical-align: -.15rem; margin-left: .35rem; }
.hint__toggle {
  position: absolute; inset: -.25rem; width: auto; height: auto; margin: 0;
  opacity: 0; cursor: pointer; z-index: 2; appearance: none;
}
.hint__icon { width: 1rem; height: 1rem; color: var(--c-info); }
.hint:hover .hint__icon { color: var(--c-ink); }
.hint__toggle:focus-visible + .hint__icon { outline: 2px solid var(--c-info); outline-offset: 2px; border-radius: 50%; }

.hint__bubble {
  position: absolute; top: calc(100% + .5rem); left: 50%; transform: translateX(-50%);
  z-index: 5; display: none; width: max-content; max-width: min(18rem, 70vw);
  padding: .5rem .65rem; font-size: .8rem; font-weight: 400; line-height: 1.4;
  text-transform: none; letter-spacing: 0; white-space: normal;
  color: var(--c-text-invert); background: var(--c-ink); border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.hint__bubble::before {
  content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: .35rem solid transparent; border-bottom-color: var(--c-ink);
}
.hint__toggle:checked ~ .hint__bubble { display: block; }
.hint__toggle:checked + .hint__icon { color: var(--c-ink); }

@media (max-width: 640px) {
  /* Sur mobile la bulle se cale sur le bord gauche du champ plutot que de deborder. */
  .hint__bubble { left: 0; transform: none; max-width: 70vw; }
  .hint__bubble::before { left: .5rem; transform: none; }
}

.fieldset legend { padding: 0 .4rem; font-size: .85rem; color: var(--c-text-muted); }
.choice { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; color: var(--c-text); font-size: .95rem; }
.choice input { width: auto; }
/* Canal de notification : l'icone porte le sens, l'adresse reste discrete. */
.choice__icon { width: 1.05rem; height: 1.05rem; color: var(--c-text); flex: none; }
.choice__value { font-size: .82rem; color: var(--c-text-muted); overflow-wrap: anywhere; }
.choice input:disabled ~ .choice__icon { color: var(--c-text-muted); opacity: .5; }

.btn--danger { color: var(--c-text-invert); background: var(--c-ko); border-color: var(--c-ko); }
.btn--danger:hover { background: #8c2c25; border-color: #8c2c25; }
.danger-title { color: var(--c-ko); }

/* Filet horizontal entre deux sections d'une meme carte. */
.rule { height: 0; margin: 1.75rem 0 1.5rem; border: 0; border-top: 1px solid var(--c-border); }
.section-title { display: flex; align-items: center; }
/* Actions de fin de bloc, detachees du contenu. */
.section-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1.5rem 0 0; }
.section-actions form { margin: 0; }

.page__head .muted a { color: var(--c-text-muted); }

@media (max-width: 780px) {
  .cols, .grid-2 { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 1fr; gap: 0 0; }
  .dl dd { margin-bottom: .6rem; }
}

/* --- Invite modale ---------------------------------------------------------- */
.modal {
  width: min(24rem, calc(100vw - 2rem)); padding: 1.5rem;
  color: var(--c-text); background: var(--c-bg);
  border: 1px solid var(--c-border); border-radius: var(--radius);
}
.modal::backdrop { background: rgba(6, 13, 22, .55); }
.modal h2 { margin: 0 0 1rem; font-size: 1.15rem; }
.modal__actions { display: flex; gap: .5rem; align-items: center; }

/* --- Arborescence ---------------------------------------------------------- */
.crumbs { margin-top: .5rem; font-size: .9rem; color: var(--c-text-muted); }
.crumbs a { color: var(--c-gold-dark); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs__sep { margin: 0 .35rem; color: var(--c-border); }

.cols--wide { grid-template-columns: 3fr 2fr; }
.col-actions { white-space: nowrap; text-align: right; }
.col-actions a { margin-left: .75rem; font-size: .85rem; text-decoration: none; }
.col-actions a:hover { text-decoration: underline; }
.danger-link { color: var(--c-ko); }

td a { text-decoration: none; }
input[type=file] { width: 100%; padding: .5rem 0; font: inherit; }

/* Liste de fichiers : les colonnes de droite sont figees, la colonne Nom prend
   le reste. La liste garde ainsi la meme allure d'un dossier a l'autre, que les
   noms soient longs ou courts. */
.table--files .col-size { width: 7rem; }
.table--files .col-date { width: 12rem; }
.table--files .col-actions { width: 15rem; }
.table--files td.col-size, .table--files td.col-date { white-space: nowrap; }
/* Un nom tres long se replie plutot que d'elargir le tableau. */
.table--files td.cell-strong { overflow-wrap: anywhere; }

@media (max-width: 780px) {
  /* Trop etroit pour des colonnes figees : on rend la main a la mise en page. */
  .table--files .col-size, .table--files .col-date, .table--files .col-actions { width: auto; }
}

@media (max-width: 780px) {
  .cols--wide { grid-template-columns: 1fr; }
  .col-actions { text-align: left; white-space: normal; }
  .col-actions a { margin: 0 .75rem 0 0; }
}

/* --- Filtres du journal ---------------------------------------------------- */
.filters { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 0 1rem; align-items: end; }
.filters .field { margin-bottom: 0; }
.filters .field--actions { display: flex; gap: .5rem; align-items: center; }
.btn--link-dark { background: none; border: none; color: var(--c-text-muted); padding: 0; text-decoration: underline; }
.btn--link-dark:hover { background: none; color: var(--c-text); }
.nowrap { white-space: nowrap; }

@media (max-width: 780px) {
  .filters { grid-template-columns: 1fr; gap: 0; }
  .filters .field { margin-bottom: 1rem; }
}

/* --- Messagerie ------------------------------------------------------------ */
.pip {
  display: inline-block; min-width: 1.25rem; padding: 0 .35rem;
  font-size: .72rem; font-weight: 700; line-height: 1.25rem; text-align: center;
  color: var(--c-text-invert); background: var(--c-alert); border-radius: 1rem;
}
/* Dans la topbar, la pastille se pose sur le coin de l'icone. */
.topbar__nav .pip { position: absolute; top: .15rem; right: .05rem; min-width: 1.05rem; line-height: 1.05rem; font-size: .68rem; }
.badge--new { color: var(--c-ink); background: var(--c-gold-light); border-color: var(--c-gold); }

/* Fil de discussion : une liste plate facon forum. On ne repond pas a un
   message en particulier, donc pas de bulles alignees a gauche/droite. */
.cols--thread { grid-template-columns: 1fr 22rem; gap: 1.25rem; }
.compose { position: sticky; top: 1.25rem; }

.posts { display: flex; flex-direction: column; gap: .75rem; }
.post { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); }
/* L'auteur se lit au filet de gauche : or pour le Groupe CEDE, encre sombre
   pour le client. Meme code des deux cotes. */
.post--cede   { border-left: 3px solid var(--c-gold); }
.post--client { border-left: 3px solid var(--c-ink); }
/* Un message non lu ne change pas de couleur : il porte son badge et un auteur en gras. */
.post--unread .post__author { font-weight: 700; }
.post__head {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
  padding: .55rem .9rem; background: var(--c-bg-alt); border-bottom: 1px solid var(--c-border);
  font-size: .85rem;
}
.post__author { color: var(--c-text); }
.post__date { color: var(--c-text-muted); margin-left: auto; }
.post__body { margin: 0; padding: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.post__foot {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between;
  padding: .5rem .9rem; border-top: 1px solid var(--c-border); font-size: .8rem;
}
.post__foot form { margin: 0; }
.post__foot--end { justify-content: flex-end; }

/* Action en icone seule dans un pied de message. */
.icon-link { display: inline-flex; color: var(--c-text-muted); }
.icon-link .icon { width: 1.1rem; height: 1.1rem; }
.icon-link--danger { color: var(--c-ko); }
.icon-link--danger:hover { opacity: .7; }

@media (max-width: 780px) {
  /* Une seule colonne : la zone de redaction repasse sous les messages. */
  .cols--thread { grid-template-columns: 1fr; }
  .compose { position: static; }
}

textarea { resize: vertical; min-height: 6rem; }