:root{
  --bleu:#1f4e79;
  --bleu-clair:#e8f0f9;
  --bleu-bord:#c7dbef;
  --jaune:#fdf3d0;
  --jaune-bord:#e3b505;
  --gris:#f5f7fa;
  --gris-bord:#e2e8f0;
  --texte:#243241;
  --texte-doux:#5b6b7b;
  --ok:#1c7c54;
  --ok-fond:#e4f4ec;
  --erreur:#a52222;
  --erreur-fond:#fbe9e9;
  --rayon:12px;
  --ombre:0 2px 10px rgba(31,78,121,.08);
}
*{box-sizing:border-box}
body{
  margin:0;font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--texte);background:#fbfcfe;line-height:1.5;
}
a{color:var(--bleu);text-decoration:none}
a:hover{text-decoration:underline}

/* En-tête */
.entete{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding:.8rem 1.4rem;background:#fff;
  border-bottom:2px solid var(--bleu-clair);box-shadow:var(--ombre);
}
.marque{display:flex;align-items:center;gap:.7rem;color:var(--texte)}
.marque:hover{text-decoration:none}
.marque .logo{font-size:1.8rem}
.marque strong{display:block;font-size:1.05rem;color:var(--bleu)}
.marque small{color:var(--texte-doux)}
.entete nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}

/* Conteneur */
.conteneur{max-width:960px;margin:1.6rem auto;padding:0 1.2rem}

/* Boutons */
.bouton{
  display:inline-block;background:var(--bleu);color:#fff;border:none;
  padding:.6rem 1.1rem;border-radius:var(--rayon);font-size:.98rem;
  font-weight:600;cursor:pointer;transition:filter .15s;text-align:center;
}
.bouton:hover{filter:brightness(1.08);text-decoration:none}
.bouton-clair{background:var(--bleu-clair);color:var(--bleu)}
.bouton-fantome{background:#fff;color:var(--bleu);border:1.5px solid var(--bleu-bord)}
.bouton-danger{background:#fff;color:var(--erreur);border:1.5px solid #e6bcbc}
.bouton:disabled{opacity:.5;cursor:not-allowed}

/* Cartes */
.carte{
  background:#fff;border:1px solid var(--gris-bord);border-radius:var(--rayon);
  padding:1.2rem 1.3rem;margin-bottom:1.1rem;box-shadow:var(--ombre);
}
.carte h2{margin-top:0;color:var(--bleu)}

h1{color:var(--bleu);font-size:1.7rem;margin:.2rem 0 1rem}
.sous-titre{color:var(--texte-doux);margin-top:-.6rem;margin-bottom:1.4rem}

/* Alertes */
.alerte{padding:.8rem 1rem;border-radius:var(--rayon);margin-bottom:1rem;font-weight:500}
.alerte-ok{background:var(--ok-fond);color:var(--ok);border:1px solid #bfe3d0}
.alerte-erreur{background:var(--erreur-fond);color:var(--erreur);border:1px solid #eec4c4}

/* Bandeau info API */
.bandeau{
  display:flex;gap:.6rem;align-items:flex-start;padding:.8rem 1rem;
  border-radius:var(--rayon);margin-bottom:1.2rem;font-size:.95rem;
}
.bandeau-warn{background:var(--jaune);border:1px solid var(--jaune-bord)}
.bandeau-ok{background:var(--ok-fond);border:1px solid #bfe3d0;color:var(--ok)}

/* Formulaire */
label{display:block;font-weight:600;margin:.9rem 0 .3rem}
input[type=text],input[type=date],textarea,select{
  width:100%;padding:.55rem .7rem;border:1.5px solid var(--gris-bord);
  border-radius:9px;font-size:1rem;font-family:inherit;background:#fff;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--bleu)}
textarea{resize:vertical;min-height:70px}
.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem}
.aide{color:var(--texte-doux);font-size:.88rem;margin:.15rem 0 0}

/* Sélecteur de jour */
.jours{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 1rem}
.jour-lien{
  padding:.5rem 1rem;border-radius:999px;border:1.5px solid var(--bleu-bord);
  background:#fff;color:var(--bleu);font-weight:600;text-transform:capitalize;
}
.jour-lien.actif{background:var(--bleu);color:#fff}
.jour-lien:hover{text-decoration:none;filter:brightness(1.05)}

/* Créneaux à saisir */
.creneau-fiche{
  display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;
  align-items:center;padding:.7rem .8rem;border:1px solid var(--bleu-bord);
  border-radius:10px;background:var(--bleu-clair);margin-bottom:.7rem;
}
.creneau-fiche .horaire{font-weight:700;color:var(--bleu);white-space:nowrap}
.creneau-fiche .activite{font-weight:600}
.creneau-fiche input{grid-column:1/-1;margin-top:.3rem;background:#fff}

/* Tables */
table{border-collapse:collapse;width:100%;margin:.6rem 0;font-size:.95rem}
.table-scroll{overflow-x:auto}
th,td{border:1px solid var(--gris-bord);padding:.45rem .6rem;text-align:left;vertical-align:top}
thead th{background:var(--bleu);color:#fff;font-weight:600}
.edt td:first-child{white-space:nowrap;font-weight:600;color:var(--bleu);width:6.5rem}
.edt tr.fiche td{background:var(--bleu-clair)}

/* Liste des journées */
.liste-journees{list-style:none;padding:0;margin:0}
.liste-journees li{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;padding:.9rem 1rem;border:1px solid var(--gris-bord);
  border-radius:10px;margin-bottom:.6rem;background:#fff;
}
.liste-journees .titre-j{font-weight:700;color:var(--bleu);text-transform:capitalize}
.liste-journees .meta-j{color:var(--texte-doux);font-size:.9rem}
.actions-j{display:flex;gap:.5rem;flex-wrap:wrap}

/* Rendu d'une journée */
.rituel{
  background:var(--jaune);border:1px solid var(--jaune-bord);border-left-width:5px;
  border-radius:10px;padding:.7rem 1rem;margin:.8rem 0;
}
.rituel .r-titre{font-weight:700;color:#8a6d00;margin-bottom:.25rem}
.lecon{
  border:1px solid var(--gris-bord);border-top:4px solid var(--bleu);
  border-radius:12px;padding:1rem 1.2rem;margin:1.2rem 0;box-shadow:var(--ombre);
}
.lecon .l-domaine{color:var(--bleu);font-size:1.2rem;margin:0 0 .6rem}
.lecon h4{color:var(--bleu);margin:1rem 0 .3rem;font-size:1.02rem}
.etiquette{
  display:inline-block;background:var(--gris);border:1px solid var(--gris-bord);
  border-radius:999px;padding:.1rem .6rem;font-size:.82rem;color:var(--texte-doux);
  margin:.1rem .3rem .1rem 0;
}
.champ{margin:.3rem 0}
.champ b{color:var(--texte)}
ul.puces{margin:.3rem 0 .6rem;padding-left:1.2rem}
ul.puces li{margin:.15rem 0}
.phases th{background:var(--bleu);color:#fff}
.phases td:first-child{font-weight:600;background:var(--gris);white-space:nowrap;width:9rem}

.vide{color:var(--texte-doux);text-align:center;padding:2rem 1rem}

.pied{text-align:center;color:var(--texte-doux);font-size:.85rem;padding:2rem 1rem 3rem}

@media(max-width:640px){
  .grille-2{grid-template-columns:1fr}
  .entete{padding:.7rem 1rem}
  .marque strong{font-size:.98rem}
}