/* Charte Ma Bulle Bien-Être (palette du 16/10/2026) */
:root {
  --fond: #f9f5f0;          /* Blanc lin */
  --texte: #2e4053;         /* Bleu ardoise */
  --accent: #1b6b72;        /* Sarcelle profond */
  --titre: #4a9b9f;         /* Sarcelle moyen */
  --doux: #a8d5d1;          /* Vert d'eau */
  --peche: #e2baae;         /* Pêche poudré */
  --vieux-rose: #b5606a;    /* Vieux rose : titres / grands textes uniquement */
  --blanc: #ffffff;
  --rayon: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }

.bandeau-test {
  background: var(--peche);
  color: var(--texte);
  text-align: center;
  font-size: .875rem;
  padding: .4rem 1rem;
}

.entete {
  padding: 1rem;
  text-align: center;
  border-bottom: 1px solid var(--doux);
}
.entete a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.15rem;
}

.contenu {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

h1 { color: var(--accent); font-size: 1.6rem; margin: .5rem 0 .25rem; }
h2 { color: var(--texte); font-size: 1.05rem; margin: 0 0 .6rem; }

.intro, .infos-type { margin: .25rem 0 1.25rem; }
.infos-type { color: var(--accent); font-weight: 500; }

/* Liste des types */
.types { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.carte-type {
  display: grid;
  gap: .2rem;
  padding: 1rem 1.1rem;
  background: var(--blanc);
  border: 1px solid var(--doux);
  border-radius: var(--rayon);
  text-decoration: none;
  color: var(--texte);
}
.carte-type:hover, .carte-type:focus-visible { border-color: var(--accent); }
.carte-type__nom { font-weight: 600; color: var(--accent); font-size: 1.1rem; }
.carte-type__infos { font-size: .9rem; }
.carte-type__desc { font-size: .9rem; }

/* Navigation semaines */
.semaines {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
  font-weight: 500;
}

/* Jours et créneaux */
.jour {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 1rem;
  margin-bottom: .75rem;
}
.creneaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: .5rem;
}
.creneau {
  display: block;
  text-align: center;
  padding: .55rem 0;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  min-height: 44px;           /* cible tactile confortable */
  line-height: 1.6;
}
.creneau:hover, .creneau:focus-visible { background: var(--accent); color: var(--blanc); }
.complet { margin: 0; font-style: italic; }

/* Récapitulatif */
.recap {
  background: var(--blanc);
  border-left: 4px solid var(--accent);
  border-radius: var(--rayon);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.recap__date { margin: 0; font-weight: 600; }
.recap__heure { margin: .2rem 0 0; font-size: 1.3rem; color: var(--accent); }

.note { background: var(--doux); border-radius: var(--rayon); padding: .75rem 1rem; }
.lien-retour { text-decoration: none; }

.pied {
  text-align: center;
  font-size: .85rem;
  padding: 1.5rem 1rem 2rem;
  border-top: 1px solid var(--doux);
}