/* Les Pépins en voyage — mobile d'abord, une seule media query.
   Bâti sur le patron du site Halifax ; palette des 3 plans validée
   colorblind-safe (voir README, section Palette). */

:root {
  --fond: #f7f4ee;
  --carte: #ffffff;
  --texte: #22303a;
  --texte-doux: #5b6b76;
  --accent: #3a4a5a;      /* chrome neutre (accueil, infos, connexion) */
  --accent-doux: #e7ebee;
  --alerte: #c34a36;
  --bordure: #e0dbd0;

  /* Palette des 3 plans — validée colorblind-safe (ΔE et contraste OK) */
  --plan-a: #8c2f3f;
  --plan-a-doux: #f3e4e6;
  --plan-b: #00789a;
  --plan-b-doux: #dcedf1;
  --plan-c: #357d30;
  --plan-c-doux: #e2ecdf;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
}

/* Une page d'itinéraire adopte la couleur de son plan pour tout le chrome. */
body[data-plan="A"] { --accent: var(--plan-a); --accent-doux: var(--plan-a-doux); }
body[data-plan="B"] { --accent: var(--plan-b); --accent-doux: var(--plan-b-doux); }
body[data-plan="C"] { --accent: var(--plan-c); --accent-doux: var(--plan-c-doux); }

/* ------------------------------------------------------------ entête + nav */

header {
  background: var(--accent);
  color: #fff;
  padding: 0.8rem 1rem 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

header h1 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

header .sous-titre {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.85;
}

nav {
  display: flex;
  gap: 0.2rem;
  overflow-x: auto;
}

nav a {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  padding: 0.7rem 0.5rem;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: 10px 10px 0 0;
}

nav a[aria-current="page"] {
  background: var(--fond);
  color: var(--accent);
}

/* ------------------------------------------------------------ contenu */

main {
  max-width: 72ch;
  margin: 0 auto;
  padding: 1rem;
}

h2 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }

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

footer {
  text-align: center;
  color: var(--texte-doux);
  font-size: 0.9rem;
  padding: 1rem;
}

button {
  font-size: 1rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

button.secondaire {
  background: var(--accent-doux);
  color: var(--accent);
  font-weight: 600;
}

/* ------------------------------------------------------------ cartes plan (comparatif) */

.plans-grille {
  display: grid;
  gap: 0.9rem;
}

@media (min-width: 700px) {
  .plans-grille { grid-template-columns: repeat(3, 1fr); }
}

.carte-plan {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-top: 6px solid var(--couleur-plan, var(--accent));
  border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
}

.carte-plan h3 {
  font-size: 1.15rem;
  color: var(--couleur-plan, var(--accent));
}

.carte-plan .sous-titre {
  display: block;
  font-size: 0.85rem;
  color: var(--texte-doux);
  margin-bottom: 0.5rem;
}

.nuits {
  display: flex;
  gap: 0.4rem;
  margin: 0.4rem 0 0.7rem;
  flex-wrap: wrap;
}

.nuits span {
  background: var(--accent-doux);
  color: var(--texte);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 99px;
}

.carte-plan .concept {
  font-size: 0.93rem;
  color: var(--texte-doux);
  margin: 0 0 0.6rem;
}

.carte-plan ul.pour-qui {
  margin: 0 0 0.8rem;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

.carte-plan ul.pour-qui li { margin-bottom: 0.3rem; }

.carte-plan a.bouton-voir {
  display: block;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  padding: 0.6rem;
  border-radius: 10px;
  background: var(--couleur-plan, var(--accent));
  color: #fff;
}

/* ------------------------------------------------------------ vote */

.vote-widget {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin: 1rem 0;
}

.vote-widget label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texte-doux);
  margin: 0.6rem 0 0.25rem;
}

.vote-widget input[type="text"],
.vote-widget textarea {
  display: block;
  width: 100%;
  padding: 0.6rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--bordure);
  border-radius: 8px;
}

.vote-widget textarea { min-height: 4.5rem; resize: vertical; }

.choix-plan {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.choix-plan label {
  flex: 1;
  min-width: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.55rem;
  border: 2px solid var(--bordure);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  color: var(--texte);
}

.choix-plan input { width: 1.2rem; height: 1.2rem; }

.choix-plan label[data-plan="A"] { accent-color: var(--plan-a); }
.choix-plan label[data-plan="B"] { accent-color: var(--plan-b); }
.choix-plan label[data-plan="C"] { accent-color: var(--plan-c); }
.choix-plan label.coche[data-plan="A"] { border-color: var(--plan-a); background: var(--plan-a-doux); }
.choix-plan label.coche[data-plan="B"] { border-color: var(--plan-b); background: var(--plan-b-doux); }
.choix-plan label.coche[data-plan="C"] { border-color: var(--plan-c); background: var(--plan-c-doux); }

.vote-widget button[type="submit"] { width: 100%; margin-top: 0.8rem; }

/* Résultats — barres horizontales directement étiquetées (lettre + nom +
   décompte en texte) : l'identité de chaque plan ne repose jamais sur la
   couleur seule. */
.resultats-vote { margin-top: 1.2rem; }

.barre-plan { margin-bottom: 0.7rem; }

.barre-plan .etiquette {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.barre-plan .piste {
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 99px;
  height: 1.1rem;
  overflow: hidden;
}

.barre-plan .remplissage {
  height: 100%;
  min-width: 0.3rem;
  border-radius: 99px;
  transition: width 0.3s ease;
}

.barre-plan[data-plan="A"] .remplissage { background: var(--plan-a); }
.barre-plan[data-plan="B"] .remplissage { background: var(--plan-b); }
.barre-plan[data-plan="C"] .remplissage { background: var(--plan-c); }

ul.liste-votes { list-style: none; padding: 0; margin: 0.8rem 0 0; }

ul.liste-votes li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--bordure);
  font-size: 0.92rem;
}

ul.liste-votes .badge-plan {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.75rem;
  color: #fff;
  padding: 0.1rem 0.45rem;
  border-radius: 99px;
}

ul.liste-votes .badge-plan[data-plan="A"] { background: var(--plan-a); }
ul.liste-votes .badge-plan[data-plan="B"] { background: var(--plan-b); }
ul.liste-votes .badge-plan[data-plan="C"] { background: var(--plan-c); }

ul.liste-votes .commentaire { color: var(--texte-doux); }

/* ------------------------------------------------------------ cartes du jour (itinéraire) */

details.jour {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  margin-bottom: 0.7rem;
  overflow: hidden;
}

details.jour.bonus { border: 2px solid var(--accent); }

details.jour summary {
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

details.jour summary::-webkit-details-marker { display: none; }

details.jour summary::after {
  content: "▾ détails";
  color: var(--texte-doux);
  font-size: 0.85rem;
}

details.jour[open] summary::after { content: "▴ replier"; }

.jour .date {
  font-size: 0.9rem;
  color: var(--texte-doux);
  font-weight: 600;
  text-transform: capitalize;
}

.jour .badge {
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 99px;
  margin-left: 0.5rem;
  text-transform: none;
}

.jour .titre { font-weight: 700; font-size: 1.05rem; }
.jour .ville { font-size: 0.9rem; color: var(--texte-doux); }

.jour .fiche {
  border-top: 1px solid var(--bordure);
  padding: 0.8rem 1rem 1rem;
}

.jour .resume { margin: 0 0 0.7rem; font-size: 0.93rem; color: var(--texte-doux); }

table.activites {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

table.activites th, table.activites td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  vertical-align: top;
  border-bottom: 1px solid var(--bordure);
}

table.activites th { color: var(--texte-doux); font-size: 0.8rem; }
table.activites td.heure { font-weight: 700; white-space: nowrap; color: var(--accent); }

.souper-comm {
  background: var(--accent-doux);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-size: 0.93rem;
  margin-bottom: 0.7rem;
}

.souper-comm .titre-encadre { font-weight: 700; margin-bottom: 0.2rem; }
.souper-comm .plan-b { font-style: italic; color: var(--texte-doux); margin-top: 0.3rem; }
.souper-comm .tag-reserver {
  display: inline-block;
  background: var(--alerte);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.05rem 0.4rem;
  border-radius: 99px;
  margin-left: 0.3rem;
}

.conseils {
  border-left: 3px solid var(--accent);
  padding: 0.2rem 0 0.2rem 0.7rem;
  font-size: 0.9rem;
}

.conseils p { margin: 0 0 0.4rem; }
.conseils b { color: var(--accent); }

/* ------------------------------------------------------------ infos : tables de référence */

.section-ref {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
  margin-bottom: 1rem;
}

.section-ref > p.intro { color: var(--texte-doux); font-size: 0.93rem; }

table.ref {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
  margin: 0.6rem 0;
}

table.ref th, table.ref td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  vertical-align: top;
  border-bottom: 1px solid var(--bordure);
}

table.ref th { background: var(--accent-doux); color: var(--texte); }

ul.notes-ref { font-size: 0.88rem; padding-left: 1.2rem; }
ul.notes-ref li { margin-bottom: 0.4rem; }

/* ------------------------------------------------------------ checklist (infos) */

.checklist-categorie { margin-bottom: 1rem; }
.checklist-categorie h3 { font-size: 0.95rem; color: var(--texte-doux); }

ul.checklist { list-style: none; padding: 0; }

ul.checklist li {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  margin-bottom: 0.4rem;
}

ul.checklist label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

ul.checklist input[type="checkbox"] {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  accent-color: var(--accent);
}

ul.checklist li.fait span { text-decoration: line-through; color: var(--texte-doux); }

/* ------------------------------------------------------------ connexion */

main.connexion { max-width: 26rem; }

main.connexion form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

main.connexion form input {
  display: block;
  width: 100%;
  padding: 0.7rem;
  font-size: 1.1rem;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  margin-bottom: 0.8rem;
}

main.connexion form button { width: 100%; }

#message { font-weight: 600; color: var(--alerte); min-height: 1.5rem; }

/* ------------------------------------------------------------ écran large */

@media (min-width: 700px) {
  body { font-size: 18px; }
  header { padding: 1rem 1rem 0; }
  header h1 { text-align: center; }
  nav { max-width: 44rem; margin: 0 auto; overflow: visible; }
}