/* Féora Familles — espace adhérents. Palette reprise de la charte feora.fr (bleu nuit, bleu, rose, jaune, vert, orange). */
.ff-single, .ff-accueil, .ff-ressources, .ff-agenda, .ff-replays, .ff-compte, .ff-login, .ff-nav, .ff-doc {
	--ff-p: #1D2B84; --ff-blu: #0E58D6; --ff-pink: #FA85B2; --ff-yel: #FCC600; --ff-grn: #0AA575; --ff-acc: #FF6500;
	--ff-lb: #DBE8FF; --ff-lg: #CEF2E7; --ff-lp: #FFEBF3; --ff-ly: #FFF2C4; --ff-mut: #5b6280; --ff-txt: #1b1b2f; --ff-bg: #f6f7fb;
	color: var(--ff-txt); line-height: 1.55;
}
.ff-muted { color: var(--ff-mut); font-size: .93em; }
.ff-lead { font-size: 1.15em; color: var(--ff-p); }

/* Titres */
.ff-title { color: var(--ff-p); font-size: 1.9em; line-height: 1.2; margin: 0 0 .7em; }
.ff-single .ff-title { margin-top: .3em; }

/* Navigation */
.ff-nav ul { list-style: none; margin: 0 0 1.6em; padding: 0; display: flex; flex-wrap: wrap; gap: .4em; border-bottom: 2px solid var(--ff-lb); padding-bottom: .6em; }
.ff-nav a { display: inline-block; padding: .45em .95em; border-radius: 999px; text-decoration: none; color: var(--ff-p); font-weight: 600; font-size: .95em; background: transparent; transition: background .15s; }
.ff-nav a:hover { background: var(--ff-lb); }
.ff-nav .is-active a { background: var(--ff-p); color: #fff; }

/* Boutons */
.ff-btn { display: inline-block; background: var(--ff-p); color: #fff !important; border: 2px solid var(--ff-p); padding: .6em 1.3em; border-radius: 999px; font-weight: 600; text-decoration: none !important; cursor: pointer; font-size: .95em; line-height: 1.2; transition: transform .1s, background .15s; }
.ff-btn:hover { background: var(--ff-blu); border-color: var(--ff-blu); transform: translateY(-1px); }
.ff-btn--ghost { background: transparent; color: var(--ff-p) !important; }
.ff-btn--ghost:hover { background: var(--ff-lb); color: var(--ff-p) !important; }
.ff-btn--small { padding: .45em 1em; font-size: .88em; }
.ff-link { margin-left: 1em; color: var(--ff-mut); }
.ff-more { font-weight: 600; color: var(--ff-blu); text-decoration: none; margin-top: auto; }
.ff-back { margin-bottom: .5em; } .ff-back a { color: var(--ff-mut); text-decoration: none; font-size: .93em; }

/* Boîtes */
.ff-box { background: var(--ff-bg); border-radius: 14px; padding: 1.1em 1.4em; margin: 0 0 1.2em; }
.ff-box.ff-ok { background: var(--ff-lg); } .ff-box.ff-warn { background: var(--ff-ly); }
.ff-box h3 { margin-top: 0; }
.ff-callout { background: var(--ff-lb); border-radius: 14px; padding: 1em 1.3em; margin: 1.2em 0; }
.ff-callout p:last-child { margin-bottom: 0; }
.ff-doc blockquote { border-left: 4px solid var(--ff-pink); margin: 0 0 1.2em; padding: .6em 1.2em; background: var(--ff-lp); border-radius: 0 12px 12px 0; font-style: normal; }
.ff-doc table { width: 100%; border-collapse: collapse; font-size: .9em; margin: 1em 0; display: block; overflow-x: auto; }
.ff-doc th, .ff-doc td { border: 1px solid #e3e6f0; padding: .5em .7em; text-align: left; vertical-align: top; }
.ff-doc th { background: var(--ff-lb); color: var(--ff-p); }
.ff-doc figure { margin: 1.2em 0; } .ff-doc img { max-width: 100%; height: auto; border-radius: 10px; }
.ff-doc .ff-sub { margin: .3em 0; } .ff-doc .ff-sub a { font-weight: 600; text-decoration: none; color: var(--ff-p); }
.ff-doc h2, .ff-doc h3 { color: var(--ff-p); }

/* Grilles & cartes */
.ff-section { margin: 0 0 2.2em; }
.ff-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; flex-wrap: wrap; }
.ff-section__head a { font-weight: 600; text-decoration: none; color: var(--ff-blu); }
.ff-section h2 { color: var(--ff-p); font-size: 1.35em; margin: 0 0 .8em; }
.ff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1em; }
.ff-list { display: grid; gap: .9em; }
.ff-card { background: #fff; border: 1px solid #e6e8f2; border-radius: 16px; padding: 1.1em 1.25em; display: flex; flex-direction: column; gap: .45em; box-shadow: 0 2px 10px rgba(29,43,132,.05); transition: box-shadow .15s, transform .15s; }
.ff-card:hover { box-shadow: 0 8px 24px rgba(29,43,132,.10); transform: translateY(-2px); }
.ff-card h3 { font-size: 1.08em; margin: 0; line-height: 1.3; }
.ff-card h3 a { color: var(--ff-p); text-decoration: none; }
.ff-card p { margin: 0; font-size: .93em; }
.ff-card__meta { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; font-size: .82em; color: var(--ff-mut); }
.ff-tag { background: var(--ff-lp); color: #a1245a; border-radius: 999px; padding: .15em .7em; font-weight: 600; }
.ff-card--event .ff-tag { background: var(--ff-ly); color: #7a5a00; }
.ff-territoire::before { content: "📍 "; }
.ff-conseil-mini { background: var(--ff-ly); border-radius: 10px; padding: .5em .8em; font-size: .88em !important; }

/* Événements */
.ff-card--event { flex-direction: row; gap: 1em; align-items: flex-start; }
.ff-card--event.is-past { opacity: .75; }
.ff-card__body { display: flex; flex-direction: column; gap: .4em; flex: 1; }
.ff-date { flex: 0 0 64px; background: var(--ff-p); color: #fff; border-radius: 12px; text-align: center; padding: .5em 0; line-height: 1.1; }
.ff-date__d { display: block; font-size: 1.6em; font-weight: 700; } .ff-date__m { display: block; font-size: .8em; text-transform: uppercase; letter-spacing: .05em; }
.is-past .ff-date { background: var(--ff-mut); }
.ff-event-head { margin-bottom: 1.2em; } .ff-event-date { font-size: 1.2em; font-weight: 700; color: var(--ff-p); margin: 0 0 .2em; text-transform: capitalize; }
.ff-actions { display: flex; gap: .8em; flex-wrap: wrap; align-items: center; margin: 1.4em 0; }

/* Replays */
.ff-card--replay { padding: 0; overflow: hidden; }
.ff-card--replay .ff-card__body { padding: .9em 1.2em 1.1em; }
.ff-thumb { position: relative; display: block; aspect-ratio: 16/9; background: var(--ff-p); overflow: hidden; }
.ff-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ff-thumb__empty { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 2.4em; opacity: .5; }
.ff-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; border-radius: 50%; background: var(--ff-pink); color: #fff; display: grid; place-items: center; font-size: 1.2em; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.ff-video { position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; margin: 1.2em 0; background: #000; }
.ff-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Fiche ressource */
.ff-single__cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2em; align-items: start; }
@media (max-width: 820px) { .ff-single__cols { grid-template-columns: 1fr; } }
.ff-infos { background: var(--ff-bg); border-radius: 16px; padding: 1.2em 1.4em; position: sticky; top: 100px; }
.ff-infos h3 { margin: 0 0 .7em; font-size: 1em; text-transform: uppercase; letter-spacing: .06em; color: var(--ff-mut); }
.ff-infos dl { margin: 0 0 1em; } .ff-infos dt { font-size: .8em; color: var(--ff-mut); margin-top: .7em; } .ff-infos dd { margin: 0; font-weight: 600; }
.ff-infos .ff-btn { display: block; text-align: center; margin-top: .6em; }
.ff-verifie { margin-top: 1em; font-size: .82em; }
.ff-conseil { background: var(--ff-ly); border-radius: 16px; padding: 1.1em 1.4em; margin: 1.6em 0; border-left: 5px solid var(--ff-yel); }
.ff-conseil h3 { margin: 0 0 .4em; color: #7a5a00; font-size: 1em; }
.ff-conseil p:last-child { margin-bottom: 0; }

/* Filtres */
.ff-filters { display: flex; gap: .6em; flex-wrap: wrap; margin-bottom: .8em; }
.ff-filters input[type=search], .ff-filters select { flex: 1 1 200px; padding: .6em .9em; border: 1.5px solid #d8dcea; border-radius: 999px; font: inherit; }
.ff-chips { display: flex; flex-wrap: wrap; gap: .45em; margin: .4em 0 1em; }
.ff-chips--inline { margin: 0 0 1em; }
.ff-chip { font-size: .85em; padding: .3em .85em; border-radius: 999px; background: var(--ff-bg); color: var(--ff-p); text-decoration: none; border: 1px solid #e3e6f0; }
.ff-chip:hover { background: var(--ff-lb); } .ff-chip.is-active { background: var(--ff-p); color: #fff; border-color: var(--ff-p); }

/* Connexion : présentation + formulaire */
.ff-login-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5em; align-items: start; }
@media (max-width: 820px) { .ff-login-wrap { grid-template-columns: 1fr; } }
.ff-pillars { list-style: none; padding: 0; margin: 1em 0 0; display: grid; gap: .6em; }
.ff-pillars li { background: var(--ff-bg); border-radius: 12px; padding: .7em 1em; display: flex; flex-direction: column; }
.ff-pillars strong { color: var(--ff-p); } .ff-pillars span { font-size: .9em; color: var(--ff-mut); }
.ff-small { font-size: .82em; }

/* Connexion */
.ff-login { max-width: 560px; background: #fff; border: 1px solid #e6e8f2; border-radius: 16px; padding: 1.4em 1.6em; box-shadow: 0 2px 10px rgba(29,43,132,.05); }
.ff-form label { display: block; font-weight: 600; margin-bottom: .4em; color: var(--ff-p); }
.ff-inline { display: flex; gap: .6em; flex-wrap: wrap; }
.ff-inline input { flex: 1 1 220px; padding: .7em 1em; border: 1.5px solid #d8dcea; border-radius: 999px; font: inherit; }
.ff-help { margin-top: 1.4em; font-size: .93em; }

/* Google */
.ff-btn--google { background: #fff; color: #1b1b2f !important; border: 1.5px solid #d8dcea; display: inline-flex; align-items: center; gap: .6em; }
.ff-btn--google:hover { background: #f6f7fb; border-color: #c5cadb; transform: none; }
.ff-or { display: flex; align-items: center; gap: 1em; color: var(--ff-mut); font-size: .85em; margin: 1em 0; }
.ff-or::before, .ff-or::after { content: ""; flex: 1; border-top: 1px solid #e3e6f0; }

/* Accueil */
.ff-hello { font-size: 1.25em; color: var(--ff-p); font-weight: 600; margin: 0 0 1.4em; }
.ff-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1em; }
.ff-quick__item { display: flex; flex-direction: column; gap: .2em; background: var(--ff-lb); border-radius: 16px; padding: 1.1em 1.3em; text-decoration: none; color: var(--ff-p); }
.ff-quick__item span { font-size: .9em; color: var(--ff-mut); }
.ff-quick__item--wa { background: var(--ff-lg); }
.ff-quick__item:hover { filter: brightness(.97); }