/*
 * Habillage propre a UKPGM, charge apres le theme.
 *
 * Trois regles seulement, mais appliquees partout : des en-tetes de tableau lisibles,
 * des cellules alignees, et des boutons d'action de meme taille au meme endroit.
 */

/* --- Tableaux ----------------------------------------------------------------- */

.table > thead tr > th {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78rem;
    font-weight: 700;
    color: var(--bs-gray-600);
    white-space: nowrap;
}

.table > tbody > tr > td,
.table > thead > tr > th {
    vertical-align: middle;
}

/* Les actions se lisent en fin de ligne, sans jamais passer a la ligne. */
.table td:last-child .btn,
.table td.text-end .btn {
    white-space: nowrap;
}

.table td:last-child .btn + .btn {
    margin-left: .35rem;
}

/* --- Cartes ------------------------------------------------------------------- */

.card > .card-header {
    align-items: center;
    gap: .75rem;
}

.card > .card-header .card-title {
    margin: 0;
}

.card > .card-header .card-toolbar {
    flex-wrap: wrap;
}

/* --- Boutons ------------------------------------------------------------------ */

.btn.btn-sm {
    padding: .45rem .85rem;
}

.card-toolbar .btn + .btn {
    margin-left: .25rem;
}

/* --- Barres de filtres -------------------------------------------------------- */

/*
 * Les filtres se lisent sur une ligne. Sans cela, select2 s'etire a 100 % de la
 * largeur et chaque filtre partait a la ligne, empile les uns sous les autres.
 */
.barre-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    width: 100%;
}

.barre-filtres > * {
    flex: 0 0 auto;
}

.barre-filtres .select2-container {
    width: auto !important;
    min-width: 11rem;
}

.barre-filtres .select2-container .select2-selection {
    min-height: calc(1.5em + 1rem + 2px);
}

.barre-filtres .form-control,
.barre-filtres .form-select {
    width: auto;
    min-width: 9rem;
}

.barre-filtres .separateur {
    flex: 1 1 auto;
}

/* --- Etats vides -------------------------------------------------------------- */

.card-body > .text-muted:only-child {
    padding: 1rem 0;
}

/* --- Message d'accueil -------------------------------------------------------- */
/* Il etait ecrit en dur et sans style : il se regle, et il se voit. */

.accueil {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}

.accueil .accueil-titre {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.accueil .accueil-soustitre {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--bs-gray-600);
    margin-top: 0.15rem;
}

/* Degrade : le titre prend la couleur du dégradé lui-meme. */
.accueil-degrade .accueil-titre {
    background: linear-gradient(95deg, #1e2a46 0%, #7239ea 45%, #f1416c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #7239ea;
}

.accueil-sobre .accueil-titre {
    color: var(--bs-gray-800);
}

/* Festif : le degrade defile lentement, sans jamais distraire. */
.accueil-festif .accueil-titre {
    background: linear-gradient(95deg, #f1416c, #ffc700, #50cd89, #7239ea, #f1416c);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f1416c;
    animation: accueil-festif 9s linear infinite;
}

@keyframes accueil-festif {
    to { background-position: 300% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .accueil-festif .accueil-titre { animation: none; }
}

/* --- Annonces defilantes ------------------------------------------------------ */
/* Une bande qui traverse l'ecran : on la lit sans avoir a la chercher. */

.bande-annonces {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.9rem;
    overflow: hidden;
    border-radius: 0.475rem;
    margin: 0.75rem 0.75rem 0;

    /* Elle reste sous les yeux quand on descend dans la page : une annonce qu'il faut
       remonter chercher n'est pas une annonce. Elle se cale juste sous l'entete, dont
       Metronic publie la hauteur. */
    position: sticky;
    top: calc(var(--bs-app-header-height, 0px) + 0.5rem);
    z-index: 98;

    /* Posee par-dessus le contenu qui defile, elle doit rester opaque. */
    backdrop-filter: blur(6px);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

/* Dans l'entete : l'entete est deja fixe, donc plus rien a coller. La bande s'y
   fait discrete - moins haute, sans ombre - et surtout elle ne pousse rien : elle
   prend la place disponible au milieu, et s'y tient. */
/* Toute la chaine doit accepter de retrecir, sinon le texte a defiler impose sa
   largeur et pousse le bloc de l'annee hors de l'ecran : un element flex refuse de
   passer sous sa largeur de contenu tant qu'on ne lui a pas dit `min-width: 0`. */
/* La barre de navigation elle-meme refuse de retrecir sous la largeur de son contenu :
   sans ce `min-width: 0`, c'est elle qui deborde et pousse le bloc de l'annee hors de
   l'ecran, quoi qu'on fasse aux elements en dessous. */
#kt_app_header_navbar {
    min-width: 0;
}

.emplacement-annonces {
    min-width: 0;
    overflow: hidden;
    /* La place laissee par le bouton « Retour » revient a la bande. */
    margin-right: 1rem;
}

.bande-annonces.dans-entete {
    position: static;
    margin: 0;
    padding: 0.45rem 1rem;
    box-shadow: none;
    backdrop-filter: none;
    /* Elle prend toute la place libre et ne cede que devant le bloc de l'annee :
       une annonce trop etroite defile trop vite pour se lire. */
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    font-size: 0.95rem;
}

.bande-annonces.dans-entete .piste {
    min-width: 0;
}

.bande-annonces.dans-entete .etiquette {
    font-size: 0.72rem;
}

/* Le texte n'attend plus d'avoir traverse toute la bande pour apparaitre : il entre
   a mi-largeur, ce qui raccourcit d'autant le temps mort avant la premiere lecture. */
.bande-annonces.dans-entete .defile {
    padding-left: 55%;
}

/* L'entete est etroit : au-dessous du grand ecran, l'etiquette cede la place au texte. */
@media (max-width: 991.98px) {
    .bande-annonces.dans-entete { display: none; }
}

.bande-annonces .etiquette {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bande-annonces .piste {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
}

.bande-annonces .defile {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: annonce-defile var(--duree, 28s) linear infinite;
}

.bande-annonces:hover .defile {
    animation-play-state: paused;
}

.bande-annonces .defile .item + .item::before {
    content: "•";
    margin: 0 1.75rem;
    opacity: 0.55;
}

@keyframes annonce-defile {
    to { transform: translateX(-100%); }
}

/* Mouvement reduit, ou une seule annonce courte : on ne fait plus defiler. */
@media (prefers-reduced-motion: reduce) {
    .bande-annonces .defile {
        animation: none;
        padding-left: 0;
        white-space: normal;
    }
}

/* --- Tailles uniformes -------------------------------------------------------- */
/* Chaque ecran avait grandi de son cote : titres de cartes en h2, h3 ou span, badges
   d'etat en fs-4 ici et sans taille ailleurs, tableaux en fs-6 ou fs-7. On fixe une
   echelle unique, de sorte qu'un onglet ressemble au suivant. */

/* Le titre d'une carte, quelle que soit la balise employee. */
.card-header .card-title,
.card-header .card-title h1,
.card-header .card-title h2,
.card-header .card-title h3,
.card-header .card-title h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bs-gray-800);
    margin-bottom: 0;
}

/* Les en-tetes de tableau sont deja normalises plus haut (« Tableaux ») : on ne
   repete pas la regle, on s'appuie dessus. */

/* Un badge d'etat se lit a la meme taille sur tous les ecrans. */
.table .badge,
.card-body > .badge {
    font-size: 0.8rem;
    font-weight: 600;
}

/* Les titres de section dans un corps de carte. */
.card-body > h3,
.card-body > h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bs-gray-800);
}

/* Les icones d'action dans les tableaux : une seule taille. */
.table td .btn-icon i,
.table td .btn-sm i {
    font-size: 1.1rem;
}

/* ---------------------------------------------------------------------------
   La visite guidee : le tour du proprietaire impose au chef a la connexion.
   Le voile couvre la page, la decoupe eclaire l'element dont on parle, et la
   bulle porte les mots. Rien de tout cela n'existe quand la visite est finie.
   --------------------------------------------------------------------------- */
.visite-voile {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 10800;
}

/* L'element designe reste lisible : on l'entoure d'un halo plutot que de le
   decouper reellement, ce qui marche quel que soit son fond.
   Repere ecran (fixed) comme la bulle : melanger les deux reperes faisait sortir
   la bulle de l'ecran des que l'element etait haut. */
.visite-decoupe {
    position: fixed;
    z-index: 10810;
    border-radius: .65rem;
    border: 2px solid var(--bs-primary);
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55);
    pointer-events: none;
    transition: top .25s, left .25s, width .25s, height .25s;
}

.visite-bulle {
    position: fixed;
    z-index: 10820;
    width: min(420px, calc(100vw - 32px));
    background: var(--bs-body-bg, #fff);
    border-radius: .75rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .2);
    padding: 1.25rem 1.5rem;
}

.visite-compteur {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-primary);
    margin-bottom: .35rem;
}

.visite-titre {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bs-gray-900);
    margin-bottom: .4rem;
}

.visite-texte {
    font-size: .9rem;
    line-height: 1.55;
    color: var(--bs-gray-700);
}

.visite-barre {
    height: 4px;
    border-radius: 2px;
    background: var(--bs-gray-200);
    overflow: hidden;
    margin: 1rem 0 .85rem;
}

.visite-barre > span {
    display: block;
    height: 100%;
    background: var(--bs-primary);
    transition: width .25s;
}

.visite-pied {
    display: flex;
    justify-content: flex-end;
}