/* ============================================================
   DÉCLIC — charte des apps (référence : www.declic.pro, relevée le 2026-10-15)
   Copie de référence : Déclic/Dev/Charte/styles.css. À recopier telle quelle dans
   chaque app (même md5), puis compléter dans un fichier propre à l'app.
   Polices : Anton (titres) et DM Sans (texte), Google Fonts. Dans <head> :
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
   ============================================================ */
:root{
  --bleu:#2BA9DF;            /* bleu Déclic : logo, accent principal */
  --bleu-fonce:#1E86B3;      /* survol des boutons */
  --bleu-lien:#68B3FF;       /* liens et boutons secondaires du site */
  --turquoise:#89D3D2;       /* fonds de blocs */
  --turquoise-pale:#DDF2F1;  /* bandeaux légers */
  --fond:#FFFFFF;
  --fond-section:#F4FAFA;    /* fond de page, sections très claires */
  --carte:#FFFFFF;
  --encre:#000000;
  --encre-soft:rgba(0,0,0,.62);
  --encre-faible:rgba(0,0,0,.38);
  --canard:#134C5F;          /* bleu canard : ombres, textes sur turquoise */
  --liseret:rgba(19,76,95,.14);
  --ombre:0 6px 20px rgba(19,76,95,.15);
  --rayon:10px;
  /* codes d'état (mêmes conventions qu'à Toutenvélo) */
  --vert:#2E9E5B;            /* OK, fait */
  --orange:#E8912D;          /* attention, retard, en attente */
  --rouge:#D9452B;           /* hors service, refusé */
  --police-titres:'Anton','Arial Narrow',Impact,sans-serif;
  --police-texte:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;min-height:100vh;
  background:var(--fond-section);
  color:var(--encre);
  font-family:var(--police-texte);
  font-size:16px;line-height:1.45;
  display:flex;flex-direction:column;
}
h1,h2,h3,.titre{
  font-family:var(--police-titres);
  font-weight:400;letter-spacing:.02em;text-transform:uppercase;
  margin:0 0 .4em;line-height:1.1;
}
h1{font-size:2rem;color:var(--bleu);}
h2{font-size:1.4rem;}
h3{font-size:1.1rem;}
a{color:var(--bleu-lien);text-decoration:none;}
a:hover{text-decoration:underline;}
.page{width:100%;max-width:1100px;margin:0 auto;flex:1;padding:20px 20px 44px;}

/* ---------- barre du haut ---------- */
.topbar{
  display:flex;align-items:center;gap:14px;
  background:var(--fond);border-bottom:1px solid var(--liseret);
  padding:10px 20px;
}
.topbar img.logo{height:36px;width:auto;}
.topbar .espace{flex:1;}

/* ---------- cartes et tuiles ---------- */
.carte{
  background:var(--carte);border:1px solid var(--liseret);border-radius:var(--rayon);
  box-shadow:var(--ombre);padding:16px 18px;
}
.tuile{
  display:block;background:var(--bleu);color:#fff;border-radius:var(--rayon);
  padding:18px;box-shadow:var(--ombre);text-decoration:none;
}
.tuile:hover{background:var(--bleu-fonce);text-decoration:none;}
.tuile .titre{color:#fff;font-size:1.2rem;}
.bloc-turquoise{background:var(--turquoise);color:var(--canard);border-radius:var(--rayon);padding:16px 18px;}

/* ---------- boutons et champs ---------- */
button,.bouton{
  font:inherit;font-weight:500;cursor:pointer;
  background:var(--bleu);color:#fff;border:0;border-radius:var(--rayon);
  padding:10px 18px;
}
button:hover,.bouton:hover{background:var(--bleu-fonce);}
button.secondaire,.bouton.secondaire{background:#fff;color:var(--bleu);border:1px solid var(--bleu);}
button.secondaire:hover,.bouton.secondaire:hover{background:var(--turquoise-pale);}
button.danger{background:var(--rouge);}
button:disabled{opacity:.5;cursor:default;}
input,select,textarea{
  font:inherit;color:var(--encre);background:#fff;
  border:1px solid var(--liseret);border-radius:var(--rayon);padding:9px 12px;width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--bleu);outline-offset:1px;border-color:var(--bleu);}
label{display:block;font-size:.9rem;color:var(--encre-soft);margin-bottom:4px;}

/* ---------- états ---------- */
.badge{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:500;color:#fff;}
.badge.ok,.etat-ok{background:var(--vert);}
.badge.attention,.etat-attention{background:var(--orange);}
.badge.hs,.etat-hs{background:var(--rouge);}
.badge.neutre{background:var(--encre-faible);}
.vide{color:var(--encre-faible);font-style:italic;}   /* « non communiqué », « pas encore en service » */

/* ---------- tableaux ---------- */
table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--rayon);overflow:hidden;}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--liseret);}
th{font-weight:500;color:var(--encre-soft);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;}
td.nombre,th.nombre{text-align:right;font-variant-numeric:tabular-nums;}

@media (max-width:600px){
  .page{padding:14px 14px 36px;}
  h1{font-size:1.6rem;}
}