/* =====================================================================
   Slow Mouv — feuille de style commune (charte)
   Une seule source pour les couleurs, les titres, les boutons, les cartes,
   les messages et les formulaires. Chaque page garde son contenu et son
   icône ; seul l'habillage devient commun.
   ===================================================================== */

:root{
  /* Couleurs */
  --sm-fond:      #f7faf7;   /* fond des pages */
  --sm-carte:     #ffffff;   /* fond des cartes */
  --sm-encre:     #203b34;   /* texte principal */
  --sm-doux:      #667873;   /* texte secondaire */
  --sm-ligne:     #e1e9e2;   /* bordures, séparateurs */
  --sm-vert:      #4d8d67;   /* action principale */
  --sm-vert-fonce:#365147;   /* survol, liens */
  --sm-vert-pale: #e5f3ea;   /* fond succès */
  --sm-ocre:      #99651d;   /* attention */
  --sm-ocre-pale: #fff2dc;
  --sm-rouge:     #b4533f;   /* danger, retard */
  --sm-rouge-pale:#fbecea;
  --sm-gris-pale: #edf1ee;   /* bouton discret */

  /* Formes */
  --sm-rayon:     12px;      /* boutons, champs */
  --sm-rayon-carte:16px;
  --sm-ombre:     0 2px 10px rgba(32,59,52,.05);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--sm-fond);
  color:var(--sm-encre);
  font:16px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ---------- Mise en page ---------- */
.sm-page{max-width:820px;margin:0 auto;padding:16px 18px 70px}
.sm-page.large{max-width:1100px}
.sm-logo{display:block;width:min(220px,60vw);height:auto;margin:4px auto 14px}
/* Logo cliquable : ramène à l'accueil */
.sm-logo-lien{display:block;width:min(220px,60vw);margin:4px auto 14px}
.sm-logo-lien .sm-logo{width:100%;margin:0}
.sm-haut{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}

/* ---------- Titres ---------- */
h1,.sm-h1{font-size:26px;font-weight:800;margin:14px 0 4px;letter-spacing:-.2px}
h2,.sm-h2{font-size:19px;font-weight:750;margin:22px 0 10px}
h3,.sm-h3{font-size:16px;font-weight:700;margin:16px 0 8px}
.sm-sous-titre{color:var(--sm-doux);margin:0 0 16px}
.sm-petit{font-size:13px;color:var(--sm-doux)}

/* ---------- Lien de retour (toujours le même, en haut à gauche) ---------- */
.sm-retour{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border:1px solid var(--sm-ligne);border-radius:999px;
  background:var(--sm-carte);color:var(--sm-encre);
  text-decoration:none;font-size:14px;font-weight:650;
}
.sm-retour:hover{border-color:#cfdcd3}

/* ---------- Boutons : une seule forme, quatre rôles ---------- */
.sm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 16px;
  border:1px solid transparent;border-radius:var(--sm-rayon);
  font:inherit;font-size:15px;font-weight:750;line-height:1.2;
  text-decoration:none;cursor:pointer;white-space:nowrap;
}
.sm-btn.principal {background:var(--sm-vert);color:#fff}
.sm-btn.principal:hover{background:var(--sm-vert-fonce)}
.sm-btn.secondaire{background:var(--sm-carte);color:var(--sm-vert-fonce);border-color:#cfdcd3}
.sm-btn.secondaire:hover{border-color:var(--sm-vert)}
.sm-btn.discret  {background:var(--sm-gris-pale);color:#385248}
.sm-btn.danger   {background:var(--sm-carte);color:var(--sm-rouge);border-color:#e3bdb5}
.sm-btn.danger.plein{background:var(--sm-rouge);color:#fff;border-color:var(--sm-rouge)}
.sm-btn.petit{min-height:36px;padding:7px 12px;font-size:14px}
.sm-btn.large{width:100%}
.sm-btn:disabled{opacity:.5;cursor:default}
.sm-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}

/* ---------- Cartes ---------- */
.sm-carte{
  background:var(--sm-carte);border:1px solid var(--sm-ligne);
  border-radius:var(--sm-rayon-carte);padding:16px 18px;margin:12px 0;
  box-shadow:var(--sm-ombre);
}
.sm-ligne-liste{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--sm-ligne)}
.sm-ligne-liste:first-child{border-top:0;padding-top:0}
.sm-nom{font-weight:750}

/* ---------- Tuiles de l'accueil ---------- */
.sm-tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sm-tuile{
  display:block;padding:16px 18px;min-height:78px;
  background:var(--sm-carte);border:1px solid var(--sm-ligne);border-radius:var(--sm-rayon-carte);
  color:var(--sm-encre);text-decoration:none;box-shadow:var(--sm-ombre);
  transition:transform .12s ease,box-shadow .12s ease;
}
.sm-tuile:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(32,59,52,.09)}
.sm-tuile.principale{grid-column:1/-1}
.sm-tuile .icone{font-size:22px;margin-right:8px}
.sm-tuile .titre{font-size:18px;font-weight:750}
.sm-tuile .desc{display:block;margin:6px 0 0 32px;font-size:13px;color:var(--sm-doux)}

/* ---------- Pastilles ---------- */
.sm-pastille{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:750;background:var(--sm-gris-pale);color:#385248}
.sm-pastille.ok{background:var(--sm-vert-pale);color:#2f7250}
.sm-pastille.attention{background:var(--sm-ocre-pale);color:var(--sm-ocre)}
.sm-pastille.retard{background:var(--sm-rouge-pale);color:#9b3c2d}
.sm-compteur{display:inline-block;min-width:24px;padding:2px 8px;border-radius:999px;background:var(--sm-rouge);color:#fff;font-size:13px;font-weight:800;text-align:center}

/* ---------- Messages ---------- */
.sm-msg{padding:11px 14px;border-radius:var(--sm-rayon);margin:10px 0;font-weight:650;border:1px solid transparent}
.sm-msg.ok{background:var(--sm-vert-pale);border-color:#c9e3d3;color:#2f7250}
.sm-msg.attention{background:var(--sm-ocre-pale);border-color:#f0dcae;color:var(--sm-ocre)}
.sm-msg.erreur{background:var(--sm-rouge-pale);border-color:#efc9c2;color:#9b3c2d}
.sm-msg.info{background:#fff;border-color:var(--sm-ligne);color:var(--sm-doux);font-weight:500}

/* ---------- Formulaires ---------- */
.sm-champ{display:block;margin:12px 0}
.sm-champ > span{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.sm-champ input,.sm-champ select,.sm-champ textarea{
  width:100%;font:inherit;font-size:16px;padding:11px 12px;
  border:1px solid #cfdcd3;border-radius:10px;background:#fff;color:var(--sm-encre);
}
.sm-champ input:focus,.sm-champ select:focus,.sm-champ textarea:focus{outline:2px solid var(--sm-vert);outline-offset:1px}
.sm-grille{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

@media(max-width:600px){
  .sm-page{padding:12px 14px 60px}
  .sm-tuiles,.sm-grille{grid-template-columns:1fr}
  h1,.sm-h1{font-size:23px}
}

/* ---------- Accueil : fonctions secondaires et pied ---------- */
.sm-section{margin:30px 0 10px;color:var(--sm-doux);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.sm-secondaires{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sm-secondaires a{display:block;padding:13px 10px;border:1px solid var(--sm-ligne);border-radius:var(--sm-rayon);background:var(--sm-carte);color:var(--sm-vert-fonce);text-align:center;text-decoration:none;font-weight:700;font-size:14px}
.sm-secondaires a:hover{border-color:#cfdcd3}
.sm-pied{margin-top:28px;text-align:center;font-size:14px;color:var(--sm-doux)}
.sm-pied a{color:var(--sm-vert-fonce);font-weight:700;text-decoration:none}
@media(max-width:600px){.sm-secondaires{grid-template-columns:1fr}}