/* WeGospel App — feuille de style unique (agent FOND). N'utilise que les variables de themes.css.
   Typographie : Source Sans 3 (Google Fonts), choisie pour sa proximité avec les maquettes. */

/* ---------- 1. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.5;
  color: var(--c-ink); background: var(--c-bg); overflow-x: hidden; min-height: 100vh;
}
body.public { background: var(--c-surface); }
img, svg { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }
h1, h2, h3, h4 { margin: 0 0 .35em; line-height: 1.12; font-weight: 800; letter-spacing: -.01em; color: var(--c-ink); }
h1 { font-size: 46px; } h2 { font-size: 32px; } h3 { font-size: 21px; font-weight: 700; } h4 { font-size: 17px; font-weight: 700; }
p { margin: 0 0 1em; }
.accent { color: var(--c-title-accent); }
.primary { color: var(--c-primary); }
.muted { color: var(--c-muted); }
.lead { font-size: 19px; color: var(--c-muted); line-height: 1.45; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary); margin: 0 0 10px; }
.small { font-size: 13px; } .nowrap { white-space: nowrap; }
a { color: var(--c-link); text-decoration: underline; }
a.btn, nav a, .nav a, .menu a, .card-link, .footer a, .tabs a, .sidenav a, .user-menu a, .theme-dot, .no-ul { text-decoration: none; }
.footer a, .tabs a, .sidenav a, .user-menu a, .card-link { color: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.grid { display: grid; gap: 20px; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-main-aside { grid-template-columns: 1.6fr 1fr; } .grid-split { grid-template-columns: 1.25fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; } .end { justify-content: flex-end; } .center { justify-content: center; text-align: center; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.flex-1 { flex: 1 1 auto; }
hr.sep { border: 0; border-top: 1px solid var(--c-line); margin: 20px 0; }

/* ---------- 2. Icônes et décor ---------- */
.ico { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-fill { fill: currentColor; stroke: none; }
.ico-sm { width: 16px; height: 16px; } .ico-lg { width: 30px; height: 30px; }
.icircle {
  display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-dark) 100%); color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.14);
}
.icircle .ico { width: 28px; height: 28px; }
.icircle-accent { background: linear-gradient(160deg, var(--c-cta) 0%, var(--c-cta-dark) 100%); color: var(--c-cta-ink); }
.icircle-soft { background: var(--c-primary-soft); color: var(--c-primary); box-shadow: none; }
.icircle-accent-soft { background: var(--c-accent-soft); color: var(--c-accent); box-shadow: none; }
.icircle-sq { border-radius: 16px; }
.icircle-sm { width: 44px; height: 44px; } .icircle-sm .ico { width: 22px; height: 22px; }
.icircle-lg { width: 72px; height: 72px; } .icircle-lg .ico { width: 34px; height: 34px; }
.decor { position: absolute; pointer-events: none; color: var(--c-accent); opacity: .9; }
.decor .ico { width: 100%; height: 100%; stroke: none; fill: currentColor; }
.waves { position: relative; overflow: hidden; }
.waves::before, .waves::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(2px);
}
.waves::before { width: 60%; height: 55%; left: -18%; bottom: -25%; background: radial-gradient(closest-side, var(--c-primary-soft), transparent 70%); }
.waves::after { width: 45%; height: 50%; right: -12%; top: -20%; background: radial-gradient(closest-side, var(--c-accent-soft), transparent 70%); }
.waves > * { position: relative; z-index: 1; }

/* ---------- 3. Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 26px; border-radius: 12px;
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1; border: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; text-decoration: none;
}
.btn .ico { width: 20px; height: 20px; }
.btn:hover { filter: brightness(1.04); transform: translateY(-1px); } .btn:active { transform: translateY(0); }
.btn-primary { color: var(--c-cta-ink); background: linear-gradient(180deg, var(--c-cta) 0%, var(--c-cta-dark) 100%); box-shadow: 0 8px 18px -6px var(--c-cta-dark); }
.btn-secondary { color: var(--c-primary); background: var(--c-surface); border-color: var(--c-primary); }
.btn-blue { color: #fff; background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-dark) 100%); box-shadow: 0 8px 18px -6px var(--c-primary-dark); }
.btn-ghost { color: var(--c-primary); background: transparent; }
.btn-danger { color: #fff; background: var(--c-danger); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.btn-lg { height: 56px; padding: 0 32px; font-size: 18px; border-radius: 14px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: transparent; color: var(--c-ink); border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.btn-icon:hover { background: var(--c-primary-soft); }

/* ---------- 4. Barre supérieure ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50; background: var(--c-surface); box-shadow: 0 2px 14px rgba(10,20,60,.08); min-height: 72px;
}
.topbar-in { display: flex; align-items: center; gap: 18px; min-height: 72px; }
.logo { height: 44px; width: auto; }
.topbar .logo { height: 46px; }
.nav { display: flex; gap: 34px; align-items: center; margin: 0 auto; }
.nav a { font-weight: 600; font-size: 16px; color: var(--c-ink); padding: 6px 0; border-bottom: 3px solid transparent; }
.nav a:hover { color: var(--c-primary); }
.nav a.is-active { color: var(--c-primary); border-bottom-color: var(--c-accent); }
.topbar-actions { display: flex; gap: 14px; align-items: center; margin-left: auto; }
.topbar-actions .link-login { font-weight: 600; color: var(--c-primary); }
.burger { display: none; }
.vsep { width: 1px; height: 36px; background: var(--c-line); }
.choir-chip { display: flex; align-items: center; gap: 12px; }
.choir-chip .icircle-soft { width: 42px; height: 42px; } .choir-chip .icircle-soft .ico { width: 22px; height: 22px; }
.choir-chip strong { display: flex; align-items: center; gap: 6px; font-size: 17px; line-height: 1.1; }
.choir-chip small { display: block; color: var(--c-muted); font-size: 13px; }
.search { flex: 1 1 320px; max-width: 520px; position: relative; }
.search input { width: 100%; height: 46px; border-radius: 999px; border: 1.5px solid var(--c-line); background: var(--c-bg); padding: 0 18px 0 44px; font: inherit; font-size: 15px; color: var(--c-ink); }
.search .ico { position: absolute; left: 16px; top: 13px; width: 20px; height: 20px; color: var(--c-muted); }
.bell { position: relative; }
.bell .count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--c-danger); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.user-menu { position: relative; }
.user-btn { display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--c-ink); padding: 4px 6px; border-radius: 12px; }
.user-btn:hover { background: var(--c-primary-soft); }
.user-btn .who { text-align: left; line-height: 1.15; }
.user-btn .who strong { display: block; font-size: 15px; } .user-btn .who span { font-size: 13px; color: var(--c-muted); }
.dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px; box-shadow: 0 14px 34px rgba(10,20,60,.16); padding: 8px; display: none; z-index: 60; }
.dropdown.is-open { display: block; }
.dropdown a, .dropdown button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 15px; color: var(--c-ink); background: none; border: 0; cursor: pointer; text-align: left; text-decoration: none; }
.dropdown a:hover, .dropdown button:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.dropdown .ico { width: 18px; height: 18px; color: var(--c-primary); }
.dropdown hr { border: 0; border-top: 1px solid var(--c-line); margin: 6px 0; }
.dropdown .lang { display: flex; gap: 6px; padding: 6px 12px; align-items: center; font-size: 14px; color: var(--c-muted); }
.dropdown .lang a { width: auto; padding: 4px 10px; border: 1px solid var(--c-line); border-radius: 8px; font-size: 13px; font-weight: 700; }
.dropdown .lang a.is-active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ---------- 5. Barre « personnaliser mon habillage » ---------- */
.habillage { background: linear-gradient(90deg, var(--c-primary-soft), var(--c-bg)); border-bottom: 1px solid var(--c-line); }
.habillage-in { display: flex; align-items: center; gap: 22px; min-height: 60px; padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
.habillage .label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink); }
.theme-dots { display: flex; gap: 14px; flex-wrap: wrap; }
.theme-dot { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--c-muted); background: none; border: 0; cursor: pointer; padding: 0; font-family: inherit; }
.theme-dot i { width: 26px; height: 26px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); border: 2px solid transparent; }
.theme-dot.is-active { color: var(--c-primary); font-weight: 700; }
.theme-dot.is-active i { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.seg { display: inline-flex; background: var(--c-surface); border: 1.5px solid var(--c-line); border-radius: 12px; padding: 3px; margin-left: auto; }
.seg button { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 18px; border: 0; background: transparent; color: var(--c-ink); border-radius: 9px; cursor: pointer; }
.seg button.is-active { background: linear-gradient(180deg, var(--c-primary), var(--c-primary-dark)); color: #fff; box-shadow: 0 4px 10px -4px var(--c-primary-dark); }

/* ---------- 6. Héros ---------- */
.hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 36px; align-items: center; padding: 36px 0 28px; }
.hero h1 { font-size: 62px; line-height: 1.02; margin-bottom: 18px; }
.hero .lead { font-size: 21px; max-width: 520px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
.hero-visual { position: relative; min-height: 400px; }
.blob {
  position: relative; width: 100%; aspect-ratio: 600 / 400; overflow: hidden;
  border-radius: 46% 54% 42% 58% / 58% 42% 58% 42%; border: 7px solid var(--c-primary);
  box-shadow: 0 0 0 5px var(--c-surface), 0 0 0 9px var(--c-accent), 0 24px 50px -22px var(--c-primary-dark);
  background: var(--hero-img) center 30% / cover no-repeat;
}
.blob-sm { aspect-ratio: 600 / 300; border-radius: 48% 52% 40% 60% / 52% 48% 60% 40%; }
.hero-card { position: absolute; background: var(--c-surface); border-radius: 16px; box-shadow: 0 16px 36px rgba(10,20,60,.18); padding: 14px 16px; }
.hero-card-rep { right: 0; top: 24px; width: 250px; }
.hero-card-rep strong { display: block; font-size: 16px; } .hero-card-rep small { color: var(--c-muted); font-size: 13px; }
.hero-card-rep .chips { margin: 10px 0; display: flex; gap: 5px; flex-wrap: wrap; }
.hero-card-rep .chips .badge { height: 20px; padding: 0 8px; font-size: 11px; }
.hero-card-audio { right: 0; bottom: 8px; width: 280px; display: flex; align-items: center; gap: 12px; }
.hero-card-audio strong { font-size: 14px; display: block; }
.play { width: 42px; height: 42px; border-radius: 50%; background: var(--c-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.play .ico { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.wave-bars { display: flex; align-items: center; gap: 2px; height: 26px; }
.wave-bars i { width: 3px; border-radius: 2px; background: var(--c-primary); display: block; }
.avatars { display: flex; align-items: center; }
.avatars .avatar { margin-right: -8px; border: 2px solid #fff; }
.avatars .more { margin-left: 14px; font-size: 12px; font-weight: 700; color: var(--c-muted); }
.hero-notes { position: absolute; left: -10px; bottom: -14px; width: 54px; height: 54px; color: var(--c-accent); }
.hero-rays { position: absolute; left: -18px; top: 6px; width: 34px; height: 34px; color: var(--c-primary); }

/* ---------- 7. Cartes ---------- */
.card {
  background: var(--c-surface); border: 1.5px solid var(--c-line); border-radius: 18px; padding: 24px; box-shadow: 0 10px 28px -16px rgba(10,20,60,.25);
  position: relative;
}
.card-primary { border-color: color-mix(in srgb, var(--c-primary) 35%, var(--c-line)); background: linear-gradient(180deg, var(--c-primary-soft), var(--c-surface) 60%); }
.card-accent { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); background: linear-gradient(180deg, var(--c-accent-soft), var(--c-surface) 60%); }
.card-form { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); }
.card-flat { box-shadow: none; }
.card-tint { background: var(--c-primary-soft); border: 0; box-shadow: none; }
.card-tint-accent { background: var(--c-accent-soft); border: 0; box-shadow: none; }
.card-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.card-head h2, .card-head h3 { margin-bottom: 4px; }
.card-head p { color: var(--c-muted); margin: 0; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-title-row h3 { display: flex; align-items: center; gap: 10px; margin: 0; }
.card-title-row h3 .ico { color: var(--c-primary); }
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature h3 { font-size: 20px; margin-bottom: 2px; color: var(--c-primary); }
.feature strong { display: block; font-size: 15px; color: var(--c-primary); margin-bottom: 6px; }
.feature p { color: var(--c-muted); margin: 0; font-size: 15px; line-height: 1.4; }
.feature-accent h3, .feature-accent strong { color: var(--c-accent-dark); }
.feature .chev { margin-left: auto; color: var(--c-primary); align-self: center; }
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.strip .card { padding: 16px 18px; }
.strip .feature h3 { font-size: 17px; }
.strip .feature p { font-size: 14px; }
.tile { text-align: center; padding: 26px 18px; }
.tile .icircle { margin: 0 auto 14px; }
.tile h3 { font-size: 19px; color: var(--c-primary); }
.tile p { color: var(--c-muted); font-size: 15px; margin: 0; }
.section { padding: 44px 0; }
.section-title { text-align: center; font-size: 42px; margin-bottom: 28px; }
.section-sub { text-align: center; font-size: 20px; color: var(--c-muted); margin: -16px 0 30px; }

/* ---------- 8. Vitrine, bandeau d'appel, pied de page ---------- */
.showcase { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding: 40px 0; }
.showcase h2 { font-size: 46px; line-height: 1.05; }
.mock { background: var(--c-surface); border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(10,20,60,.4); overflow: hidden; display: grid; grid-template-columns: 160px 1fr; min-height: 300px; border: 1px solid var(--c-line); }
.mock-side { background: var(--c-primary-soft); padding: 14px 10px; }
.mock-side .logo { height: 28px; margin: 4px 0 16px 4px; }
.mock-side a { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 9px 10px; border-radius: 9px; color: var(--c-ink); }
.mock-side a.is-active { background: linear-gradient(180deg, var(--c-primary), var(--c-primary-dark)); color: #fff; }
.mock-side .ico { width: 16px; height: 16px; }
.mock-main { padding: 16px 18px; }
.mock-main h4 { font-size: 16px; margin-bottom: 10px; }
.mock-main .tabs { margin: 10px 0 12px; }
.mock-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--c-line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.mock-row small { color: var(--c-muted); font-weight: 400; }
.cta-band {
  position: relative; overflow: hidden; border-radius: 20px; padding: 36px 48px; color: #fff; display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap;
  background: linear-gradient(100deg, var(--c-band) 0%, var(--c-band-2) 100%); box-shadow: 0 24px 50px -24px var(--c-band);
}
.cta-band h2 { color: #fff; font-size: 36px; margin: 0; }
.cta-band h2 .accent { color: var(--c-cta); }
.cta-band .decor { left: 24px; top: -10px; width: 90px; height: 120px; opacity: .85; }
.cta-band .decor-r { left: auto; right: 24px; top: 14px; width: 54px; height: 54px; }
.cta-band .btn-primary { box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); }
.footer { padding: 30px 0 26px; border-top: 1px solid var(--c-line); background: var(--c-surface); }
.footer-in { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer .logo { height: 38px; }
.footer-links { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-left: auto; font-size: 14px; align-items: center; }
.footer-links a { color: var(--c-ink); } .footer-links a:hover { color: var(--c-primary); text-decoration: underline; }
.footer-links .sep { color: var(--c-line); }
.footer-note { width: 100%; font-size: 13px; color: var(--c-muted); margin-top: 10px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- 9. Coque de l'espace connecté ---------- */
.shell { display: grid; grid-template-columns: 250px 1fr; min-height: calc(100vh - 72px); }
.sidenav { background: linear-gradient(180deg, var(--c-surface), var(--c-primary-soft)); border-right: 1px solid var(--c-line); padding: 22px 14px; position: relative; overflow: hidden; }
.sidenav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sidenav a { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 12px; font-size: 16px; font-weight: 600; color: var(--c-ink); }
.sidenav a .ico { color: var(--c-primary); width: 22px; height: 22px; }
.sidenav a:hover { background: var(--c-surface); }
.sidenav a.is-active { background: linear-gradient(180deg, var(--c-primary), var(--c-primary-dark)); color: #fff; box-shadow: 0 10px 20px -10px var(--c-primary-dark); }
.sidenav a.is-active .ico { color: #fff; }
.sidenav .decor { left: 24px; bottom: 40px; width: 150px; height: 190px; opacity: .55; }
.sidenav-foot { position: absolute; left: 20px; bottom: 18px; font-size: 12px; color: var(--c-muted); }
.scrim { display: none; position: fixed; inset: 0; background: rgba(10,20,60,.45); z-index: 40; }
.scrim.is-open { display: block; }
.page { padding: 26px 32px 40px; min-width: 0; max-width: 100%; overflow-x: hidden; }
.page-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40%; gap: 24px; align-items: center; margin-bottom: 22px; min-height: 170px; }
.page-head h1 { font-size: 48px; margin-bottom: 6px; }
.page-head .lead { font-size: 21px; margin-bottom: 6px; }
.page-head .page-sub { color: var(--c-muted); font-size: 16px; margin: 0; }
.page-head .choir-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--c-primary); font-weight: 700; margin-bottom: 8px; }
.page-hero { position: relative; min-height: 180px; }
.page-hero .blob { aspect-ratio: 600 / 300; }
.page-hero .decor { left: -24px; top: 6px; width: 30px; height: 30px; color: var(--c-primary); }
.quote-card { position: absolute; right: 0; bottom: -16px; max-width: 280px; background: var(--c-surface); border-radius: 14px; padding: 12px 16px; box-shadow: 0 16px 36px rgba(10,20,60,.18); font-size: 14px; }
.quote-card strong { display: block; margin-bottom: 4px; }
.quote-card small { display: block; text-align: right; color: var(--c-muted); margin-top: 4px; }

/* ---------- 10. Étapes (parcours) ---------- */
.steps { display: flex; align-items: flex-start; gap: 16px; margin: 6px 0 24px; list-style: none; padding: 0; }
.steps li { display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 0; }
.steps li::after { content: ""; flex: 1 1 24px; height: 2px; background: var(--c-line); margin: 0 4px; }
.steps li:last-child { flex: 0 0 auto; } .steps li:last-child::after { display: none; }
.steps .num { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex: 0 0 auto; background: var(--c-line); color: var(--c-muted); }
.steps .txt strong { display: block; font-size: 16px; color: var(--c-muted); line-height: 1.2; }
.steps .txt small { color: var(--c-muted); font-size: 13px; }
.steps .is-current .num { background: linear-gradient(180deg, var(--c-primary), var(--c-primary-dark)); color: #fff; box-shadow: 0 0 0 4px var(--c-primary-soft); }
.steps .is-current .txt strong { color: var(--c-primary); }
.steps .is-done .num { background: linear-gradient(180deg, var(--c-cta), var(--c-cta-dark)); color: var(--c-cta-ink); }
.steps .is-done .txt strong { color: var(--c-ink); }
.steps .is-done::after { background: var(--c-accent); }
.steps .num .ico { width: 20px; height: 20px; }

/* ---------- 11. Formulaires ---------- */
.field { display: block; margin-bottom: 18px; }
.field > label, .field .lbl { display: block; font-weight: 700; font-size: 15px; margin-bottom: 7px; color: var(--c-ink); }
.field .req { color: var(--c-danger); margin-left: 3px; }
.control { position: relative; }
.control > .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--c-primary); }
.control:has(textarea) > .ico { top: 24px; }
.control > .ico + input, .control > .ico + select, .control > .ico + textarea, .control > .ico + .chips-input { padding-left: 46px; }
.control .ico-r { left: auto; right: 14px; color: var(--c-muted); }
input.input, select.input, textarea.input, .chips-input {
  width: 100%; height: 48px; border: 1.5px solid var(--c-line); border-radius: 12px; background: var(--c-bg); padding: 0 16px; font: inherit; font-size: 16px; color: var(--c-ink);
}
textarea.input { height: auto; min-height: 110px; padding: 12px 16px; resize: vertical; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--c-ink) 50%), linear-gradient(135deg, var(--c-ink) 50%, transparent 50%); background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px; background-size: 6px 6px; background-repeat: no-repeat; }
.input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-soft); background: var(--c-surface); }
.input::placeholder { color: var(--c-muted); opacity: .8; }
.input.is-invalid { border-color: var(--c-danger); }
.help { display: block; font-size: 13px; color: var(--c-muted); margin-top: 6px; }
.error { display: block; font-size: 13px; color: var(--c-danger); font-weight: 600; margin-top: 6px; }
.chips-input { height: auto; min-height: 48px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--c-primary-soft); color: var(--c-primary); font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.chip .x { font-weight: 700; opacity: .7; cursor: pointer; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.field-iconed { display: grid; grid-template-columns: 60px 1fr; gap: 16px; align-items: start; }
.field-inline { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: center; margin-bottom: 22px; }
.field-inline .lbl { margin: 0; display: flex; align-items: center; gap: 8px; }
.field-inline .lbl .ico { width: 18px; height: 18px; color: var(--c-primary); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-primary); }
.counter { text-align: right; font-size: 12px; color: var(--c-muted); margin-top: 4px; }
.dropzone { border: 2px dashed var(--c-line); border-radius: 14px; padding: 26px; text-align: center; background: var(--c-bg); display: flex; align-items: center; justify-content: center; gap: 16px; }
.dropzone strong { display: block; color: var(--c-primary); font-size: 16px; }
.dropzone small { color: var(--c-muted); }
.form-actions { display: flex; justify-content: flex-end; gap: 14px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--c-line); flex-wrap: wrap; }
.form-actions.split { justify-content: space-between; }
.or { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--c-muted); margin: 18px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }

/* ---------- 12. Badges, indicateurs, tableaux, alertes, vides, onglets, modales, avatars ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--c-primary); color: #fff; white-space: nowrap; }
.badge-soft { background: var(--c-primary-soft); color: var(--c-primary); }
.badge-accent { background: linear-gradient(180deg, var(--c-cta), var(--c-cta-dark)); color: var(--c-cta-ink); }
.badge-accent-soft { background: var(--c-accent-soft); color: var(--c-accent-dark); }
.badge-ok { background: #E3F6EB; color: #0E7A42; } .badge-warn { background: #FFF3DC; color: #9A5F00; } .badge-danger { background: #FDE4E4; color: #A51F1F; }
.badge-lg { height: 32px; padding: 0 16px; font-size: 14px; }
.stats { display: flex; gap: 16px; flex-wrap: wrap; }
.stat { flex: 1 1 180px; display: flex; align-items: center; gap: 14px; background: var(--c-surface); border: 1.5px solid var(--c-line); border-radius: 16px; padding: 16px 18px; color: inherit; text-decoration: none; }
.stat .val { font-size: 28px; font-weight: 800; line-height: 1; display: block; }
.stat .lbl { font-size: 14px; color: var(--c-muted); display: block; margin-top: 4px; }
a.stat:hover { border-color: var(--c-primary); }
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; border: 1px solid var(--c-line); background: var(--c-surface); font-size: 15px; }
.tbl th, .tbl td { border: 1px solid var(--c-line); padding: 11px 14px; text-align: left; vertical-align: middle; }
.tbl th { background: var(--c-primary-soft); color: var(--c-primary-dark); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tbl tbody tr:hover { background: var(--c-bg); }
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--c-line); background: var(--c-primary-soft); color: var(--c-ink); margin-bottom: 18px; }
.alert .ico { color: var(--c-primary); flex: 0 0 auto; margin-top: 2px; }
.alert-ok { background: #E3F6EB; border-color: #B6E6C8; } .alert-ok .ico { color: var(--c-ok); }
.alert-warn { background: #FFF3DC; border-color: #F5DCA6; } .alert-warn .ico { color: var(--c-warn); }
.alert-danger { background: #FDE4E4; border-color: #F3B9B9; } .alert-danger .ico { color: var(--c-danger); }
.alert strong { display: block; }
.empty { text-align: center; padding: 40px 20px; border: 2px dashed var(--c-line); border-radius: 18px; color: var(--c-muted); background: var(--c-bg); }
.empty .icircle { margin: 0 auto 14px; }
.empty h3 { color: var(--c-ink); }
.tabs { display: flex; gap: 22px; border-bottom: 1.5px solid var(--c-line); margin-bottom: 20px; list-style: none; padding: 0; overflow-x: auto; }
.tabs a, .tabs button { display: inline-block; padding: 10px 2px; font: inherit; font-size: 15px; font-weight: 600; color: var(--c-muted); border: 0; border-bottom: 3px solid transparent; margin-bottom: -1.5px; background: none; cursor: pointer; white-space: nowrap; }
.tabs .is-active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.tab-panel { display: none; } .tab-panel.is-active { display: block; }
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(10,20,60,.5); }
.modal.is-open { display: flex; }
.modal-box { background: var(--c-surface); border-radius: 20px; width: 100%; max-width: 560px; padding: 26px; box-shadow: 0 30px 70px rgba(0,0,0,.35); max-height: 90vh; overflow: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-head h3 { margin: 0; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--c-primary-soft); color: var(--c-primary); font-weight: 700; font-size: 14px; flex: 0 0 auto; overflow: hidden; }
.avatar-sm { width: 30px; height: 30px; font-size: 11px; } .avatar-lg { width: 64px; height: 64px; font-size: 22px; } .avatar-xl { width: 96px; height: 96px; font-size: 32px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.progress { height: 10px; border-radius: 999px; background: var(--c-line); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-primary), var(--c-primary-dark)); }
.progress-accent i { background: linear-gradient(90deg, var(--c-cta), var(--c-cta-dark)); }
.list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.list-check li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.list-check .tick { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(180deg, var(--c-cta), var(--c-cta-dark)); color: var(--c-cta-ink); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.list-check .tick-blue { background: linear-gradient(180deg, var(--c-primary), var(--c-primary-dark)); color: #fff; }
.list-check .tick .ico { width: 14px; height: 14px; stroke-width: 3; }
.choice { display: grid; grid-template-columns: 56px 190px 1fr; gap: 18px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.choice:last-of-type { border-bottom: 0; }
.choice .lbl { font-weight: 700; font-size: 17px; padding-top: 10px; }
.choice .val { display: flex; align-items: center; justify-content: space-between; background: var(--c-bg); border: 1.5px solid var(--c-line); border-radius: 12px; padding: 12px 16px; font-weight: 700; font-size: 17px; color: var(--c-ink); text-decoration: none; }
.choice .val .ico { color: var(--c-primary); }
.choice .help { margin-top: 8px; }
.media { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-line); min-width: 0; }
.media > div { min-width: 0; }
.media:last-child { border-bottom: 0; }
.media strong { display: block; font-size: 15px; } .media small { color: var(--c-muted); font-size: 13px; }
.media .end-ico { margin-left: auto; color: var(--c-primary); }
.pdf { width: 42px; height: 42px; border-radius: 10px; background: #FDE4E4; color: #D32F2F; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; flex: 0 0 auto; }
.pdf .ico { width: 22px; height: 22px; }
.answer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.answer .btn { border-width: 1.5px; font-weight: 700; font-size: 14px; padding: 0 10px; gap: 6px; }
.answer .yes { background: #E3F6EB; border-color: #9BDBB5; color: #0E7A42; }
.answer .maybe { background: #FFF3DC; border-color: #F1D28C; color: #9A5F00; }
.answer .no { background: #FDE4E4; border-color: #F1AFAF; color: #A51F1F; }
.date-badge { width: 84px; border: 1.5px solid var(--c-line); border-radius: 14px; text-align: center; padding: 10px 6px; background: var(--c-surface); flex: 0 0 auto; }
.date-badge small { display: block; font-size: 12px; font-weight: 700; color: var(--c-muted); letter-spacing: .06em; }
.date-badge strong { display: block; font-size: 34px; line-height: 1; color: var(--c-primary); margin: 2px 0; }
.date-badge .m { font-size: 13px; font-weight: 700; color: var(--c-primary); }
.meta { display: flex; align-items: center; gap: 8px; color: var(--c-muted); font-size: 15px; margin-bottom: 4px; }
.meta .ico { width: 18px; height: 18px; color: var(--c-primary); }

/* ---------- 13. Tarifs ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.price-card { text-align: center; padding: 26px 24px 24px; display: flex; flex-direction: column; }
.price-card.is-featured { border: 2px solid var(--c-accent); background: linear-gradient(180deg, var(--c-accent-soft), var(--c-surface) 70%); }
.price-card .badge-lg { margin: -42px auto 14px; }
.price-card h3 { font-size: 30px; margin-bottom: 6px; }
.price { font-size: 64px; font-weight: 800; color: var(--c-primary); line-height: 1; margin: 8px 0 4px; letter-spacing: -.02em; }
.price small { font-size: 26px; font-weight: 700; }
.price.gold { color: var(--c-title-accent); font-size: 68px; }
.price-alt { font-size: 22px; font-weight: 700; color: var(--c-primary); }
.price-ht { font-size: 14px; color: var(--c-muted); margin: 6px 0 0; }
.price-then { font-size: 24px; font-weight: 800; margin: 14px 0 0; }
.price-card .list-check { text-align: left; margin: 18px auto; max-width: 280px; }
.price-card .btn { margin-top: auto; }
.price-card .note { font-size: 13px; color: var(--c-muted); margin: 12px 0 0; }
.price-card hr { border: 0; border-top: 1px solid var(--c-line); margin: 16px 0; }

/* ---------- 14. Page 42 : thèmes et visuels ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.theme-pick { border: 2px solid var(--c-line); border-radius: 16px; padding: 10px; text-align: center; cursor: pointer; background: var(--c-surface); font: inherit; color: var(--c-ink); position: relative; }
.theme-pick img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 10px; }
.theme-pick .swatches { display: flex; justify-content: center; gap: 8px; margin: 10px 0 6px; }
.theme-pick .swatches i { width: 24px; height: 24px; border-radius: 50%; display: block; }
.theme-pick strong { display: block; font-size: 16px; } .theme-pick small { color: var(--c-muted); }
.theme-pick.is-active { border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-soft); }
.theme-pick .tick { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--c-primary); color: #fff; display: none; align-items: center; justify-content: center; }
.theme-pick.is-active .tick { display: inline-flex; }
.theme-pick .tick .ico { width: 16px; height: 16px; stroke-width: 3; }
.theme-pick .preview { width: 100%; aspect-ratio: 2/1; border-radius: 10px; }
.visual-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.visual-pick .theme-pick img { aspect-ratio: 280 / 160; }

/* ---------- 15. Maquettes (index) ---------- */
.maq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.maq-grid a, .maq-grid span { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1.5px solid var(--c-line); border-radius: 12px; background: var(--c-surface); color: var(--c-ink); font-weight: 600; font-size: 14px; }
.maq-grid a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.maq-grid span { color: var(--c-muted); background: var(--c-bg); opacity: .6; }
.maq-grid b { display: inline-flex; width: 32px; height: 32px; border-radius: 8px; background: var(--c-primary-soft); color: var(--c-primary); align-items: center; justify-content: center; font-size: 13px; flex: 0 0 auto; }
.maq-grid span b { background: var(--c-line); color: var(--c-muted); }

/* ---------- 16. Contenu légal ---------- */
.prose { max-width: 860px; }
.prose h2 { font-size: 26px; margin-top: 32px; }
.prose h3 { margin-top: 22px; }
.prose p, .prose li { font-size: 16px; line-height: 1.6; }
.prose a { color: var(--c-link); text-decoration: underline; }

/* ---------- 17. Réactif ---------- */
@media (max-width: 1400px) { .rep-photo { display: none; } }
@media (max-width: 1100px) {
  .strip { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .theme-grid { grid-template-columns: repeat(3, 1fr); }
  .hero h1 { font-size: 50px; }
}
@media (max-width: 900px) {
  .nav, .topbar .link-login { display: none; }
  .burger { display: inline-flex; }
  .shell { grid-template-columns: 1fr; }
  .sidenav { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 45; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.25); border-right: 0; }
  .sidenav.is-open { transform: translateX(0); }
  .page { padding: 18px 16px 32px; }
  .search { display: none; }
  .choir-chip small { display: none; }
  .user-btn .who { display: none; }
  .hero, .showcase { grid-template-columns: 1fr; }
  .hero h1 { font-size: 40px; } .hero .lead { font-size: 18px; }
  .hero-visual { min-height: 0; }
  .grid-2, .grid-3, .grid-4, .grid-main-aside, .grid-split, .pricing, .strip, .field-row, .visual-pick { grid-template-columns: 1fr; }
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
  .page-head { grid-template-columns: 1fr; min-height: 0; }
  .page-hero { display: none; }
  .page-head h1 { font-size: 34px; } .page-head .lead { font-size: 17px; }
  .section-title { font-size: 30px; } .showcase h2 { font-size: 32px; }
  .cta-band { padding: 28px 20px; text-align: center; } .cta-band h2 { font-size: 26px; } .cta-band .decor { display: none; }
  .steps { flex-direction: column; gap: 10px; } .steps li::after { display: none; } .steps li { flex: 0 0 auto; }
  .field-inline, .choice { grid-template-columns: 1fr; gap: 8px; } .choice .lbl { padding-top: 0; }
  .hero-card-rep { width: 220px; top: 8px; } .hero-card-audio { width: 240px; bottom: 0; }
  .answer { grid-template-columns: 1fr; }
  .habillage-in { gap: 12px; } .seg { margin-left: 0; }
  .footer-links { margin-left: 0; }
  .price { font-size: 52px; } .price.gold { font-size: 56px; }
  .mock { grid-template-columns: 1fr; } .mock-side { display: flex; gap: 6px; flex-wrap: wrap; } .mock-side .logo { width: 100%; }
}
@media (max-width: 480px) {
  .btn { padding: 0 18px; }
  .hero-actions .btn { width: 100%; }
  .price-card .badge-lg { margin-top: -40px; }
  .hero-card-rep { width: 190px; } .hero-card-rep .avatars { display: none; } .hero-card-audio { width: 200px; padding: 10px 12px; }
}

/* ===============================================================   FOND-C : écrans 32-50 (règles nouvelles uniquement, préfixe fc-)
   ====================================================================== */
/* Pastilles d'onglets (34, 36, 40, 43) */
.fc-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.fc-pills a, .fc-pills button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 12px; border: 1.5px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.fc-pills .ico { width: 18px; height: 18px; color: var(--c-primary); }
.fc-pills .is-active { background: linear-gradient(180deg, var(--c-primary), var(--c-primary-dark)); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -8px var(--c-primary-dark); }
.fc-pills .is-active .ico { color: #fff; }
/* Icônes colorées (états) */
.fc-ic-ok { background: linear-gradient(160deg, #17A66B, #0E7A42); color: #fff; box-shadow: none; }
.fc-ic-warn { background: linear-gradient(160deg, #E9A825, #B97A0A); color: #fff; box-shadow: none; }
.fc-ic-danger { background: linear-gradient(160deg, #E6324B, #B3182E); color: #fff; box-shadow: none; }
.fc-ic-purple { background: linear-gradient(160deg, #9A12E6, #6E00B8); color: #fff; box-shadow: none; }
.fc-ic-teal { background: linear-gradient(160deg, #0E9FA8, #0A6E78); color: #fff; box-shadow: none; }
.fc-ic-muted { background: var(--c-line); color: var(--c-muted); box-shadow: none; }
/* Indicateurs colorés (38, 39, 41, 49, 50) */
.fc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.fc-kpis-3 { grid-template-columns: repeat(3, 1fr); }
.fc-kpi { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; border: 1.5px solid var(--c-line); background: var(--c-surface); color: inherit; text-decoration: none; position: relative; }
.fc-kpi .val { font-size: 32px; font-weight: 800; line-height: 1; display: block; color: var(--c-primary); }
.fc-kpi .lbl { font-weight: 700; font-size: 16px; display: block; color: var(--c-primary); margin-top: 2px; }
.fc-kpi p { margin: 6px 0 0; color: var(--c-muted); font-size: 14px; line-height: 1.35; }
.fc-kpi .chev { position: absolute; right: 14px; top: 14px; color: var(--c-primary); }
.fc-kpi-blue { background: linear-gradient(180deg, var(--c-primary-soft), var(--c-surface)); }
.fc-kpi-ok { background: linear-gradient(180deg, #E3F6EB, var(--c-surface)); border-color: #B6E6C8; } .fc-kpi-ok .val, .fc-kpi-ok .lbl { color: #0E7A42; }
.fc-kpi-warn { background: linear-gradient(180deg, #FFF3DC, var(--c-surface)); border-color: #F5DCA6; } .fc-kpi-warn .val, .fc-kpi-warn .lbl { color: #9A5F00; }
.fc-kpi-danger { background: linear-gradient(180deg, #FDE4E4, var(--c-surface)); border-color: #F3B9B9; } .fc-kpi-danger .val, .fc-kpi-danger .lbl { color: #A51F1F; }
.fc-kpi-purple { background: linear-gradient(180deg, #F1E4FD, var(--c-surface)); border-color: #D8C2F5; } .fc-kpi-purple .val, .fc-kpi-purple .lbl { color: #7A3DB0; }
/* Encarts d'information latéraux */
.fc-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--c-accent-soft); border: 1px solid color-mix(in srgb, var(--c-accent) 35%, var(--c-line)); margin-bottom: 14px; }
.fc-note strong { display: block; margin-bottom: 2px; }
.fc-note p { margin: 0; font-size: 14px; color: var(--c-muted); line-height: 1.4; }
.fc-note-blue { background: var(--c-primary-soft); border-color: color-mix(in srgb, var(--c-primary) 30%, var(--c-line)); }
.fc-note-purple { background: #F1E4FD; border-color: #D8C2F5; }
.fc-note-ok { background: #E3F6EB; border-color: #B6E6C8; }
.fc-note-danger { background: #FDE4E4; border-color: #F3B9B9; }
.fc-tips { display: grid; gap: 14px; }
.fc-tip { display: flex; gap: 12px; align-items: flex-start; }
.fc-tip strong { display: block; font-size: 15px; } .fc-tip small { color: var(--c-muted); font-size: 13px; line-height: 1.35; display: block; }
/* Liste clé / valeur (39, 43) */
.fc-kv { list-style: none; margin: 0; padding: 0; }
.fc-kv li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--c-line); font-size: 15px; }
.fc-kv li:last-child { border-bottom: 0; }
.fc-kv li span:first-child { color: var(--c-muted); } .fc-kv li strong { font-weight: 700; }
.fc-ok-text { color: #0E7A42; } .fc-warn-text { color: #9A5F00; } .fc-danger-text { color: #A51F1F; } .fc-purple-text { color: #7A3DB0; }
/* Sections numérotées d'un formulaire (32, 42) */
.fc-sect { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.fc-sect h3 { margin: 0; font-size: 20px; color: var(--c-primary-dark); }
.fc-sect p { margin: 0; color: var(--c-muted); font-size: 14px; }
.fc-sect .icircle { width: 40px; height: 40px; } .fc-sect .icircle .ico { width: 20px; height: 20px; }
.fc-opt { display: grid; grid-template-columns: 20px 1fr 40px; gap: 10px; align-items: center; margin-bottom: 10px; }
.fc-opt .grip { color: var(--c-muted); font-size: 18px; line-height: 1; letter-spacing: -2px; }
.fc-add { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 46px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--c-primary) 25%, var(--c-line)); background: var(--c-primary-soft); color: var(--c-primary); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.fc-add .ico { width: 20px; height: 20px; }
/* Notifications (34) */
.fc-notif { display: grid; grid-template-columns: 80px 1fr auto; gap: 18px; align-items: center; padding: 18px 22px; border-radius: 16px; border: 1.5px solid var(--c-line); background: var(--c-surface); margin-bottom: 14px; }
.fc-notif .kicker { margin: 0 0 2px; font-size: 12px; }
.fc-notif h3 { margin: 0 0 4px; font-size: 20px; color: var(--c-primary-dark); }
.fc-notif p { margin: 0 0 8px; color: var(--c-muted); font-size: 15px; }
.fc-notif .side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fc-notif .when { display: flex; gap: 14px; align-items: center; font-size: 14px; color: var(--c-muted); }
.fc-notif .when a { font-weight: 700; }
.fc-notif-blue { background: linear-gradient(90deg, var(--c-primary-soft), var(--c-surface) 70%); border-color: color-mix(in srgb, var(--c-primary) 30%, var(--c-line)); }
.fc-notif-warn { background: linear-gradient(90deg, #FFF3DC, var(--c-surface) 70%); border-color: #F5DCA6; }
.fc-notif-purple { background: linear-gradient(90deg, #F1E4FD, var(--c-surface) 70%); border-color: #D8C2F5; }
.fc-notif-teal { background: linear-gradient(90deg, #E0F5F6, var(--c-surface) 70%); border-color: #B3E2E5; }
.fc-notif-danger { background: linear-gradient(90deg, #FDE4E4, var(--c-surface) 70%); border-color: #F3B9B9; }
.fc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-primary); display: inline-block; }
.fc-dot.is-read { background: var(--c-line); }
.fc-filechip { display: inline-flex; align-items: center; gap: 8px; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 8px; padding: 4px 10px; font-size: 14px; }
.fc-filechip .pdf { width: 26px; height: 26px; border-radius: 6px; } .fc-filechip .pdf .ico { width: 14px; height: 14px; }
/* Messagerie (33) */
.fc-chat { display: grid; grid-template-columns: 250px minmax(0, 1fr) 250px; gap: 16px; align-items: start; }
.fc-chat .card { padding: 18px; }
.fc-conv { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1.5px solid transparent; margin-bottom: 8px; text-decoration: none; color: inherit; background: var(--c-bg); }
.fc-conv.is-active { border-color: var(--c-primary); background: var(--c-primary-soft); }
.fc-conv-warn { background: #FFF3DC; } .fc-conv-danger { background: #FDE4E4; }
.fc-conv > div { min-width: 0; flex: 1; }
.fc-conv strong { display: block; font-size: 16px; color: var(--c-primary-dark); }
.fc-conv small { display: block; color: var(--c-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-conv .time { font-size: 12px; color: var(--c-muted); text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fc-conv .icircle-sm { width: 46px; height: 46px; border-radius: 50%; }
.fc-chan { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); margin: 14px 0 6px; }
.fc-thread-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line); margin-bottom: 8px; }
.fc-thread-head h2 { font-size: 22px; margin: 0; } .fc-thread-head p { margin: 0; color: var(--c-muted); font-size: 14px; }
.fc-pinned { display: flex; gap: 10px; align-items: center; background: var(--c-accent-soft); border: 1px solid color-mix(in srgb, var(--c-accent) 35%, var(--c-line)); border-radius: 12px; padding: 10px 14px; font-size: 14px; margin: 10px 0 14px; }
.fc-pinned .ico { color: var(--c-accent-dark); }
.fc-msg { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; margin-bottom: 14px; }
.fc-msg .who { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-weight: 700; color: var(--c-primary); flex-wrap: wrap; }
.fc-msg .who time { margin-left: auto; font-size: 12px; color: var(--c-muted); font-weight: 400; }
.fc-bubble { background: var(--c-primary-soft); border-radius: 4px 16px 16px 16px; padding: 12px 16px; line-height: 1.4; font-size: 15px; }
.fc-mention { color: var(--c-primary); font-weight: 700; background: color-mix(in srgb, var(--c-primary) 12%, transparent); border-radius: 4px; padding: 0 3px; }
.fc-attach { display: flex; align-items: center; gap: 12px; background: var(--c-surface); border: 1.5px solid var(--c-line); border-radius: 12px; padding: 10px 14px; margin-top: 8px; max-width: 380px; }
.fc-attach strong { display: block; font-size: 15px; } .fc-attach small { color: var(--c-muted); font-size: 13px; }
.fc-acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; }
.fc-acts a { color: var(--c-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.fc-acts a:hover { color: var(--c-primary); text-decoration: underline; }
.fc-acts .ico { width: 14px; height: 14px; }
.fc-acts .thread { color: var(--c-link); font-weight: 700; }
.fc-compose { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--c-line); padding-top: 14px; margin-top: 8px; }
.fc-compose .control { flex: 1 1 160px; min-width: 0; }
.fc-members { display: flex; align-items: center; margin: 8px 0 4px; }
.fc-members .avatar { margin-right: -8px; border: 2px solid #fff; }
.fc-members .more { margin-left: 16px; font-weight: 700; color: var(--c-primary); font-size: 14px; }
.fc-linklist { list-style: none; margin: 0; padding: 0; }
.fc-linklist a { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-line); color: inherit; text-decoration: none; }
.fc-linklist li:last-child a { border-bottom: 0; }
.fc-linklist strong { display: block; font-size: 15px; } .fc-linklist small { color: var(--c-muted); font-size: 13px; }
.fc-linklist .end-ico { margin-left: auto; color: var(--c-primary); }
/* Concerts (35) */
.fc-concert { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; margin-bottom: 16px; }
.fc-photo { border-radius: 14px; aspect-ratio: 4 / 3; width: 100%; object-fit: cover; display: block; background: linear-gradient(160deg, var(--c-primary), var(--c-primary-dark)); }
.fc-concert-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.fc-concert-head h2 { font-size: 26px; margin: 0; }
.fc-concert-head .open { margin-left: auto; }
.fc-concert .meta { margin: 0; }
.fc-sub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.fc-sub > a { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 20px; gap: 10px; color: inherit; text-decoration: none; align-items: start; }
.fc-sub > a:hover { border-color: var(--c-primary); }
.fc-sub strong { color: var(--c-primary); display: block; font-size: 14px; }
.fc-sub ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; color: var(--c-muted); display: grid; gap: 2px; }
.fc-sub ul li { display: flex; gap: 6px; align-items: center; } .fc-sub ul .ico { width: 14px; height: 14px; }
.fc-sub .ico-main { color: var(--c-primary); width: 24px; height: 24px; }
.fc-sub .chev { color: var(--c-primary); }
/* Dossier de concert (36) */
.fc-mini-steps { display: flex; gap: 0; align-items: flex-start; list-style: none; margin: 0; padding: 0; }
.fc-mini-steps li { flex: 1 1 0; text-align: center; position: relative; font-size: 14px; }
.fc-mini-steps li::before { content: ""; position: absolute; top: 12px; left: 50%; width: 100%; height: 2px; background: var(--c-line); }
.fc-mini-steps li:last-child::before { display: none; }
.fc-mini-steps .dot { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--c-line); display: inline-flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 4px; }
.fc-mini-steps .dot .ico { width: 14px; height: 14px; stroke-width: 3; }
.fc-mini-steps .is-done .dot { background: var(--c-primary); }
.fc-mini-steps strong { display: block; color: var(--c-primary-dark); } .fc-mini-steps small { color: var(--c-muted); }
.fc-donut { width: 130px; height: 130px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; position: relative; }
.fc-donut::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--c-surface); }
.fc-donut > span { position: relative; text-align: center; line-height: 1.05; }
.fc-donut > span strong { display: block; font-size: 30px; color: var(--c-primary); }
.fc-donut > span small { color: var(--c-muted); font-size: 13px; }
.fc-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.fc-legend li { display: flex; align-items: center; gap: 10px; }
.fc-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.fc-legend .n { margin-left: auto; font-weight: 700; }
.fc-tasks { list-style: none; margin: 0; padding: 0; }
.fc-tasks li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.fc-tasks li:last-child { border-bottom: 0; }
.fc-tasks input { width: 22px; height: 22px; accent-color: var(--c-ok); margin: 0; }
.fc-tasks strong { display: block; font-size: 15px; } .fc-tasks small { color: var(--c-muted); font-size: 13px; }
.fc-tasks .end-ico { margin-left: auto; color: var(--c-primary); }
.fc-songs { list-style: none; margin: 0; padding: 0; }
.fc-songs a { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--c-line); color: inherit; text-decoration: none; }
.fc-songs li:last-child a { border-bottom: 0; }
.fc-songs strong { display: block; font-size: 15px; color: var(--c-primary-dark); } .fc-songs small { color: var(--c-muted); font-size: 13px; }
.fc-songs .end-ico { margin-left: auto; color: var(--c-primary); }
.fc-sq { width: 38px; height: 38px; border-radius: 10px; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.fc-sq .ico { width: 20px; height: 20px; }
.fc-bullets { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--c-ink); }
.fc-bullets li { margin-bottom: 3px; }
.fc-tenue { width: 100%; aspect-ratio: 1; border-radius: 14px; background: linear-gradient(160deg, #1A1A2E, #0F172A); display: flex; align-items: center; justify-content: center; color: var(--c-accent); }
.fc-tenue .ico { width: 60px; height: 60px; }
/* Programme (37) */
.fc-num { display: inline-flex; width: 44px; height: 44px; border-radius: 10px; background: var(--c-primary-soft); color: var(--c-primary); font-weight: 800; align-items: center; justify-content: center; font-size: 16px; }
.fc-thumb { width: 52px; height: 52px; border-radius: 10px; background: linear-gradient(160deg, var(--c-accent), var(--c-primary)); flex: 0 0 auto; }
.fc-song-cell { display: flex; gap: 12px; align-items: center; }
.fc-song-cell strong { display: block; color: var(--c-primary-dark); font-size: 16px; } .fc-song-cell small { color: var(--c-muted); }
.fc-input-sm { height: 42px !important; font-size: 15px !important; }
.fc-act { width: 40px; height: 40px; border-radius: 10px; background: var(--c-primary-soft); color: var(--c-primary); }
.fc-act:hover { background: color-mix(in srgb, var(--c-primary) 20%, var(--c-primary-soft)); }
.fc-act-danger { background: #FDE4E4; color: #D32F2F; }
.fc-unsaved { display: inline-flex; align-items: center; gap: 8px; color: var(--c-accent-dark); font-weight: 700; font-size: 14px; }
.fc-unsaved::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); }
.fc-grip { color: var(--c-muted); font-size: 20px; letter-spacing: -3px; cursor: grab; }
.tbl .avatar-sm { vertical-align: middle; }
.fc-event-strip { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.fc-event-strip h2 { font-size: 24px; margin: 0 0 4px; color: var(--c-primary-dark); }
.fc-event-strip .end { margin-left: auto; }
/* Tableaux avec outils (38, 50) */
.fc-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.fc-toolbar .control { flex: 1 1 240px; }
.fc-toolbar .control > .ico { color: var(--c-muted); }
.fc-toolbar .input { height: 44px; }
.fc-toolbar .end { margin-left: auto; }
.fc-pager { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 14px; }
.fc-pager a, .fc-pager span { min-width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--c-line); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--c-ink); background: var(--c-surface); padding: 0 8px; }
.fc-pager .is-active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.fc-pager .dots { border: 0; }
.fc-pager-wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; color: var(--c-muted); font-size: 14px; }
.fc-pager-wrap .fc-pager { margin: 0; }
.fc-sort { display: inline-flex; align-items: center; gap: 4px; } .fc-sort .ico { width: 12px; height: 12px; opacity: .6; }
.fc-cell-user { display: flex; align-items: center; gap: 10px; }
.fc-cell-user strong { display: block; color: var(--c-primary-dark); } .fc-cell-user small { color: var(--c-muted); font-size: 13px; }
.fc-amount { font-weight: 800; font-size: 16px; }
.fc-badge-pup { background: #E0F5F6; color: #0A6E78; }
.fc-badge-purple { background: #F1E4FD; color: #7A3DB0; }
.fc-state { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.fc-state i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
/* Parcours de cotisation (39) */
.fc-tl { display: flex; list-style: none; margin: 0; padding: 20px 10px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-bg); }
.fc-tl li { flex: 1 1 0; text-align: center; position: relative; }
.fc-tl li::before { content: ""; position: absolute; top: 18px; left: 50%; width: 100%; height: 3px; background: var(--c-primary); }
.fc-tl li:last-child::before { display: none; }
.fc-tl .dot { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 8px; }
.fc-tl .is-next .dot { background: var(--c-primary-soft); border: 2px solid var(--c-primary); }
.fc-tl li.is-next::before { background: var(--c-line); }
.fc-tl .dot .ico { width: 18px; height: 18px; stroke-width: 3; }
.fc-tl strong { display: block; color: var(--c-primary-dark); font-size: 16px; }
.fc-tl span { display: block; font-size: 14px; } .fc-tl small { color: var(--c-muted); font-size: 13px; display: block; }
/* Logistique (40) */
.fc-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.fc-col { border-radius: 16px; padding: 14px; background: var(--c-bg); border: 1px solid var(--c-line); min-height: 300px; }
.fc-col-warn { background: #FFF3DC; border-color: #F5DCA6; } .fc-col-ok { background: #E3F6EB; border-color: #B6E6C8; }
.fc-col-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.fc-col-head h3 { margin: 0; font-size: 20px; } .fc-col-head h3 span { color: var(--c-muted); font-weight: 600; font-size: 16px; }
.fc-col-head small { color: var(--c-muted); display: block; font-size: 13px; }
.fc-task { background: var(--c-surface); border-radius: 14px; padding: 14px; margin-bottom: 12px; box-shadow: 0 6px 16px -10px rgba(10,20,60,.3); }
.fc-task .top { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.fc-task h4 { margin: 0 0 2px; font-size: 16px; color: var(--c-primary-dark); } .fc-task p { margin: 0; font-size: 13px; color: var(--c-muted); line-height: 1.35; }
.fc-task .meta { font-size: 13px; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.fc-task .who { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; border-top: 1px solid var(--c-line); padding-top: 10px; }
.fc-task .who .end-ico { margin-left: auto; color: var(--c-primary); }
.fc-checklist { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.fc-checklist li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.fc-checklist .tick { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--c-line); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.fc-checklist .is-done .tick { background: var(--c-ok); border-color: var(--c-ok); color: #fff; } .fc-checklist .tick .ico { width: 14px; height: 14px; stroke-width: 3; }
.fc-done-strip { display: flex; align-items: center; gap: 14px; margin-top: 16px; text-decoration: none; color: inherit; }
.fc-done-strip strong { font-size: 18px; display: block; } .fc-done-strip small { color: var(--c-muted); }
.fc-done-strip .end-ico { margin-left: auto; color: var(--c-primary); }
/* Rapports (41) */
.fc-filters { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 16px; align-items: end; }
.fc-filters .field { margin: 0; }
.fc-bars { display: grid; grid-template-columns: 50px 1fr; gap: 10px; height: 230px; }
.fc-bars .axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; color: var(--c-muted); text-align: right; padding-bottom: 28px; }
.fc-bars .plot { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 20px; border-left: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); padding: 0 20px 28px; background: repeating-linear-gradient(180deg, var(--c-line) 0 1px, transparent 1px 25%); background-size: 100% calc((100% - 28px) / 4); background-repeat: repeat-y; position: relative; }
.fc-bars .bar { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.fc-bars .bar i { display: block; width: 70%; max-width: 90px; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, var(--c-primary), var(--c-primary-dark)); }
.fc-bars .bar.alt i { background: linear-gradient(180deg, #5BA2FF, var(--c-primary)); }
.fc-bars .bar.gold i { background: linear-gradient(180deg, var(--c-cta), var(--c-cta-dark)); }
.fc-bars .bar.gold2 i { background: linear-gradient(180deg, #C98E2E, #8E5E0E); }
.fc-bars .bar b { font-size: 18px; color: var(--c-primary); margin-bottom: 6px; } .fc-bars .bar.gold b, .fc-bars .bar.gold2 b { color: var(--c-accent-dark); }
.fc-bars .bar span { position: absolute; bottom: -26px; font-size: 14px; font-weight: 700; color: var(--c-primary-dark); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.fc-bars .bar span .ico { width: 16px; height: 16px; }
.fc-line { width: 100%; height: auto; display: block; }
.fc-mini-bar { display: inline-block; width: 56px; height: 10px; border-radius: 999px; background: var(--c-line); vertical-align: middle; margin-left: 8px; overflow: hidden; }
.fc-mini-bar i { display: block; height: 100%; background: var(--c-primary); border-radius: 999px; }
.fc-mini-bar.ok i { background: #17A66B; } .fc-mini-bar.warn i { background: var(--c-accent); }
.fc-hbars { display: grid; gap: 10px; }
.fc-hbars > div { display: grid; grid-template-columns: 170px 1fr 40px; gap: 12px; align-items: center; font-size: 14px; }
.fc-hbars .track { height: 18px; background: var(--c-primary-soft); border-radius: 6px; overflow: hidden; } .fc-hbars .track i { display: block; height: 100%; background: var(--c-primary); }
.fc-hbars b { text-align: right; }
/* Abonnement (43) */
.fc-offer { padding: 28px; }
.fc-offer .head { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; }
.fc-offer h2 { font-size: 34px; margin: 0; } .fc-offer .free { font-size: 24px; font-weight: 800; color: var(--c-title-accent); display: block; } .fc-offer .then { font-size: 18px; font-weight: 700; color: var(--c-primary); }
.fc-statebar { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 14px; margin-bottom: 14px; }
.fc-statebar strong { display: block; font-size: 20px; }
.fc-statebar p { margin: 0; font-size: 14px; }
.fc-big-date { display: flex; gap: 18px; align-items: center; }
.fc-big-date strong { font-size: 26px; color: var(--c-primary); display: block; }
.fc-toggle { width: 50px; height: 28px; border-radius: 999px; background: var(--c-line); position: relative; border: 0; cursor: pointer; flex: 0 0 auto; }
.fc-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: left .15s; }
.fc-toggle.is-on { background: var(--c-primary); } .fc-toggle.is-on::after { left: 25px; }
.fc-secrow { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.fc-secrow:last-child { border-bottom: 0; }
.fc-secrow strong { display: block; font-size: 15px; } .fc-secrow small { color: var(--c-muted); font-size: 13px; }
.fc-secrow .end { margin-left: auto; }
.fc-role { display: flex; gap: 10px; align-items: center; }
.fc-role strong { display: block; font-size: 16px; } .fc-role small { color: var(--c-muted); font-size: 13px; }
.fc-perms { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.fc-perms li { display: flex; align-items: center; gap: 8px; }
.fc-perms i { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
.fc-perms i .ico { width: 10px; height: 10px; stroke-width: 4; }
.fc-totp { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; background: var(--c-bg); border: 1px dashed var(--c-line); border-radius: 12px; padding: 14px; margin-top: 12px; }
.fc-qr { width: 120px; height: 120px; border-radius: 10px; background: repeating-conic-gradient(var(--c-ink) 0 25%, var(--c-surface) 0 50%) 0 0 / 16px 16px; border: 6px solid var(--c-surface); box-shadow: 0 0 0 1px var(--c-line); }
.fc-codes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.fc-codes code { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 6px; padding: 2px 8px; font-size: 13px; }
/* Aide (46) */
.fc-help-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 640px; }
.fc-help-tile { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 16px; text-decoration: none; color: inherit; border: 1.5px solid var(--c-line); }
.fc-help-tile h3 { margin: 0 0 2px; font-size: 20px; color: var(--c-primary-dark); } .fc-help-tile p { margin: 0; color: var(--c-muted); font-size: 14px; }
.fc-faq { border: 1.5px solid var(--c-line); border-radius: 14px; background: var(--c-bg); margin-bottom: 10px; }
.fc-faq summary { display: flex; gap: 14px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; }
.fc-faq summary::-webkit-details-marker { display: none; }
.fc-faq summary strong { display: block; font-size: 17px; color: var(--c-primary-dark); } .fc-faq summary small { color: var(--c-muted); font-size: 14px; }
.fc-faq summary .end-ico { margin-left: auto; color: var(--c-primary); transition: transform .15s; }
.fc-faq[open] summary .end-ico { transform: rotate(180deg); }
.fc-faq .body { padding: 0 16px 16px 74px; color: var(--c-ink); font-size: 15px; line-height: 1.5; }
.fc-help-more { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 14px; align-items: center; }
.fc-help-more .intro { display: flex; gap: 14px; align-items: center; }
.fc-help-more .intro h3 { margin: 0 0 2px; font-size: 20px; } .fc-help-more .intro p { margin: 0; color: var(--c-muted); font-size: 14px; }
.fc-help-link { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1.5px solid var(--c-line); border-radius: 14px; background: var(--c-surface); color: inherit; text-decoration: none; }
.fc-help-link strong { display: block; font-size: 15px; color: var(--c-primary-dark); } .fc-help-link small { color: var(--c-muted); font-size: 13px; }
.fc-help-link .end-ico { margin-left: auto; color: var(--c-primary); }
/* Pied de page de l'administration (50) */
.fc-adminfoot { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 18px; border: 1.5px solid var(--c-line); border-radius: 14px; background: var(--c-surface); font-size: 14px; color: var(--c-muted); margin-top: 16px; }
.fc-adminfoot strong { color: var(--c-ink); display: inline-flex; align-items: center; gap: 8px; }
.fc-health { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.fc-health > div { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-bg); }
.fc-health small { display: block; color: var(--c-muted); font-size: 12px; } .fc-health strong { display: block; font-size: 15px; } .fc-health span { font-size: 12px; color: var(--c-muted); }
.fc-health .icircle-sm { width: 40px; height: 40px; } .fc-health .icircle-sm .ico { width: 20px; height: 20px; }
/* Colonnes des écrans FOND-C (repliées à 900 px) */
.fc-cols-a { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); }
.fc-cols-b { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.fc-cols-c { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.fc-cols-d { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.fc-cols-e { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }
.fc-cols-f { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.fc-cols-g { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.fc-cols-h { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
.fc-start { align-self: start; }
/* Tableaux denses (38, 41, 45, 49, 50) */
.fc-dense .tbl th, .fc-dense .tbl td { padding: 8px 10px; font-size: 14px; }
.fc-dense .tbl th { font-size: 12px; }
.fc-dense .tbl .badge { height: 22px; font-size: 11px; padding: 0 8px; }
.fc-dense .tbl .badge-lg { height: 28px; font-size: 13px; padding: 0 12px; }
.fc-wrap-btn { white-space: normal; height: auto; min-height: 48px; padding: 10px 16px; line-height: 1.25; text-align: left; }
/* Réactif FOND-C */
@media (max-width: 1250px) { .fc-chat { grid-template-columns: 260px minmax(0, 1fr); } .fc-chat > :last-child { grid-column: 1 / -1; } }
@media (max-width: 1100px) { .fc-kpis { grid-template-columns: repeat(2, 1fr); } .fc-filters { grid-template-columns: 1fr 1fr; } .fc-help-more { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .fc-kpis, .fc-kpis-3, .fc-chat, .fc-concert, .fc-sub, .fc-kanban, .fc-filters, .fc-help-tiles, .fc-help-more, .fc-health, [class*="fc-cols-"] { grid-template-columns: 1fr; }
  .fc-chat > :last-child { grid-column: auto; }
  .fc-notif { grid-template-columns: 56px minmax(0, 1fr); } .fc-notif .icircle { width: 56px; height: 56px; } .fc-notif .side { grid-column: 1 / -1; align-items: flex-start; }
  .fc-concert-head h2 { font-size: 22px; } .fc-concert-head .open { margin-left: 0; width: 100%; }
  .fc-tl, .fc-mini-steps { flex-direction: column; gap: 14px; } .fc-tl li::before, .fc-mini-steps li::before { display: none; } .fc-tl li, .fc-mini-steps li { text-align: left; display: flex; gap: 12px; align-items: flex-start; }
  .fc-tl .dot, .fc-mini-steps .dot { margin: 0; flex: 0 0 auto; }
  .fc-bars { height: 200px; } .fc-bars .plot { gap: 8px; padding: 0 8px 28px; } .fc-bars .bar span { font-size: 12px; }
  .fc-hbars > div { grid-template-columns: 110px 1fr 36px; }
  .fc-totp { grid-template-columns: 1fr; }
  .fc-faq .body { padding-left: 16px; }
  .fc-pills a, .fc-pills button { height: 40px; padding: 0 14px; font-size: 14px; }
  .fc-toolbar .end { margin-left: 0; }
  .fc-offer h2 { font-size: 26px; }
  .fc-event-strip .end { margin-left: 0; }
}
=======
/* FOND-B : écrans 13-31 */
:root { --fb-violet: #7A3DB0; --fb-violet-dark: #5B2A86; --fb-violet-soft: #F1E4FD; --fb-violet-line: #D8C2F5; --fb-pink: #E0306E; --fb-pink-dark: #B8174D; --fb-pink-soft: #FDE8EF; --fb-pink-line: #F6BFD3; --fb-teal: #0E8A86; --fb-teal-dark: #0A6563; --fb-teal-soft: #DDF3F1; --fb-ok-soft: #E3F6EB; --fb-ok-line: #9BDBB5; --fb-ok-ink: #0E7A42; --fb-warn-soft: #FFF3DC; --fb-warn-line: #F1D28C; --fb-warn-ink: #9A5F00; --fb-danger-soft: #FDE4E4; --fb-danger-line: #F1AFAF; --fb-danger-ink: #A51F1F; }
.icircle-violet { background: linear-gradient(160deg, #9A12E6, #6E00B8); color: #fff; }
.icircle-pink { background: linear-gradient(160deg, #F0407E, #D0184E); color: #fff; }
.icircle-teal { background: linear-gradient(160deg, #19A39E, #0A6563); color: #fff; }
.icircle-ok { background: linear-gradient(160deg, #2EBF7A, #118A4E); color: #fff; }
.icircle-violet-soft { background: var(--fb-violet-soft); color: var(--fb-violet); box-shadow: none; }
.icircle-pink-soft { background: var(--fb-pink-soft); color: var(--fb-pink); box-shadow: none; }
.icircle-ok-soft { background: var(--fb-ok-soft); color: var(--fb-ok-ink); box-shadow: none; }
.icircle-warn-soft { background: var(--fb-warn-soft); color: var(--c-accent-dark); box-shadow: none; }
.icircle-danger-soft { background: var(--fb-danger-soft); color: var(--fb-danger-ink); box-shadow: none; }
.icircle-muted { background: var(--c-line); color: var(--c-muted); box-shadow: none; }
.btn-violet { color: #fff; background: linear-gradient(180deg, #9A12E6, #6E00B8); box-shadow: 0 8px 18px -6px #6E00B8; }
.btn-teal { color: #fff; background: linear-gradient(180deg, #19A39E, #0A6563); box-shadow: 0 8px 18px -6px #0A6563; }
.btn-soft { color: var(--c-primary); background: var(--c-primary-soft); }
.text-violet { color: var(--fb-violet); } .text-pink { color: var(--fb-pink); } .text-ok { color: var(--fb-ok-ink); } .text-warn { color: var(--fb-warn-ink); } .text-danger { color: var(--fb-danger-ink); } .text-teal { color: var(--fb-teal); }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 10px; }
.back-link .ico { width: 18px; height: 18px; }
.page-head-actions { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.badge-alto { background: var(--fb-violet-soft); color: var(--fb-violet); } .badge-soprano { background: var(--fb-pink-soft); color: var(--fb-pink-dark); } .badge-tenor { background: var(--c-accent-soft); color: var(--c-accent-dark); } .badge-basse { background: var(--c-primary-soft); color: var(--c-primary); }
.badge-muted { background: var(--c-line); color: var(--c-muted); } .badge-violet { background: var(--fb-violet); color: #fff; } .badge-teal { background: var(--fb-teal-soft); color: var(--fb-teal-dark); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; flex: 0 0 auto; }
.chips-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 16px; }
.chips-row .badge { height: 34px; padding: 0 16px; font-size: 14px; }
.subtitle-meta { display: flex; gap: 28px; flex-wrap: wrap; margin: 6px 0 12px; }
.subtitle-meta .meta { align-items: flex-start; margin: 0; }
.subtitle-meta .meta .ico { width: 30px; height: 30px; }
.subtitle-meta .meta strong { display: block; font-size: 18px; color: var(--c-ink); } .subtitle-meta .meta small { font-size: 15px; }

/* Indicateurs du tableau de bord (x-kpi) */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.kpi { display: flex; gap: 14px; align-items: flex-start; padding: 18px 40px 18px 18px; border-radius: 18px; border: 1.5px solid var(--c-line); background: var(--c-surface); color: inherit; text-decoration: none; position: relative; min-width: 0; }
.kpi .val { font-size: 30px; font-weight: 800; line-height: 1; display: block; }
.kpi .lbl { font-size: 17px; font-weight: 700; display: block; margin-top: 4px; line-height: 1.15; }
.kpi .txt { font-size: 14px; color: var(--c-muted); display: block; margin-top: 6px; line-height: 1.35; }
.kpi .chev { position: absolute; right: 12px; top: 16px; color: var(--c-ink); }
.kpi-blue { background: linear-gradient(180deg, var(--c-primary-soft), var(--c-surface)); } .kpi-blue .val, .kpi-blue .lbl { color: var(--c-primary); }
.kpi-violet { background: linear-gradient(180deg, var(--fb-violet-soft), var(--c-surface)); border-color: var(--fb-violet-line); } .kpi-violet .val, .kpi-violet .lbl { color: var(--fb-violet); }
.kpi-gold { background: linear-gradient(180deg, var(--c-accent-soft), var(--c-surface)); border-color: #F1D9A8; } .kpi-gold .val, .kpi-gold .lbl { color: var(--c-accent-dark); }
.kpi-pink { background: linear-gradient(180deg, var(--fb-pink-soft), var(--c-surface)); border-color: var(--fb-pink-line); } .kpi-pink .val, .kpi-pink .lbl { color: var(--fb-pink-dark); }
a.kpi:hover { border-color: var(--c-primary); }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mini-stat { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; text-decoration: none; color: inherit; border: 1.5px solid transparent; }
.mini-stat .val { font-size: 28px; font-weight: 800; line-height: 1; } .mini-stat .lbl { font-size: 14px; font-weight: 600; display: block; }
.mini-stat .ico-lg { flex: 0 0 auto; }
.mini-stat-ok { background: var(--fb-ok-soft); color: var(--fb-ok-ink); } .mini-stat-danger { background: var(--fb-danger-soft); color: var(--fb-danger-ink); } .mini-stat-warn { background: var(--fb-warn-soft); color: var(--fb-warn-ink); } .mini-stat-muted { background: var(--c-bg); color: var(--c-muted); border-color: var(--c-line); } .mini-stat-blue { background: var(--c-primary-soft); color: var(--c-primary); }

/* Titres de carte avec icône carrée */
.ttl-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--c-primary-soft); color: var(--c-primary); flex: 0 0 auto; }
.ttl-ico .ico { width: 20px; height: 20px; }
.ttl-ico-gold { background: var(--c-accent-soft); color: var(--c-accent-dark); } .ttl-ico-violet { background: var(--fb-violet-soft); color: var(--fb-violet); } .ttl-ico-pink { background: var(--fb-pink-soft); color: var(--fb-pink); } .ttl-ico-fill { background: linear-gradient(160deg, var(--c-primary), var(--c-primary-dark)); color: #fff; }
.card-title-row .small { font-weight: 600; }

/* Listes : événements, pistes, messages, rappels, programme */
.date-badge-sm { width: 70px; padding: 8px 4px; border-radius: 12px; background: var(--c-primary-soft); border: 0; }
.date-badge-sm strong { font-size: 28px; } .date-badge-sm small { font-size: 11px; } .date-badge-sm .m { font-size: 12px; }
.date-badge-warm { background: var(--c-accent-soft); } .date-badge-warm strong, .date-badge-warm .m { color: var(--c-accent-dark); }
.evt { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--c-line); min-width: 0; }
.evt:last-child { border-bottom: 0; }
.evt > div { min-width: 0; }
.evt .flex-1 { flex: 1 1 auto; }
.evt h4 { margin: 2px 0 2px; font-size: 16px; }
.evt .meta { font-size: 14px; margin-bottom: 2px; flex-wrap: wrap; }
.evt .meta .ico { width: 16px; height: 16px; }
.evt .end-ico { margin-left: auto; color: var(--c-primary); align-self: center; flex: 0 0 auto; }
.evt-card { border: 1.5px solid var(--c-line); border-radius: 16px; padding: 12px 14px; background: var(--c-surface); margin-bottom: 12px; }
.evt-card:last-child { margin-bottom: 0; }
.evt-card.is-warm { background: var(--c-accent-soft); border-color: #F1D9A8; }
.evt-card.is-tint { background: var(--c-primary-soft); border-color: transparent; }
.evt-card.is-warm-tint { background: var(--c-accent-soft); border-color: transparent; }
.evt-check { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: var(--c-primary-soft); margin-bottom: 10px; }
.evt-check input { width: 24px; height: 24px; accent-color: var(--c-primary); flex: 0 0 auto; }
.msg { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-line); align-items: flex-start; min-width: 0; }
.msg:last-child { border-bottom: 0; }
.msg > div { min-width: 0; flex: 1 1 auto; }
.msg .who { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--c-muted); }
.msg .who b { color: var(--c-ink); font-size: 15px; }
.msg strong { display: block; font-size: 15px; color: var(--c-primary); margin-top: 2px; }
.msg p { margin: 2px 0 0; font-size: 14px; color: var(--c-muted); line-height: 1.4; }
.msg .end-ico { margin-left: auto; color: var(--c-primary); align-self: center; flex: 0 0 auto; }
.todo { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--c-line); color: inherit; text-decoration: none; }
.todo:last-child { border-bottom: 0; }
.todo .icircle { width: 44px; height: 44px; border-radius: 12px; } .todo .icircle .ico { width: 22px; height: 22px; }
.todo strong { display: block; color: var(--c-primary); font-size: 15px; } .todo small { color: var(--c-muted); font-size: 13px; display: block; line-height: 1.3; }
.todo .end-ico { margin-left: auto; color: var(--c-primary); flex: 0 0 auto; }
.prog { list-style: none; padding: 0; margin: 0; }
.prog li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--c-line); font-size: 15px; font-weight: 600; }
.prog li:last-child { border-bottom: 0; }
.prog .num { width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.prog .num-gold { background: var(--c-accent-soft); color: var(--c-accent-dark); } .prog .num-ok { background: var(--fb-ok-soft); color: var(--fb-ok-ink); }
.prog .dur { margin-left: auto; color: var(--c-muted); font-weight: 400; font-size: 14px; }
.prog .end-ico { color: var(--c-primary); }
.media .avail { margin-left: auto; text-align: left; min-width: 150px; }
.media .avail small { display: block; }
.media .end-ico { flex: 0 0 auto; }
.media .thumb { width: 84px; height: 54px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.quote { background: var(--c-primary-soft); border-radius: 12px; padding: 12px 16px 12px 44px; font-size: 15px; color: var(--c-primary-dark); position: relative; }
.quote::before { content: "\201C"; position: absolute; left: 14px; top: 2px; font-size: 38px; font-weight: 800; color: var(--c-primary); line-height: 1; }
.profile-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.profile-head h2 { font-size: 30px; margin: 0 0 6px; }
.profile-head .flex-1 { min-width: 200px; }
.rate { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; margin-bottom: 14px; }
.rate .progress { height: 12px; }
.rate .pct { font-weight: 800; font-size: 17px; }
.progress-violet i { background: linear-gradient(90deg, #9A12E6, #6E00B8); } .progress-ok i { background: linear-gradient(90deg, #2EBF7A, #118A4E); } .progress-pink i { background: linear-gradient(90deg, #F0407E, #D0184E); }
.progress-lg { height: 26px; border-radius: 13px; }

/* Barre d'outils, filtres, onglets */
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.toolbar .control { flex: 1 1 240px; }
.toolbar select.input { width: auto; min-width: 190px; }
.toolbar .btn { flex: 0 0 auto; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.filter-pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 15px; background: var(--c-primary-soft); color: var(--c-primary); text-decoration: none; }
.filter-pill .ico { width: 18px; height: 18px; }
.filter-pill.is-active { background: linear-gradient(180deg, var(--c-primary), var(--c-primary-dark)); color: #fff; box-shadow: 0 8px 18px -8px var(--c-primary-dark); }
.filter-pill-pink { background: var(--fb-pink-soft); color: var(--fb-pink); } .filter-pill-gold { background: var(--c-accent-soft); color: var(--c-accent-dark); }
.filters .sort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.filters .sort select.input { width: auto; }
.tabs-seg { display: flex; gap: 8px; background: var(--c-primary-soft); border-radius: 16px; padding: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.tabs-seg a { flex: 1 1 140px; display: flex; gap: 8px; align-items: center; justify-content: center; padding: 11px 10px; border-radius: 11px; font-weight: 700; font-size: 15px; color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.tabs-seg a .ico { width: 18px; height: 18px; color: var(--c-primary); }
.tabs-seg a.is-active { background: linear-gradient(180deg, var(--c-primary), var(--c-primary-dark)); color: #fff; box-shadow: 0 8px 18px -8px var(--c-primary-dark); } .tabs-seg a.is-active .ico { color: #fff; }
.pill-tabs { display: flex; background: var(--c-bg); border-radius: 999px; padding: 4px; border: 1.5px solid var(--c-line); margin-bottom: 16px; }
.pill-tabs a { flex: 1; text-align: center; padding: 10px; border-radius: 999px; font-weight: 700; color: var(--c-muted); text-decoration: none; font-size: 15px; }
.pill-tabs a.is-active { background: linear-gradient(180deg, var(--c-primary), var(--c-primary-dark)); color: #fff; }
.seg-wide { margin-left: 0; }
.dl-row { display: grid; grid-template-columns: 24px 150px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-line); font-size: 15px; }
.dl-row:last-child { border-bottom: 0; }
.dl-row .ico { width: 20px; height: 20px; color: var(--c-primary); }
.dl-row .k { color: var(--c-muted); }
.dl-row .v { color: var(--c-ink); }
.list-dots { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 15px; }
.list-dots li { display: flex; gap: 10px; align-items: center; }
.list-dots .dot { width: 12px; height: 12px; color: var(--c-primary); } .list-dots .dot-gold { color: var(--c-accent); }
.contact-row { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--c-line); font-size: 15px; }
.contact-row:last-child { border-bottom: 0; }
.contact-row .ico { color: var(--c-primary); flex: 0 0 auto; margin-top: 2px; }
.contact-row strong { display: block; } .contact-row small { color: var(--c-muted); font-size: 14px; }
.role-row { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.role-row:last-child { border-bottom: 0; }
.role-row strong { display: block; font-size: 16px; } .role-row small { color: var(--c-muted); font-size: 14px; }
.role-row .badge { margin-left: auto; }

/* Tableaux : états et pastilles de sélection */
.tbl .member { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tbl .member strong { display: block; font-size: 15px; } .tbl .member small { color: var(--c-muted); font-size: 13px; }
.tbl tr.is-danger td { background: var(--fb-danger-soft); }
.tbl .actions { display: flex; gap: 6px; }
.tbl .actions .btn-icon { width: 36px; height: 36px; background: var(--c-primary-soft); color: var(--c-primary); }
.tbl .actions .btn-icon .ico { width: 16px; height: 16px; }
.tbl th .sort-ico { width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; color: var(--c-primary); }
.tbl select.input { height: 36px; font-size: 14px; padding: 0 36px 0 10px; background-position: calc(100% - 18px) 15px, calc(100% - 12px) 15px; }
.sel-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; border: 1.5px solid; font-weight: 700; font-size: 14px; white-space: nowrap; background: var(--c-surface); font-family: inherit; cursor: pointer; }
.sel-pill .ico { width: 18px; height: 18px; } .sel-pill .ico-sm { width: 14px; height: 14px; margin-left: 4px; opacity: .7; }
.sel-pill-ok { background: var(--fb-ok-soft); border-color: var(--fb-ok-line); color: var(--fb-ok-ink); }
.sel-pill-danger { background: var(--fb-danger-soft); border-color: var(--fb-danger-line); color: var(--fb-danger-ink); }
.sel-pill-warn { background: var(--fb-warn-soft); border-color: var(--fb-warn-line); color: var(--fb-warn-ink); }
.sel-pill-muted { background: var(--c-bg); border-color: var(--c-line); color: var(--c-muted); }
.status-ok { color: var(--fb-ok-ink); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; } .status-ok .ico { width: 18px; height: 18px; }
.status-danger { color: var(--fb-danger-ink); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; } .status-danger .ico { width: 18px; height: 18px; }
.check-circle { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; color: #fff; background: var(--c-primary); }
.check-circle .ico { width: 14px; height: 14px; stroke-width: 3; }
.check-circle-danger { background: var(--c-danger); }

/* Calendrier (21) */
.cal { border: 1.5px solid var(--c-line); border-radius: 16px; background: var(--c-surface); overflow: hidden; }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; gap: 10px; }
.cal-head h2 { margin: 0; font-size: 28px; text-align: center; }
.cal-head .btn-icon { border: 1.5px solid var(--c-line); color: var(--c-primary); width: 40px; height: 40px; border-radius: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--c-line); }
.cal-grid > div { border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); min-height: 92px; padding: 8px; font-size: 15px; font-weight: 700; min-width: 0; }
.cal-grid > div:nth-child(7n) { border-right: 0; }
.cal-dow { background: var(--c-primary-soft); color: var(--c-primary-dark); min-height: 0 !important; text-align: center; padding: 10px 4px !important; font-size: 14px !important; }
.cal-grid .is-out { color: var(--c-muted); font-weight: 400; }
.cal-grid .has-ev { background: color-mix(in srgb, var(--c-primary-soft) 40%, var(--c-surface)); }
.cal-ev { display: block; margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: var(--c-primary-soft); color: var(--c-primary-dark); font-size: 11px; font-weight: 400; line-height: 1.3; text-decoration: none; }
.cal-ev strong { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--c-primary); }
.cal-ev strong .ico { width: 12px; height: 12px; }
.cal-ev-accent { background: var(--c-accent-soft); color: var(--c-accent-dark); } .cal-ev-accent strong { color: var(--c-accent-dark); }
.cal-side .btn-block { margin-bottom: 18px; }
.cal-side .card-title-row { margin-bottom: 10px; }
.ics-link { display: flex; gap: 10px; align-items: center; background: var(--c-bg); border: 1.5px solid var(--c-line); border-radius: 12px; padding: 10px 12px; font-size: 13px; margin-bottom: 18px; min-width: 0; }
.ics-link code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--c-muted); }
.ics-link .ico { color: var(--c-primary); flex: 0 0 auto; }

/* Formulaire de création d'événement (22) et aperçu */
.preview-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.preview-row:last-child { border-bottom: 0; }
.preview-row .ico { color: var(--c-primary); flex: 0 0 auto; margin-top: 2px; }
.preview-row strong { display: block; font-size: 16px; } .preview-row small { color: var(--c-muted); font-size: 14px; display: block; }
.input-split { display: grid; grid-template-columns: 1fr 1fr; }
.input-split > .control:first-child input { border-radius: 12px 0 0 12px; border-right: 0; }
.input-split > .control:last-child input { border-radius: 0 12px 12px 0; }

/* Réponse à un événement (23) et pointage (24) */
.rsvp { display: grid; gap: 12px; }
.rsvp a { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid; font-weight: 700; font-size: 17px; text-decoration: none; }
.rsvp a .icircle { width: 36px; height: 36px; box-shadow: none; } .rsvp a .icircle .ico { width: 18px; height: 18px; }
.rsvp a .end-ico { margin-left: auto; }
.rsvp .yes { background: var(--fb-ok-soft); border-color: var(--fb-ok-line); color: var(--fb-ok-ink); } .rsvp .yes .icircle { background: #1A9E5C; color: #fff; }
.rsvp .maybe { background: var(--fb-warn-soft); border-color: var(--fb-warn-line); color: var(--fb-warn-ink); } .rsvp .maybe .icircle { background: #E09A1A; color: #fff; }
.rsvp .no { background: var(--fb-danger-soft); border-color: var(--fb-danger-line); color: var(--fb-danger-ink); } .rsvp .no .icircle { background: #D93838; color: #fff; }
.rsvp a.is-selected { box-shadow: 0 0 0 3px currentColor inset; }
.note-box { background: var(--c-primary-soft); border-radius: 14px; padding: 16px 18px; font-size: 16px; line-height: 1.5; margin-bottom: 14px; }
.note-box-warm { background: var(--c-accent-soft); display: flex; gap: 14px; align-items: flex-start; }
.note-box-warm .ico { color: var(--c-accent); flex: 0 0 auto; width: 28px; height: 28px; }
.note-box-warm strong { display: block; color: var(--c-accent-dark); margin-bottom: 2px; }
.note-box-info { background: var(--c-primary-soft); border: 1.5px solid color-mix(in srgb, var(--c-primary) 30%, var(--c-line)); display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.note-box-info .ico { color: var(--c-primary); flex: 0 0 auto; }
.note-box-info strong { display: block; color: var(--c-primary-dark); margin-bottom: 4px; }
.event-banner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.event-banner .card { padding: 16px 18px; }
.event-banner .role-card { background: linear-gradient(180deg, var(--c-accent-soft), var(--c-surface)); border-color: #F1D9A8; display: flex; gap: 14px; align-items: center; }
.event-banner .role-card strong { display: block; font-size: 17px; color: var(--c-ink); } .event-banner .role-card small { color: var(--c-muted); font-size: 14px; }
.event-banner .role-card .lbl { display: block; font-size: 14px; color: var(--c-muted); }
.event-banner .change-card { display: flex; align-items: center; justify-content: center; }
.qr-cta { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--c-line); background: var(--c-surface); margin-top: 12px; }
.qr-cta .qr { width: 56px; height: 56px; border-radius: 10px; background: var(--c-primary-soft); color: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.qr-cta .qr .ico { width: 30px; height: 30px; }
.qr-cta strong { display: block; } .qr-cta small { color: var(--c-muted); display: block; }

/* Répertoire (26) et lecteur (27, 29) */
.song-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.song-card { padding: 20px; display: flex; flex-direction: column; }
.song-card .head { display: flex; gap: 14px; align-items: flex-start; }
.song-card .head h3 { margin: 0 0 2px; font-size: 21px; } .song-card .head .by { color: var(--c-ink); font-weight: 600; font-size: 15px; } .song-card .head p { color: var(--c-muted); font-size: 14px; margin: 6px 0 0; line-height: 1.4; }
.song-card .head .btn-icon { margin-left: auto; width: 36px; height: 36px; flex: 0 0 auto; }
.song-card .tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.song-card .tags .badge { height: 26px; }
.song-file { display: flex; gap: 10px; align-items: center; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 12px; padding: 8px 10px; margin-bottom: 14px; min-width: 0; }
.song-file .pdf { width: 32px; height: 32px; } .song-file .pdf .ico { width: 16px; height: 16px; }
.song-file strong { display: block; font-size: 13px; } .song-file small { color: var(--c-muted); font-size: 12px; }
.song-file .vsep { height: 28px; margin: 0 4px; }
.song-file .play { width: 32px; height: 32px; } .song-file .play .ico { width: 14px; height: 14px; }
.song-file .wave-bars { flex: 1 1 auto; min-width: 0; overflow: hidden; height: 22px; }
.song-file .dur { font-size: 12px; font-weight: 700; white-space: nowrap; }
.song-card .btn { margin-top: auto; }
.song-card.is-gold { border-color: #F1D9A8; background: linear-gradient(180deg, var(--c-accent-soft), var(--c-surface) 50%); }
.song-card.is-blue { border-color: color-mix(in srgb, var(--c-primary) 35%, var(--c-line)); background: linear-gradient(180deg, var(--c-primary-soft), var(--c-surface) 50%); }
.wave-bars i.gold { background: var(--c-cta); }
.player { background: var(--c-primary-soft); border-radius: 16px; padding: 16px 18px; }
.player-main { display: flex; align-items: center; gap: 18px; }
.player .play-lg { width: 72px; height: 72px; flex: 0 0 auto; } .player .play-lg .ico { width: 30px; height: 30px; }
.player .play-md { width: 52px; height: 52px; } .player .play-md .ico { width: 22px; height: 22px; }
.player .wave-bars { flex: 1 1 auto; min-width: 0; overflow: hidden; height: 70px; gap: 3px; justify-content: center; }
.player .wave-bars i { width: 4px; }
.player-time { font-weight: 700; font-size: 15px; white-space: nowrap; }
.player-ctrl { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.player-ctrl .ctl { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--c-line); background: var(--c-surface); font: inherit; font-size: 14px; font-weight: 600; color: var(--c-ink); cursor: pointer; white-space: nowrap; }
.player-ctrl .ctl .ico { width: 18px; height: 18px; color: var(--c-primary); }
.player-ctrl .ctl.is-on { border-color: var(--c-primary); background: var(--c-primary); color: #fff; } .player-ctrl .ctl.is-on .ico { color: #fff; }
.player-ctrl .ctl b { color: var(--c-primary); } .player-ctrl .ctl.is-on b { color: #fff; }
.player-ctrl .right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.vol { display: flex; align-items: center; gap: 8px; color: var(--c-primary); }
.vol .bar { width: 110px; height: 6px; border-radius: 3px; background: var(--c-line); position: relative; }
.vol .bar i { position: absolute; left: 0; top: 0; height: 100%; width: 70%; background: var(--c-primary); border-radius: 3px; }
.vol .bar::after { content: ""; position: absolute; top: -5px; left: calc(70% - 8px); width: 16px; height: 16px; border-radius: 50%; background: var(--c-primary); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.switch { width: 44px; height: 24px; border-radius: 12px; background: var(--c-line); position: relative; display: inline-block; flex: 0 0 auto; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: left .15s; }
.switch.is-on { background: var(--c-primary); } .switch.is-on::after { left: 23px; }
.work-item { border: 1.5px solid var(--c-line); border-radius: 16px; padding: 16px; margin-bottom: 18px; background: var(--c-surface); }
.work-item:last-child { margin-bottom: 0; }
.work-item .head { display: grid; grid-template-columns: 124px 1fr auto; gap: 16px; align-items: start; margin-bottom: 14px; }
.work-item .head img { width: 124px; height: 100px; border-radius: 12px; object-fit: cover; }
.work-item .head h3 { font-size: 24px; margin: 0 0 2px; } .work-item .head .by { color: var(--c-muted); font-size: 16px; }
.work-item .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.work-item .pdf-link { display: flex; gap: 10px; align-items: center; border: 1.5px solid var(--c-line); border-radius: 12px; padding: 8px 12px; text-decoration: none; color: inherit; }
.work-item .pdf-link strong { display: block; font-size: 14px; color: var(--c-primary); } .work-item .pdf-link small { color: var(--c-muted); font-size: 12px; }
.work-item .player { padding: 12px 16px; }
.work-item .player .wave-bars { height: 44px; }
.res-row { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--c-line); flex-wrap: wrap; }
.res-row:last-child { border-bottom: 0; }
.res-row .file-ico { width: 50px; height: 50px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
.res-row .file-ico .ico { width: 24px; height: 24px; }
.res-row .file-pdf { background: #E53935; } .res-row .file-doc { background: var(--c-primary); } .res-row .file-audio { background: var(--fb-violet); }
.res-row > div { min-width: 0; }
.res-row strong { display: block; font-size: 17px; } .res-row small { color: var(--c-muted); font-size: 14px; }
.res-row .acts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.res-row .acts .btn { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.res-row .end-ico { color: var(--c-primary); }
.status-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0 18px; }
.status-pick label { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; font-size: 15px; }
.status-pick .box { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; border-radius: 12px; border: 1.5px solid; }
.status-pick .box .ico { width: 20px; height: 20px; }
.status-pick .warn .box { background: var(--fb-warn-soft); border-color: var(--fb-warn-line); color: var(--fb-warn-ink); }
.status-pick .blue .box { background: var(--c-primary-soft); border-color: color-mix(in srgb, var(--c-primary) 30%, var(--c-line)); color: var(--c-primary); }
.status-pick .ok .box { background: var(--fb-ok-soft); border-color: var(--fb-ok-line); color: var(--fb-ok-ink); }
.status-pick input { width: 18px; height: 18px; accent-color: var(--c-accent-dark); }
.status-row { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1.5px solid; margin-bottom: 10px; text-decoration: none; color: inherit; }
.status-row:last-child { margin-bottom: 0; }
.status-row strong { display: block; font-size: 16px; } .status-row small { color: var(--c-muted); font-size: 14px; }
.status-row .end-ico { margin-left: auto; color: var(--c-ink); }
.status-row .icircle { width: 40px; height: 40px; box-shadow: none; } .status-row .icircle .ico { width: 20px; height: 20px; }
.status-row-ok { background: var(--fb-ok-soft); border-color: var(--fb-ok-line); } .status-row-warn { background: var(--fb-warn-soft); border-color: var(--fb-warn-line); } .status-row-muted { background: var(--c-bg); border-color: var(--c-line); }
.letter { background: var(--c-primary-soft); border-radius: 14px; padding: 16px 18px; font-size: 15px; line-height: 1.55; color: var(--c-ink); }
.letter p { margin: 0 0 10px; } .letter p:last-child { margin: 0; }
.import-foot { display: flex; justify-content: space-between; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.pie { width: 104px; height: 104px; border-radius: 50%; background: conic-gradient(var(--fb-pink) 0 8%, var(--c-primary) 8% 100%); flex: 0 0 auto; box-shadow: 0 8px 18px -8px var(--c-primary-dark); }
.legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.legend li { display: flex; gap: 10px; align-items: flex-start; }
.legend li .icircle { width: 30px; height: 30px; box-shadow: none; } .legend li .icircle .ico { width: 16px; height: 16px; }
.legend strong { display: block; font-size: 17px; line-height: 1.1; } .legend small { color: var(--c-muted); font-size: 13px; }
.ctrl-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--c-line); font-size: 15px; }
.ctrl-row:last-child { border-bottom: 0; }
.ctrl-row .ico { color: var(--c-primary); }
.ctrl-row .k { flex: 1 1 auto; font-weight: 600; }
.ctrl-row .v { text-align: right; line-height: 1.25; }
.ctrl-row .v small { display: block; }
.ctrl-row .end-ico { color: var(--c-primary); }
.pupitre-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.pupitre-card { padding: 18px; display: flex; flex-direction: column; }
.pupitre-card .head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.pupitre-card .head h3 { margin: 0; font-size: 20px; } .pupitre-card .head .n { font-size: 26px; font-weight: 800; line-height: 1.1; } .pupitre-card .head .n small { font-size: 16px; font-weight: 700; margin-left: 4px; }
.pupitre-card .head .end-ico { margin-left: auto; color: var(--c-ink); }
.pupitre-card > p { color: var(--c-muted); font-size: 14px; margin: 0 0 12px; }
.pupitre-card .resp { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); margin-bottom: 10px; }
.pupitre-card .resp small { display: block; color: var(--c-muted); font-size: 13px; } .pupitre-card .resp strong { font-size: 15px; }
.pupitre-card h4 { font-size: 14px; margin-bottom: 6px; }
.pupitre-card ul { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; font-size: 14px; }
.pupitre-card ul li { display: flex; gap: 8px; align-items: center; } .pupitre-card ul .ico { width: 16px; height: 16px; color: var(--c-primary); }
.pupitre-card .btn { margin-top: auto; }
.pupitre-card.is-violet { border-color: var(--fb-violet-line); } .pupitre-card.is-violet .head h3 { color: var(--fb-violet); } .pupitre-card.is-violet ul .ico { color: var(--fb-violet); }
.pupitre-card.is-gold { border-color: #F1D9A8; } .pupitre-card.is-gold .head h3 { color: var(--c-accent-dark); } .pupitre-card.is-gold ul .ico { color: var(--c-accent-dark); }
.pupitre-card.is-teal { border-color: #9FD9D6; } .pupitre-card.is-teal .head h3 { color: var(--fb-teal); } .pupitre-card.is-teal ul .ico { color: var(--fb-teal); }
.pupitre-card.is-blue .head h3 { color: var(--c-primary); }
.create-band { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; }
.create-band .illus { height: 150px; border-radius: 16px; background: linear-gradient(135deg, var(--c-primary-soft), var(--c-accent-soft)); display: flex; align-items: center; justify-content: center; position: relative; }
.create-band .illus .icircle { width: 70px; height: 70px; border-radius: 18px; } .create-band .illus .icircle .ico { width: 34px; height: 34px; }
.create-band .illus .plus { position: absolute; right: 50px; top: 36px; width: 42px; height: 42px; }
.create-band .illus .plus .ico { width: 22px; height: 22px; }
.create-band .row-form { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.create-band .row-form .control { flex: 1 1 260px; }
.intro-band { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.intro-band .icircle-sq { border-radius: 14px; } .intro-band h3 { margin-bottom: 2px; } .intro-band p { margin: 0; color: var(--c-muted); }
.opt { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 14px; background: var(--c-bg); border: 1.5px solid var(--c-line); margin-bottom: 12px; }
.opt input { width: 24px; height: 24px; accent-color: var(--c-primary); flex: 0 0 auto; }
.opt strong { display: block; font-size: 18px; } .opt small { color: var(--c-muted); font-size: 15px; display: block; }
.res { margin-bottom: 14px; }
.res .row { justify-content: space-between; align-items: flex-end; margin-bottom: 6px; }
.res .row strong { font-size: 17px; }
.res .votes { text-align: right; font-weight: 700; font-size: 16px; line-height: 1.2; } .res .votes small { display: block; font-weight: 600; color: var(--c-muted); font-size: 14px; }
.poll { display: flex; gap: 20px; align-items: center; padding: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.poll:last-child { margin-bottom: 0; }
.poll .icircle-lg { border-radius: 50%; }
.poll > div { min-width: 0; }
.poll h3 { font-size: 22px; margin-bottom: 4px; color: var(--c-primary); }
.poll .desc { color: var(--c-muted); margin: 0 0 8px; font-size: 15px; }
.poll .meta { margin: 0; gap: 20px; flex-wrap: wrap; }
.poll .meta span { display: inline-flex; align-items: center; gap: 6px; }
.poll .acts { margin-left: auto; display: flex; gap: 14px; align-items: center; flex: 0 0 auto; }
.poll .acts .end-ico { color: var(--c-ink); }
.poll.is-gold { border-color: #F1D9A8; background: linear-gradient(180deg, var(--c-accent-soft), var(--c-surface) 60%); }
.poll.is-violet { border-color: var(--fb-violet-line); background: linear-gradient(180deg, var(--fb-violet-soft), var(--c-surface) 60%); }
.poll.is-violet h3 { color: var(--fb-violet); }
.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.feature-cards .card { padding: 20px; } .feature-cards .feature h3 { font-size: 19px; }
.deadline { display: flex; gap: 14px; align-items: center; background: var(--fb-danger-soft); border: 1.5px solid var(--fb-danger-line); border-radius: 14px; padding: 14px 16px; }
.deadline .ico { color: var(--c-danger); width: 32px; height: 32px; flex: 0 0 auto; }
.deadline strong { display: block; font-size: 17px; color: var(--c-danger); } .deadline small { color: var(--c-muted); font-size: 14px; }
.sidebar-note { display: flex; gap: 14px; align-items: flex-start; }
.sidebar-note strong { display: block; font-size: 17px; color: var(--c-primary); margin-bottom: 2px; } .sidebar-note p { margin: 0; color: var(--c-muted); font-size: 14px; }
.counter-wrap { position: relative; }
.counter-wrap .counter { position: absolute; right: 12px; bottom: 8px; margin: 0; }
.unavail-tabs { display: flex; background: var(--c-bg); border-radius: 999px; padding: 4px; border: 1.5px solid var(--c-line); margin-bottom: 14px; }
.page-head .pupitre-chip { display: inline-flex; gap: 12px; align-items: center; background: var(--c-surface); border: 1.5px solid var(--c-line); border-radius: 14px; padding: 10px 16px; margin: 8px 12px 0 0; }
.page-head .pupitre-chip small { display: block; color: var(--c-muted); font-size: 13px; } .page-head .pupitre-chip strong { font-size: 18px; }
@media (max-width: 1100px) {
  .kpis, .pupitre-grid { grid-template-columns: repeat(2, 1fr); }
  .song-grid, .feature-cards { grid-template-columns: repeat(2, 1fr); }
  .event-banner { grid-template-columns: 1fr 1fr; } .event-banner > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .song-grid, .feature-cards, .mini-stats, .event-banner, .create-band, .status-pick { grid-template-columns: 1fr; }
  .work-item .head { grid-template-columns: 1fr; } .work-item .head img { width: 100%; height: 140px; }
  .res-row .acts { margin-left: 0; width: 100%; }
  .media .avail { margin-left: 0; width: 100%; min-width: 0; }
  .subtitle-meta { gap: 14px; }
  .dl-row { grid-template-columns: 24px 1fr; } .dl-row .v { grid-column: 2; }
  .toolbar select.input { width: 100%; }
  .filters .sort { margin-left: 0; width: 100%; }
  .import-foot .btn { width: 100%; }
  .page-head-actions .btn { width: 100%; }
}
@media (max-width: 600px) {
  .kpis, .pupitre-grid, .input-split { grid-template-columns: 1fr; }
  .input-split > .control:first-child input { border-radius: 12px 12px 0 0; border-right: 1.5px solid var(--c-line); border-bottom: 0; }
  .input-split > .control:last-child input { border-radius: 0 0 12px 12px; }
  .cal-grid > div { min-height: 54px; padding: 4px 3px; font-size: 12px; }
  .cal-dow { font-size: 11px !important; padding: 8px 2px !important; }
  .cal-ev { padding: 3px; font-size: 0; margin-top: 3px; } .cal-ev strong { font-size: 9px; gap: 2px; } .cal-ev strong .ico { display: none; }
  .cal-head h2 { font-size: 20px; }
  .player-main { flex-wrap: wrap; } .player .wave-bars { width: 100%; order: 3; height: 50px; }
  .player-ctrl .right { margin-left: 0; width: 100%; }
  .tabs-seg a { flex: 1 1 45%; }
  .poll .acts { margin-left: 0; width: 100%; } .poll .acts .btn { flex: 1 1 auto; }
  .rsvp a { font-size: 15px; }
  .profile-head { justify-content: center; text-align: center; } .profile-head .chips-row { justify-content: center; }
  .evt { flex-wrap: wrap; } .evt .end-ico { display: none; }
  .date-badge-sm { width: 60px; } .date-badge-sm strong { font-size: 22px; }
  .status-pick label { font-size: 14px; }
}
/* FOND-B : écrans 13-31 — correctifs après captures (grilles nommées, largeurs minimales, mobile) */
.grid-16-1-1 { grid-template-columns: 1.6fr 1fr 1fr; } .grid-18-1-1 { grid-template-columns: 1.8fr 1fr 1fr; } .grid-1-2 { grid-template-columns: 1fr 2fr; }
.grid-2-1 { grid-template-columns: 2fr 1fr; } .grid-22-1 { grid-template-columns: 2.2fr 1fr; } .grid-155-1 { grid-template-columns: 1.55fr 1fr; } .grid-13-1 { grid-template-columns: 1.3fr 1fr; }
.grid-24-1 { grid-template-columns: 2.4fr 1fr; } .grid-16-1 { grid-template-columns: 1.6fr 1fr; } .grid-18-1 { grid-template-columns: 1.8fr 1fr; }
.kpis > *, .pupitre-grid > *, .song-grid > *, .feature-cards > *, .mini-stats > *, .status-pick > *, .event-banner > *, .create-band > * { min-width: 0; }
.kpi-next .val { font-size: 20px; line-height: 1.1; }
.mini-stats { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.mini-stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mini-stat { padding: 12px 10px; gap: 8px; } .mini-stat .val { font-size: 24px; } .mini-stat .lbl { font-size: 13px; }
.mini-stat .ico-lg { width: 26px; height: 26px; }
.answer-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.answer-wrap .btn { border-width: 1.5px; font-size: 14px; }
.song-row { display: grid; grid-template-columns: auto 1.2fr 1fr 1fr; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--c-line); }
.song-row:last-child { border-bottom: 0; }
.song-row > * { min-width: 0; }
.song-row .media { border: 0; padding: 0; color: inherit; }
.song-row .media strong { font-size: 15px; }
.card-title-row.wrapable { flex-wrap: wrap; }
.tbl .member { min-width: 170px; } .tbl .member small { white-space: normal; word-break: break-all; font-size: 12px; }
.tbl select.input { min-width: 120px; }
.sel-pill { padding: 5px 10px; font-size: 13px; }
.qr-cta { flex-wrap: wrap; } .qr-cta > div { flex: 1 1 160px; }
.poll .flex-1 { flex: 1 1 300px; min-width: 0; }
.pupitre-card .btn { padding: 0 12px; font-size: 15px; }
.toolbar select.input { min-width: 170px; }
.evt-check { display: flex; } .evt-check .date-badge { display: block; } .evt-check .flex-1 { flex: 1 1 auto; display: block; min-width: 0; }
.opt .date-badge { display: block; }
@media (max-width: 900px) {
  .grid-16-1-1, .grid-18-1-1, .grid-1-2, .grid-2-1, .grid-22-1, .grid-155-1, .grid-13-1, .grid-24-1, .grid-16-1, .grid-18-1 { grid-template-columns: 1fr; }
  .song-row { grid-template-columns: auto 1fr; } .song-row .media { grid-column: 2; }
}
@media (max-width: 600px) {
  .media .wave-bars { display: none; }
  .mini-stats, .mini-stats-2 { grid-template-columns: 1fr 1fr; }
  .answer-wrap .btn { width: 100%; }
}
.field-inline-150 { grid-template-columns: 150px 1fr; }
@media (max-width: 900px) { .field-inline-150 { grid-template-columns: 1fr; } }