:root {
  --mostaza: #ffc400;
  --negro: #000;
  --blanco: #fff;
  --fond: #f4f3f0;
  --ligne: #d9d7d1;
  --doux: #5f5d57;
  --rouge: #b3261e;
  --vert: #146c43;
  --texte: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --display: "Bowlby One", "Arial Black", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  min-height: 100vh;
  margin: 0;
  background: var(--fond);
  color: var(--negro);
  font-family: var(--texte);
  font-size: 1rem;
  line-height: 1.45;
}

h1, h2, h3, p { margin: 0; }
h1 { font-family: var(--display); font-size: 1.9rem; font-weight: 400; line-height: 1.1; }
h2 { font-size: 1.1rem; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--negro); outline-offset: 2px; }

.barre { position: sticky; top: 0; height: 100vh; padding: 1.25rem .75rem; background: var(--negro); color: var(--blanco); }
.marque { padding: 0 .6rem 1.25rem; color: var(--mostaza); font-family: var(--display); font-size: 1.3rem; line-height: 1.05; }
.barre nav { display: grid; gap: .15rem; }
.barre button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .6rem; border: 0; background: none; color: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.barre button:hover { background: #222; }
.barre button[aria-current="page"] { background: var(--mostaza); color: var(--negro); font-weight: 700; }
.barre :focus-visible { outline-color: var(--mostaza); }
.pastille:not(:empty) { min-width: 1.4rem; padding: 0 .35rem; background: var(--mostaza); color: var(--negro); font-size: .85rem; font-weight: 700; text-align: center; }

main { min-width: 0; padding: 1.75rem clamp(1rem, 3vw, 2.25rem) 3rem; outline: 0; }

.entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.entete select { width: auto; }

.bouton { padding: .5rem .85rem; border: 2px solid var(--negro); background: var(--blanco); font-weight: 700; cursor: pointer; }
.bouton:hover { background: var(--mostaza); }
.bouton--plein { background: var(--negro); color: var(--blanco); }
.bouton--plein:hover { color: var(--negro); }
.bouton--danger { border-color: var(--rouge); color: var(--rouge); }
.bouton--petit { padding: .15rem .45rem; font-size: .85rem; }

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.chiffre { padding: .9rem 1rem; background: var(--blanco); border: 1px solid var(--ligne); }
.chiffre strong { display: block; font-family: var(--display); font-size: 1.7rem; font-weight: 400; line-height: 1.15; }
.chiffre span { color: var(--doux); font-size: .92rem; }

.panneau { padding: 1rem; background: var(--blanco); border: 1px solid var(--ligne); }
.panneau + .panneau { margin-top: 1rem; }
.panneau h2 { margin-bottom: .6rem; }

.liste { display: grid; margin: 0; padding: 0; list-style: none; }
.liste li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--ligne); }
.liste li:first-child { border-top: 0; }

.vide { padding: 2rem 1rem; color: var(--doux); text-align: center; }
.vide .bouton { margin-top: .75rem; color: var(--negro); }

/* Messages */
.boite { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.boite__liste { padding: 0; }
.ligne-message { display: block; width: 100%; padding: .7rem .85rem; border: 0; border-top: 1px solid var(--ligne); background: none; text-align: left; cursor: pointer; }
.ligne-message:first-child { border-top: 0; }
.ligne-message:hover, .ligne-message[aria-current="true"] { background: #fff4cc; }
.ligne-message strong { display: block; }
.ligne-message.non-lu strong::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .4rem; background: var(--mostaza); outline: 1px solid var(--negro); }
.ligne-message small { color: var(--doux); }
.corps-message { white-space: pre-wrap; margin: .85rem 0; }
.meta { color: var(--doux); font-size: .92rem; }

/* Tableaux de suivi */
.colonnes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13rem, 1fr); gap: .6rem; overflow-x: auto; padding-bottom: .5rem; }
.colonne { min-height: 16rem; padding: .5rem; background: #e9e7e2; }
.colonne.survol { outline: 3px dashed var(--negro); }
.colonne h2 { display: flex; justify-content: space-between; margin-bottom: .5rem; font-size: .95rem; }
.carte { display: block; width: 100%; margin-bottom: .45rem; padding: .55rem .65rem; border: 1px solid var(--ligne); background: var(--blanco); text-align: left; cursor: grab; }
.carte:hover { border-color: var(--negro); }
.carte strong { display: block; }
.carte small { display: block; color: var(--doux); }
.carte .bouton { margin-top: .4rem; }

/* Tableaux */
.defile { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--blanco); }
th, td { padding: .55rem .7rem; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; }
th { background: #e9e7e2; font-size: .9rem; }
td.nombre, th.nombre { text-align: right; white-space: nowrap; }
.statut-ok { color: var(--vert); font-weight: 700; }
.statut-attente { color: var(--rouge); font-weight: 700; }

/* Formulaires */
dialog { width: min(36rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.25rem; border: 3px solid var(--negro); }
dialog::backdrop { background: rgb(0 0 0 / .55); }
.formulaire { display: grid; gap: .7rem; }
.formulaire h2 { font-size: 1.3rem; }
.champ { display: grid; gap: .2rem; }
.champ label, .champ-titre { font-size: .92rem; font-weight: 700; }
input, select, textarea { width: 100%; padding: .5rem .6rem; border: 1px solid #8a8880; border-radius: 0; background: var(--blanco); }
textarea { resize: vertical; }
.pied-formulaire { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: .4rem; }

/* Atelier CV */
.atelier { display: grid; grid-template-columns: minmax(19rem, 1fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; }
.feuille { min-height: 40rem; padding: 2.2rem; background: var(--blanco); border: 1px solid var(--ligne); color: #000; font-family: Arial, Helvetica, sans-serif; font-size: .92rem; }
.feuille h2 { font-size: 1.55rem; }
.feuille h3 { margin: 1.1rem 0 .35rem; padding-bottom: .15rem; border-bottom: 1px solid #000; font-size: .95rem; text-transform: uppercase; }
.feuille p { margin-bottom: .3rem; white-space: pre-wrap; }
.feuille ul { margin: .15rem 0 .55rem; padding-left: 1.1rem; }
.controles { display: grid; gap: .3rem; margin: .6rem 0 0; padding-left: 1.1rem; font-size: .93rem; }
.controles .ok { color: var(--vert); }
.controles .ko { color: var(--rouge); }

.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.ligne-doc { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 6rem 2rem; gap: .35rem; align-items: center; }

.analyse { margin-bottom: 1rem; }
.analyse h3 { margin: .85rem 0 .35rem; font-size: 1rem; }
.score { display: flex; align-items: baseline; gap: .4rem; }
.score strong { font-family: var(--display); font-size: 2.4rem; font-weight: 400; line-height: 1; }
.mots { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.mots span { padding: .05rem .4rem; background: var(--mostaza); font-size: .9rem; }

.cv-moderne .cv-tete { margin: -2.2rem -2.2rem 1rem; padding: 1.8rem 2.2rem; background: #000; color: #fff; }
.cv-moderne h3 { border-bottom: 0; }
.cv-mode .cv-tete { margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 8px solid var(--mostaza); }
.cv-mode h2 { font-family: var(--display); font-weight: 400; }
.cv-mode h3 { border-bottom: 0; background: var(--mostaza); padding: .15rem .4rem; }
.cv-colonnes .cv-grille { display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: 1.25rem; }
.cv-colonnes aside { padding: .1rem .85rem .85rem; background: #f1f0ee; }
.feuille { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.doc { font-family: Arial, Helvetica, sans-serif; }
.doc-tete { display: flex; justify-content: space-between; gap: 1rem; }
.doc-titre { text-align: right; }
.doc-titre h2 { font-size: 1.5rem; }
.doc-client { margin: 1.5rem 0; padding: .75rem; background: #f1f0ee; }
.doc-table th { background: #000; color: #fff; }
.doc-totaux { width: min(18rem, 100%); margin: 1rem 0 0 auto; }
.doc-totaux p { display: flex; justify-content: space-between; gap: 1rem; }
.doc-total { margin-top: .35rem !important; padding-top: .35rem; border-top: 2px solid #000; font-weight: 700; }
.doc-notes { margin-top: .9rem !important; font-size: .85rem; }

body.deconnecte { display: block; }
body.deconnecte .barre { display: none; }
.connexion { max-width: 24rem; margin: 10vh auto 0; }
.connexion h1 { margin-bottom: 1rem; }
.marque-connexion { margin-bottom: .5rem; font-family: var(--display); font-size: 1rem; }

/* Boîte mail */
.mail { display: grid; grid-template-columns: 12rem minmax(15rem, 22rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.dossiers-mail { display: grid; gap: .2rem; }
.dossiers-mail .bouton { margin-bottom: .6rem; }
.dossier-mail { display: flex; justify-content: space-between; align-items: center; padding: .5rem .6rem; border: 0; background: none; text-align: left; font-weight: 500; cursor: pointer; }
.dossier-mail:hover { background: #e9e7e2; }
.dossier-mail[aria-current="true"] { background: var(--mostaza); font-weight: 700; }
.liste-mail { min-width: 0; background: var(--blanco); border: 1px solid var(--ligne); }
.recherche-mail { padding: .5rem; border-bottom: 1px solid var(--ligne); }
.ligne-mail { display: grid; gap: .1rem; width: 100%; padding: .65rem .8rem; border: 0; border-bottom: 1px solid var(--ligne); background: none; text-align: left; cursor: pointer; }
.ligne-mail:hover, .ligne-mail[aria-current="true"] { background: #fff4cc; }
.ligne-mail__haut { display: flex; justify-content: space-between; gap: .5rem; }
.ligne-mail__haut strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ligne-mail.non-lu strong, .ligne-mail.non-lu .ligne-mail__sujet { font-weight: 700; }
.ligne-mail__sujet, .ligne-mail__extrait { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-mail__extrait { color: var(--doux); }
.plus-mails { margin: .6rem; }
.lecture-mail { min-width: 0; }
.entete-mail { display: grid; gap: .6rem; margin-bottom: 1rem; }
.entete-mail h2 { font-size: 1.25rem; }
.retour-mail { display: none; justify-self: start; }
.message-mail { padding-top: .8rem; border-top: 1px solid var(--ligne); }
.message-mail + .message-mail { margin-top: 1rem; }
.corps-mail { display: block; width: 100%; min-height: 6rem; margin-top: .6rem; border: 0; }
.pieces { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.barre-edition { display: flex; flex-wrap: wrap; gap: .3rem; }
.editeur-mail { min-height: 14rem; padding: .7rem; border: 1px solid #8a8880; background: var(--blanco); overflow-wrap: anywhere; }
.editeur-signature { min-height: 8rem; margin: .75rem 0; }
.connexion-mail { max-width: 32rem; }

@media (max-width: 1100px) {
  .mail { grid-template-columns: minmax(0, 1fr); }
  .dossiers-mail { display: flex; flex-wrap: wrap; }
  .dossiers-mail .bouton { margin: 0 .4rem 0 0; }
  .masquee-mobile { display: none; }
  .retour-mail { display: inline-block; }
}

#alerte:not(:empty) { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; max-width: 24rem; padding: .7rem 1rem; background: var(--negro); color: var(--blanco); }

@media (max-width: 800px) {
  body { display: block; }
  .barre { position: static; height: auto; padding: .75rem; }
  .marque { padding: 0 0 .5rem; }
  .marque br { display: none; }
  .barre nav { display: flex; overflow-x: auto; }
  .barre button { width: auto; gap: .4rem; white-space: nowrap; }
  .boite, .atelier { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  body { display: block; background: #fff; }
  .barre, .entete, .atelier > :first-child, #alerte { display: none !important; }
  main { padding: 0; }
  .atelier { display: block; }
  .feuille { min-height: 0; padding: 0; border: 0; }
}