/*
 * CSS maison, volontairement réduit.
 *
 * Règle : utilitaire Bootstrap d'abord ; une classe ici seulement si Bootstrap
 * n'a pas d'équivalent. Jamais de couleur en dur — toujours une variable
 * --bs-*, faute de quoi surcharger le thème ne reteinterait pas ces règles.
 */

/* Fond de page gris, cards et lignes blanches, comme la maquette de référence
   (docs/maquettes/). Surtout pas en surchargeant --bs-body-bg : Bootstrap s'en
   sert aussi pour le fond des cards, des list-group et des champs, qui se
   fondraient alors dans la page. --bs-tertiary-bg suit le thème sombre. */
body {
    background-color: var(--bs-tertiary-bg);
}

/* Gouttière de la barre de défilement toujours réservée : sans elle, le contenu
   centré se décale latéralement entre une page courte et une page longue. */
html {
    scrollbar-gutter: stable;
}

/* Effet de survol partagé par les cartes cliquables. Sans équivalent Bootstrap.
   Une seule définition, là où le projet de référence l'écrivait deux fois. */
.hover-lift {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--bs-box-shadow) !important;
}

/* Survol de toute ligne de liste, cliquable ou non, comme la maquette.
   list-group-item-action le fait déjà pour un lien ou un bouton, mais son
   état :active ferait passer une ligne inerte pour cliquable. Même couleur,
   par sa variable : les deux survols restent identiques, dans les deux
   thèmes. Sauf sur la ligne .active (option d'autocomplete surlignée) : même
   spécificité que la règle de Bootstrap mais déclarée après, elle lui
   reprendrait le fond et laisserait son texte blanc sur fond clair. */
.list-row:not(.active):hover {
    background-color: var(--bs-list-group-action-hover-bg);
}

/* Fond flouté d'un bloc collant (à combiner avec sticky-top ou sticky-lg-top) :
   le contenu qui défile dessous reste deviné sans gêner la lecture. Bootstrap
   fournit le positionnement, pas le fond. */
.sticky-blur {
    background: color-mix(in srgb, var(--bs-tertiary-bg) 75%, transparent);
    backdrop-filter: blur(10px);
}

@media print {
    .no-print { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid var(--bs-border-color); }
    .sticky-blur { position: static !important; }
}

/* Barre latérale : liens en couleur de texte, survol discret, comme la
   maquette. nav-pills ne fournit que l'état actif. */
.sidebar .nav-link {
    color: var(--bs-body-color);
}
.sidebar .nav-link:hover:not(.active) {
    background-color: var(--bs-secondary-bg);
}
.sidebar .nav-link.active {
    color: var(--bs-white);
}

/* Bouton en contour lisible : le texte des contours warning et info de
   Bootstrap manque de contraste sur fond clair ; la variante emphasis suit le
   theme, mode sombre compris. */
.btn-outline-primary.btn-outline-lisible { --bs-btn-color: var(--bs-primary-text-emphasis); }
.btn-outline-success.btn-outline-lisible { --bs-btn-color: var(--bs-success-text-emphasis); }
.btn-outline-warning.btn-outline-lisible { --bs-btn-color: var(--bs-warning-text-emphasis); }
.btn-outline-info.btn-outline-lisible { --bs-btn-color: var(--bs-info-text-emphasis); }

/* Modale de choix de logo (dialog natif) : plein écran sous md, 720 px au-delà.
   Le fond est teinté par la variable Bootstrap, jamais en dur. */
.logo-selecteur,
.simulation-pourquoi {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    border: 0;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
}
.logo-selecteur::backdrop,
.simulation-pourquoi::backdrop { background: rgba(var(--bs-emphasis-color-rgb), 0.5); }
/* Dans la modale seulement, les panneaux du contenu défilent sous l'en-tête et les onglets ;
   ailleurs (étape d'un assistant), le contenu suit la page. */
.logo-selecteur .logo-panneaux { max-height: calc(90vh - 8rem); overflow: auto; }
@media (min-width: 768px) {
    .logo-selecteur,
    .simulation-pourquoi {
        width: 720px;
        height: auto;
        max-height: 90vh;
        border-radius: var(--bs-border-radius-lg);
    }
}
/* Popin de choix d'icône des catégories (dialog natif) : plein écran sous md,
   900 px au-delà. Thèmes en rangée défilante sous md, en colonne au-delà ;
   seule la grille défile verticalement. */
.icones-selecteur {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    border: 0;
    overflow: hidden;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
}
.icones-selecteur[open] { display: flex; flex-direction: column; }
.icones-selecteur::backdrop { background: rgba(var(--bs-emphasis-color-rgb), 0.5); }
.icones-selecteur-corps { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.icones-selecteur-themes { display: flex; gap: 0.25rem; flex-shrink: 0; overflow-x: auto; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
.icone-bouton { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; }
.icones-selecteur-grille { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (min-width: 768px) {
    .icones-selecteur {
        width: 900px;
        height: 80vh;
        border-radius: var(--bs-border-radius-lg);
    }
    .icones-selecteur-corps { flex-direction: row; }
    .icones-selecteur-themes {
        flex-direction: column;
        width: 12rem;
        overflow-x: visible;
        overflow-y: auto;
        border-bottom: 0;
        border-right: var(--bs-border-width) solid var(--bs-border-color);
    }
    .icones-selecteur-themes > .btn { text-align: start; }
}
/* Modale de l'assistant d'organisme (dialog natif) : plein écran sous md, large
   au-delà. En-tête et pied restent visibles, seul le corps de l'étape défile. */
.assistant-modale {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    border: 0;
    overflow: hidden;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
}
.assistant-modale[open] { display: flex; flex-direction: column; }
.assistant-modale::backdrop { background: rgba(var(--bs-emphasis-color-rgb), 0.5); }
.assistant-modale-contenu,
.assistant-cadre,
.assistant-etape { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.assistant-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Le sélecteur de logo est déjà dans l'étape : le « Changer… » de l'aperçu ouvrirait une modale absente. */
/* Étape Logo de l'assistant : l'avatar d'en-tête sert d'aperçu, le sélecteur est déjà dans l'étape. */
.assistant-logo button[hx-get$="/selecteur"] { pointer-events: none; }
.assistant-logo button[hx-get$="/selecteur"] > span { display: none; }
/* Barre d'étapes de l'assistant : pastilles numérotées reliées par un trait,
   libellé dessous. Sous sm, seul le libellé de l'étape courante reste visible. */
.assistant-etapes { display: flex; counter-reset: etape; padding: 0; }
.assistant-etapes > li {
    flex: 1 1 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    text-align: center;
    color: var(--bs-secondary-color);
    counter-increment: etape;
}
.assistant-etapes > li::before {
    content: counter(etape);
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid var(--bs-border-color);
    border-radius: 50%;
    background: var(--bs-body-bg);
    font-weight: 600;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}
/* Trait vers l'étape précédente, du centre de sa pastille au centre de celle-ci. */
.assistant-etapes > li + li::after {
    content: "";
    position: absolute;
    top: calc(.875rem - 1px);
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--bs-border-color);
}
.assistant-etapes > li.franchie::before {
    content: "✓";
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: #fff;
}
.assistant-etapes > li.courante::before {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: #fff;
    box-shadow: 0 0 0 .25rem var(--bs-primary-bg-subtle);
}
/* Passée (sans effet) : la progression continue, la pastille reste vide. */
.assistant-etapes > li.passee::before {
    content: "–";
    border-style: dashed;
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}
.assistant-etapes > li.passee { font-style: italic; }
.assistant-etapes > li.franchie::after,
.assistant-etapes > li.passee::after,
.assistant-etapes > li.courante::after { background: var(--bs-primary); }
.assistant-etapes > li.franchie { color: var(--bs-body-color); }
.assistant-etapes > li.courante { color: var(--bs-primary-text-emphasis); font-weight: 600; }
.assistant-etape-libelle {
    margin-top: .25rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .assistant-etapes > li:not(.courante) .assistant-etape-libelle { visibility: hidden; }
    .assistant-etapes > li.courante .assistant-etape-libelle { overflow: visible; }
}
@media (min-width: 768px) {
    .assistant-modale {
        width: min(960px, calc(100% - 2rem));
        height: 90vh;
        border-radius: var(--bs-border-radius-lg);
    }
}
/* Grille de vignettes : 2 colonnes sur mobile, 4 dès md. Une page de résultats
   est un conteneur transparent, pour que ses vignettes rejoignent la grille. */
.logo-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (min-width: 768px) { .logo-grille { grid-template-columns: repeat(4, 1fr); } }
.logo-page { display: contents; }
.logo-pleine { grid-column: 1 / -1; }


/* Popin de confirmation (dialog natif) : petite boite centree, 28 rem au plus,
   pleine largeur moins marges sur mobile. */
.confirmation-modale {
    width: calc(100% - 2rem);
    max-width: 28rem;
    padding: 0;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
}
.confirmation-modale::backdrop { background: rgba(var(--bs-emphasis-color-rgb), 0.5); }
.confirmation-modale .modal-header,
.confirmation-modale .modal-body,
.confirmation-modale .modal-footer { padding: 1rem; }
.confirmation-modale .modal-header { border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
.confirmation-modale .modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; border-top: var(--bs-border-width) solid var(--bs-border-color); }

/* Menu « Brouillon » d'une règle (Alpine, sans popper) : aligné à gauche en xs, où le bouton peut
   se trouver au bord gauche après le passage à la ligne ; à droite dès md. */
.menu-brouillon[data-bs-popper] { left: 0; right: auto; }
@media (min-width: 768px) { .menu-brouillon[data-bs-popper] { left: auto; right: 0; } }

/* Tiroir d'opération (maquette A). En-tête : padding bas élargi pour que l'encart « À vérifier »
   morde dessus ; l'encart est dans la zone de statut, fixe entre l'en-tête et le corps. */
.tiroir-op-entete { padding: 16px 20px 26px; }
.tiroir-op-pastille { font-size: 12px; font-weight: 400; padding: 2px 10px; border-radius: 999px; background: var(--bs-body-bg); color: inherit; }
.tiroir-op-titre { font-size: 17px; font-weight: 500; }
.tiroir-op-soustitre { font-size: 12px; }
.tiroir-op-montant { font-size: 22px; font-weight: 500; }
.tiroir-op-verification { position: relative; flex-shrink: 0; }
.tiroir-op-a-verifier {
    margin: -12px 20px 0; padding: 8px 12px; font-size: 13px; border-radius: 10px;
    background: var(--bs-body-bg); border: var(--bs-border-width) solid var(--bs-border-color-translucent);
    color: var(--bs-secondary-color); display: flex; align-items: center; gap: 8px;
}
.tiroir-op-verifiee { margin: 8px 20px 0; font-size: 13px; }
.tiroir-op-corps { padding: 8px 20px 14px; }
.tiroir-op-panneau-organisme { padding: 16px 20px 0; }
.tiroir-op-ligne { gap: 12px; padding: 16px 0; font-size: 14px; }
.tiroir-op-ligne + .tiroir-op-ligne, .tiroir-op-corps > * + .tiroir-op-ligne { border-top: var(--bs-border-width) solid var(--bs-border-color-translucent); }
.tiroir-op-icone { width: 32px; height: 32px; border-radius: 10px; font-size: 17px; }
.tiroir-op-libelle { font-size: 12px; color: var(--bs-tertiary-color); margin-bottom: 4px; line-height: 1.35; }
.tiroir-op-pied { padding: 12px 20px; border-top: var(--bs-border-width) solid var(--bs-border-color-translucent); }
.tiroir-op-valider { border-radius: 999px; padding-left: 16px; padding-right: 16px; }
/* Au-delà de la maquette (retour utilisateur) : valeur lisible, note secondaire à 2 px, panneaux au même rythme. */
.tiroir-op-ligne .text-break { line-height: 1.35; }
.tiroir-op-ligne .text-break > .small { margin-top: 2px; line-height: 1.35; }

/* Zone de dépôt OFX : encadré pointillé cliquable, l'input masqué reste focusable au clavier. */
.zone-depot { border: 2px dashed var(--bs-border-color); border-radius: var(--bs-border-radius-lg); color: var(--bs-secondary-color); cursor: pointer; transition: background-color .15s, border-color .15s; }
.zone-depot:hover, .zone-depot-active { border-color: var(--bs-primary); color: var(--bs-primary); background-color: var(--bs-primary-bg-subtle); }
.zone-depot:focus-within { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.zone-depot-chargement { display: none; }
.htmx-request .zone-depot { cursor: progress; }
.htmx-request .zone-depot-attente { display: none; }
.htmx-request .zone-depot-chargement { display: inline; }