/* Université d'Été de la Monoparentalité — charte de l'association.
   Palette officielle : REF-COULEURS.png du kit graphique.

   Règle de lisibilité, issue des ratios de contraste WCAG calculés sur blanc :
     magenta 4,42:1  -> sous le seuil AA de 4,5:1 : aplats, boutons, gros titres uniquement
     bleu   10,47:1  -> c'est lui qui porte tout le texte
     or      2,39:1  -> décoratif seulement
   Aucun texte courant n'est donc en magenta ni en or. */

@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Calistoga';
  src: url('/fonts/calistoga-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --ue-magenta: #e61678;
  --ue-bleu: #0b445e;
  --ue-or: #cca238;
  --ue-rose-pale: #f8d6cc;
  --ue-rose: #eb589a;

  --ue-bleu-clair: #e7eef2;
  --ue-gris: #5d7684;
  --ue-succes: #1b6b47;
  --ue-alerte: #8a4b00;

  --rayon: 10px;
  --ombre: 0 1px 3px rgba(11, 68, 94, .12);
  --max: 46rem;

  --police: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --police-titre: 'Calistoga', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ue-bleu);
  background: #fff;
}

/* ---------- En-tête ---------- */

.bandeau {
  background: var(--ue-magenta);
  color: #fff;
  padding: 1.5rem 1rem 1.75rem;
  text-align: center;
  background-image: url('/img/rayonnement.webp');
  background-size: cover;
  background-position: center;
}
.bandeau img.logo { height: 56px; width: auto; margin-bottom: .75rem; }
.bandeau h1 {
  font-size: clamp(1.4rem, 5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .35rem;
  text-transform: uppercase;
  line-height: 1.1;
}
.bandeau .baseline {
  font-family: var(--police-titre);
  font-size: clamp(1rem, 3.2vw, 1.3rem);
  background: var(--ue-or);
  color: var(--ue-bleu);
  display: inline-block;
  padding: .15rem .7rem;
  border-radius: 3px;
}
.bandeau .pratique { margin: .8rem 0 0; font-size: .95rem; font-weight: 600; }

/* ---------- Structure ---------- */

main { max-width: var(--max); margin: 0 auto; padding: 1.5rem 1rem 4rem; }

h2 {
  font-size: 1.25rem; font-weight: 800; margin: 2.5rem 0 .25rem;
  padding-bottom: .4rem; border-bottom: 3px solid var(--ue-or);
}
h2:first-of-type { margin-top: 1rem; }
h3 { font-size: 1.02rem; font-weight: 600; margin: 1.4rem 0 .4rem; }
p { margin: .5rem 0; }
.chapo { color: var(--ue-gris); font-size: .95rem; }

.encart {
  background: var(--ue-rose-pale);
  border-radius: var(--rayon);
  padding: .9rem 1rem;
  margin: 1rem 0;
  font-size: .93rem;
}
.encart strong { font-weight: 600; }
.encart--info { background: var(--ue-bleu-clair); }

.erreurs {
  background: #fdeaea; border-left: 4px solid #c0392b;
  border-radius: var(--rayon); padding: .9rem 1rem; margin: 1rem 0;
}
.erreurs ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* ---------- Champs ---------- */

.champ { margin: .9rem 0; }
.champ > label, .legende {
  display: block; font-weight: 600; font-size: .95rem; margin-bottom: .3rem;
}
.champ .aide { display: block; font-weight: 400; color: var(--ue-gris); font-size: .86rem; }

input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
  width: 100%; padding: .62rem .7rem;
  font: inherit; color: var(--ue-bleu);
  background: #fff;
  border: 1.5px solid #b9ccd6; border-radius: var(--rayon);
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, .option:focus-within {
  outline: 3px solid var(--ue-rose); outline-offset: 1px;
}
input[aria-invalid=true] { border-color: #c0392b; }

fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 30rem) { .duo { grid-template-columns: 1fr; } }

/* ---------- Options du programme ---------- */

.option {
  display: flex; gap: .7rem; align-items: flex-start;
  border: 1.5px solid #cfdde4; border-radius: var(--rayon);
  padding: .7rem .8rem; margin: .5rem 0;
  cursor: pointer; background: #fff;
  transition: border-color .12s, background .12s;
}
.option:hover { border-color: var(--ue-rose); }
/* 1.4rem ≈ 22 px : confortable au pouce. La zone cliquable réelle reste toute
   la carte `.option`, mais une case trop petite se rate quand même à l'œil. */
.option input { margin: .2rem 0 0; flex: 0 0 auto; width: 1.4rem; height: 1.4rem; accent-color: var(--ue-magenta); }
.option:has(input:checked) { border-color: var(--ue-magenta); background: #fff5f9; }
.option .corps { flex: 1; min-width: 0; }
.option .titre { font-weight: 600; }
.option .horaire { font-variant-numeric: tabular-nums; color: var(--ue-gris); font-size: .88rem; }
.option .desc { display: block; font-size: .88rem; color: var(--ue-gris); margin-top: .2rem; }
.option .intervenants { font-size: .84rem; color: var(--ue-gris); margin-top: .25rem; }

.option[data-indispo] { opacity: .55; }
.option[data-indispo] input { pointer-events: none; }

.badge {
  display: inline-block; font-size: .74rem; font-weight: 600;
  padding: .1rem .45rem; border-radius: 999px; margin-left: .35rem;
  vertical-align: .05em; white-space: nowrap;
}
.badge--places { background: var(--ue-bleu-clair); color: var(--ue-bleu); }
.badge--tendu { background: #fff1dc; color: var(--ue-alerte); }
.badge--complet { background: #fdeaea; color: #a02318; }
.badge--libre { background: #e6f3ec; color: var(--ue-succes); }
.badge--reserve { background: #fff1dc; color: var(--ue-alerte); }
.badge--reco { background: #e6f3ec; color: var(--ue-succes); }

.conflit { font-size: .84rem; color: var(--ue-alerte); margin: .1rem 0 0 2rem; }

.option--info { cursor: default; border-style: dashed; background: #fbfdfe; }
.option--info:hover { border-color: #cfdde4; }
.option--creneau { margin: .35rem 0; }
.champ-code {
  display: block; margin: .5rem 0 .1rem; padding: .55rem .7rem;
  background: var(--ue-rose-pale); border-radius: var(--rayon);
}
.champ-code label { font-weight: 600; font-size: .9rem; }
/* Un bloc de créneaux par enfant, dans la section « Garde d'enfants » —
   c'est là qu'on les cherche. */
.garde-enfant {
  margin: .9rem 0; padding: .8rem; border: 1.5px solid #cfdde4;
  border-radius: var(--rayon); background: #fbfdfe;
}
.garde-enfant .legende { margin-bottom: .2rem; }
.envoi--chat { margin-top: .6rem; }

/* ---------- Mise en avant de l'assistant ---------- */

.assistant-promo {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--ue-bleu); color: #fff;
  border-radius: var(--rayon); padding: 1.1rem 1.2rem; margin: 1.4rem 0;
  border-left: 6px solid var(--ue-or);
}
.assistant-promo__texte { flex: 1 1 16rem; min-width: 0; }
.assistant-promo__titre {
  margin: 0 0 .2rem; font-weight: 800; font-size: 1.08rem; line-height: 1.25;
}
.assistant-promo__desc { margin: 0; font-size: .9rem; color: #d6e4ec; }
.assistant-promo__cta { flex: 0 0 auto; background: var(--ue-magenta); }
.assistant-promo__cta:hover { background: #fff; color: var(--ue-bleu); }
@media (max-width: 30rem) { .assistant-promo__cta { width: 100%; } }

.assistant-note {
  font-size: .82rem; color: var(--ue-gris); margin-top: 1.2rem;
  border-top: 1px solid #dde8ee; padding-top: .7rem;
}

/* Le retour au formulaire reste atteignable sans revenir en haut de page :
   sur mobile, la conversation pousse vite le contenu hors de l'écran. */
.retour { margin: 1.4rem 0 .5rem; }
@media (max-width: 30rem) { .retour .bouton { width: 100%; } }

/* Le fil de conversation ne doit jamais élargir la page : un modèle peut
   renvoyer une URL ou un mot très long. */
#fil { overflow-wrap: anywhere; word-break: break-word; }
#fil .encart { max-width: 100%; }
#suggestions .sugg { margin: 0 .3rem .4rem 0; white-space: normal; text-align: left; }


.groupe-choix {
  border: 1.5px dashed var(--ue-or); border-radius: var(--rayon);
  padding: .3rem .8rem .8rem; margin: .9rem 0;
}
.groupe-choix .legende { margin-top: .7rem; }
.groupe-choix .consigne { font-size: .87rem; color: var(--ue-gris); margin: .1rem 0 .5rem; }

/* ---------- Enfants ---------- */

.enfant {
  border: 1.5px solid #cfdde4; border-radius: var(--rayon);
  padding: .8rem; margin: .6rem 0; background: #fbfdfe;
}
.enfant .entete { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.enfant .entete strong { font-size: .95rem; }

/* ---------- Boutons ---------- */

button, .bouton {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 0; border-radius: var(--rayon); padding: .7rem 1.1rem;
  background: var(--ue-magenta); color: #fff;
  text-decoration: none; display: inline-block; text-align: center;
}
button:hover, .bouton:hover { background: #c8125f; }
.bouton--secondaire {
  background: #fff; color: var(--ue-bleu); border: 1.5px solid var(--ue-bleu);
}
.bouton--secondaire:hover { background: var(--ue-bleu-clair); }
.bouton--petit { padding: .35rem .7rem; font-size: .86rem; }

.envoi { margin-top: 2rem; }
.envoi button { width: 100%; font-size: 1.05rem; padding: .9rem; }

/* ---------- Récapitulatif ---------- */

.recap { border: 2px solid var(--ue-or); border-radius: var(--rayon); padding: 1rem; margin: 1.2rem 0; }
.recap dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; }
.recap dt { font-weight: 600; }
.recap dd { margin: 0; }
.qr { text-align: center; margin: 1.2rem 0; }
.qr svg, .qr img { width: 220px; height: 220px; }

.telecharger { margin: 1.2rem 0; }
.telecharger .bouton { width: 100%; font-size: 1.02rem; padding: .85rem; }

/* ---------- Rendu des réponses de l'assistant ---------- */

.bulle p { margin: 0 0 .55rem; }
.bulle p:last-child { margin-bottom: 0; }
.bulle ul, .bulle ol { margin: .3rem 0 .6rem; padding-left: 1.3rem; }
.bulle li { margin: .15rem 0; }
.bulle strong { font-weight: 600; }
.bulle code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; background: rgba(11, 68, 94, .07);
  padding: .05rem .3rem; border-radius: 4px;
}
.bulle a { color: var(--ue-bleu); }
.bulle .titre-reponse { font-weight: 600; display: block; margin: .5rem 0 .2rem; }
.bulle .titre-reponse:first-child { margin-top: 0; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table-scroll { overflow-x: auto; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid #dde8ee; }
th { font-weight: 600; background: var(--ue-bleu-clair); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Pied ---------- */

footer {
  border-top: 3px solid var(--ue-or);
  padding: 1.2rem 1rem 2rem; margin-top: 3rem;
  font-size: .85rem; color: var(--ue-gris); text-align: center;
}
footer a { color: var(--ue-bleu); display: inline-block; padding: .35rem 0; }

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media print {
  .bandeau { background: #fff; color: var(--ue-bleu); }
  .no-print { display: none !important; }
}

/* ---------- Administration ---------- */

.recherche__ligne { display: flex; gap: .5rem; }
.recherche__ligne input { flex: 1; min-width: 0; }
.recherche__ligne button { flex: 0 0 auto; }
td.petit, .petit { font-size: .85rem; color: var(--ue-gris); }
tbody tr:hover { background: #fbfdfe; }

.zone-danger {
  margin-top: 3rem; padding: 1rem; border: 1.5px solid #e3b3ae;
  border-radius: var(--rayon); background: #fdf6f5;
}
.zone-danger h3 { margin-top: 0; color: #a02318; }
.bouton--danger { background: #a02318; }
.bouton--danger:hover { background: #7d1a12; }
@media (max-width: 30rem) { .bouton--danger { width: 100%; } }

/* Le nom est le point d'entrée vers la fiche : sur téléphone, le bouton
   « Modifier » se retrouve hors écran dans le tableau défilant. */
.lien-inscrit { font-weight: 600; color: var(--ue-bleu); display: inline-block; padding: .2rem 0; }

/* ---------- Capter celles et ceux qui ne peuvent pas venir ---------- */

.contenus {
  border: 1.5px solid var(--ue-or); border-left: 6px solid var(--ue-or);
  border-radius: var(--rayon); padding: 1rem 1.1rem; margin: 1.4rem 0;
  background: #fffdf7;
}
/* Replié par défaut : le bloc doit être visible d'entrée sans repousser le
   formulaire d'inscription de 800 px sur un téléphone. */
/* Le résumé EST le bouton d'appel : un seul élément plutôt qu'un CTA suivi
   d'un bloc qui répète la même chose. */
.contenus__titre {
  margin: -1rem -1.1rem; padding: .85rem 2.6rem .85rem 1.1rem;
  font-weight: 700; font-size: 1rem; cursor: pointer;
  list-style: none; position: relative; border-radius: 8px;
  transition: background .12s;
}
.contenus__titre:hover { background: #fff6e2; }
.contenus__titre::-webkit-details-marker { display: none; }
.contenus__titre::after {
  content: '→'; position: absolute; right: 1.1rem; top: 50%;
  transform: translateY(-50%); font-size: 1.15rem; color: var(--ue-or); font-weight: 800;
}
.contenus[open] .contenus__titre { margin-bottom: .3rem; background: #fff6e2; }
.contenus[open] .contenus__titre::after { content: '↓'; }
.contenus__desc { margin: 0 0 .8rem; font-size: .92rem; color: var(--ue-gris); }
.contenus__form .champ { margin: .6rem 0; }
.contenus__cta { width: 100%; margin-top: .4rem; }


.contenus:target { border-color: var(--ue-magenta); }

/* Remplacent des styles en ligne : la CSP (`style-src 'self'`) les bloque, et
   les affaiblir pour trois marges serait un mauvais échange. */
.sans-marge-bas { margin: 0 0 .6rem; }
.sans-marge-haut { margin-top: 0; }
.actions-bas { margin-top: 2rem; }
.lien-long { word-break: break-all; }

/* La mention d'aide doit passer à la ligne : collée au titre, on lit
   « Créneaux pour Lina 2 créneaux au maximum ». */
.garde-enfant .legende { display: block; }
.garde-enfant .legende .aide { display: block; font-weight: 400; margin-top: .15rem; }