/*
    Mosaïque des opportunités (Front/Pages/Campaign/ongoing-campaigns.html.twig) et opérations financées
    (Front/Pages/Campaign/done-campaigns.html.twig, qui en reprend le bandeau et la grille) : mise en page seulement.
    Les éléments réutilisables (cartes, étiquettes, choix, encarts, tableau, champs) sont des composants du design system.
*/
.front-mosaic { background: hsl(var(--front-stone-100)); color: hsl(var(--front-ink-900)); line-height: 1.5; }

/* Bandeau : titre, espaces réglementaires et tuiles par objectif */
.front-mosaic-band { border-bottom: 1px solid hsl(var(--front-stone-200)); }
.front-mosaic-band-inner { padding-top: 32px; padding-bottom: 24px; }
.front-mosaic-band-head { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.front-mosaic-band-head h1 { max-width: 768px; }
.front-mosaic-spaces { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 8px; }

/* Tuiles « par objectif » : grille ; chaque tuile est un Choice en variante tile (choice.css) */
.front-mosaic-objectives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }

/* Corps : rail des classes d'actifs, puis résultats */
.front-mosaic-body { display: grid; gap: 32px; padding-top: 32px; padding-bottom: 32px; }
.front-mosaic-rail-inner { display: flex; flex-direction: column; gap: 20px; }
.front-mosaic-classes { padding: 12px; border: 1px solid hsl(var(--front-stone-200)); background: hsl(var(--front-white)); }
.front-mosaic-classes-title { padding: 8px 12px 12px; color: hsl(var(--front-stone-700)); font: 400 11px/16px var(--front-font-mentions), sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.front-mosaic-classes ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }

/* Bloc « Conseiller dédié » du rail */
.front-mosaic-advisor { display: none; padding: 20px; background: linear-gradient(to bottom, hsl(var(--front-ink-900)), hsl(var(--front-ink-950))); color: hsl(var(--front-white)); }
.front-mosaic-advisor-head { display: flex; align-items: center; gap: 12px; }
.front-mosaic-advisor-icon { display: grid; place-items: center; width: 40px; height: 40px; background: rgb(255 255 255 / .1); }
.front-mosaic-advisor-title { font-size: 14px; font-weight: 500; line-height: 20px; }
.front-mosaic-advisor-note, .front-mosaic-advisor-text { color: hsl(var(--front-ink-300)); font-size: 12px; line-height: 16px; }
.front-mosaic-advisor-text { margin-top: 16px; line-height: 1.625; }
.front-mosaic-advisor .front-mosaic-advisor-button { margin-top: 16px; }
/* Carte encre : anneau blanc. La règle générale de la mosaïque, plus bas, l'emporterait à spécificité égale. */
.front-mosaic .front-mosaic-advisor :focus-visible { outline-color: hsl(var(--front-white)); }

.front-mosaic-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.front-mosaic-flash { font-size: 14px; }

/* Accueil d'un nouveau prospect */
.front-mosaic-welcome { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 20px; border: 1px solid hsl(var(--front-stone-200)); background: hsl(var(--front-white)); }
.front-mosaic-welcome-title { font-weight: 500; }
.front-mosaic-welcome-text { margin-top: 4px; color: hsl(var(--front-stone-700)); font-size: 14px; line-height: 1.625; }
.front-mosaic-welcome-actions { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 8px; }

/* Filtres */
/* Tuile d'objectif ou classe d'actifs sans offre dans l'espace choisi : estompée, toujours cliquable (le message de résultat vide explique). */
.front-mosaic .front-choice.is-empty { opacity: .5; }
/* Bloc de filtres replié par défaut : le bouton de la barre de résultats l'ouvre sous cette barre ; la carte blanche est le panneau. */
/* Pas un appel à l'action : angles droits, comme les listes et la bascule d'affichage voisines (le bouton du design system est une pilule par défaut). */
.front-site .front-mosaic .front-mosaic-filters-toggle { border-radius: 0; }
.front-mosaic-filters-toggle[aria-expanded="true"] > .front-button-lead:last-child { transform: rotate(180deg); }
.front-mosaic-filters-panel { padding: 20px; border: 1px solid hsl(var(--front-stone-200)); background: hsl(var(--front-white)); }
.front-mosaic-filter-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 40px; }
.front-mosaic-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.front-mosaic-choices-none { display: inline-flex; align-items: center; height: 40px; color: hsl(var(--front-stone-600)); font-size: 14px; line-height: 20px; }
.front-mosaic-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.front-mosaic-filter-row + .front-mosaic-selects { margin-top: 24px; }
.front-mosaic-reset { display: flex; justify-content: flex-end; margin-top: 16px; }
/* Mode tableau : chaque filtre passe sous l'intitulé de sa colonne et le bloc disparaît ; « Tout effacer » reste dans la barre de résultats. */
.front-mosaic--table .front-mosaic-filters-panel, .front-mosaic--table .front-mosaic-filters-toggle { display: none; }
.front-mosaic-reset-table { display: none; }
.front-mosaic--table .front-mosaic-reset-table { display: inline; }

/* Barre de résultats : nombre d'offres, tri, bascule mosaïque ou tableau */
.front-mosaic-results-bar { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.front-mosaic-count { color: hsl(var(--front-stone-700)); font-size: 14px; line-height: 20px; }
.front-mosaic-count b { color: hsl(var(--front-ink-900)); font-weight: 500; }
.front-mosaic-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; }
.front-mosaic-sort-label { display: none; color: hsl(var(--front-stone-600)); }
/* Mobile : le compteur et le bouton « Filtrer » partagent la première ligne, le tri et l'affichage la seconde. */
@media (max-width: 639px) {
    .front-mosaic-results-bar { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .front-mosaic-count { flex: 1 1 0; min-width: 0; }
    .front-mosaic-tools { display: contents; }
    .front-mosaic-tools .front-select-wrap { flex: 1 1 120px; min-width: 120px; }
    .front-mosaic-tools .front-select--compact { width: 100%; }
}

/* Résultats */
.front-mosaic-grid { display: grid; gap: 20px; }
.front-mosaic-table { overflow: hidden; border: 1px solid hsl(var(--front-stone-200)); background: hsl(var(--front-white)); }
.front-mosaic-table table { min-width: 1000px; }
.front-mosaic-table-thumb { width: 76px; }
/* En-têtes : l'intitulé en haut, le filtre de la colonne dessous. */
.front-mosaic-table th { vertical-align: top; }
.front-mosaic-table-label { display: block; }
.front-mosaic-table th .front-select-wrap { margin-top: 8px; }
.front-mosaic-empty { padding: 40px; border: 1px dashed hsl(var(--front-stone-300)); background: hsl(var(--front-white)); text-align: center; }
.front-mosaic-empty > .front-icon { display: block; margin-inline: auto; color: hsl(var(--front-stone-600)); }
.front-mosaic-empty-title { margin-top: 12px; font-weight: 500; }
.front-mosaic-empty-text { margin-top: 4px; color: hsl(var(--front-stone-600)); font-size: 14px; line-height: 20px; }
.front-mosaic-empty-text a { color: hsl(var(--front-ink-900)); }

/* Dernières opérations financées */
.front-mosaic-done { padding-top: 32px; }
.front-mosaic-done-head { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.front-mosaic-done-head .front-link-quiet { align-self: flex-start; }

/* Opérations financées : une colonne sous le bandeau, la grille de la mosaïque, puis la pagination par liens */
.front-done-body { display: flex; flex-direction: column; gap: 32px; padding-top: 32px; padding-bottom: 32px; }
.front-done-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.front-done-pager-page { color: hsl(var(--front-stone-700)); font-size: 14px; line-height: 20px; }

.front-mosaic :focus-visible { outline: 2px solid hsl(var(--front-ink-900)); outline-offset: 2px; }

@media(min-width:640px) {
    .front-mosaic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .front-mosaic-sort-label { display: inline; }
    .front-mosaic-done-head { flex-direction: row; align-items: flex-end; }
    .front-mosaic-done-head .front-link-quiet { align-self: auto; }
}
@media(min-width:768px) {
    .front-mosaic-objectives { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .front-mosaic-selects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .front-mosaic-welcome, .front-mosaic-results-bar { flex-direction: row; align-items: center; }
}
@media(min-width:1024px) {
    .front-mosaic-band-head { flex-direction: row; align-items: flex-end; }
    .front-mosaic-body { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .front-mosaic-body--empty { display: block; }
    .front-mosaic-rail { grid-column: span 3 / span 3; }
    .front-mosaic-rail-inner { position: sticky; top: calc(var(--front-navbar-height) + 1rem); }
    .front-mosaic-main { grid-column: span 9 / span 9; }
    .front-mosaic-advisor { display: block; }
}
@media(min-width:1280px) {
    .front-mosaic-objectives, .front-mosaic-selects { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .front-mosaic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Bandeau SCA (migration de sécurité Mangopay), en pleine largeur sous l'en-tête. Fond d'alerte : l'argile du design system, réservée au
   risque et à l'erreur, avec filet et pastille pleins ; les boutons restent ceux du design system, en encre. */
.front-mosaic-alert { padding-top: 24px; padding-bottom: 24px; }
.front-sca-banner { padding: 24px; border: 1px solid hsl(var(--front-clay-500)); border-left: 4px solid hsl(var(--front-clay-700)); background: hsl(var(--front-clay-100)); }
.front-sca-banner-head { display: flex; gap: 16px; }
.front-sca-banner-icon { display: grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px; background: hsl(var(--front-clay-700)); color: hsl(var(--front-white)); }
.front-sca-banner-title { margin: 0; color: hsl(var(--front-clay-700)); font-size: 18px; font-weight: 700; line-height: 28px; }
.front-sca-banner-text { margin: 4px 0 0; color: hsl(var(--front-ink-900)); font-size: 14px; line-height: 1.625; }
.front-sca-banner-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 20px; }
/* Un nom de société long passe à la ligne plutôt que de déborder du bouton. */
.front-site .front-sca-banner-buttons .front-button { height: auto; min-height: 40px; font-weight: 700; line-height: 20px; white-space: normal; text-align: center; }
.front-sca-banner-error { margin: 16px 0 0; color: hsl(var(--front-ink-900)); font-size: 14px; font-weight: 500; line-height: 20px; }
.front-sca-banner-error[hidden] { display: none; }
@media (max-width: 575px) {
    .front-sca-banner { padding: 16px; }
    .front-sca-banner-head { gap: 12px; }
}
/* Fenêtre de la session de sécurité (créée par sca_banner_controller.js) : l'iframe de Mangopay, au-dessus de la navigation. */
.front-sca-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: hsl(var(--front-white) / .2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.front-sca-modal-container { position: relative; width: 95%; max-width: 530px; background: hsl(var(--front-white)); box-shadow: var(--front-shadow-e2); }
.front-sca-modal-close { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border: 0; background: hsl(var(--front-white)); box-shadow: var(--front-shadow-e1); color: hsl(var(--front-ink-900)); font-size: 18px; cursor: pointer; }
.front-sca-modal-close:focus-visible { outline: 2px solid hsl(var(--front-ink-900)); outline-offset: 2px; }
.front-sca-modal-iframe { display: block; width: 100%; height: 80vh; border: 0; }