/* PIT Atrium — feuille de style du lot 1, d'après la charte graphique PIT (Agence Makers, 2026). */
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap");

:root {
  --vert-clair: #a5bcb9;   /* aplats et décor, jamais du texte sur fond blanc */
  --vert-fonce: #485d5b;   /* textes, titres, boutons */
  --encre: #1f2a29;
  --discret: #5a6b69;
  --fond: #f4f7f6;
  --filet: #dde6e4;
  --teinte: #e8efee;
  --ok-fond: #e3f1ea; --ok: #1f6b47;
  --alerte-fond: #f9e3df; --alerte: #9b2f1f;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: "Raleway", system-ui, sans-serif; font-variant-numeric: lining-nums tabular-nums; }
a { color: var(--vert-fonce); font-weight: 600; }
a:hover { color: #2f3e3c; }
h1 { font-size: 26px; font-weight: 500; letter-spacing: .14em; color: var(--vert-fonce); margin: 0 0 20px; }
h2 { font-size: 15px; font-weight: 600; letter-spacing: .12em; color: var(--vert-fonce); margin: 0 0 14px; }
:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 2px; }

.entete { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding: 14px 32px; background: #fff; border-bottom: 1px solid var(--filet); }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marque-pit { font-weight: 700; color: var(--vert-clair); letter-spacing: .06em; }
.marque-sep { width: 1px; height: 22px; background: var(--vert-clair); }
.marque-atrium { font-size: 20px; font-weight: 300; letter-spacing: .06em; color: var(--vert-fonce); }
.menu { display: flex; gap: 20px; flex: 1; }
.moi { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--discret); }
.moi form { margin: 0; }

.page { padding: 28px 32px 48px; max-width: 1200px; }
.carte { background: #fff; border: 1px solid var(--filet); border-radius: 12px; padding: 24px; margin-bottom: 20px; }
.carte-etroite { max-width: 440px; margin: 40px auto; }
.tableau-defilant { overflow-x: auto; padding: 8px 24px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--discret); font-weight: 600; padding: 10px 12px 10px 0; }
td { padding: 12px 12px 12px 0; border-top: 1px solid #edf2f1; }

.formulaire { display: flex; flex-direction: column; gap: 8px; }
.formulaire label { font-size: 14px; font-weight: 600; margin-top: 8px; }
.formulaire input { height: 48px; padding: 0 14px; border: 1px solid #7d8f8c; border-radius: 8px; font: inherit; font-size: 16px; }
.bouton, .bouton-secondaire { min-height: 44px; padding: 0 18px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
.bouton { margin-top: 16px; border: 0; background: var(--vert-fonce); color: #fff; letter-spacing: .08em; }
.bouton-secondaire { border: 1px solid var(--vert-fonce); background: #fff; color: var(--vert-fonce); }

.erreur { color: var(--alerte); font-weight: 600; margin: 0; }
.aide, .sous-titre, .fil { color: var(--discret); font-size: 14px; }
.titre-fiche { letter-spacing: 0; font-weight: 600; color: var(--encre); margin-bottom: 6px; }
.pastille { display: inline-block; margin: 0 6px 6px 0; padding: 4px 10px; border-radius: 999px; background: var(--teinte); font-size: 13px; font-weight: 600; }
.masque { color: var(--discret); font-style: italic; }
.masque-bloc { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--fond); color: #3c4a48; }
.grille { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 0; }
.grille dt { font-size: 12px; color: var(--discret); }
.grille dd { margin: 2px 0 0; font-weight: 600; }
.etat { padding: 12px 16px; border-radius: 10px; font-weight: 600; }
.etat-ok { background: var(--ok-fond); color: var(--ok); }
.etat-alerte { background: var(--alerte-fond); color: var(--alerte); }
.message { padding: 12px 16px; border-radius: 10px; background: var(--ok-fond); color: var(--ok); }
.qr svg { width: 200px; height: 200px; }
.pagination { display: flex; gap: 16px; align-items: center; }
.lien-discret { font-size: 13px; font-weight: 500; color: var(--discret); }
.liste-actions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; }
.actions form { margin: 0; }
.bouton-lien { display: inline-flex; align-items: center; text-decoration: none; }
.bouton-danger { min-height: 44px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--alerte); background: #fff; color: var(--alerte); font: inherit; font-weight: 600; cursor: pointer; margin-right: 12px; }
.zone-sensible { border-color: #f0cfc8; }
.statut-ok { color: var(--ok); font-weight: 600; }
.statut-doublon { color: #7a4a00; font-weight: 600; }
.statut-erreur { color: var(--alerte); font-weight: 600; }
.message.error { background: var(--alerte-fond); color: var(--alerte); }

@media (max-width: 640px) {
  .entete, .page { padding-left: 16px; padding-right: 16px; }
}