/* Passeport Atmosphäre. Encre et jaune, comme les autres outils de la maison.
   La palette réellement déployée sur soumission.atmosphare.co est jaune #fedf00 sur encre #1e1e1e ;
   on la reprend telle quelle pour que les trois sites se ressemblent. Les boutons ne portent que
   deux coins coupés (haut-gauche, bas-droit), langage mesuré sur atmosphare.com et atmosphare.co. */

:root {
  --encre: #1e1e1e;
  --accent: #fedf00;
  --papier: #ffffff;
  --fond: #f4f4f2;
  --gris: #6b6b6b;
  --trait: #d9d9d6;
  --alerte: #a3271f;
  --bien: #1f6b3a;
  --biseau: 8px;
}

* { box-sizing: border-box; }

/* L'attribut `hidden` PERD contre tout `display` posé par une classe (`.bandeau nav` est en
   flex, `.bouton` en inline-block) : sans cette règle, le menu et « Se déconnecter »
   s'affichaient sur l'écran de connexion - vu en production le 14 août. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: var(--encre);
  background: var(--fond);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ----------------------------------------------------------------- bandeau */

.bandeau {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--encre);
  color: var(--papier);
  flex-wrap: wrap;
}

.marque { font-weight: 700; letter-spacing: 0.04em; }
.marque .trema { color: var(--accent); }
.titre { color: var(--accent); font-weight: 700; }
.pousse { flex: 1; }
.qui { font-size: 13px; color: #cfcfcf; }

.bandeau nav { display: flex; gap: 4px; }

.bandeau nav button {
  background: transparent;
  border: 0;
  color: var(--papier);
  font: inherit;
  padding: 6px 12px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.bandeau nav button:hover { color: var(--accent); }
.bandeau nav button[aria-current="page"] { border-bottom-color: var(--accent); }

/* ----------------------------------------------------------------- corps */

main { flex: 1; padding: 24px; max-width: 1200px; width: 100%; margin: 0 auto; }

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 24px 0 8px; }
.sous { color: var(--gris); margin: 0 0 20px; font-size: 14px; }
.attente { color: var(--gris); }

.carte {
  background: var(--papier);
  border: 1px solid var(--trait);
  padding: 20px;
  margin-bottom: 16px;
}

.carte.etroite { max-width: 440px; margin-inline: auto; }

/* Le logotype officiel : noir sur carte claire (le renversé est interdit par le guide).
   La marge tout autour tient lieu de zone de protection. */
.logo-marque { display: block; width: 220px; max-width: 75%; margin: 6px auto 20px; }

/* ----------------------------------------------------------------- formes */

label { display: block; font-weight: 700; font-size: 13px; margin: 12px 0 4px; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"], select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--trait);
  background: var(--papier);
  font: inherit;
  color: var(--encre);
}

input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 1px;
}

.bouton {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--encre);
  background: var(--encre);
  color: var(--papier);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  clip-path: polygon(var(--biseau) 0, 100% 0, 100% calc(100% - var(--biseau)),
                     calc(100% - var(--biseau)) 100%, 0 100%, 0 var(--biseau));
}

.bouton:hover { background: #000; }

.bouton.secondaire { background: var(--papier); color: var(--encre); }
.bouton.secondaire:hover { background: var(--encre); color: var(--papier); }

.bouton.compact { padding: 4px 10px; font-size: 13px; --biseau: 5px; }
.bouton.danger { border-color: var(--alerte); color: var(--alerte); background: var(--papier); }
.bouton.danger:hover { background: var(--alerte); color: var(--papier); }

/* Sur le bandeau d'encre, l'inversion serait invisible : le survol passe à l'accent. */
.bandeau .bouton.secondaire:hover { background: var(--accent); color: var(--encre); }

.rangee-boutons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ----------------------------------------------------------------- tableaux */

.defilant { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--trait); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gris); }
tbody tr:hover { background: #fbfbf9; }
td.gestes { white-space: nowrap; }

.pastille {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--trait);
}

.pastille.active { border-color: var(--bien); color: var(--bien); }
.pastille.invite { border-color: var(--gris); color: var(--gris); }
.pastille.suspendue { border-color: var(--alerte); color: var(--alerte); }
.pastille.ghl { background: var(--accent); border-color: var(--accent); }

select.role { width: auto; min-width: 120px; padding: 4px 6px; font-size: 13px; }

/* L'écran Rôles parle français : la description sous le nom, les critères en liste claire. */
td .sous { margin: 4px 0 0; font-size: 13px; max-width: 46ch; }
.crit-liste { margin: 0; padding-left: 16px; font-size: 13px; color: var(--gris); }
.crit-liste li { margin: 2px 0; }
.crit-liste strong { color: var(--encre); }

/* ----------------------------------------------------------------- messages */

.message { padding: 10px 12px; margin: 12px 0; border-left: 4px solid var(--gris); background: #fff; }
.message.erreur { border-left-color: var(--alerte); color: var(--alerte); }
.message.succes { border-left-color: var(--bien); color: var(--bien); }

@media (max-width: 700px) {
  main { padding: 16px; }
  .bandeau { padding: 10px 14px; gap: 10px; }
  .qui { width: 100%; }
}