/* Missions bénévoles : cartes qui se retournent + formulaire de candidature.
   Identique sur les deux sites : les couleurs viennent des réglages de chaque site (Lions : --card, --text… ; Ouhlala : --surface, --ink…). */
.missions {
  --m-accent: var(--red);
  --m-accent-2: var(--teal, var(--gold, var(--red)));
  --m-card: var(--card, var(--surface, #fff));
  --m-ink: var(--heading, var(--ink, #111));
  --m-text: var(--text, var(--ink, #222));
  --m-muted: var(--muted, #666);
  --m-line: var(--line-strong, var(--line, rgba(127,127,127,.35)));
  --m-input: var(--input-bg, var(--surface, #fff));
  --m-radius: var(--radius, 14px);
}

/* ---------- Introduction ---------- */
.m-intro { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.m-intro .prose { font-size: 1.12em; color: var(--m-text); }
.m-intro .prose p { margin: 0 0 1em; }
.m-cta { margin-top: 8px; }
.m-lead { max-width: 720px; color: var(--m-muted); }
.m-help { color: var(--m-muted); font-size: .92em; margin: 0 0 18px; }

/* ---------- Cartes : petites, la fiche complète s'agrandit par-dessus au survol (ou à l'appui) ---------- */
.m-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--m-card-w, 170px)), 1fr)); gap: 14px; }
.m-size-medium .m-cards { --m-card-w: 220px; }
.m-size-large .m-cards { --m-card-w: 280px; gap: 20px; }
.m-card { position: relative; animation: m-in .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(min(var(--i, 0), 12) * 35ms); }
@keyframes m-in { from { opacity: 0; transform: translateY(12px); } }
.m-front { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; overflow: hidden;
  padding: 18px 12px 14px; border-radius: var(--m-radius); border: 1px solid var(--m-line); color: var(--m-text); font: inherit; cursor: pointer;
  background: linear-gradient(165deg, color-mix(in srgb, var(--m-accent) 16%, var(--m-card)) 0%, var(--m-card) 60%);
  box-shadow: 0 10px 26px -20px rgba(0,0,0,.6); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.m-front::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--m-accent), var(--m-accent-2)); }
.m-front:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(0,0,0,.65); }
.m-front:focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
.m-icon { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%; font-size: 26px; line-height: 1;
  background: color-mix(in srgb, var(--m-accent) 14%, transparent); border: 2px solid color-mix(in srgb, var(--m-accent) 45%, transparent); }
.m-size-large .m-icon { width: 60px; height: 60px; font-size: 30px; }
.m-front .m-name { font-family: var(--display); font-size: 1.02rem; line-height: 1.15; color: var(--m-ink); overflow-wrap: anywhere; }
.m-size-large .m-front .m-name { font-size: 1.2rem; }
.m-front .m-hook { font-size: .82em; line-height: 1.35; color: var(--m-muted); }
.m-more { margin-top: auto; padding-top: 4px; font-size: .8em; font-weight: 700; color: var(--m-accent); }
.m-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .75em; font-weight: 700; background: color-mix(in srgb, var(--m-muted) 22%, transparent); color: var(--m-ink); }
.m-badge.full { background: color-mix(in srgb, var(--m-accent-2) 28%, transparent); }
.m-card.is-off .m-icon { filter: grayscale(.7); opacity: .75; }

/* fiche agrandie */
.m-pop { position: absolute; z-index: 30; top: -10px; left: var(--pop-x, 0); width: var(--pop-w, 360px); max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 9px; padding: 20px 20px 18px; border-radius: calc(var(--m-radius) + 4px); background: var(--m-card); color: var(--m-text);
  border: 2px solid color-mix(in srgb, var(--m-accent) 55%, var(--m-line)); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.04);
  opacity: 0; visibility: hidden; transform: scale(.55); transition: opacity .18s ease, transform .24s cubic-bezier(.2,.8,.25,1), visibility 0s linear .24s; overflow-wrap: anywhere; }
.m-card.is-open { z-index: 31; }
.m-card.is-open .m-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease, transform .26s cubic-bezier(.2,.8,.25,1), visibility 0s; }
.m-pop-head { display: flex; gap: 12px; align-items: center; }
.m-pop .m-name { font-family: var(--display); font-size: 1.3rem; line-height: 1.12; margin: 0; color: var(--m-ink); }
.m-pop .m-hook { margin: 0; font-weight: 700; color: var(--m-ink); }
.m-pop h4 { margin: 6px 0 0; font-size: .78em; text-transform: uppercase; letter-spacing: .06em; color: var(--m-accent); }
.m-pop p, .m-pop ul { margin: 0; font-size: .93em; line-height: 1.5; }
.m-pop ul { padding-left: 1.15em; }
.m-pop li + li { margin-top: 2px; }
.m-note { padding: 9px 12px; border-left: 3px solid var(--m-accent-2); background: color-mix(in srgb, var(--m-accent-2) 10%, transparent); border-radius: 6px; }
.m-actions { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.m-close { background: none; border: 0; padding: 6px 2px; font: inherit; font-size: .9em; font-weight: 700; color: var(--m-muted); cursor: pointer; }
.m-close:hover { color: var(--m-ink); }
.m-close:focus-visible, .m-pop .btn:focus-visible { outline: 3px solid var(--m-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .m-close { display: none; } }
@media (max-width: 600px) {
  .m-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .m-size-large .m-cards { grid-template-columns: 1fr; }
  .m-pop { top: 0; }
}

/* animations désactivées sur l'appareil : la fiche s'ouvre sans effet */
@media (prefers-reduced-motion: reduce) {
  .m-card { animation: none; }
  .m-front, .m-pop, .m-card.is-open .m-pop { transition: none; transform: none; }
  .m-front:hover { transform: none; }
}
/* mode édition : les fiches sont affichées sous les cartes pour pouvoir les relire */
.m-static .m-card { animation: none; }
.m-static .m-pop { position: static; width: auto; opacity: 1; visibility: visible; transform: none; margin-top: 6px; box-shadow: none; }
.m-static .m-more, .m-static .m-close, .m-static .m-help { display: none; }

/* ---------- Encadré « à savoir » ---------- */
.m-info { display: flex; gap: 16px; align-items: flex-start; margin: 48px auto 0; max-width: 860px; padding: 22px 24px; border-radius: var(--m-radius);
  background: color-mix(in srgb, var(--m-accent-2) 12%, var(--m-card)); border: 1px solid color-mix(in srgb, var(--m-accent-2) 40%, transparent); color: var(--m-text); }
.m-info-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--m-accent-2); color: #fff; font-weight: 700; font-family: Georgia, serif; }
.m-info .prose p:last-child { margin-bottom: 0; }

/* ---------- Formulaire ---------- */
.m-form-wrap { max-width: 860px; margin: 72px auto 0; scroll-margin-top: 90px; }
.m-form-title { text-align: center; margin-bottom: 10px; }
.m-form-intro { text-align: center; color: var(--m-muted); }
.m-form { display: grid; gap: 22px; margin-top: 24px; }
.m-form fieldset { margin: 0; padding: 22px; border: 1px solid var(--m-line); border-radius: var(--m-radius); background: var(--m-card); display: grid; gap: 16px; min-width: 0; }
.m-form legend { padding: 0 8px; font-family: var(--display); font-size: 1.15rem; color: var(--m-ink); }
.m-form .m-yn { padding: 0; border: 0; background: none; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.m-form .m-yn legend { font-family: inherit; font-size: inherit; font-weight: 700; padding: 0; margin-bottom: 6px; width: 100%; }
.m-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.m-form label { display: grid; gap: 6px; font-weight: 700; color: var(--m-ink); }
.m-form label small, .m-form .m-sub small { font-weight: 400; color: var(--m-muted); }
.m-form input:not([type=checkbox]):not([type=radio]), .m-form select, .m-form textarea { width: 100%; background: var(--m-input); border: 1px solid var(--m-line); border-radius: 10px;
  color: var(--m-ink); font: inherit; font-weight: 400; padding: 12px 14px; min-height: 48px; }
.m-form textarea { resize: vertical; }
.m-form :is(input, select, textarea):focus-visible { outline: 2px solid var(--m-accent); outline-offset: 1px; }
.m-form [aria-invalid=true] { border-color: var(--m-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-accent) 25%, transparent); }
.m-sub { margin: 0 0 -6px; font-weight: 700; color: var(--m-ink); }
.m-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.m-form .m-check { display: inline-flex; grid-template-columns: none; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--m-text); cursor: pointer; line-height: 1.45; }
.m-checks .m-check { padding: 8px 14px; border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-input); align-items: center; }
.m-checks .m-check:has(input:checked) { border-color: var(--m-accent); background: color-mix(in srgb, var(--m-accent) 12%, var(--m-input)); }
.m-checks .m-check:has(input:focus-visible) { outline: 2px solid var(--m-accent); outline-offset: 2px; }
.m-check.is-off { opacity: .45; cursor: not-allowed; }
.m-form .m-check input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--m-accent); }
.m-consents .m-check { display: flex; }
.m-privacy, .m-legend-req { margin: 0; font-size: .88em; color: var(--m-muted); }
.req { color: var(--m-accent); }
.m-send { justify-self: start; }
.m-flash { animation: m-flash 1.4s ease; }
@keyframes m-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--m-accent) 45%, transparent); } }
.m-done { text-align: center; padding: 40px 24px; border-radius: var(--m-radius); background: var(--m-card); border: 1px solid var(--m-line); margin-top: 24px; }
.m-done:focus { outline: none; }
.m-done-ico { font-size: 48px; display: block; margin-bottom: 8px; }
.m-done h3 { font-family: var(--display); font-size: 1.6rem; color: var(--m-ink); }
@media (prefers-reduced-motion: reduce) { .m-flash { animation: none; outline: 3px solid var(--m-accent); } }
@media (max-width: 600px) {
  .m-form fieldset { padding: 18px 14px; }
  .m-send { justify-self: stretch; justify-content: center; }
  .m-intro { margin-bottom: 40px; }
}

/* ---------- Choix de plusieurs missions ---------- */
.missions { --m-ok: #17864a; }
.m-choose-on { display: none; }
.m-choose.is-chosen { background: var(--m-ok); border-color: var(--m-ok); color: #fff; }
.m-choose.is-chosen:hover { background: color-mix(in srgb, var(--m-ok) 85%, #000); border-color: color-mix(in srgb, var(--m-ok) 85%, #000); }
.m-choose.is-chosen .m-choose-on { display: inline; }
.m-choose.is-chosen .m-choose-off { display: none; }
.m-card.is-chosen .m-front { border-color: var(--m-ok); box-shadow: 0 0 0 2px var(--m-ok), 0 10px 26px -20px rgba(0,0,0,.6); }
.m-chosen-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .75em; font-weight: 700; background: var(--m-ok); color: #fff; }
.m-chosen-badge[hidden] { display: none; }
.m-checks[aria-invalid=true] { outline: 2px solid var(--m-accent); outline-offset: 6px; border-radius: 10px; }
.m-tray { position: fixed; left: 50%; bottom: 16px; z-index: 60; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 32px); padding: 10px 10px 10px 18px; border-radius: 999px; background: var(--m-card); color: var(--m-ink); border: 2px solid var(--m-ok);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); font-weight: 700; animation: m-in .3s ease both; }
.m-tray[hidden] { display: none; }
.m-tray-txt::before { content: '✓ '; color: var(--m-ok); }
.m-tray .btn { white-space: nowrap; }
@media (max-width: 600px) { .m-tray { border-radius: 16px; padding: 10px 12px; bottom: 10px; } .m-tray .btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .m-tray { animation: none; } }
.m-missions .m-check:has(input:checked) { border-color: var(--m-ok); background: color-mix(in srgb, var(--m-ok) 14%, var(--m-input)); }
.m-missions .m-check input { accent-color: var(--m-ok); }
/* les fiches agrandies (même cachées) restent dans la largeur de la page */
.m-cards { overflow-x: clip; overflow-y: visible; }