/* Charte Bunqr appliquée au thème Material.
   Les valeurs sont reprises telles quelles de Bunqr.Web/wwwroot/design-system/bunqr-variables.css :
   toute évolution de la charte de l'application doit être répercutée ici. */

:root {
    --bunqr-petrol: #206C69;
    --bunqr-petrol-hover: #1A5956;
    --bunqr-petrol-ink: #16504E;
    --bunqr-petrol-soft: #E6F1F0;
    --bunqr-petrol-border: #C3DCDA;
    --bunqr-petrol-on-dark: #4FAFA1;
    --bunqr-warning: #D19B50;
    --bunqr-vert: #D6DEDD;
    --bunqr-bleu-brume: #A7C4CF;
    --bunqr-danger: #b02a37;
    --bunqr-blanc: #FFFFFF;
    --bunqr-fond: #F6F8F8;
    --bunqr-noir: #171717;
    --bunqr-border-radius: 8px;
}

/* Palette du thème (mode clair). Charte pétrole (#2854) : en-tête blanc qui porte le logo tel
   quel, pétrole pour les liens et les accents. Le texte reste sur le noir Bunqr. */
[data-md-color-scheme="default"] {
    --md-primary-fg-color: var(--bunqr-blanc);
    --md-primary-fg-color--light: var(--bunqr-blanc);
    --md-primary-fg-color--dark: var(--bunqr-petrol-soft);
    --md-primary-bg-color: var(--bunqr-noir);
    --md-primary-bg-color--light: rgba(23, 23, 23, 0.7);
    --md-accent-fg-color: var(--bunqr-petrol-hover);
    --md-default-bg-color: var(--bunqr-fond);
    --md-default-fg-color: var(--bunqr-noir);
    --md-typeset-a-color: var(--bunqr-petrol);
    --md-footer-bg-color: var(--bunqr-noir);
}

/* En-tête blanc : un filet le sépare du contenu, faute de contraste de couleur. */
[data-md-color-scheme="default"] .md-header {
    border-bottom: 1px solid var(--bunqr-petrol-border);
}

/* Mode sombre : en-tête sombre, logo au mot « bunqr » blanc, accent pétrole éclairci
   (#4FAFA1, la teinte claire du dégradé du logo). */
[data-md-color-scheme="slate"] {
    --md-primary-fg-color: #1f2424;
    --md-accent-fg-color: var(--bunqr-petrol-on-dark);
    --md-typeset-a-color: var(--bunqr-petrol-on-dark);
}

[data-md-color-scheme="slate"] .md-header__button.md-logo img,
[data-md-color-scheme="slate"] .md-nav__title .md-nav__button.md-logo img {
    content: url("../assets/brand/bunqr-logo-dark.svg");
}

body,
.md-typeset {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Logo de l'en-tête : le fichier fourni est un lockup horizontal (1045 × 365), on borne la hauteur
   pour qu'il ne pousse pas la barre de navigation. */
.md-header__button.md-logo img,
.md-nav__title .md-nav__button.md-logo img {
    height: 1.6rem;
    width: auto;
}

/* Encadrés : arrondi et accents de la charte plutôt que ceux de Material. */
.md-typeset .admonition,
.md-typeset details {
    border-radius: var(--bunqr-border-radius);
    border-left-width: 4px;
}

.md-typeset .admonition.info,
.md-typeset .admonition.note {
    border-color: var(--bunqr-bleu-brume);
}

.md-typeset .admonition.tip {
    border-color: var(--bunqr-vert);
}

.md-typeset .admonition.warning {
    border-color: var(--bunqr-warning);
}

.md-typeset .admonition.danger {
    border-color: var(--bunqr-danger);
}

/* Tableaux : en-tête pétrole clair, plus proche du rendu de l'application. */
.md-typeset table:not([class]) th {
    background-color: var(--bunqr-petrol-soft);
    color: var(--bunqr-noir);
}

/* Captures d'écran : cadre léger pour les détacher du fond, souvent clair lui aussi. */
.md-typeset img[src*="/assets/"] {
    border: 1px solid rgba(23, 23, 23, 0.12);
    border-radius: var(--bunqr-border-radius);
}

/* Cartes de la page d'accueil. */
.md-typeset .grid.cards > ul > li {
    border-radius: var(--bunqr-border-radius);
    border-color: rgba(23, 23, 23, 0.12);
}

.md-typeset .grid.cards > ul > li:hover {
    border-color: var(--bunqr-petrol);
    box-shadow: 0 4px 6px rgba(23, 23, 23, 0.1);
}

/* Captures cliquables : agrandissement plein écran (voir javascripts/lightbox.js). */
.md-typeset img[src*="/assets/"] {
    cursor: zoom-in;
}

.bunqr-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    background: rgba(23, 23, 23, 0.88);
    cursor: zoom-out;
    animation: bunqr-lightbox-in 0.12s ease-out;
}

.bunqr-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border: 0;
    border-radius: var(--bunqr-border-radius);
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5);
}

@keyframes bunqr-lightbox-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}