/* Complement a la charte reprise de renov / Info H'Emploi.
   On ne redefinit aucune couleur : on consomme les variables de style.css
   (--p, --a, --card, --bd, --ok, --warn, --err) pour rester aligne sur le parc. */

/* --- Neutralisation des regles generiques de style.css ------------------
   style.css vient de renov, dont la mise en page est differente : une barre
   haute, puis des onglets qui deviennent une barre fixe en bas sur mobile.
   Ses selecteurs de balise (header, nav) s appliquaient donc aussi a nos
   elements : le menu heritait de nav{background:#fff}, d ou des liens blancs
   sur fond blanc, et passait meme en bas de l ecran sous 720px. Les en-tetes
   de page heritaient de header{background:var(--nuit);height:56px}.
   On neutralise ces regles ici plutot que de dupliquer la feuille : la charte
   reste partagee avec le reste du parc, seule la structure differe. --------- */
.appbar{height:auto;min-height:0}
.appbar nav.menu{background:transparent;position:static;border:0;padding:0;
  overflow:visible;height:auto;box-shadow:none}
.appbar nav.menu a{border:0;flex:0 0 auto;flex-direction:row;text-align:left;
  line-height:1.3;font-weight:600}
.page>header{position:static;background:none;color:inherit;height:auto;
  padding:0;display:block;box-shadow:none;z-index:auto}

.appbar{position:sticky;top:0;z-index:50;background:var(--p);color:#fff;
  display:flex;align-items:center;gap:16px;padding:10px 18px;box-shadow:var(--sh)}
.appbar .marque{font-family:var(--logo);font-weight:700;letter-spacing:.02em;font-size:16px}
.appbar .marque span{opacity:.72;font-weight:400}
.appbar nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
.appbar nav a{color:#fff;opacity:.82;padding:7px 12px;border-radius:var(--r-s);
  font-size:var(--t-s);white-space:nowrap}
.appbar nav a:hover{opacity:1;background:rgba(255,255,255,.12);text-decoration:none;color:#fff}
.appbar nav a.on{opacity:1;background:rgba(255,255,255,.18);font-weight:700}
.appbar .moi{font-size:var(--t-xs);opacity:.8;padding-left:12px;
  border-left:1px solid rgba(255,255,255,.25);line-height:1.35}

.bandeau-demo{background:var(--a);color:#fff;text-align:center;padding:6px;
  font-size:var(--t-xs);letter-spacing:.03em;font-weight:700}
.bandeau-env{background:var(--terracotta-voile);color:var(--terracotta-tx);
  text-align:center;padding:5px;font-size:var(--t-xs)}

.page{max-width:1280px;margin:0 auto;padding:22px 18px 64px}
.page>header{margin-bottom:18px}
.page>header .sur{font-size:var(--t-xs);color:var(--tx2);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:2px}

.grille{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

.carte{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--sh)}
.carte h2{margin:0 0 10px}
.kpi .lib{font-size:var(--t-xs);color:var(--tx2);text-transform:uppercase;letter-spacing:.06em}
.kpi .val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;
  font-weight:700;color:var(--p);line-height:1.2;margin-top:4px}
.kpi .sous{font-size:var(--t-xs);color:var(--tx2);margin-top:2px}

table.t{width:100%;border-collapse:collapse;font-size:var(--t-s)}
table.t th{text-align:left;font-weight:700;color:var(--tx2);font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;
  border-bottom:2px solid var(--bd);background:var(--card)}
table.t td{padding:8px 10px;border-bottom:1px solid var(--bd)}
table.t tr:hover td{background:var(--p-l)}
table.t td.n{text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.vide{color:var(--tx2);font-size:var(--t-s);padding:18px 0;text-align:center}

.puce{display:inline-block;padding:2px 9px;border-radius:999px;font-size:var(--t-xs);font-weight:700}
.puce.ok{background:var(--ok-l);color:var(--ok)}
.puce.warn{background:var(--warn-l);color:var(--warn)}
.puce.err{background:var(--err-l);color:var(--err)}
.puce.neutre{background:var(--p-l);color:var(--p)}

.btn{display:inline-block;border:1px solid var(--p);background:var(--p);color:#fff;
  padding:9px 16px;border-radius:var(--r-s);font-size:var(--t-s);font-weight:700;
  cursor:pointer;font-family:var(--corps)}
.btn:hover{background:var(--p-d);text-decoration:none;color:#fff}
.btn.sec{background:transparent;color:var(--p)}
.btn.sec:hover{background:var(--p-l);color:var(--p)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

form.f label{display:block;font-size:var(--t-xs);color:var(--tx2);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;margin:12px 0 4px}
form.f input,form.f select,form.f textarea{width:100%;padding:9px 11px;border:1px solid var(--bd2);
  border-radius:var(--r-s);font-family:var(--corps);font-size:var(--t-m);background:#fff;color:var(--tx)}
form.f input:focus,form.f select:focus{outline:2px solid var(--p);outline-offset:1px;border-color:var(--p)}

.msg{padding:10px 14px;border-radius:var(--r-s);font-size:var(--t-s);margin-bottom:14px}
.msg.err{background:var(--err-l);color:var(--err)}
.msg.ok{background:var(--ok-l);color:var(--ok)}
.msg.info{background:var(--info-l);color:var(--info)}

.connexion{max-width:400px;margin:9vh auto;padding:0 18px}
.connexion .carte{padding:26px 24px}
.connexion h1{text-align:center}
.connexion .sous{text-align:center;color:var(--tx2);font-size:var(--t-s);margin-bottom:18px}

/* Sous 720px la barre passe sur deux lignes : le menu defile horizontalement,
   l identite de l utilisateur passe dessous. Pas de menu deroulant tant que le
   nombre d entrees reste faible. */
@media(max-width:719px){
  .appbar{flex-wrap:wrap;gap:8px;padding:9px 14px}
  .appbar nav.menu{margin-left:auto;order:2;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;max-width:100%}
  .appbar nav.menu::-webkit-scrollbar{display:none}
  .appbar .moi{order:3;width:100%;border-left:0;padding-left:0;padding-top:6px;
    border-top:1px solid rgba(255,255,255,.2)}
  .appbar .moi br{display:none}
  .page{padding:16px 14px 48px}
}