/* ============================================================
   Oxygène — SITE CLIENT (dataroom externe).

   Ce fichier n'est PAS un second design system. Il vient APRÈS
   `brand/brand.css`, qui reste la seule source de vérité pour les
   jetons (couleurs, échelle typographique, espacements, rayons,
   ombres, durées) et pour les composants communs (bouton, carte,
   panneau, tableau, pastille, champ, fil d'Ariane, état vide).

   Il ne contient que deux choses :

     1. une PORTÉE DE THÈME `.site-client` (posée sur <body>) où
        quelques jetons sont SURCHARGÉS — c'est ce qui donne au site
        client son registre propre (marque bleu nuit plus profonde que
        le bleu Oxygène de l'intranet), sans dupliquer un seul
        composant ;

     2. les composants réellement SPÉCIFIQUES à ce site, qui n'ont
        aucun équivalent dans l'intranet et n'ont rien à y faire :
        la coquille (bandeau + pied), l'écran d'entrée (carte claire
        sur fond bleu nuit), la connexion par code, l'arborescence
        dépliable, la visionneuse PDF.

   Règles tenues ici :
     · aucun hex en dur (une seule exception documentée : le gris de la
       chrome PDF.js, qui n'appartient pas à la charte) ;
     · aucun repli de `var()` — même origine, CSP stricte : si
       `brand.css` ne charge pas, la page n'a de toute façon aucun
       style, un repli ne protégerait de rien et dupliquerait la charte ;
     · aucune taille de police hors de l'échelle des jetons ;
     · aucune ressource externe (CSP `default-src 'self'`).
   ============================================================ */

/* ============================================================
   1. PORTÉE DE THÈME — ce qui distingue le site client
   ============================================================ */
.site-client {
  /* La marque du site client descend d'un cran dans la rampe bleue par rapport
     à l'intranet (`--blue-600`, le bleu Oxygène vif) : registre plus sobre,
     plus institutionnel, devant un avocat ou un notaire. Et son SURVOL FONCE
     au lieu de s'éclaircir — c'est le geste qui signe le ton du site client.
     Trois jetons surchargés suffisent à reteindre liens, boutons, titres de
     dossier et accents de saisie : AUCUNE définition de composant n'est
     dupliquée, elles restent toutes celles du système. */
  --color-brand:        var(--blue-700);   /* liens et surface de bouton */
  --color-brand-hover:  var(--blue-900);   /* le survol descend vers le bleu nuit */
  --color-brand-strong: var(--blue-900);   /* bleu nuit profond : titres, marqueurs */

  /* Largeur de lecture du site client. Volontairement plus étroite que
     `--container-max` de l'intranet (min(1440px, 92vw)) : une salle de
     documents se parcourt, elle ne se pilote pas — on ne veut pas d'une
     arborescence étalée sur 27 pouces. */
  --largeur-salle: 1080px;

  /* Fond de la chrome PDF.js. SEUL hex en dur du site client : ce gris
     n'appartient pas à la charte, il vient du visualiseur lui-même, et
     tout autre fond ferait un liseré visible autour de la page affichée. */
  --visionneuse-fond: #525659;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Titre de page du site client : `--fs-h2`, comme l'en-tête de page de
   l'intranet (`.page-head h1`) — pas le `--fs-h1` du hero, trop haut pour une
   salle de documents. Spécificité 0,1,1 : `.carte h1` (§4) et
   `.entete-piece h1` (§7), déclarés PLUS BAS à spécificité égale, l'emportent
   par ordre de source. */
.site-client h1 { font-size: var(--fs-h2); }

/* ============================================================
   2. COQUILLE — bandeau, contenu, pied
   L'intranet a `.topbar` / `.nav-main` / `.nav-user` : une autre
   coquille, pour un autre public. On ne les fusionne pas.
   ============================================================ */
.entete {
  background: var(--color-surface-inverse);
  color: var(--color-bg);
  padding: var(--space-3) var(--space-6);
  border-bottom: var(--border-accent) solid var(--ox-gold);
}
.entete-contenu {
  max-width: var(--largeur-salle);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
.marque {
  display: flex; align-items: center; gap: var(--space-3);
  font-weight: var(--fw-bold); letter-spacing: var(--ls-caps);
  font-size: var(--fs-body); min-width: 0;
}
.marque-logo { display: block; height: 18px; width: auto; }
.marque .nom-salle {
  font-weight: var(--fw-regular); color: var(--ox-gold);
  padding-left: var(--space-3);
  border-left: var(--border-hairline) solid color-mix(in oklab, var(--paper) 30%, transparent);
  overflow-wrap: anywhere; min-width: 0;
}
/* Identité du destinataire, sur le bandeau bleu nuit. `--gold-200` : le seul
   ton de la rampe or qui reste lisible sur `--blue-900` (mesuré 10,4:1) —
   remplace le `#d9d2c4` inventé qui n'appartenait à aucune rampe. */
.identite {
  display: flex; align-items: center; gap: var(--space-4);
  font-size: var(--fs-caption); color: var(--gold-200);
  min-width: 0; overflow-wrap: anywhere;
}
.identite a { color: var(--ox-gold); }
.identite a:hover { color: var(--ox-gold); text-decoration: underline; }

/* `main.contenu` (0,1,1) bat `main, .page` (0,0,1) de brand.css : largeur,
   marges et padding propres au site client, mais l'animation d'entrée
   `ox-rise` du système est conservée (et neutralisée par
   `prefers-reduced-motion`, déjà couvert dans brand.css). */
main.contenu {
  flex: 1 1 auto;
  max-width: var(--largeur-salle); width: 100%;
  margin: 0 auto; padding: var(--space-6);
}
.pied {
  background: var(--color-bg); text-align: center;
  padding: var(--space-4); font-size: var(--fs-caption);
  color: var(--text-muted);
  border-top: var(--border-hairline) solid var(--border-subtle);
}

/* ============================================================
   3. BANDEAU D'AVIS (confidentialité, messages Django)
   ============================================================ */
.avertissement {
  background: var(--color-surface);
  border: var(--border-hairline) solid var(--border-subtle);
  border-left: var(--border-accent) solid var(--ox-gold);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}
/* Canal de messages : couleur pleine, jamais la teinte atténuée par défaut —
   un motif de refus ou une confirmation d'envoi n'est pas une information
   secondaire. */
.avis-zone { margin-bottom: 0; }
.avis-zone .avertissement { margin-bottom: var(--space-4); color: var(--text-primary); }
.avertissement-erreur { border-left-color: var(--danger-600); color: var(--text-primary); }
.avertissement-succes { border-left-color: var(--success-600); }
.avertissement-attention { border-left-color: var(--ox-gold); }

/* ============================================================
   4. ÉCRAN D'ENTRÉE — connexion, accueil, erreurs, fin d'accès
   Fond bleu nuit, carte claire flottante : l'identité du site client,
   dès le premier contact. C'est délibéré et ça ne remonte pas dans
   le système partagé.
   ============================================================ */
body.ecran-centre { background: var(--blue-900); }
body.ecran-centre main.contenu {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--space-9) var(--space-4);
}
.carte {
  width: 100%; max-width: 26rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: var(--space-8) var(--space-7);
  text-align: center;
}
.carte .marque-carte {
  display: block; height: 26px; width: auto;
  margin: 0 auto var(--space-6);
}
/* Premier texte lu par un avocat ou un notaire : `--color-accent-text`
   (gold-900) et non l'or de surface — 6,75:1 sur blanc. */
.carte .sur-titre {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-text);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-1);
}
.carte h1 { font-size: var(--fs-h3); color: var(--color-brand-strong); margin: 0 0 var(--space-4); }
.carte p { color: var(--text-primary); font-size: var(--fs-body-sm); }
.carte p:last-child { margin-bottom: 0; }
.reassurance {
  text-align: center; color: var(--blue-100);
  font-size: var(--fs-caption); margin-top: var(--space-6);
}

/* ============================================================
   5. CONNEXION PAR CODE — spécifique au site client
   ============================================================ */
.carte form { text-align: left; }
.champ-connexion { margin-bottom: var(--space-5); }
.champ-connexion label {
  display: block; font-weight: var(--fw-semibold);
  color: var(--text-primary); margin-bottom: var(--space-2);
}
/* Les champs héritent du système (hauteur, filet, rayon, anneau de focus) ;
   seuls les écarts voulus ici : pleine largeur et fond papier, pour que la
   zone de saisie se détache de la carte blanche. */
.champ-connexion input {
  width: 100%; min-width: 0; height: auto;
  padding: var(--space-3) var(--space-3);
  background: var(--color-bg);
}
.champ-connexion input:focus { background: var(--color-surface); }
/* Code à 6 chiffres : chiffres espacés, centrés, chasse fixe. */
.champ-code input {
  letter-spacing: 0.5em; font-size: var(--fs-h3);
  text-align: center; font-variant-numeric: tabular-nums;
}
.carte form button.btn { width: 100%; }
.premiere-connexion {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  text-align: left;
  background: var(--blue-50);
  border-left: 3px solid var(--color-brand);
}
.premiere-connexion .etape-connexion {
  margin: 0 0 var(--space-1);
  color: var(--color-brand-strong);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.premiere-connexion h2 {
  margin: 0 0 var(--space-2);
  color: var(--color-brand-strong);
  font-size: var(--fs-h4);
}
.premiere-connexion p { margin: 0; }
.premiere-connexion .aide-numero {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-caption);
}
.lien-retour {
  display: block; text-align: center;
  margin-top: var(--space-4); font-size: var(--fs-caption);
}
/* Repli SMS : le bouton n'apparaît qu'après le délai posé par le serveur
   (`dataroom/connexion.js` lève l'attribut `hidden`). Rien ici ne doit
   redéfinir `display` sur `#repli-sms` — une règle `display:block` écraserait
   `hidden` et le bouton s'afficherait AUSSITÔT, ce qui vide le pack de SMS. */
.repli-sms-form { margin-top: var(--space-4); }
.repli-sms-form button.btn { width: 100%; }
.choix-renvoi {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-hairline) solid var(--border-default);
  text-align: left;
}
.choix-renvoi summary {
  color: var(--color-brand-strong);
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  text-align: center;
}
.choix-renvoi[open] summary { margin-bottom: var(--space-3); }
.choix-renvoi > p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  text-align: center;
}
.choix-renvoi .lien-retour { margin-top: var(--space-4); }
/* Bandeau d'état de la connexion (code envoyé / code refusé). Distinct de
   `.avertissement` : il vit DANS la carte, pas dans le flux de la page. */
.message-etat {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  text-align: left;
  border: var(--border-hairline) solid transparent;
}
.message-etat p { margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-snug); }
.message-etat.info {
  background: var(--blue-50); border-color: var(--blue-200); color: var(--blue-900);
}
.message-etat.erreur {
  background: var(--danger-100); border-color: var(--danger-600); color: var(--danger-600);
}

/* ============================================================
   5b. PORTAIL RACINE — choix d'une ou plusieurs datarooms
   ============================================================ */
.carte-portail { max-width: 48rem; text-align: left; }
.carte-portail > .marque-carte,
.carte-portail > .sur-titre,
.carte-portail > h1,
.carte-portail > .portail-introduction { text-align: center; }
.portail-introduction { margin: 0 0 var(--space-6); }
.liste-acces {
  display: grid; gap: var(--space-3);
  margin-top: var(--space-6);
}
.acces-dataroom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.acces-dataroom-informations { min-width: 0; }
.acces-dataroom h2 {
  margin: 0 0 var(--space-1);
  color: var(--color-brand-strong);
  font-size: var(--fs-h4);
  overflow-wrap: anywhere;
}
.acces-dataroom .acces-droit,
.acces-dataroom .acces-expiration {
  margin: 0;
  font-size: var(--fs-caption);
}
.acces-dataroom .acces-droit { color: var(--text-primary); font-weight: var(--fw-semibold); }
.acces-dataroom .acces-expiration { color: var(--text-muted); margin-top: var(--space-1); }
.acces-dataroom form { margin: 0; flex: 0 0 auto; }
.acces-dataroom form button.btn { width: auto; white-space: nowrap; }
@media (max-width: 36rem) {
  .acces-dataroom { align-items: stretch; flex-direction: column; }
  .acces-dataroom form button.btn { width: 100%; }
}

/* ============================================================
   6. SALLE — recherche, sélection, arborescence dépliable
   ============================================================ */
.barre-recherche { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.barre-recherche input[type="search"] { flex: 1 1 auto; min-width: 0; }
.contexte-recherche {
  color: var(--text-muted); font-size: var(--fs-body-sm); margin: 0 0 var(--space-4);
}
.disponibilite-info {
  color: var(--text-muted); font-size: var(--fs-body-sm); margin: 0 0 var(--space-4);
}
.barre-selection {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  background: var(--color-surface);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--fs-body-sm);
}
#resume-selection { color: var(--text-muted); }

ul.arbre-niveau {
  list-style: none; margin: 0; padding-left: var(--space-4);
  border-left: var(--border-hairline) solid var(--border-subtle);
  min-width: 0;
}
ul.arbre-niveau:first-child { padding-left: 0; border-left: none; }
li.arbre-dossier { margin: var(--space-2) 0; min-width: 0; }
li.arbre-dossier > details { margin: 0; min-width: 0; }
li.arbre-dossier summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1);
  font-weight: var(--fw-semibold); color: var(--color-brand-strong);
  padding: var(--space-1) 0; min-width: 0;
}
li.arbre-dossier summary::-webkit-details-marker { display: none; }
/* Chevron : dingbat monochrome, hérite de la couleur — jamais un emoji. */
li.arbre-dossier summary::before {
  content: "\25B8"; color: var(--text-muted);
  font-size: var(--fs-micro); font-weight: var(--fw-regular);
}
li.arbre-dossier > details[open] > summary::before { content: "\25BE"; }
/* Noms de dossiers SharePoint SANS ESPACE (points/tirets) : sans point de
   rupture naturel, `overflow-wrap: anywhere` autorise la coupure plutôt que
   de laisser le mot pousser le conteneur hors du viewport. */
.arbre-dossier-nom { overflow-wrap: anywhere; min-width: 0; }
.arbre-dossier-info {
  font-weight: var(--fw-regular); color: var(--text-muted); font-size: var(--fs-caption);
}
li.arbre-piece {
  margin: var(--space-1) 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  min-width: 0;
}
li.arbre-piece a {
  text-decoration: none; display: flex; align-items: baseline;
  flex-wrap: wrap; gap: var(--space-1); min-width: 0; flex: 1 1 auto;
}
li.arbre-piece a:hover .piece-nom { text-decoration: underline; }
.piece-numero {
  color: var(--text-muted); font-variant-numeric: tabular-nums;
  font-size: var(--fs-caption); flex-shrink: 0;
}
.piece-nom { overflow-wrap: anywhere; min-width: 0; }
.piece-taille {
  color: var(--text-muted); font-size: var(--fs-caption);
  margin-left: auto; flex-shrink: 0; white-space: nowrap;
}
input.case-dossier, input.case-piece {
  accent-color: var(--color-brand-strong); cursor: pointer; flex-shrink: 0;
}
/* Marqueur « nouveau » : volontairement PLUS SONORE que `.pastille.or` du
   système — c'est le seul signal de la page qui doit accrocher l'œil d'un
   destinataire qui revient. Fond or plein, texte encre (7,8:1). */
.etiquette-nouveau {
  background: var(--ox-gold); color: var(--text-on-gold);
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  padding: 0 var(--space-1); border-radius: var(--radius-xs);
  white-space: nowrap;
}
li.arbre-piece-indisponible { opacity: 0.55; }
/* Pas d'italique : l'opacité réduite et la couleur atténuée suffisent. */
.etiquette-indisponible {
  color: var(--text-muted); font-size: var(--fs-micro); white-space: nowrap;
}

/* Retraits compacts + cibles tactiles sous 640 px : cinq niveaux de dossiers
   imbriqués ne doivent pas cumuler 5 × 16 px d'indentation sur un viewport de
   375 px ; chaque case à cocher et chaque lien de pièce doit offrir 44 px de
   hauteur effective. */
@media (max-width: 640px) {
  ul.arbre-niveau { padding-left: var(--space-2); }
  li.arbre-dossier { margin: var(--space-1) 0; }
  .arbre-dossier-info { font-size: var(--fs-micro); }
  li.arbre-dossier summary { min-height: 44px; padding: var(--space-1) 0; }
  li.arbre-piece a { min-height: 44px; padding: var(--space-1) 0; align-items: center; }
  input.case-dossier, input.case-piece { width: 1.35rem; height: 1.35rem; }
}

/* ============================================================
   7. PIÈCE — en-tête, visionneuse PDF.js, aperçu image, repli
   ============================================================ */
.entete-piece {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4);
}
.entete-piece > div { min-width: 0; }
.entete-piece h1 {
  margin: 0 0 var(--space-1);
  word-break: break-word; overflow-wrap: anywhere;
  font-size: var(--fs-h3); min-width: 0;
}
.entete-piece .chemin { color: var(--text-muted); font-size: var(--fs-caption); }
.actions-piece { display: flex; gap: var(--space-2); flex-shrink: 0; }
iframe.visionneuse {
  width: 100%; height: 78vh;
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--visionneuse-fond);
}
/* Portrait mobile : 78vh laisse trop peu de place à l'en-tête et aux boutons
   au-dessus du visualiseur. */
@media (max-width: 640px) {
  iframe.visionneuse { height: 65vh; }
}
img.apercu-image {
  max-width: 100%; display: block;
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.repli {
  background: var(--color-surface);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-7); text-align: center; color: var(--text-muted);
}