/* La page publique des webinaires de Moiki EDU (events.moiki.app).
   Couleurs et polices de l'application Moiki EDU. Aucun style en ligne : la politique de
   sécurité de publisher les refuse — les couleurs par webinaire passent par des classes. */
@font-face { font-family: "Lato"; font-weight: 400; font-display: swap; src: url("/statique/polices/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-display: swap; src: url("/statique/polices/lato-700.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 700; font-display: swap; src: url("/statique/polices/playfair-display-700.woff2") format("woff2"); }

:root {
  --nuit: #1d1745; --rose: #ff0059; --cyan: #00f8ff; --violet: #461fbf; --violet-clair: #7c5cff;
  --fond: #f7f6fc; --surface: #ffffff; --encre: #1b1838; --doux: #5d5880; --trait: #e3e0f0;
  --ok: #0f8a5f; --plein: #b4003f; --avis: #fff4c2; --avis-encre: #4a3b00;
  /* Le bleu des actions et la police de titre sont ceux de edu.moiki.app : les deux sites se suivent. */
  --bleu: #1b72b8; --bleu-fonce: #155a93;
  --titre: "Playfair Display", Georgia, "Times New Roman", serif;
  --texte: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
  color-scheme: only light;
}
/* Une seule apparence, claire, quel que soit le réglage du système : en sombre, la page se fondait
   dans son bandeau et les couleurs de la marque juraient (retour de Clément, 08/10/2026). */

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fond); color: var(--encre); font-family: var(--texte); font-size: 16px; line-height: 1.55; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; border-radius: 6px; }

.t-decouverte { --c: var(--cyan); }
.t-atelier, .t-demo { --c: var(--rose); }
.t-cafe { --c: var(--violet-clair); }
.t-formation { --c: #ffb020; }

/* En-tête clair et bas, à l'image de edu.moiki.app. Les rayures du logo y ont été essayées :
   elles juraient (retour de Clément, 08/10/2026). Le logo suffit à porter les couleurs. */
.bande { background: var(--surface); color: var(--encre); border-bottom: 1px solid var(--trait);
  background-image: radial-gradient(60% 140% at 85% 0%, rgba(27, 114, 184, .09), transparent 70%); }
.bande-in { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 16px 20px 22px; }
.bande.courte .bande-in { padding-bottom: 16px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--encre); }
.logo svg { width: 52px; height: auto; }
.logo span { font-family: var(--titre); font-weight: 700; font-size: 19px; }
.bande h1 { font-family: var(--titre); font-weight: 700; font-size: clamp(27px, 4.2vw, 40px); line-height: 1.08; margin: 16px 0 6px; max-width: 34ch; text-wrap: balance; }
.bande h1 em { font-style: normal; color: var(--bleu); }
.chapo { font-size: 16.5px; max-width: 62ch; color: var(--doux); margin: 0; }
.faits { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 14px; color: var(--doux); }
.faits span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); margin-right: 8px; }

main { max-width: 1080px; margin: 0 auto; padding-inline: 20px; padding-block: 32px 56px; display: grid; gap: 40px; }
main.etroite { max-width: 640px; }
h2 { font-family: var(--titre); font-weight: 700; font-size: 28px; line-height: 1.15; margin: 0 0 6px; text-wrap: balance; }
.sous { color: var(--doux); margin: 0 0 18px; max-width: 60ch; }

.formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.format { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 18px 18px 16px 22px; display: grid; gap: 8px; align-content: start; position: relative; overflow: hidden; }
.format::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--c); }
.format h3 { font-family: var(--titre); font-weight: 700; font-size: 21px; margin: 0; }
.format p { margin: 0; color: var(--doux); font-size: 15px; }
.horaires { display: flex; flex-wrap: wrap; gap: 6px; }
.pastille { font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--c, var(--trait)); white-space: nowrap; }
.pour { font-size: 13.5px; }

.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filtre { border: 1px solid var(--trait); background: var(--surface); color: var(--encre); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 14px; text-decoration: none; }
.filtre[aria-current="true"] { background: var(--nuit); color: #fff; border-color: var(--nuit); }

.jour { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; padding-block: 18px; border-top: 1px solid var(--trait); }
.jour:first-child { border-top: 0; }
.date { font-family: var(--titre); line-height: 1; }
.date .j { font-size: 14px; color: var(--doux); text-transform: uppercase; letter-spacing: .08em; display: block; }
.date .n { font-size: 44px; font-weight: 700; display: block; }
.date .m { font-size: 15px; }
.seances { display: grid; gap: 10px; min-width: 0; }
.seance { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.heure { font-family: var(--titre); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.heure small { display: block; font-family: var(--texte); font-weight: 400; font-size: 12.5px; color: var(--doux); }
.quoi { min-width: 0; }
.quoi b { font-family: var(--titre); font-weight: 700; font-size: 18px; }
.quoi b::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); transform: rotate(15deg); margin-right: 8px; }
.programme { display: block; font-size: 14px; color: var(--doux); }
.programme strong { color: var(--encre); }
.places { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--doux); font-variant-numeric: tabular-nums; }
.jauge { width: 90px; height: 6px; border-radius: 3px; background: var(--trait); overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--c); width: 0; }
.j1 span { width: 10%; } .j2 span { width: 20%; } .j3 span { width: 30%; } .j4 span { width: 40%; } .j5 span { width: 50%; }
.j6 span { width: 60%; } .j7 span { width: 70%; } .j8 span { width: 80%; } .j9 span { width: 90%; } .j10 span { width: 100%; }
.reserver, .envoyer { display: inline-block; border: 0; border-radius: 10px; padding: 10px 16px; background: var(--bleu); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; font: inherit; font-weight: 700; }
.reserver:hover, .envoyer:hover { background: var(--bleu-fonce); }
.complet { color: var(--plein); font-weight: 700; }
.vide { color: var(--doux); padding: 18px 0; }

.carte { background: var(--surface); border: 1px solid var(--trait); border-radius: 16px; padding: 22px 20px; display: grid; gap: 14px; }
.carte h2 { margin: 0; }
.rappel { color: var(--doux); margin: 0; }
form { display: grid; gap: 14px; margin: 0; }
.ligne2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display: grid; gap: 5px; font-weight: 700; font-size: 14px; }
label small { font-weight: 400; color: var(--doux); }
input, select { border: 1px solid var(--trait); background: var(--fond); color: var(--encre); border-radius: 10px; padding: 10px 12px; font: inherit; font-weight: 400; width: 100%; }
.case { display: flex; gap: 10px; align-items: start; font-weight: 400; font-size: 14.5px; }
.case input { width: auto; margin-top: 3px; }
.rgpd { font-size: 12.5px; color: var(--doux); margin: 0; }
.envoyer { padding: 13px; font-size: 17px; }
.erreur { color: var(--plein); font-weight: 700; margin: 0; }
.leurre { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.coche { width: 54px; height: 54px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); display: grid; place-items: center; font-size: 28px; font-weight: 700; }
.coche.non { background: color-mix(in srgb, var(--plein) 14%, transparent); color: var(--plein); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn2 { border: 1px solid var(--trait); background: var(--fond); color: var(--encre); border-radius: 10px; padding: 9px 14px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.btn2.danger { color: var(--plein); }
.retour { font-size: 14px; }

footer { max-width: 1080px; margin: 0 auto; padding-inline: 20px; padding-block: 0 40px; color: var(--doux); font-size: 13.5px; }

@media (max-width: 640px) {
  .jour { grid-template-columns: 1fr; gap: 10px; }
  .date { display: flex; gap: 8px; align-items: baseline; }
  .date .j, .date .n { display: inline; }
  .date .n { font-size: 30px; }
  .seance { grid-template-columns: 62px minmax(0, 1fr); }
  .seance .reserver, .seance .complet { grid-column: 1 / -1; text-align: center; }
  .ligne2 { grid-template-columns: 1fr; }
  .bande::after { width: 60%; opacity: .45; }
}

/* ---------- La page d'accueil : une carte par webinaire, avec ses dates ---------- */
.webinaires { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.webinaire { background: var(--surface); border: 1px solid var(--trait); border-radius: 16px; padding: 20px 20px 18px 26px; display: grid; gap: 16px; position: relative; overflow: hidden; scroll-margin-top: 16px; }
.webinaire::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--c); }
/* Le webinaire quotidien occupe toute la largeur : son calendrier a besoin de place. */
.webinaire.large { grid-column: 1 / -1; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; }
.w-tete { display: grid; gap: 8px; align-content: start; }
.webinaire h3 { font-family: var(--titre); font-weight: 700; font-size: 23px; line-height: 1.15; margin: 0; }
.webinaire p { margin: 0; color: var(--doux); font-size: 15px; }
.w-dates { display: grid; gap: 10px; align-content: start; }
.w-dates h4 { margin: 0; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); font-weight: 700; }

.semaine { display: grid; gap: 6px; }
.semaine + .semaine { margin-top: 6px; }
.semaine-nom { font-size: 13px; color: var(--doux); font-weight: 700; }
.jours { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.jour-case { background: var(--fond); border-radius: 10px; padding: 7px 5px 8px; display: grid; gap: 5px; justify-items: center; align-content: start; }
.jour-case.vide { opacity: .55; }
.jour-nom { font-size: 12.5px; color: var(--doux); white-space: nowrap; }
.rien { color: var(--doux); }

.dates { display: flex; flex-wrap: wrap; gap: 8px; }
.creneau { display: inline-grid; justify-items: center; line-height: 1.15; border-radius: 9px; padding: 6px 11px; font-weight: 700; font-size: 14.5px; white-space: nowrap;
  text-decoration: none; background: var(--surface); color: var(--bleu-fonce); border: 1.5px solid var(--bleu); }
a.creneau:hover, a.creneau:focus-visible { background: var(--bleu); color: #fff; }
.creneau small { font-size: 11px; font-weight: 700; color: var(--doux); }
a.creneau:hover small, a.creneau:focus-visible small { color: #fff; }
.creneau.presque small { color: var(--plein); }
.creneau.plein { border-color: var(--trait); color: var(--doux); text-decoration: line-through; }
.creneau.plein small { text-decoration: none; }
.jour-case .creneau { padding-inline: 8px; width: 100%; }

.plus { margin-top: 2px; }
.plus > summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--bleu); list-style: none; padding: 4px 0; width: fit-content; }
.plus > summary::-webkit-details-marker { display: none; }
.plus > summary::after { content: " ▾"; }
.plus[open] > summary::after { content: " ▴"; }
.plus[open] > summary { margin-bottom: 8px; }
.programmes { margin: 4px 0 0; padding-left: 18px; font-size: 14px; color: var(--doux); display: grid; gap: 2px; }
.reprise { background: var(--avis); color: var(--avis-encre); border-radius: 10px; padding: 10px 14px; margin: 0 0 18px; width: fit-content; }

@media (max-width: 760px) {
  .webinaires, .webinaire.large { grid-template-columns: minmax(0, 1fr); }
  .webinaire.large { gap: 16px; }
  .jour-nom { font-size: 11.5px; }
  .creneau { font-size: 13.5px; padding-inline: 8px; }
}

/* ---------- Les pages durables : texte, questions, liens vers Moiki EDU ---------- */
.bande.moyenne h1 { font-size: clamp(26px, 4vw, 36px); }
.ariane { font-size: 14px; color: var(--doux); margin: 10px 0 2px; }
.ariane a { color: var(--bleu); }
.webinaire h3 a { color: inherit; text-decoration: none; }
.webinaire h3 a:hover { text-decoration: underline; }
.savoir { font-size: 14px; font-weight: 700; color: var(--bleu); text-decoration: none; width: fit-content; }
.savoir:hover { text-decoration: underline; }
.webinaire h2 { font-size: 23px; margin: 0; }
.carte h1 { font-family: var(--titre); font-weight: 700; font-size: 28px; line-height: 1.15; margin: 0 0 6px; text-wrap: balance; }

.texte, .moiki-edu, .questions { max-width: 760px; }
.texte p, .moiki-edu p { margin: 0 0 12px; }
.deroule { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 8px; }
.liens-edu { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.liens-edu a, .moiki-edu p a, .texte p a, .retour a { color: var(--bleu); font-weight: 700; }
.autres { margin-top: 14px !important; color: var(--doux); }
.question { border-top: 1px solid var(--trait); padding: 12px 0; }
.question:last-child { border-bottom: 1px solid var(--trait); }
.question > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.question > summary::-webkit-details-marker { display: none; }
.question > summary::after { content: "+"; color: var(--bleu); font-weight: 700; }
.question[open] > summary::after { content: "–"; }
.question p { margin: 8px 0 0; color: var(--doux); max-width: 68ch; }

.pied-liens { margin-bottom: 14px; display: grid; gap: 8px; }
.pied-liens ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pied-liens a { color: inherit; }
footer p { margin: 0; }