/* Portail consultants NEST.
   La forme suit la marque : bleu ardoise du logo, trait noir, fond clair.
   Tout est ici, aucune regle en ligne : la politique de securite de la page
   interdit les styles inseres dans le HTML. */

:root {
  --encre: #161D20;
  --texte: #2C3639;
  --gris: #5A666B;
  --efface: #7A868A;
  --fond: #F5F7F7;
  --surface: #FFFFFF;
  --trait: #E3E8E9;
  --trait-fin: #EDF0F1;
  --bord-champ: #D4DBDD;
  --marque: #4C7F97;
  --marque-fonce: #2E6178;
  --marque-pale: #E6EEF2;
  --petrole: #17384A;
  --petrole-clair: #A9C1CB;
  --attente-fond: #FBF1DC; --attente-texte: #87590A;
  --corriger-fond: #FBE4DD; --corriger-texte: #A03318;
  --validee-fond: #DFEAEF; --validee-texte: #2A5A70;
  --payee-fond: #DDEEE4; --payee-texte: #1E6647;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background: var(--fond);
  color: var(--encre);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; }
a { color: var(--marque-fonce); }

.chargement { padding: 60px 44px; color: var(--gris); font-size: 16px; }

/* --- Connexion ----------------------------------------------------------- */
/* La meme forme que le portail client : deux colonnes, le volet illustre
   porte la marque, la colonne blanche ne porte que le formulaire. Sous 900px
   le volet passe au-dessus, reduit. */
.accueil { min-height: 100vh; display: grid; grid-template-columns: 46% 54%; }
.volet {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 52px 56px;
  background: var(--petrole);
}
.volet-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.volet-logo, .volet-bas { position: relative; z-index: 2; }
.volet-logo { width: 310px; max-width: 78%; height: auto; display: block; }
.accroche {
  /* Une seule taille pour les deux portails, et la garantie de tenir sur deux
     lignes a toutes les largeurs. Le <br> coupe la phrase en deux, mais rien
     n'empechait chaque moitie d'etre trop large pour le volet et de se
     recouper : a 1280px le titre passait a trois lignes, a 1100px aussi.
     40px est la taille voulue ; 2.1vw la reprend des que le volet retrecit.
     Mesure a l'appui : la moitie la plus longue tient si la police ne depasse
     pas la largeur du volet divisee par 14,8. 2.1vw reste sous cette limite
     de 901px — ou la mise en page bascule en colonne — jusqu'aux tres grands
     ecrans, ou le plafond de 40px prend le relais. */
  font-size: min(40px, 2.1vw); line-height: 1.16; font-weight: 700;
  color: #FFFFFF; letter-spacing: -0.025em;
}
.volet-trait { display: block; width: 54px; height: 3px; background: #FFFFFF; opacity: .5; margin: 26px 0 20px; }
.volet-note { font-size: 15px; line-height: 1.6; color: #FFFFFF; opacity: .82; max-width: 34ch; }
.volet-form {
  position: relative; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 40px 82px;
}
.carte-connexion { width: 390px; max-width: 100%; }
.carte-connexion.large { width: 520px; }
.carte-connexion h1 { font-size: 30px; }
.carte-connexion .intro { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--gris); }
.accueil-pied { position: absolute; bottom: 28px; font-size: 12.5px; color: var(--efface); }

@media (max-width: 900px) {
  .accueil { grid-template-columns: 1fr; }
  .volet { min-height: 250px; padding: 30px 26px 34px; gap: 30px; }
  .volet-logo { width: 206px; }
  .accroche { font-size: 27px; }
  .volet-trait, .volet-note { display: none; }
  .volet-form { padding: 44px 26px 76px; }
  .carte-connexion, .carte-connexion.large { width: 100%; }
}

/* --- La vérification en deux étapes --------------------------------------- */
.etapes-2fa { margin: 18px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.etapes-2fa li { font-size: 15px; line-height: 1.5; color: var(--texte, var(--encre)); }
.qr { margin: 22px 0 6px; display: flex; justify-content: center; }
.qr svg { display: block; border: 1px solid var(--trait); border-radius: 12px; padding: 10px; background: #FFFFFF; }
.sans-camera { margin-top: 14px; font-size: 14px; color: var(--gris); }
.sans-camera summary { cursor: pointer; font-weight: 600; color: var(--marque-fonce); }
.sans-camera p { margin-top: 10px; line-height: 1.55; }
.secret {
  display: block; margin-top: 8px; padding: 12px 14px;
  background: var(--marque-pale); border-radius: 9px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px; letter-spacing: .06em; word-break: break-all; color: var(--encre);
}
#code2fa, #code-sec {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 22px; letter-spacing: .3em; text-align: center;
}
.codes-secours {
  margin: 20px 0 24px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.codes-secours code {
  padding: 12px; text-align: center;
  background: var(--marque-pale); border-radius: 9px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 16px; letter-spacing: .08em; color: var(--encre);
}

/* --- Le réglage de sécurité, en bas de la page des missions --------------- */
.securite {
  margin-top: 40px; padding: 26px 28px;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 14px;
}
.securite-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
/* La pastille reste sur la première ligne du texte : centrée, elle flotterait
   au milieu d'un paragraphe replié sur trois lignes en petite largeur. */
.securite .info { margin-top: 7px; font-size: 14.5px; color: var(--gris); display: flex; align-items: flex-start; gap: 8px; }
.securite .info .pastille-etat { margin-top: 7px; }
.securite .note { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--gris); }
.securite .qr { justify-content: flex-start; }
.securite form.pile.etroit { max-width: 320px; }
.rangee-boutons { display: flex; align-items: center; gap: 18px; }
/* Sur les écrans de dépôt, la rangée de boutons suivait la zone de fichier
   sans respirer : le bouton semblait collé au cadre vert, et sa taille pleine
   écrasait le reste d'un écran qui ne contient qu'un champ. */
.etroite .rangee-boutons { margin-top: 22px; }
/* Sépare les deux sujets de l'écran Sécurité : le second facteur, et le mot
   de passe. */
.securite .filet { border: 0; border-top: 1px solid var(--trait-fin); margin: 26px 0 22px; }
.pastille-etat {
  width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%;
  background: #C6D0D4;
}
.pastille-etat.active { background: #2F8F62; }

/* --- L'écusson du client -------------------------------------------------- */
.ecusson {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 11px; background: var(--surface); border: 1px solid var(--trait);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ecusson img { max-width: 30px; max-height: 24px; display: block; }
.ecusson.vide {
  background: var(--marque-pale); border-color: #D6E3E9;
  font-size: 15px; font-weight: 800; color: var(--marque-fonce);
}
.entete-titre { display: flex; align-items: flex-start; gap: 14px; }

form.pile { margin-top: 26px; display: flex; flex-direction: column; gap: 20px; }
form.formulaire { display: flex; flex-direction: column; gap: 18px; }
/* 6px entre l'intitule et son champ, 18px entre deux champs : c'est ce qui
   fait qu'un intitule appartient visiblement au champ qui le suit. */
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label, .etiquette { font-size: 14px; font-weight: 600; color: var(--texte); }
.champ .aide { font-size: 13px; color: var(--gris); }
/* Une mention qui suit son intitule sur la meme ligne, sans peser. */
.mention-legere { font-size: 13px; font-weight: 500; color: var(--gris); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid var(--bord-champ);
  border-radius: 9px;
  background: var(--surface);
  font-family: inherit;
  font-size: 16px;
  color: var(--encre);
}
textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--marque); outline-offset: 2px;
}
input[type="file"] { font-family: inherit; font-size: 14px; color: var(--texte); }

.bouton, button.bouton {
  min-height: 52px; padding: 0 26px;
  border: none; border-radius: 9px;
  background: var(--marque-fonce); color: #FFFFFF;
  font-family: inherit; font-size: 16px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer;
}
.bouton:hover { background: #244E61; }
.bouton.second {
  background: var(--surface); color: var(--encre);
  border: 1px solid var(--bord-champ); font-weight: 600;
}
.bouton.second:hover { background: #F2F5F5; }
.bouton.petit { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
.bouton[disabled] { opacity: 0.55; cursor: default; }

.lien-discret {
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--marque-fonce); cursor: pointer; text-decoration: none;
}
.lien-discret:hover { text-decoration: underline; }

.message { margin-top: 18px; font-size: 15px; line-height: 1.55; border-radius: 9px; padding: 13px 16px; }
.message.erreur { background: var(--corriger-fond); color: var(--corriger-texte); }
.message.succes { background: var(--payee-fond); color: var(--payee-texte); }
.message.vide { display: none; }

.pied-carte {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--trait-fin);
  font-size: 14px; line-height: 1.6; color: var(--gris);
}

/* --- Barre du haut ------------------------------------------------------- */
.barre {
  background: var(--surface);
  border-bottom: 1px solid var(--trait);
  padding: 0 44px;
  min-height: 74px;
  display: flex; align-items: center; gap: 44px; flex-wrap: wrap;
}
.barre-marque { display: flex; align-items: center; gap: 12px; }
.barre-marque img { height: 38px; width: auto; display: block; }
.barre-marque span { font-size: 15px; font-weight: 700; letter-spacing: 0.16em; }
.barre nav { display: flex; align-items: center; gap: 30px; align-self: stretch; }
.barre nav a {
  display: inline-flex; align-items: center;
  border-bottom: 3px solid transparent;
  color: var(--gris); font-size: 16px; font-weight: 500; text-decoration: none;
  padding: 24px 0 21px;
}
.barre nav a.actif { border-bottom-color: var(--marque); color: var(--encre); font-weight: 700; }
.barre-moi { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.pastille {
  width: 38px; height: 38px; border-radius: 19px;
  background: var(--marque); color: #FFFFFF;
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.barre-moi .nom { font-size: 15px; font-weight: 600; }
/* Le réglage du second facteur : discret quand il est en place, un peu plus
   present quand il ne l'est pas encore. */
.lien-2fa {
  font-size: 13px; font-weight: 600; text-decoration: none;
  padding: 5px 11px; border-radius: 999px;
  color: var(--marque-fonce); background: var(--marque-pale);
  border: 1px solid #D6E3E9; white-space: nowrap;
}
.lien-2fa:hover { background: #DCE9EF; }
.lien-2fa.posee {
  color: #1F6B4A; background: #E4F1EA; border-color: #CBE3D6;
}
.barre-moi button { font-size: 14px; color: var(--gris); font-weight: 500; }

/* --- Pages --------------------------------------------------------------- */
/* L'espace entre deux blocs de la page. Il s'ajoute aux marges de chacun :
   le monter au-dela de 18px suffit a faire flotter un titre loin de ce
   qu'il annonce. */
.page { padding: 34px 44px 52px; display: flex; flex-direction: column; gap: 18px; }
.page h1 { font-size: 38px; }
.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.entete .compte { margin-top: 10px; font-size: 16px; color: var(--gris); }
.etiquettes + h1, .etiquettes + h2 { margin-top: 14px; }
.fil { font-size: 14px; color: var(--gris); }
.fil a { text-decoration: none; font-weight: 600; }
.fil .sep { color: #A7B2B6; padding: 0 4px; }
.note { font-size: 15px; line-height: 1.6; color: var(--gris); }
/* La politique de securite de la page refuse tout style ecrit dans le HTML :
   ces trois classes remplacent des attributs style= qui, eux, n'ont jamais
   rien fait. Le balayage des ecrans signale desormais ces refus. */
.espace { margin-top: 20px; }
.etroite { max-width: 640px; }
.note.chapeau { margin-top: 0; }
.note.sous-titre { margin: 6px 0 20px; }

.filtre { display: flex; align-items: center; gap: 10px; }
.filtre label { font-size: 14px; font-weight: 600; color: var(--gris); }
.filtre select { width: auto; min-height: 44px; padding: 0 14px; font-size: 15px; font-weight: 500; }

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 16px;
  padding: 26px 30px;
}
/* --- Les onglets d'une fiche mission -------------------------------------- */
/* Le trait sous l'onglet actif est la seule marque : pas de fond, pas de
   cadre. Le compteur dit tout de suite s'il y a quelque chose derrière. */
.onglets { display: flex; gap: 26px; border-bottom: 1px solid var(--trait); margin: 24px 0; flex-wrap: wrap; }
.onglets a {
  padding: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--gris);
  text-decoration: none; border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.onglets a:hover { color: var(--encre); }
.onglets a .nb {
  margin-left: 7px; font-size: 12px; font-weight: 700; color: var(--marque-fonce);
  background: var(--marque-pale); border-radius: 999px; padding: 2px 7px;
}
/* Le rond passe au rouge dès qu'il manque une pièce : le chiffre dit combien
   de documents sont là, la couleur dit s'il y a à faire. Rouge et pas orange —
   un dossier incomplet bloque un paiement, ce n'est pas un avertissement. */
.onglets a .nb.alerte { color: var(--corriger-texte); background: var(--corriger-fond); }
.onglets a.actif { color: var(--encre); border-bottom-color: var(--marque); }

/* --- L'accueil ------------------------------------------------------------ */
.salut { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 2px; }
.salut h1 { font-size: 32px; letter-spacing: -.02em; }
.salut p { margin-top: 5px; font-size: 15px; color: var(--gris); }

/* Les trois tuiles : le même gabarit pour les trois, quelle que soit la
   longueur du chiffre — sinon la rangée se lit en escalier. */
.tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 8px; }
/* Quatre tuiles sur l'accueil : missions, à valider, à payer, payé. Les deux
   montants du milieu ne doivent surtout pas être additionnés — une facture
   déposée n'est pas encore de l'argent dû. */
.tuiles.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Quatre tuiles sont plus étroites que trois : « 68 000 MAD HT » s'y coupait
   en deux, le « HT » tombant sur la ligne suivante. Le montant y est un peu
   plus petit, et il ne se coupe plus. Mesuré à 1280 px. */
.tuiles.quatre .tuile .valeur { font-size: 23px; white-space: nowrap; }
.tuiles.quatre .tuile .valeur .unite { font-size: 13px; }
.tuile {
  background: var(--surface); border: 1px solid var(--trait); border-radius: 14px;
  padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px;
}
.tuile .rond {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px;
  background: var(--marque-pale); color: var(--marque-fonce);
  display: flex; align-items: center; justify-content: center;
}
/* Rouge seulement s'il y a vraiment quelque chose à corriger : une tuile
   d'alerte allumée en permanence ne veut plus rien dire. */
.tuile.alerte { border-color: #EED9D2; }
.tuile.alerte .rond { background: #FBE4DD; color: #A03318; }
.tuile.alerte .valeur { color: #A03318; }
/* Orange tant qu'il reste quelque chose à encaisser, vert une fois réglé.
   Comme pour l'alerte rouge : la couleur ne s'allume que si elle dit
   quelque chose. Zéro en attente, la tuile reste neutre. */
.tuile.attente .rond { background: #FDEBD8; color: #9A5B12; }
.tuile.attente .valeur { color: #9A5B12; }
.tuile.valide .rond { background: var(--validee-fond); color: var(--validee-texte); }
.tuile.valide .valeur { color: var(--validee-texte); }
.tuile.regle .rond { background: #DFF0E3; color: #1E6B38; }
.tuile.regle .valeur { color: #1E6B38; }
.tuile .valeur { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
/* Le cabinet suit le prénom sans lui voler la vedette. */
.salut h1 .cabinet { font-weight: 500; color: var(--gris, #6b7a83); font-size: .62em; }
.tuile .valeur .unite { font-size: 14px; font-weight: 600; color: var(--gris); }
.tuile .quoi { margin-top: 3px; font-size: 13.5px; color: var(--gris); }
.tuile .vers {
  margin-top: 9px; font-size: 13px; font-weight: 600;
  color: var(--marque-fonce); text-decoration: none; display: inline-block;
}
.tuile .vers:hover { text-decoration: underline; }

/* Le titre colle a ses cartes : on annule le gap de la page sous lui,
   sinon « Mes missions en cours » flotte a 32px de la premiere carte. */
.titre-section { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin: 6px 0 -6px; }

/* Les tuiles de l'accueil, en grand : ce sont elles qui portent la page, il
   n'y a plus rien d'autre au-dessus du bloc de contact. */
.tuiles.grandes .tuile { padding: 24px 26px; gap: 16px; align-items: center; }
.tuiles.grandes .rond { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 13px; }
.tuiles.grandes .rond svg { width: 24px; height: 24px; }
.tuiles.grandes .valeur { font-size: 32px; }
.tuiles.grandes .valeur .unite { font-size: 15px; }
.tuiles.grandes .quoi { font-size: 14.5px; margin-top: 4px; }
.tuiles.grandes .vers { margin-top: 10px; font-size: 13.5px; }

/* Le bandeau d'action. Il n'est dans la page que s'il y a quelque chose a
   faire : sinon l'accueil n'affiche que des faits. */
.action {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; border-radius: 14px;
  background: #FDF1EE; border: 1px solid #EED9D2;
}
.action .rond {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
  background: #FBE4DD; color: #A03318;
  display: flex; align-items: center; justify-content: center;
}
.action .corps { flex-grow: 1; min-width: 220px; }
.action .quoi { font-size: 15px; font-weight: 700; color: #8C3521; }
.action .detail { margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: #7A5B53; }
.bouton.rouge { background: #A03318; }
.bouton.rouge:hover { background: #8C3521; }

/* Le bloc de contact, en bas : la sortie de secours quand rien dans l'écran
   ne répond à la question qu'on se pose. */
.bloc-aide {
  margin-top: 12px; padding: 18px 22px; border-radius: 14px;
  background: var(--marque-pale); border: 1px solid #D6E3E9;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.bloc-aide .corps { flex-grow: 1; min-width: 200px; }
.bloc-aide .corps .nom { font-size: 15px; font-weight: 700; }
.bloc-aide .corps .info { margin-top: 3px; font-size: 13.5px; color: var(--gris); }

.cartes { display: flex; flex-direction: column; gap: 14px; }
/* Chaque carte a la hauteur de son contenu : etirer la carte de contact a la
   hauteur du detail lui laissait un grand vide en bas. */
.colonnes { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.colonnes > .large { flex: 1 1 420px; }
.colonnes > .etroite { flex: 0 1 350px; }

.titre-bloc {
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gris);
}

/* Une mission dans la liste */
.mission {
  display: flex; align-items: center; gap: 36px; flex-wrap: wrap;
  text-decoration: none; color: var(--encre);
}
.mission:hover { border-color: var(--marque); }
.mission > .ecusson { align-self: flex-start; margin-top: 2px; }
.mission { gap: 22px; }
.mission .corps { flex: 1 1 320px; }
.mission h2 { font-size: 26px; margin-top: 14px; }
.mission .dates { margin-top: 10px; font-size: 15px; color: var(--gris); }
.mission .tjm {
  flex: 0 0 auto; text-align: right;
  padding-left: 36px; border-left: 1px solid var(--trait-fin);
}
.mission .tjm .valeur { font-size: 26px; font-weight: 700; margin-top: 6px; }
.tjm .unite { font-size: 15px; font-weight: 600; color: var(--gris); }
.tjm .etiquette-tjm {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gris);
}

.etiquettes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.puce {
  font-size: 14px; font-weight: 600;
  border-radius: 7px; padding: 5px 12px;
  background: var(--marque-pale); color: var(--marque-fonce);
}
.puce.contour { background: var(--surface); color: var(--texte); border: 1px solid var(--bord-champ); padding: 4px 11px; }
.puce.neutre { background: #EDF0F1; color: var(--texte); }
.puce.encours { background: var(--payee-fond); color: var(--payee-texte); }
.puce.finie { background: #EDF0F1; color: var(--gris); }
.puce.attente { background: var(--attente-fond); color: var(--attente-texte); }
.puce.corriger { background: var(--corriger-fond); color: var(--corriger-texte); }
.puce.validee { background: var(--validee-fond); color: var(--validee-texte); }
.puce.payee { background: var(--payee-fond); color: var(--payee-texte); }
.mention { font-size: 13.5px; color: var(--gris); }

/* Lignes libellé / valeur */
.lignes { margin-top: 10px; }
.ligne {
  display: flex; justify-content: space-between; gap: 16px;
  align-items: baseline; padding: 14px 0;
  border-bottom: 1px solid var(--trait-fin);
}
.ligne:last-child { border-bottom: none; }
.ligne .cle { font-size: 15px; color: var(--gris); }
.ligne .val { font-size: 16px; font-weight: 600; text-align: right; }
.ligne .val.gros { font-size: 26px; font-weight: 700; }
.ligne .val.pale { font-weight: 400; color: var(--efface); }

/* Carte contact, en fond sombre */
.contact { background: var(--petrole); border: none; color: #FFFFFF; }
.contact .titre-bloc { color: var(--petrole-clair); }
.contact .qui { margin-top: 22px; display: flex; align-items: center; gap: 14px; }
.contact .qui .pastille { width: 48px; height: 48px; border-radius: 24px; font-size: 16px; }
.contact .qui .nom { font-size: 18px; font-weight: 700; }
.contact .qui .role { font-size: 14px; color: var(--petrole-clair); margin-top: 2px; }
.contact .coordonnees { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.contact .coordonnees .cle { font-size: 13px; color: var(--petrole-clair); }
.contact .coordonnees .val { font-size: 15px; margin-top: 3px; word-break: break-word; }
.contact a { color: #FFFFFF; }

/* Documents */
.doc { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--trait-fin); }
.doc:last-child { border-bottom: none; }
.doc svg { flex-shrink: 0; }
.doc .corps { flex-grow: 1; min-width: 0; }
.doc .nom { font-size: 16px; font-weight: 600; word-break: break-word; }
.doc .info { font-size: 14px; color: var(--gris); margin-top: 2px; }

/* Le dossier administratif : une liste FIXE, dont les lignes restent
   affichées même quand la pièce manque. Trois colonnes — le document, son
   état, ce qu'on peut en faire — pour que l'œil descende la colonne du
   milieu et voie d'un coup ce qui reste à fournir. */
.pieces { margin-top: 12px; border-top: 1px solid var(--trait-fin); }
.piece {
  /* La troisième colonne est FIXE, pas « auto ». En auto, elle prenait la
     largeur de ses boutons — deux sur une ligne, un seul sur une autre, aucun
     sur celle du contrat — et la colonne du milieu se décalait d'une ligne à
     l'autre. Les « Reçu » ne s'alignaient plus. Largeur fixe : tout tombe au
     même endroit, quelle que soit la ligne. */
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) 250px;
  align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--trait-fin);
}
.piece:last-child { border-bottom: none; }
.piece .piece-nom .nom { font-size: 16px; font-weight: 600; }
/* Pour quelle mission : le contrat en a une, les quatre autres pièces non. */
.piece .piece-nom .pour { font-size: 13.5px; color: var(--marque-fonce); font-weight: 600; margin-top: 3px; }
.piece .piece-nom .info { font-size: 13.5px; color: var(--gris); margin-top: 3px; word-break: break-word; }
.piece .marque { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.piece .marque svg { flex-shrink: 0; }
.piece .detail { font-size: 13.5px; color: var(--gris); margin-top: 4px; }
.piece-actions { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }

/* La couleur ne porte jamais l'information seule : chaque état a son icône
   et sa phrase. Un daltonien lit la même chose. */
.piece.ok .marque { color: var(--payee-texte); }
/* Un document manquant se voit en rouge, comme une attestation périmée : dans
   les deux cas il manque quelque chose pour pouvoir payer. */
.piece.manquant .marque { color: var(--corriger-texte); }
.piece.attention .marque { color: var(--attente-texte); }
.piece.perime .marque { color: var(--corriger-texte); }

@media (max-width: 720px) {
  .piece { grid-template-columns: 1fr; gap: 8px; }
  .piece-actions { justify-content: flex-start; }
  /* Une ligne de document porte jusqu'a quatre choses : l'icone, le libelle,
     l'etiquette d'etat et le lien. Sur un telephone, les trois dernieres se
     disputaient les memes 300 pixels et le libelle finissait coupe lettre par
     lettre, une par ligne. Le libelle prend donc toute la premiere ligne, et
     l'etiquette passe dessous. Mesure a 390 px. */
  .doc { flex-wrap: wrap; row-gap: 8px; }
  .doc .corps { flex: 1 1 calc(100% - 34px); }
}

/* Factures */
.compteurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.compteur {
  background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 20px 22px;
  font: inherit; text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.compteur:hover { border-color: var(--marque); }
.compteur:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; }
/* Le filtre actif se voit au trait, pas à la couleur : les chiffres portent
   déjà celle de leur état. */
.compteur.choisi { border-color: var(--marque); box-shadow: inset 0 0 0 1px var(--marque); }
.compteur .nb { font-size: 32px; font-weight: 700; }
.compteur .quoi { font-size: 15px; font-weight: 600; color: var(--gris); margin-top: 4px; }
.compteur.attente .nb { color: var(--attente-texte); }
.compteur.corriger .nb { color: var(--corriger-texte); }
.compteur.validee .nb { color: var(--validee-texte); }
.compteur.payee .nb { color: var(--payee-texte); }

.facture { border-radius: 14px; padding: 22px 28px; }
.facture.aCorriger { border-color: #EED9D2; }
/* Une grille, pas une rangee souple : les colonnes chiffres et statut gardent
   la meme largeur d'une facture a l'autre, quel que soit le nombre de jours,
   le montant, la presence du PDF ou la longueur du libelle. C'est ce qui fait
   que la liste se lit en colonne et non en escalier. */
.facture .haut {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px 148px 82px 112px;
  align-items: center;
  column-gap: 20px;
}
.facture .periode { min-width: 0; }
.facture .periode .mois { font-size: 18px; font-weight: 700; }
.facture .periode .quelle { font-size: 14px; color: var(--gris); margin-top: 3px; }
.facture .chiffre { text-align: right; }
.facture .chiffre .gros { font-size: 22px; font-weight: 700; }
.facture .chiffre .moyen { font-size: 17px; font-weight: 600; }
.facture .chiffre .quoi { font-size: 13px; color: var(--gris); margin-top: 2px; }
.facture .pdf { text-align: right; font-size: 14px; }
/* Toutes les pastilles font la meme largeur : « Payée » et « En attente »
   s'alignent au lieu de flotter chacune a sa taille. */
.facture .haut > .puce { justify-self: stretch; text-align: center; white-space: nowrap; }
.motif {
  margin-top: 18px; background: #FDF4F1; border-radius: 12px; padding: 18px 20px;
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
}
.motif svg { flex-shrink: 0; margin-top: 2px; }
.motif .corps { flex: 1 1 320px; }
.motif .quoi { font-size: 14.5px; font-weight: 700; color: var(--corriger-texte); }
.motif p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: #33403F; }

/* Dépôt d'une facture */
.recap { background: #F1F5F6; border: 1px solid #DDE6E9; border-radius: 12px; padding: 18px 22px; }
.recap .titre { font-size: 18px; font-weight: 700; }
.recap .sous { font-size: 15px; color: var(--gris); margin-top: 3px; }
/* Le montant reste sur la ligne de son intitule, meme sur telephone : le
   laisser passer a la ligne ajoutait une hauteur pour rien. */
.total {
  background: var(--petrole); border-radius: 12px; padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.total > div:first-child { min-width: 0; }
.total .quoi { font-size: 14px; font-weight: 700; color: #FFFFFF; }
.total .calcul { font-size: 14px; color: var(--petrole-clair); margin-top: 4px; }
.total .somme { font-size: 32px; font-weight: 700; color: #FFFFFF; }
.deux { display: flex; gap: 16px; flex-wrap: wrap; }
.deux > * { flex: 1 1 200px; }
.deux > .court { flex: 0 1 180px; }
.depot {
  border: 2px dashed #CFD9DC; border-radius: 12px; padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: #FAFCFC; text-align: center; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.depot:hover { border-color: var(--marque); }
.depot:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; }
/* Pendant qu'un fichier survole la zone : elle doit se voir sans hésitation,
   sinon on lâche le fichier à côté et le navigateur ouvre le PDF. */
.depot.survol { border-color: var(--marque); background: var(--marque-pale); }
.depot.rempli { border-style: solid; border-color: #C6DACD; background: #F4F9F6; cursor: default; }
.depot-vide { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* Sans ceci, le display: flex l'emporte sur l'attribut hidden et les deux
   blocs s'affichent l'un sous l'autre. */
.depot-vide[hidden], .depot-plein[hidden] { display: none; }
.depot-phrase { font-size: 15px; color: var(--encre); }
.depot-phrase .souligne { color: var(--marque-fonce); font-weight: 600; text-decoration: underline; }
.depot-plein { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; }
.depot-plein .corps { flex-grow: 1; min-width: 0; }
.depot-plein .nom { font-size: 15px; font-weight: 600; word-break: break-word; }
.depot-plein .info { font-size: 13px; color: var(--gris); margin-top: 2px; }
.titre-champ { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }

/* Les compteurs servent aussi de filtres : ce sont des boutons, ils doivent
   s'annoncer comme tels sans pour autant ressembler à des boutons d'action. */
.barre-filtres {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 18px 0 14px;
}
.barre-filtres .combien { font-size: 14px; color: var(--gris); font-weight: 600; }
.filtre-mission { font-size: 14px; color: var(--gris); display: inline-flex; align-items: center; gap: 8px; }
.filtre-mission select { height: 32px; font-size: 14px; max-width: 280px; }
.etapes { margin-top: 20px; display: flex; flex-direction: column; gap: 20px; }
.etape { display: flex; gap: 15px; align-items: flex-start; }
.etape .num {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 15px;
  background: var(--marque-pale); color: var(--marque-fonce);
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.etape p { font-size: 15px; line-height: 1.55; color: #33403F; }
.liste-verif { margin: 18px 0 0; padding-left: 19px; display: flex; flex-direction: column; gap: 11px; }
.liste-verif li { font-size: 15px; line-height: 1.5; color: #33403F; }
.actions { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--trait-fin); padding-top: 24px; flex-wrap: wrap; }

.vide { font-size: 16px; line-height: 1.6; color: var(--gris); }

@media (max-width: 1100px) {
  /* Quatre tuiles sur une ligne deviennent illisibles en dessous de 1100 px :
     elles passent sur deux rangées de deux. Mesuré. */
  .tuiles.quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .barre { padding: 12px 20px; gap: 18px; }
  .barre nav a { padding: 10px 0; }
  /* Quatre entrees de menu ne tiennent pas en une ligne sur un telephone :
     sans ce repli, la barre depasse et c'est toute la page qui se met a
     defiler lateralement. Mesure a 390 px, la largeur d'un iPhone. */
  .barre nav { gap: 20px; flex-wrap: wrap; row-gap: 0; }
  /* Sur telephone, le nom en toutes lettres poussait la barre hors de l'ecran
     et provoquait un defilement lateral sur toute la page. La pastille porte
     deja les initiales : le nom n'y ajoutait rien. */
  .barre-moi { margin-left: 0; gap: 10px; flex-wrap: wrap; }
  .barre-moi .nom { display: none; }
  .page { padding: 26px 20px 44px; }
  .page h1 { font-size: 30px; }
  .carte { padding: 20px 22px; }
  .mission { gap: 18px; }
  .mission .tjm { padding-left: 0; border-left: none; text-align: left; }
  .compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Trois tuiles côte à côte ne tiennent pas sur un téléphone : elles passent
     les unes sous les autres, en pleine largeur. */
  /* « .tuiles.quatre » porte deux classes : sans le répéter ici, sa règle à
     deux colonnes l'emporterait sur celle-ci et la page déborderait de 18 px
     sur un téléphone. Mesuré à 390 px. */
  .tuiles, .tuiles.quatre { grid-template-columns: 1fr; }
  .salut { flex-direction: column; align-items: stretch; }
  .salut h1 { font-size: 28px; }
  .bloc-aide { flex-direction: column; align-items: flex-start; }
  /* Le titre et son bouton côte à côte étranglaient le titre sur trois lignes.
     Sur téléphone, le bouton passe dessous. */
  .securite-tete { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* Sur telephone la grille ne tient plus : la periode prend toute la ligne,
     les chiffres, le PDF et le statut se rangent en dessous. */
  .facture .haut {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px; row-gap: 14px;
  }
  .facture .periode { grid-column: 1 / -1; }
  .facture .chiffre { text-align: left; }
  .facture .pdf { text-align: left; align-self: center; }
  .facture .haut > .puce { justify-self: end; }
}

/* --- L'annonce passagère ---------------------------------------------------
   Confirme un dépôt et s'efface seule. Posée en bas, au-dessus du contenu :
   elle ne pousse rien, ne déplace rien, et se lit sans quitter des yeux
   l'endroit où l'on vient d'agir. Le vert est celui de la tuile « payé ». */
.annonce {
  position: fixed; left: 50%; bottom: 20px; z-index: 60;
  transform: translate(-50%, 14px);
  display: flex; align-items: center; gap: 10px;
  /* Sans largeur explicite, la boîte se rétrécit au plus petit mot possible
     et coupe la phrase en trois. max-content la laisse prendre la largeur de
     son texte, et max-width l'empêche de sortir de l'écran. */
  width: max-content; max-width: min(520px, calc(100vw - 32px));
  padding: 12px 14px 12px 13px;
  background: #DFF0E3; color: #1E6B38;
  border: 1px solid #BFE0C8; border-radius: 12px;
  box-shadow: 0 8px 26px rgba(16, 48, 28, .16);
  font-size: .95rem; line-height: 1.35;
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
}
.annonce.la { opacity: 1; transform: translate(-50%, 0); }
.annonce .coche { display: flex; flex: 0 0 auto; }
.annonce .texte { flex: 1 1 auto; }
.annonce .fermer {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  color: inherit; opacity: .6; font-size: 1.25rem; line-height: 1;
  padding: 0 2px; border-radius: 6px;
}
.annonce .fermer:hover { opacity: 1; }
/* Sur un écran qui refuse les animations, l'annonce apparaît simplement. */
@media (prefers-reduced-motion: reduce) {
  .annonce { transition: none; transform: translate(-50%, 0); }
}

/* --- Le mode « voir comme » du compte d'administration -------------------- */
/* Volontairement voyant, et en haut de chaque page. Au bout de dix minutes
   passées dans l'espace de quelqu'un d'autre, on oublie que ce n'est pas le
   sien ; ce bandeau est là pour que cet oubli ne soit pas possible. */
.bandeau-admin {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 22px;
  background: #FFF4D6; color: #6B4A05;
  border-bottom: 1px solid #F0DEA8;
  font-size: .9rem;
}
.bandeau-admin strong { font-weight: 600; }
.etiquette-admin {
  flex: 0 0 auto; padding: 2px 8px; border-radius: 999px;
  background: #6B4A05; color: #FFF4D6;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.bandeau-admin .lien-discret { margin-left: auto; color: #6B4A05; }

.liste-consultants { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.ligne-consultant {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 14px; cursor: pointer;
  background: #FFF; border: 1px solid #E3E8EC; border-radius: 12px;
  font: inherit; color: inherit;
}
.ligne-consultant:hover { border-color: #17384A; background: #F7FAFC; }
.ligne-consultant:disabled { opacity: .5; cursor: progress; }
.ligne-consultant-texte { display: flex; flex-direction: column; min-width: 0; }
.ligne-consultant-texte small { color: #6B7B86; font-size: .82rem; }
.etat-acces {
  margin-left: auto; flex: 0 0 auto;
  padding: 2px 9px; border-radius: 999px;
  background: #F0F3F5; color: #6B7B86;
  font-size: .75rem; white-space: nowrap;
}
.etat-acces.ouvert { background: #DFF0E3; color: #1E6B38; }