/* Brescart — base.css
 * Premium fintech — ink/copper/cream palette, Plus Jakarta Sans italic + Inter + JetBrains Mono.
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* Ink — fond principal profond baclažan-uhol */
    --c-ink:       #1A1520;
    --c-ink-elev:  #231D2A;
    --c-ink-deep:  #110D16;
    --c-ink-line:  #2E2636;
    --c-ink-ghost: rgba(255, 255, 255, 0.04);

    /* Neutres chauds — cartes, texte inversé */
    --c-cream:   #F5EFE3;
    --c-bone:    #E8DFD0;
    --c-pearl:   #E4DFE8;
    --c-mist:    #9A91A8;
    --c-mist-2:  #6D6478;

    /* Cuivre — accent primaire oxydé */
    --c-copper:      #C96F4A;
    --c-copper-deep: #8F4D33;
    --c-copper-soft: #E89878;
    --c-copper-wash: rgba(201, 111, 74, 0.14);

    /* Sauge — valeurs positives (TRJ proche du plafond) */
    --c-sage:      #7BAA8B;
    --c-sage-deep: #4F7B61;
    --c-sage-wash: rgba(123, 170, 139, 0.14);

    /* Or — montant bonus, highlights */
    --c-gold:      #D4A94C;
    --c-gold-wash: rgba(212, 169, 76, 0.16);

    /* Prune — accent secondaire occasionnel */
    --c-plum:      #7A4A6F;

    /* Alarm — dépassement plafond, erreur */
    --c-danger:    #D2545C;
    --c-danger-wash: rgba(210, 84, 92, 0.14);

    /* Legacy aliases — conservés pour ne pas casser la PHP existante */
    --c-parchemin:     var(--c-ink);
    --c-parchemin-alt: var(--c-ink-elev);
    --c-paper:         var(--c-cream);
    --c-ardoise:       var(--c-pearl);
    --c-ardoise-muted: var(--c-mist);
    --c-argile:        var(--c-ink-line);
    --c-bordeaux:      var(--c-copper);
    --c-bordeaux-deep: var(--c-copper-deep);
    --c-bordeaux-wash: var(--c-copper-wash);
    --c-bleu:          var(--c-sage);
    --c-bleu-deep:     var(--c-sage-deep);
    --c-bleu-wash:     var(--c-sage-wash);
    --c-safran:        var(--c-gold);
    --c-safran-wash:   var(--c-gold-wash);
    --c-sepia:         var(--c-copper-soft);
    --c-ardoise-bg:       var(--c-cream);
    --c-ardoise-bg-text:  var(--c-ink);
    --c-ardoise-bg-muted: var(--c-mist-2);
    --c-ardoise-line:     var(--c-bone);
    --c-line:         var(--c-ink-line);
    --c-line-ardoise: var(--c-bone);
    --c-error:   var(--c-danger);
    --c-success: var(--c-sage);

    /* Fontes */
    --f-display: 'Plus Jakarta Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --f-body:    'Inter', -apple-system, ui-sans-serif, system-ui, sans-serif;
    --f-mono:    'JetBrains Mono', 'SF Mono', Menlo, ui-monospace, monospace;

    --f-display-hero: clamp(3rem, 6.5vw, 5.25rem);
    --f-display-xl:   clamp(2.25rem, 4.5vw, 3.5rem);
    --f-display-l:    clamp(1.75rem, 3vw, 2.375rem);
    --f-display-m:    1.5rem;

    --f-body-l:       1.1875rem;
    --f-body:         1rem;
    --f-body-s:       0.9375rem;
    --f-caption:      0.8125rem;
    --f-label:        0.75rem;
    --f-mono:         0.875rem;

    /* Rayons — principiellement différents de l'ancienne échelle 0/3/8/14 */
    --r-none: 0;
    --r-sm:   6px;
    --r-md:   12px;
    --r-lg:   20px;
    --r-xl:   28px;

    /* Espacement — plus généreux, feel fintech */
    --space-section:   120px;
    --space-section-m: 80px;
    --space-block:     56px;
    --space-item:      32px;
    --container:       1200px;
    --prose:           680px;
    --gutter:          32px;
    --gutter-m:        20px;

    /* Ombres — couches douces avec halo cuivre subtil */
    --shadow-card:
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(201, 111, 74, 0.04);
    --shadow-card-hover:
        0 2px 4px rgba(0, 0, 0, 0.25),
        0 20px 56px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(201, 111, 74, 0.18);
    --shadow-card-light:
        0 1px 2px rgba(26, 21, 32, 0.08),
        0 8px 24px rgba(26, 21, 32, 0.08),
        0 0 0 1px rgba(232, 223, 208, 0.8);
    --shadow-card-light-hover:
        0 2px 4px rgba(26, 21, 32, 0.1),
        0 20px 56px rgba(26, 21, 32, 0.14),
        0 0 0 1px rgba(201, 111, 74, 0.25);
    --shadow-focus:
        0 0 0 3px rgba(201, 111, 74, 0.35);

    /* Easing & durations */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast: 140ms;
    --dur:      220ms;
    --dur-slow: 420ms;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    color-scheme: dark;
}
body {
    margin: 0;
    font-family: var(--f-body);
    font-size: var(--f-body);
    font-weight: 400;
    line-height: 1.55;
    color: var(--c-pearl);
    background: var(--c-ink);
    background-image:
        radial-gradient(ellipse 80% 40% at 50% -20%, rgba(201, 111, 74, 0.10), transparent 60%),
        radial-gradient(ellipse 60% 30% at 100% 100%, rgba(122, 74, 111, 0.08), transparent 60%);
    background-attachment: fixed;
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--f-display);
    font-weight: 600;
    font-style: italic;
    line-height: 1.05;
    margin: 0 0 0.6em;
    color: var(--c-cream);
    letter-spacing: -0.02em;
}

h1 { font-size: var(--f-display-xl); letter-spacing: -0.032em; }
h2 { font-size: var(--f-display-l);  letter-spacing: -0.024em; }
h3 {
    font-size: var(--f-display-m);
    letter-spacing: -0.018em;
    font-style: normal;
    font-weight: 700;
    font-family: var(--f-body);
}

p { margin: 0 0 1em; color: var(--c-pearl); }

a {
    color: var(--c-copper-soft);
    text-decoration: none;
    border-bottom: 1px solid rgba(232, 152, 120, 0.3);
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
a:hover {
    color: var(--c-copper);
    border-bottom-color: var(--c-copper);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 0;
    box-shadow: var(--shadow-focus);
    border-radius: var(--r-sm);
}

ul, ol { padding-left: 1.25em; margin: 0 0 1em; }
li + li { margin-top: 0.4em; }

hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-ink-line) 20%, var(--c-ink-line) 80%, transparent);
    margin: 2em 0;
}

strong { font-weight: 600; color: var(--c-cream); }
em { font-style: italic; }

code, kbd {
    font-family: var(--f-mono);
    font-size: 0.9em;
    background: var(--c-ink-elev);
    padding: 2px 7px;
    border-radius: var(--r-sm);
    color: var(--c-copper-soft);
    border: 1px solid var(--c-ink-line);
}

::selection {
    background: var(--c-copper);
    color: var(--c-cream);
}

button { font-family: inherit; }

/* min-width sur enfants flex/grid pour éviter l'overflow */
.br-container > *,
.br-grid > *,
.br-flex > * { min-width: 0; }

.br-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}