/* ============================================================
   UISF POC — Portail membre (etape 8)
   Feuille de style unique, mobile-first, sans dependance externe.
   Couleur d'accent : orange UISF (#c2410c), comme le deck/pitch.
   ============================================================ */
:root {
  --orange: #c2410c;
  --orange-fonce: #9a3412;
  --encre: #1f2937;
  --gris: #6b7280;
  --gris-clair: #f3f4f6;
  --bord: #e5e7eb;
  --vert: #15803d;
  --vert-fond: #dcfce7;
  --rouge: #b91c1c;
  --rouge-fond: #fee2e2;
  --ambre: #b45309;
  --ambre-fond: #fef3c7;
  --rayon: 14px;
  --ombre: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--encre);
  background: var(--gris-clair);
  line-height: 1.5;
}

/* ---- Bandeau ---- */
.bandeau {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: var(--orange);
  color: #fff;
  box-shadow: var(--ombre);
}
.marque { color: #fff; text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: .5px; }
.marque span { font-weight: 400; opacity: .85; margin-left: 6px; font-size: 14px; }
.deconnexion { color: #fff; text-decoration: none; font-size: 14px; opacity: .9; }
.deconnexion:hover { opacity: 1; text-decoration: underline; }

/* ---- Conteneur ---- */
.conteneur { max-width: 760px; margin: 0 auto; padding: 18px 16px 40px; }

h1 { font-size: 24px; margin: 8px 0 2px; }
h2 { font-size: 17px; margin: 0 0 12px; }
.sous-titre { color: var(--gris); margin: 0 0 20px; }
.bonjour { margin-bottom: 0; }
.intro { color: var(--gris); }
.aide { color: var(--gris); font-size: 13px; margin-top: 14px; }
.aide a, .intro a { color: var(--orange); }
.retour { display: inline-block; color: var(--orange); text-decoration: none; margin-bottom: 8px; font-size: 14px; }

/* ---- Cartes ---- */
.carte {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 20px; margin-bottom: 16px; box-shadow: var(--ombre);
}
.grille { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grille { grid-template-columns: 1fr 1fr; } }

.carte--accueil { max-width: 440px; margin: 40px auto; text-align: center; }
.carte--accueil .formulaire { text-align: left; margin-top: 22px; }
.pictogramme { font-size: 44px; }

/* Carte mission (mise en avant) */
.carte--mission {
  background: linear-gradient(135deg, var(--orange), var(--orange-fonce));
  color: #fff; border: none;
}
.carte--mission h2 { font-size: 22px; }
.carte--mission .liste-faits li { border-color: rgba(255, 255, 255, .2); }
.carte--mission .liste-faits span { color: rgba(255, 255, 255, .8); }
.carte--mission .liste-faits b { color: #fff; }
.etiquette {
  display: inline-block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  background: rgba(255, 255, 255, .2); padding: 3px 10px; border-radius: 999px; margin-bottom: 6px;
}

/* ---- Listes de faits (cle / valeur) ---- */
.liste-faits { list-style: none; margin: 0; padding: 0; }
.liste-faits li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--bord);
}
.liste-faits li:last-child { border-bottom: none; }
.liste-faits span { color: var(--gris); }
.liste-faits b { text-align: right; }

.gros-chiffre { font-size: 38px; font-weight: 800; color: var(--orange); margin: 6px 0 16px; }
.gros-chiffre small { display: block; font-size: 14px; font-weight: 400; color: var(--gris); }

/* ---- Documents / dotation ---- */
.liste-docs { list-style: none; margin: 0; padding: 0; }
.liste-docs li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--bord);
}
.liste-docs li:last-child { border-bottom: none; }
.liste-docs li > span:first-child { flex: 1; min-width: 120px; }
.exp { color: var(--gris); font-size: 12px; }

.pastille { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pastille--fourni  { background: var(--vert-fond);  color: var(--vert); }
.pastille--manquant{ background: var(--rouge-fond); color: var(--rouge); }
.pastille--expire  { background: var(--ambre-fond); color: var(--ambre); }
.pastille--taille  { background: var(--gris-clair); color: var(--encre); }

/* ---- Formulaires ---- */
.formulaire label { display: block; font-weight: 600; margin-bottom: 6px; }
.formulaire input[type=email] {
  width: 100%; padding: 13px 14px; font-size: 16px;
  border: 1px solid var(--bord); border-radius: 10px; margin-bottom: 16px;
}
.formulaire input[type=email]:focus { outline: 2px solid var(--orange); border-color: var(--orange); }

.bouton {
  display: inline-block; width: 100%; text-align: center; cursor: pointer;
  padding: 13px 18px; font-size: 16px; font-weight: 600;
  border: none; border-radius: 10px; text-decoration: none;
}
.bouton--principal { background: var(--orange); color: #fff; }
.bouton--principal:hover { background: var(--orange-fonce); }
.bouton--large { margin-top: 20px; }

/* ---- Disponibilites (une ligne par semaine) ---- */
.semaines { display: grid; gap: 8px; }
.semaine {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--bord); border-radius: 10px; padding: 8px 12px;
}
.semaine__num { font-weight: 700; width: 42px; color: var(--gris); }
.choix { display: flex; gap: 6px; flex: 1; }
.choix__opt {
  flex: 1; text-align: center; cursor: pointer; user-select: none;
  font-size: 13px; padding: 8px 4px; border-radius: 8px;
  border: 1px solid var(--bord); color: var(--gris); background: #fff;
}
.choix__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
/* surbrillance live au clic (et fallback serveur via --actif) */
.choix__opt--disponible:has(input:checked),  .choix__opt--disponible.choix__opt--actif  { background: var(--vert-fond);  color: var(--vert);  border-color: var(--vert); font-weight: 600; }
.choix__opt--sous_reserve:has(input:checked), .choix__opt--sous_reserve.choix__opt--actif { background: var(--ambre-fond); color: var(--ambre); border-color: var(--ambre); font-weight: 600; }
.choix__opt--indisponible:has(input:checked), .choix__opt--indisponible.choix__opt--actif { background: var(--rouge-fond); color: var(--rouge); border-color: var(--rouge); font-weight: 600; }

/* ---- Alertes (messages flash) ---- */
.alerte { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.alerte--info   { background: var(--vert-fond);  color: var(--vert); }
.alerte--erreur { background: var(--rouge-fond); color: var(--rouge); }

/* ---- Pied de page ---- */
.pied { text-align: center; color: var(--gris); font-size: 12px; padding: 24px 16px; }
.pied p { margin: 0; }