/* ============================================================
   Alif — Public site design system (Blazor)
   Modern, professional, light theme. Inter variable font.
   Brand: blue #2372d8 · growth green · magenta highlight.
   ============================================================ */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/InterVariable.woff2") format("woff2");
}

/* ---------- Design tokens ---------- */
:root {
    /* Brand */
    --brand: #1b6be0;
    --brand-strong: #0e3e8f;
    --brand-active: #0b2f6b;
    --brand-soft: #eaf1fc;
    --brand-tint: #f2f6fd;

    /* Accent (primary CTA — orange) */
    --accent: #fc6a05;
    --accent-soft: #ffe8d6;
    --accent-strong: #e35f04;
    --yellow: #ffc400;
    --grad: linear-gradient(90deg,#ef2b24,#fc6a05,#ffc400,#3fae6a,#1b6be0);

    /* Growth / success (crowdfunding accent) */
    --green: #3fae6a;
    --green-soft: #e8f6ef;

    /* Highlight */
    --magenta: #b51e66;
    --magenta-soft: #fbeaf2;

    /* Neutrals */
    --bg: #fafbfe;
    --bg-alt: #f6f8fb;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border: #e6ebf1;
    --border-strong: #d6deea;

    /* Text */
    --text: #16233f;
    --text-soft: #51617d;
    --text-muted: #6b7889;
    --text-faint: #97a2b2;
    --on-brand: #ffffff;

    /* State */
    --danger: #ef2b24;
    --danger-soft: #fbeceb;
    --warning: #b7791f;
    --warning-soft: #fdf4e3;

    /* Radii */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 26px;
    --r-pill: 999px;

    /* Shadows */
    --sh-xs: 0 1px 2px rgba(16, 33, 60, .06);
    --sh-sm: 0 2px 8px rgba(16, 33, 60, .07);
    --sh-md: 0 8px 24px rgba(16, 33, 60, .09);
    --sh-lg: 0 18px 50px rgba(16, 33, 60, .13);
    --sh-brand: 0 10px 26px rgba(27, 107, 224, .30);

    /* Layout */
    --container: 1200px;
    --header-h: 74px;

    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Sora", var(--font-sans);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

h1, h2, h3, h4, h5 {
    margin: 0 0 .5em;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--text);
    font-weight: 750;
}

h1, h2, h3, .hero-title, .section-title {
    font-family: var(--font-display);
}

h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1rem; color: var(--text-soft); }

a { color: var(--brand); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--brand-active); }

img { max-width: 100%; display: block; }

/* ---------- Layout helpers ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-alt { background: var(--bg-alt); }

.section-head { max-width: 680px; margin: 0 auto 3rem; text-align: center; }
.section-head.left { margin-inline: 0; text-align: start; }
.section-head p { font-size: 1.08rem; color: var(--text-muted); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    padding: .38rem .8rem;
    border-radius: var(--r-pill);
    margin-bottom: 1.1rem;
}

.lead { font-size: 1.2rem; color: var(--text-soft); line-height: 1.65; }

/* Inline icon sizing for MarkupString-injected SVGs (not scope-rewritten,
   so these must live in global CSS). */
.eyebrow svg { width: 15px; height: 15px; }
.badge svg { width: 13px; height: 13px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 650;
    line-height: 1;
    padding: .82rem 1.5rem;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
    white-space: nowrap;
    text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }

.btn-primary {
    background: var(--accent);
    color: var(--on-brand);
    box-shadow: var(--sh-brand);
}
.btn-primary:hover { color: #fff; background: var(--accent-strong); box-shadow: 0 14px 32px rgba(35, 114, 216, .38); transform: translateY(-1px); }

.btn-ghost {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
    box-shadow: var(--sh-xs);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }

.btn-light { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.35); }
.btn-light:hover { background: rgba(255,255,255,.26); color: #fff; }

.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { color: #fff; background: #178153; }

.btn-lg { padding: 1rem 1.85rem; font-size: 1.02rem; }
.btn-sm { padding: .55rem 1.05rem; font-size: .85rem; }
.btn-block { width: 100%; }

/* ---------- Cards ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--border-strong); }
.card-body { padding: 1.5rem; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Feature icon tiles ---------- */
.feature-icon {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    color: var(--brand);
    margin-bottom: 1.1rem;
}
.feature-icon svg { width: 26px; height: 26px; }
.feature-icon.green { background: var(--green-soft); color: var(--green); }
.feature-icon.magenta { background: var(--magenta-soft); color: var(--magenta); }

/* ---------- Badges ---------- */
.badge {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .74rem; font-weight: 650; letter-spacing: .02em;
    padding: .3rem .7rem; border-radius: var(--r-pill);
    background: var(--surface-2); color: var(--text-soft);
    border: 1px solid var(--border);
}
.badge-green { background: var(--green-soft); color: var(--green); border-color: transparent; }
.badge-brand { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.badge-magenta { background: var(--magenta-soft); color: var(--magenta); border-color: transparent; }

/* ---------- Progress bar (project funding) ---------- */
.progress { height: 8px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #37c383); }

/* ---------- Alerts ---------- */
.alert {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .85rem 1.05rem; border-radius: var(--r-md);
    font-size: .9rem; border: 1px solid transparent;
}
.alert svg { flex: 0 0 18px; margin-top: 1px; }
.alert-danger { background: var(--danger-soft); color: var(--danger); border-color: #f2cecb; }
.alert-info { background: var(--brand-soft); color: var(--brand-strong); }

/* ============================================================
   Auth (login / register / forgot) — split-screen
   ============================================================ */
.auth { display: flex; min-height: 100vh; background: var(--bg); }

.auth-brand {
    flex: 0 0 46%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 3rem;
    color: #fff;
    background: linear-gradient(150deg, var(--brand-active) 0%, var(--brand) 52%, #3a6fd8 100%);
}
.auth-blob { position: absolute; border-radius: 50%; filter: blur(10px); opacity: .5; pointer-events: none; }
.auth-blob-1 { width: 340px; height: 340px; top: -110px; right: -80px; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%); }
.auth-blob-2 { width: 300px; height: 300px; bottom: -100px; left: -70px; background: radial-gradient(circle, rgba(90,162,245,.5), transparent 70%); }
.auth-grid-overlay {
    position: absolute; inset: 0; opacity: .5;
    background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
            mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
}
.auth-brand-top, .auth-brand-content, .auth-brand-foot { position: relative; z-index: 1; }
.auth-brand-top { display: flex; align-items: center; gap: .65rem; }
.auth-logo-mark {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(255,255,255,.18); font-weight: 800; font-size: 1.3rem; color: #fff;
    border: 1px solid rgba(255,255,255,.25);
}
.auth-logo-text { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }

/* Le logo de la page de connexion. Même hauteur que dans la barre supérieure (.brand-logo),
   pour que le visiteur retrouve exactement la marque qu'il vient de quitter. */
.auth-logo-img { height: 40px; width: auto; display: block; }
.auth-headline { color: #fff; font-size: clamp(1.9rem, 3vw, 2.5rem); margin-bottom: 1rem; }
.auth-tag { color: rgba(255,255,255,.85); font-size: 1.05rem; line-height: 1.65; max-width: 420px; }
.auth-points { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .85rem; }
.auth-points li { display: flex; align-items: center; gap: .7rem; color: rgba(255,255,255,.94); font-weight: 500; }
.auth-check { flex: 0 0 22px; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: rgba(255,255,255,.16); }
.auth-brand-foot { font-size: .82rem; color: rgba(255,255,255,.7); }

.auth-form-wrap { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.auth-card { width: 100%; max-width: 420px; }
.auth-mobile-logo { display: none; align-items: center; gap: .55rem; margin-bottom: 1.5rem; }
.auth-mobile-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; }
.auth-mobile-name b { color: var(--brand); font-weight: 800; }

.auth-title { font-size: 1.75rem; margin-bottom: .3rem; }
.auth-subtitle { color: var(--text-muted); margin-bottom: 1.75rem; }

.auth-card.wide { max-width: 560px; }
.auth-form { display: grid; gap: 1.1rem; }
.auth-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.auth-grid-dialer { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; }
.auth-select {
    width: 100%; height: 48px; padding: 0 1rem;
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    font-family: inherit; font-size: .95rem; color: var(--text); background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.auth-terms { display: flex; align-items: flex-start; gap: .55rem; font-size: .88rem; color: var(--text-soft); }
.auth-terms input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brand); flex: 0 0 auto; }
.auth-success { text-align: center; padding: 1rem 0; }
.auth-success-ico {
    width: 64px; height: 64px; margin: 0 auto 1.25rem; border-radius: 50%;
    display: grid; place-items: center; background: var(--green-soft); color: var(--green);
}
.auth-success-ico svg { width: 32px; height: 32px; }
@media (max-width: 520px) { .auth-grid2 { grid-template-columns: 1fr; } }
.auth-field { display: grid; gap: .4rem; }
.auth-field > label { font-size: .85rem; font-weight: 600; color: var(--text-soft); }
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input-ico { position: absolute; left: 13px; color: var(--text-faint); pointer-events: none; }
[dir="rtl"] .auth-input-ico { left: auto; right: 13px; }
.auth-input .form-control {
    width: 100%; height: 48px; padding: 0 1rem 0 40px;
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    font-family: inherit; font-size: .95rem; color: var(--text); background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
[dir="rtl"] .auth-input .form-control { padding: 0 40px 0 1rem; }
.auth-input .form-control:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.auth-input .form-control::placeholder { color: var(--text-faint); }

.auth-row { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; }
.auth-remember { display: inline-flex; align-items: center; gap: .45rem; color: var(--text-soft); cursor: pointer; }
.auth-remember input { width: 16px; height: 16px; accent-color: var(--brand); }

.auth-submit {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; height: 50px; margin-top: .3rem;
    border: 0; border-radius: var(--r-md); cursor: pointer;
    font-family: inherit; font-size: 1rem; font-weight: 650; color: #fff;
    background: linear-gradient(135deg, #2f7fe6 0%, var(--brand) 55%, var(--brand-strong) 100%);
    box-shadow: var(--sh-brand); transition: transform .12s ease, box-shadow .18s ease;
}
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(35,114,216,.4); }
.auth-submit svg { width: 18px; height: 18px; }

.auth-alt { margin-top: 1.5rem; text-align: center; font-size: .9rem; color: var(--text-muted); }
.auth-alt a { font-weight: 600; }

.auth-sep { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; color: var(--text-faint); font-size: .8rem; }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.auth-social { display: grid; gap: .65rem; }
.auth-social-btn {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    height: 46px; border: 1px solid var(--border-strong); border-radius: var(--r-md);
    background: var(--surface); color: var(--text); font-weight: 550; font-size: .92rem; cursor: pointer;
    text-decoration: none; transition: background-color .13s ease, border-color .13s ease;
}
.auth-social-btn:hover { background: var(--surface-2); border-color: var(--brand); color: var(--text); }
.auth-social-btn svg { width: 19px; height: 19px; }

.auth-foot { margin-top: 1.75rem; display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .8rem; color: var(--text-faint); }
.auth-alert { margin-bottom: .25rem; }
.auth-back { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 2; font-size: .85rem; color: rgba(255,255,255,.85); display: inline-flex; align-items: center; gap: .35rem; }
.auth-back:hover { color: #fff; }

.field-validation-error, .validation-message { color: var(--danger); font-size: .8rem; }

@media (max-width: 860px) {
    .auth-brand { display: none; }
    .auth-mobile-logo { display: flex; }
    .auth-back { color: var(--text-muted); }
    .auth-back:hover { color: var(--brand); }
}

/* ---------- 404 ---------- */
.notfound { min-height: 62vh; display: grid; place-items: center; padding: 4rem 1.5rem; }
.notfound-inner { text-align: center; max-width: 460px; }
/* Le grand glyphe des pages « 404 », « Oups » et « paiement non abouti ».
   PAS DE DÉGRADÉ : il portait un linear-gradient bleu → magenta rogné sur le texte,
   qui se lisait comme un violet absent de la charte — laquelle est bleue et orange.
   Un aplat de la couleur d'identité suffit, et reste lisible partout.
   La nuance profonde plutôt que le bleu vif : à 7rem, le vif est criard. */
.notfound-code {
    font-size: clamp(4rem, 12vw, 7rem); font-weight: 800; letter-spacing: -0.04em;
    color: var(--brand-strong);
}

/* ---------- Page hero (content pages) ---------- */
.page-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--brand-active) 0%, var(--brand) 60%, #3a6fd8 100%);
    color: #fff;
    padding: clamp(2.75rem, 6vw, 4.5rem) 0;
}
.page-hero::after {
    content: ""; position: absolute; top: -50%; right: -8%;
    width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.12), transparent 65%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .eyebrow { background: rgba(255,255,255,.16); color: #fff; }
.page-hero h1 { color: #fff; margin-bottom: .5rem; }
.page-hero p { color: rgba(255,255,255,.88); font-size: 1.1rem; max-width: 640px; margin: 0; }
.breadcrumb { display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: rgba(255,255,255,.75); margin-bottom: 1rem; }
.breadcrumb a { color: rgba(255,255,255,.9); }
.breadcrumb span { opacity: .6; }

/* ---------- Prose (rich-text content) ---------- */
.prose { color: var(--text-soft); line-height: 1.75; font-size: 1.02rem; }
.prose h2, .prose h3, .prose h4 { color: var(--text); margin: 1.8rem 0 .8rem; }
.prose p { margin: 0 0 1.1rem; }
.prose ul, .prose ol { margin: 0 0 1.1rem; padding-inline-start: 1.4rem; }
.prose li { margin-bottom: .4rem; }
.prose a { color: var(--brand); text-decoration: underline; }
.prose img { border-radius: var(--r-md); margin: 1rem 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.prose td, .prose th { border: 1px solid var(--border); padding: .6rem .8rem; text-align: start; }

/* ---------- Accordion (details/summary, no JS) ---------- */
.accordion { display: grid; gap: .75rem; }
.acc-item {
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); overflow: hidden;
    transition: box-shadow .18s ease, border-color .18s ease;
}
.acc-item[open] { box-shadow: var(--sh-sm); border-color: var(--border-strong); }
.acc-item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.3rem; cursor: pointer; list-style: none;
    font-weight: 600; color: var(--text); font-size: 1rem;
}
.acc-item > summary::-webkit-details-marker { display: none; }
.acc-chevron { flex: 0 0 20px; width: 20px; height: 20px; color: var(--text-muted); transition: transform .2s ease; }
.acc-item[open] .acc-chevron { transform: rotate(180deg); color: var(--brand); }
.acc-body { padding: 0 1.3rem 1.2rem; }

/* ---------- Titres à l'intérieur d'un accordéon ---------- */
/* Le contenu est saisi au back-office : certaines fiches n'emploient que des <p>, une seule
   ouvre sur un <h3>. Ce <h3> héritait de la typographie d'AFFICHAGE de la page — 21,6 px et
   graisse 900 contre 16,32 px ailleurs — et cette fiche-là tranchait avec toutes les autres.
   Constaté sur la version anglaise de « How does equity financing work ».

   La règle est volontairement bornée à .acc-body : sur les pages longues (À propos, Secteurs,
   Politique de confidentialité) un titre de contenu structure vraiment le texte et doit garder
   sa taille. Dans une réponse dépliable de quelques paragraphes, il n'a rien à hiérarchiser —
   le titre de la fiche est déjà dans le <summary>. */
.acc-body h1, .acc-body h2, .acc-body h3,
.acc-body h4, .acc-body h5, .acc-body h6 {
    font-size: inherit;
    font-weight: 700;
    line-height: inherit;
    margin: 1.2em 0 .4em;
    letter-spacing: normal;
}

/* GARDE-FOU : un titre qui CONTIENT tout le contenu de la fiche.
   Une fiche anglaise a l'article entier — paragraphes, listes, tableaux — imbriqué dans son
   <h3> : quelqu'un a collé le texte complet dans un titre depuis l'éditeur. La graisse du titre
   se propageait alors à tout, et la fiche s'affichait intégralement en gras là où les huit
   autres étaient normales. La régler à la source dans la base ne réglerait que ce cas-ci ;
   cette règle vaut pour le prochain collage du même genre. */
.acc-body :is(h1, h2, h3, h4, h5, h6) :is(p, div, ul, ol, li, table, blockquote) {
    font-weight: 400;
}

.acc-body > :first-child { margin-top: 0; }
.acc-body-actions { margin-top: 1.1rem; margin-bottom: 0; }

/* En-tête d'accordéon portant une ICÔNE, un TITRE et (page ESG) un RÉSUMÉ replié.
   Grille et non rangée flex : le résumé doit se poser SOUS le titre pendant que
   l'icône et le chevron restent centrés sur les deux lignes — une rangée flex ne
   sait pas faire ça sans conteneur intermédiaire, et un conteneur <span> ne pourrait
   pas contenir le <h3> (un <summary> n'accepte que du contenu de phrasé, plus des
   titres : le titre doit donc rester un enfant direct pour rester valide ET rester
   un titre pour un lecteur d'écran). Les pistes de grille suivent le sens de
   lecture : l'arabe se place correctement sans règle [dir="rtl"] dédiée.
   Quand il n'y a pas de résumé (page Formations), la seconde rangée est vide et
   s'écrase à zéro — d'où column-gap seul, jamais gap. */
.acc-item > summary.acc-sum {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "ico titre chev" "ico resume chev";
    align-items: center;
    column-gap: .9rem;
}
.acc-sum > .feature-icon { grid-area: ico; margin-bottom: 0; width: 46px; height: 46px; }
.acc-sum > .feature-icon svg { width: 24px; height: 24px; }
.acc-sum > .acc-titre { grid-area: titre; font-size: 1.05rem; margin: 0; }
.acc-sum > .acc-chevron { grid-area: chev; }
.acc-sum > .acc-resume { grid-area: resume; margin-top: .3rem; font-size: .88rem; font-weight: 400; line-height: 1.5; color: var(--text-muted); }

/* ---------- Article cards ---------- */
.article-grid { align-items: stretch; }
.article-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; }
.article-card .card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.article-media { height: 170px; position: relative; }
.article-featured {
    position: absolute; top: .8rem; left: .8rem;
    font-size: .72rem; font-weight: 700; color: #fff;
    background: rgba(0,0,0,.35); padding: .3rem .65rem; border-radius: var(--r-pill);
    backdrop-filter: blur(4px);
}
[dir="rtl"] .article-featured { left: auto; right: .8rem; }
.article-meta { font-size: .82rem; color: var(--text-muted); margin-bottom: .5rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.article-title { font-size: 1.2rem; margin-bottom: .5rem; line-height: 1.3; }
.article-summary { font-size: .92rem; color: var(--text-muted); margin-bottom: 1rem; flex: 1 1 auto; }
.article-more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; font-size: .9rem; color: var(--brand); margin-top: auto; }
.article-more svg { width: 16px; height: 16px; transition: transform .15s ease; }
.article-card:hover .article-more svg { transform: translateX(3px); }

.article-hero-meta { display: flex; gap: .4rem; font-size: .95rem; color: rgba(255,255,255,.82); }
.article-body-wrap { max-width: 760px; }
.article-lead { color: var(--text-soft); font-weight: 500; border-left: 3px solid var(--brand); padding-left: 1.1rem; margin-bottom: 1.75rem; }
[dir="rtl"] .article-lead { border-left: 0; border-right: 3px solid var(--brand); padding-left: 0; padding-right: 1.1rem; }
.article-foot { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }

/* ---------- Learn (formations) ---------- */
.learn-group { margin-bottom: 3rem; }
.learn-group-title { font-size: 1.35rem; margin-bottom: 1.25rem; padding-bottom: .6rem; border-bottom: 2px solid var(--brand-soft); }
.learn-card { display: flex; flex-direction: column; height: 100%; }
.learn-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.learn-card p { font-size: .9rem; color: var(--text-muted); margin-bottom: 1.1rem; flex: 1 1 auto; }

/* ---------- Events ---------- */
.event-card { position: relative; }
.event-date {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 58px; height: 58px; border-radius: var(--r-md); margin-bottom: 1rem;
    background: var(--brand-soft); color: var(--brand); line-height: 1;
}
.event-day { font-size: 1.4rem; font-weight: 800; }
.event-mon { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.event-card h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.event-card p { font-size: .9rem; color: var(--text-muted); margin-bottom: 1.1rem; }

/* ---------- Projects ---------- */
.proj-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.proj-tab {
    padding: .55rem 1.1rem; border-radius: var(--r-pill); font-weight: 600; font-size: .9rem;
    color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--border);
    transition: all .13s ease;
}
.proj-tab:hover { border-color: var(--brand); color: var(--brand); }
.proj-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }

.proj-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; }
.proj-media { height: 160px; position: relative; }
.proj-status { position: absolute; top: .8rem; left: .8rem; font-size: .72rem; font-weight: 700; color: #fff; padding: .3rem .7rem; border-radius: var(--r-pill); backdrop-filter: blur(4px); }
.proj-status.is-online { background: rgba(31,157,99,.92); }
.proj-status.is-closed { background: rgba(80,90,105,.9); }
.proj-status.is-soon { background: rgba(183,121,31,.92); }
.proj-esg { position: absolute; top: .8rem; right: .8rem; font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: #fff; background: rgba(0,0,0,.32); padding: .3rem .55rem; border-radius: var(--r-pill); }
[dir="rtl"] .proj-status { left: auto; right: .8rem; }
[dir="rtl"] .proj-esg { right: auto; left: .8rem; }
.proj-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.proj-cat { font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--brand); margin-bottom: .4rem; }
.proj-name { font-size: 1.18rem; margin-bottom: .5rem; line-height: 1.3; }
.proj-desc { font-size: .9rem; color: var(--text-muted); margin-bottom: 1.1rem; flex: 1 1 auto; }
.proj-fund { margin-top: auto; }
.proj-stats { display: flex; justify-content: space-between; margin-top: .7rem; }
.proj-stats div { display: flex; flex-direction: column; }
.proj-stats b { font-size: .98rem; color: var(--text); }
.proj-stats span { font-size: .74rem; color: var(--text-muted); }

/* Project detail */
.proj-hero-top { display: flex; gap: .5rem; margin-bottom: 1rem; }
.proj-detail-grid { display: grid; grid-template-columns: 1.6fr .9fr; gap: 2.5rem; align-items: start; }
.proj-detail-media { height: 280px; border-radius: var(--r-lg); margin-bottom: 1.75rem; }
.proj-detail-main h2 { margin-bottom: 1rem; }
.esg-block { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.esg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.esg-item { background: var(--green-soft); border-radius: var(--r-md); padding: 1rem; text-align: center; }
.esg-label { display: block; font-size: .8rem; color: var(--text-soft); margin-bottom: .3rem; }
.esg-score { font-size: 1.6rem; font-weight: 800; color: var(--green); }

.proj-detail-aside { position: sticky; top: calc(var(--header-h) + 1.25rem); }
.proj-fund-card .progress { margin-bottom: 1rem; }
.fund-amount { font-size: 1.9rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.fund-sub { color: var(--text-muted); font-size: .9rem; margin-bottom: 1.25rem; }
.fund-rows { display: flex; justify-content: space-between; padding: 1rem 0; margin-bottom: 1rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.fund-rows div { display: flex; flex-direction: column; }
.fund-rows b { font-size: 1.05rem; }
.fund-rows span { font-size: .75rem; color: var(--text-muted); }
.fund-note { padding: .85rem 1rem; background: var(--surface-2); border-radius: var(--r-md); font-size: .88rem; color: var(--text-soft); text-align: center; }
.fund-legal { font-size: .78rem; color: var(--text-faint); margin: 1rem 0 0; }

@media (max-width: 900px) {
    .proj-detail-grid { grid-template-columns: 1fr; }
    .proj-detail-aside { position: static; }
}

/* ---------- Invest flow ---------- */
.invest-notice { text-align: center; padding: 2.5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); }
.invest-notice h3 { margin-bottom: .5rem; }
.invest-notice p { color: var(--text-muted); margin-bottom: 1.25rem; }
.invest-notice .stack-sm { justify-content: center; }

.invest-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: start; }
.invest-h { font-size: 1.15rem; margin-bottom: 1rem; }

.offer-choices { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.offer-choice { display: flex; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid var(--border-strong); border-radius: var(--r-md); cursor: pointer; transition: border-color .13s ease, background-color .13s ease; }
.offer-choice.selected { border-color: var(--brand); background: var(--brand-tint); }
.offer-choice input { width: 18px; height: 18px; accent-color: var(--brand); }
.offer-choice strong { display: block; }
.offer-choice span { font-size: .85rem; color: var(--text-muted); }

.offer-facts { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.offer-facts li { display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.offer-facts li:last-child { border-bottom: 0; }
.offer-facts span { color: var(--text-muted); }
.offer-obj { margin-top: 1.25rem; }
.offer-obj h4 { font-size: .95rem; margin-bottom: .5rem; }
.cp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cp-list li { display: flex; gap: .8rem; padding: .7rem .9rem; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); }
.cp-list li.earned { background: var(--green-soft); border-color: transparent; }
.cp-amount { font-weight: 700; color: var(--brand); flex: 0 0 auto; }
.cp-list li.earned .cp-amount { color: var(--green); }
.cp-ex { color: var(--text-soft); font-size: .9rem; }

.invest-calc { position: sticky; top: calc(var(--header-h) + 1.25rem); }
.calc-label { display: block; font-size: .85rem; font-weight: 600; color: var(--text-soft); margin-bottom: .4rem; }
.calc-input { width: 100%; height: 52px; padding: 0 1rem; font-size: 1.3rem; font-weight: 700; border: 1px solid var(--border-strong); border-radius: var(--r-md); color: var(--text); background: var(--surface); }
.calc-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.calc-rows { margin-top: 1.1rem; }
.calc-rows > div { display: flex; justify-content: space-between; padding: .55rem 0; font-size: .92rem; }
.calc-rows span { color: var(--text-muted); }
.calc-total { border-top: 1px solid var(--border); margin-top: .3rem; padding-top: .8rem !important; font-size: 1.05rem !important; }
.calc-total b { color: var(--brand); }

.invest-recap { max-width: 620px; margin-inline: auto; }
.recap-list { list-style: none; margin: 1rem 0 1.5rem; padding: 0; }
.recap-list li { display: flex; justify-content: space-between; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.recap-list span { color: var(--text-muted); }
.deferred-note { align-items: flex-start; margin-bottom: 1.5rem; }
.deferred-note strong { display: block; margin-bottom: .2rem; }
.deferred-note p { margin: 0; font-size: .9rem; }

@media (max-width: 820px) { .invest-grid { grid-template-columns: 1fr; } .invest-calc { position: static; } }

/* ---------- Donation ---------- */
.don-amounts { display: flex; gap: .6rem; flex-wrap: wrap; }
.don-chip { padding: .7rem 1.3rem; border-radius: var(--r-pill); font-weight: 700; font-size: .95rem; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--border-strong); cursor: pointer; transition: all .13s ease; }
.don-chip:hover { border-color: var(--brand); color: var(--brand); }
.don-chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- Account area ---------- */
.acct-hero { background: linear-gradient(160deg, var(--brand-active), var(--brand) 70%, #3a6fd8); color: #fff; padding: 2.25rem 0; }
.acct-hero-inner { display: flex; align-items: center; justify-content: space-between; }
.acct-id { display: flex; align-items: center; gap: 1.1rem; }
.acct-avatar { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; font-weight: 800; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25); }
.acct-id h1 { color: #fff; font-size: 1.7rem; margin: 0 0 .35rem; }
.acct-kyc { font-size: .78rem; font-weight: 700; padding: .28rem .7rem; border-radius: var(--r-pill); background: rgba(255,255,255,.16); }
.acct-kyc.ok { background: rgba(46,204,113,.28); }
.acct-kyc.pending { background: rgba(243,196,90,.3); }
.acct-kyc.ko { background: rgba(231,76,60,.32); }

.acct-section { padding-top: 2rem; }
.acct-grid { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; align-items: start; }
.acct-nav { display: flex; flex-direction: column; gap: .2rem; position: sticky; top: calc(var(--header-h) + 1rem); }
.acct-nav-link { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border-radius: var(--r-md); color: var(--text-soft); font-weight: 550; font-size: .92rem; transition: background-color .13s ease, color .13s ease; border: 0; background: none; cursor: pointer; width: 100%; text-align: left; font-family: inherit; }
.acct-nav-link svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--text-muted); }
.acct-nav-link:hover { background: var(--surface-2); color: var(--text); }
.acct-nav-link.active { background: var(--brand-tint); color: var(--brand); font-weight: 650; }
.acct-nav-link.active svg { color: var(--brand); }
/* Trait de séparation au-dessus du groupe du bas (« Mon compte » + Déconnexion). */
.acct-nav-sep { border: 0; border-top: 1px solid var(--border-strong); margin: .6rem .15rem; }
.acct-nav-settings { margin-top: 0; }
.acct-logout-form { margin: 0; }
.acct-logout:hover { color: var(--danger); }
.acct-logout:hover svg { color: var(--danger); }

.acct-content { min-width: 0; }
.acct-h { font-size: 1.5rem; margin-bottom: .3rem; }
.acct-sub { color: var(--text-muted); margin-bottom: 1.75rem; }
.acct-block-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.acct-link { font-weight: 600; font-size: .9rem; }

.acct-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 2.5rem; }
.acct-stat { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.acct-stat-ico { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; flex: 0 0 46px; }
.acct-stat-ico svg { width: 22px; height: 22px; }
.acct-stat-ico.brand { background: var(--brand-soft); color: var(--brand); }
.acct-stat-ico.green { background: var(--green-soft); color: var(--green); }
.acct-stat-ico.warn { background: var(--warning-soft); color: var(--warning); }
.acct-stat b { display: block; font-size: 1.3rem; letter-spacing: -.02em; }
.acct-stat span { font-size: .82rem; color: var(--text-muted); }

.acct-block { margin-top: 1rem; }
.acct-empty { text-align: center; padding: 2.5rem; background: var(--surface-2); border-radius: var(--r-lg); }
.acct-empty p { color: var(--text-muted); margin-bottom: 1rem; }

.profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.profile-field { display: flex; flex-direction: column; padding: 1rem; background: var(--surface-2); border-radius: var(--r-md); }
.profile-field span { font-size: .8rem; color: var(--text-muted); margin-bottom: .25rem; }
.profile-field b { font-size: .98rem; }

.kyc-status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.kyc-status-card { display: flex; gap: 1rem; align-items: center; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.kyc-badge { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 48px; }
.kyc-badge svg { width: 24px; height: 24px; }
.kyc-badge.ok { background: var(--green-soft); color: var(--green); }
.kyc-badge.pending { background: var(--warning-soft); color: var(--warning); }
.kyc-badge.ko { background: var(--danger-soft); color: var(--danger); }
.kyc-badge.none { background: var(--surface-2); color: var(--text-muted); }
.kyc-status-card strong { display: block; }
.kyc-status-card span { color: var(--text-muted); font-size: .9rem; }
.kyc-status-card small { display: block; color: var(--text-faint); font-size: .78rem; margin-top: .2rem; }

/* ---------- Table ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl thead th { text-align: left; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: .85rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
[dir="rtl"] .tbl thead th { text-align: right; }
.tbl td { padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl-link { font-weight: 600; color: var(--brand); }
.tbl-muted { color: var(--text-muted); }
.status-pill { display: inline-block; font-size: .74rem; font-weight: 650; padding: .25rem .6rem; border-radius: var(--r-pill); }
.status-pill.ok { background: var(--green-soft); color: var(--green); }
.status-pill.pending { background: var(--warning-soft); color: var(--warning); }
.status-pill.ko { background: var(--danger-soft); color: var(--danger); }
.status-pill.none { background: var(--surface-2); color: var(--text-muted); }

@media (max-width: 860px) {
    .acct-grid { grid-template-columns: 1fr; }
    .acct-nav { position: static; flex-direction: row; flex-wrap: wrap; }
    .acct-nav-link { width: auto; }
    .acct-cards { grid-template-columns: 1fr; }
    .profile-grid, .kyc-status-grid { grid-template-columns: 1fr; }
}

/* ---------- About (assembled page) ---------- */
.about-jump { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; }
.about-jump-link { font-size: .88rem; font-weight: 600; padding: .45rem 1rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-soft); }
.about-jump-link:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }

.about-sec { padding: clamp(3rem, 6vw, 4.5rem) 0; scroll-margin-top: calc(var(--header-h) + 1rem); }
.about-sec.alt { background: var(--bg-alt); }
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; align-items: center; }
.about-grid.reverse .about-media { order: 2; }
.about-media img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh-md); }
.about-copy h2 { margin-bottom: 1rem; }

@media (max-width: 900px) {
    .about-grid, .about-grid.reverse { grid-template-columns: 1fr; gap: 1.75rem; }
    .about-grid.reverse .about-media { order: 0; }
}

/* ---------- How it works (5 steps) ---------- */
.hiw-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
.hiw-step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 2.25rem 1.25rem 1.5rem; text-align: center; box-shadow: var(--sh-sm); }
.hiw-num { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 700; box-shadow: var(--sh-brand); }
.hiw-img { height: 84px; display: grid; place-items: center; margin-bottom: 1rem; }
.hiw-img img { max-height: 84px; width: auto; object-fit: contain; }
.hiw-step h3 { font-size: 1rem; margin-bottom: .5rem; }
.hiw-step p { font-size: .88rem; color: var(--text-muted); margin: 0; }
.hiw-cta { display: flex; justify-content: center; margin-top: 2.5rem; }

@media (max-width: 1040px) { .hiw-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hiw-steps { grid-template-columns: 1fr; } }

/* ---------- CMS header image / ESG cards ---------- */
.cms-header-img { margin-bottom: 2rem; }
.cms-header-img img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh-md); }
.esg-body { font-size: .92rem; }
.esg-body p { margin-bottom: .6rem; }

/* ---------- Hero with background image ---------- */
.page-hero.has-bg { background-size: cover; background-position: center; color: #fff; }
.page-hero.has-bg h1, .page-hero.has-bg p { color: #fff; }
.page-hero.has-bg .breadcrumb, .page-hero.has-bg .breadcrumb a { color: rgba(255,255,255,.82); }
.page-hero.has-bg .eyebrow { background: rgba(255,255,255,.18); color: #fff; }

/* ---------- Sectors ---------- */
.sector-card { overflow: hidden; display: flex; flex-direction: column; }
.sector-media { height: 170px; overflow: hidden; background: var(--surface-2); }
.sector-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.sector-card:hover .sector-media img { transform: scale(1.05); }
.sector-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.sector-text { font-size: .9rem; color: var(--text-muted); }
.sector-text p { margin-bottom: .5rem; }

/* ---------- Partners ---------- */
.partner-card { text-align: center; }
.partner-logo { height: 90px; display: grid; place-items: center; margin-bottom: 1rem; }
.partner-logo img { max-height: 78px; max-width: 100%; width: auto; object-fit: contain; }
.partner-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.partner-citation { font-size: .88rem; color: var(--text-muted); font-style: italic; margin-top: .75rem; }

.partner-roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 3rem; }
.role-card { display: block; padding: 1.75rem; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--sh-sm); transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; }
.role-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--brand); }
.role-card h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.role-card p { font-size: .92rem; color: var(--text-muted); margin-bottom: .75rem; }
.role-link { font-weight: 650; color: var(--brand); font-size: .9rem; }

@media (max-width: 620px) { .partner-roles { grid-template-columns: 1fr; } }

/* ---------- Repayment schedule ---------- */
.repay-summary { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; padding: 1.1rem 1.25rem; margin-bottom: 1rem; background: var(--surface-2); border-radius: var(--r-md); }
.repay-summary > div span { display: block; font-size: .8rem; color: var(--text-muted); }
.repay-summary > div b { font-size: 1.1rem; }
.repay-bar { flex: 1 1 200px; min-width: 160px; }

/* ---------- Deliverables ---------- */
.deliv-list { display: grid; gap: 1.25rem; }
.deliv { padding: 1.4rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.deliv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.deliv-head h4 { margin: 0; font-size: 1.05rem; }
.deliv-date { font-size: .82rem; color: var(--text-muted); flex: 0 0 auto; }
.deliv-text { font-size: .92rem; }
.deliv-docs { list-style: none; margin: 1rem 0 .5rem; padding: 0; display: grid; gap: .45rem; }
.deliv-docs li { display: flex; align-items: center; gap: .55rem; padding: .6rem .8rem; background: var(--surface-2); border-radius: var(--r-sm); font-size: .9rem; }
.deliv-docs svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--text-muted); }
.deliv-docs em { color: var(--text-muted); font-size: .84rem; font-style: normal; }
.deliv-note { font-size: .82rem; color: var(--text-faint); margin: 0; }

/* ---------- Profile chooser ---------- */
.profile-chooser { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.chooser-card { padding: 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.chooser-ico { width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 1rem; }
.chooser-ico svg { width: 25px; height: 25px; }
.chooser-ico.brand { background: var(--brand-soft); color: var(--brand); }
.chooser-ico.green { background: var(--green-soft); color: var(--green); }
.chooser-card h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.chooser-card p { font-size: .92rem; color: var(--text-muted); margin-bottom: .9rem; }
.chooser-card small { display: block; color: var(--text-faint); font-size: .78rem; margin-top: .4rem; }
.kyc-badge-inline { display: inline-block; font-size: .76rem; font-weight: 650; padding: .28rem .7rem; border-radius: var(--r-pill); }
.kyc-badge-inline.ok { background: var(--green-soft); color: var(--green); }
.kyc-badge-inline.pending { background: var(--warning-soft); color: var(--warning); }
.kyc-badge-inline.ko { background: var(--danger-soft); color: var(--danger); }
.kyc-badge-inline.none { background: var(--surface-2); color: var(--text-muted); }
.chooser-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; }

@media (max-width: 760px) { .profile-chooser { grid-template-columns: 1fr; } }

/* ---------- Account forms ---------- */
.form-block { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; margin-bottom: 1.75rem; background: var(--surface); }
.form-block legend { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 0 .5rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.form-field { display: flex; flex-direction: column; gap: .35rem; }
.form-field label { font-size: .85rem; font-weight: 600; color: var(--text-soft); }
.form-field .form-control, .form-field .auth-select {
    height: 44px; padding: 0 .9rem; width: 100%;
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    font-family: inherit; font-size: .94rem; color: var(--text); background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field .form-control:focus, .form-field .auth-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.form-field .form-control:disabled, .form-field .auth-select:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }
.field-hint { font-size: .78rem; color: var(--text-faint); }

.form-alert { margin-bottom: 1.25rem; }
.alert-success { background: var(--green-soft); color: var(--green); }

@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- KYC wizard ---------- */
.kyc-steps { list-style: none; display: flex; gap: .5rem; margin: 0 0 1.75rem; padding: 0; flex-wrap: wrap; }
.kyc-steps li { display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-muted); font-size: .88rem; font-weight: 550; }
.kyc-steps li.current { background: var(--brand-tint); color: var(--brand); }
.kyc-steps li.done { background: var(--green-soft); color: var(--green); }
.kyc-step-num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.06); font-size: .78rem; font-weight: 700; }
.kyc-steps li.current .kyc-step-num { background: var(--brand); color: #fff; }
.kyc-steps li.done .kyc-step-num { background: var(--green); color: #fff; }

.kyc-condition { max-height: 320px; overflow-y: auto; padding: 1rem; background: var(--surface-2); border-radius: var(--r-md); font-size: .92rem; }
.kyc-question { padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.kyc-question:last-child { border-bottom: 0; }
.kyc-q-label { margin-bottom: .7rem; color: var(--text); }
/* Une question du questionnaire KYC est un <fieldset> et son intitulé une <legend> :
   c'est la seule façon pour un lecteur d'écran d'annoncer la QUESTION en même temps que
   ses boutons radio. Ces deux règles neutralisent les styles par défaut du navigateur
   (bordure « groove », marges latérales, legend flottante) et la règle .form-block legend
   qui s'appliquerait par héritage de sélecteur : le rendu reste exactement celui du
   <div>/<p> qu'ils remplacent. */
fieldset.kyc-question { border: 0; border-bottom: 1px solid var(--border); margin: 0; min-inline-size: 0; }
fieldset.kyc-question:last-child { border-bottom: 0; }
.form-block fieldset.kyc-question > legend.kyc-q-label { padding: 0; float: none; width: auto; font-size: 1rem; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--text); }
.kyc-choices { display: grid; gap: .5rem; }
.kyc-choice { display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem; border: 1px solid var(--border-strong); border-radius: var(--r-md); cursor: pointer; font-size: .93rem; transition: border-color .13s ease, background-color .13s ease; }
.kyc-choice:hover { border-color: var(--brand); }
.kyc-choice.on { border-color: var(--brand); background: var(--brand-tint); }
.kyc-choice input { width: 17px; height: 17px; accent-color: var(--brand); }
.kyc-note { font-size: .88rem; color: var(--text-muted); margin: 1rem 0 0; }

.kyc-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.75rem; padding: 1.5rem; border: 1px solid var(--brand); background: var(--brand-tint); border-radius: var(--r-lg); }
.kyc-cta h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.kyc-cta p { margin: 0; font-size: .92rem; color: var(--text-soft); }

.kyc-done { text-align: center; padding: 2rem 1.5rem; }
.kyc-done .auth-success-ico { margin: 0 auto 1rem; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted); }
.empty-state h2 { color: var(--text); margin-bottom: .5rem; }
.coming-soon { padding: 3.5rem 1.5rem; }
.cs-ico { width: 66px; height: 66px; margin: 0 auto 1.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.cs-ico svg { width: 32px; height: 32px; }
.coming-soon p { max-width: 420px; margin: 0 auto 1.5rem; }

/* ---------- CMS prose wrapper ---------- */
/* Le contenu CMS long est souvent collé depuis Word et embarque des styles inline
   (font-family:Calibri, font-size en pt, line-height, mso-*) qui cassent la typo du
   site. On force la police du site et on fait retomber tailles/interlignes inline sur
   .prose, pour que toutes les pages de contenu dynamique s'affichent uniformément
   (comme « Notre société »). Le !important est nécessaire : un style inline l'emporte
   sinon sur une classe. */
.cms-prose { font-size: 1.02rem; }
.cms-prose, .cms-prose * { font-family: var(--font-sans) !important; }
.cms-prose [style*="font-size"] { font-size: inherit !important; }
.cms-prose [style*="line-height"] { line-height: inherit !important; }
.cms-prose:first-child { margin-top: 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .8fr 1.4fr; gap: 2.5rem; align-items: start; }
.contact-info { display: grid; gap: 1.5rem; }
.contact-item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-item .feature-icon { margin-bottom: 0; flex: 0 0 54px; }
.contact-item strong { display: block; font-size: 1rem; margin-bottom: .15rem; }
.contact-item p { margin: 0; color: var(--text-muted); font-size: .92rem; }
.contact-textarea { width: 100%; padding: .85rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--r-md); font-family: inherit; font-size: .95rem; color: var(--text); background: var(--surface); resize: vertical; min-height: 140px; }
.contact-textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack-sm { display: flex; gap: .75rem; flex-wrap: wrap; }
.stack { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .container { padding-inline: 1.15rem; }
}

/* ---------- RTL ---------- */
[dir="rtl"] body { font-feature-settings: normal; }
[dir="rtl"] .eyebrow { letter-spacing: 0; }

/* ============================================================
   Syncfusion (fluent2) fine-tuning for the public theme
   ============================================================ */
.e-input-group.e-control-wrapper,
.e-float-input.e-control-wrapper { border-radius: var(--r-sm); }

.e-btn.e-primary {
    background: var(--brand); border-color: var(--brand); border-radius: var(--r-pill);
    text-transform: none; font-weight: 600;
}
.e-btn.e-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }

/* Blazor error UI */
#blazor-error-ui {
    color-scheme: light only;
    background: #fff8e1; border-top: 1px solid #f0e0a8;
    bottom: 0; box-shadow: 0 -2px 10px rgba(16, 33, 60, .12);
    box-sizing: border-box; display: none;
    left: 0; padding: 0.7rem 1.25rem; position: fixed;
    width: 100%; z-index: 1000; color: #6b5209;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.9rem; top: 0.6rem; }
#blazor-error-ui .reload { color: var(--brand); margin-left: .4rem; }

.auth-hint { font-size: .84rem; color: var(--text-faint); margin-top: -.5rem; margin-bottom: 1.25rem; }

/* ---------- KYC (PP dossier) ---------- */
.kyc-progress { padding: 1.15rem 1.25rem; background: var(--surface-2); border-radius: var(--r-md); margin-bottom: 1.75rem; }
.kyc-progress-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; }
.kyc-progress-top span { font-size: .88rem; color: var(--text-muted); }
.kyc-progress-top b { font-size: 1.15rem; color: var(--brand); }
.req { color: var(--danger); margin-left: .15rem; }
.kyc-doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.kyc-doclist li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; background: var(--surface-2); border-radius: var(--r-sm); }
.kyc-doc-name { font-size: .92rem; }
.kyc-doc { flex-direction: column; align-items: stretch !important; gap: .6rem; }
.kyc-doc-main { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kyc-doc-actions { display: flex; align-items: center; gap: .6rem; }
.kyc-doc-link { font-size: .85rem; font-weight: 600; }
/* Refus d'un champ KYC : le marqueur et le motif de l'opérateur, sous le champ concerné.
   flex + gap plutôt que des marges directionnelles : la mise en page suit le sens de
   lecture, l'arabe compris, sans règle [dir="rtl"] dédiée. */
.kyc-refus { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin-top: .4rem; }
.kyc-refus-motif { font-size: .82rem; color: var(--danger); }
.kyc-upload { position: relative; overflow: hidden; cursor: pointer; }
.kyc-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.form-field textarea.ta { height: auto; padding: .7rem .9rem; line-height: 1.55; resize: vertical; font-size: .94rem; }
.doc-actions { display: flex; gap: .8rem; align-items: center; }
.link-danger { background: none; border: 0; padding: 0; font: inherit; font-size: .9rem; font-weight: 600; color: var(--danger); cursor: pointer; }
.link-danger:hover { text-decoration: underline; }
.link-danger:disabled { opacity: .5; cursor: default; }

/* ---------- Project offers ---------- */
.offer-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 1.5rem; margin-bottom: 1.25rem; }
.offer-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.offer-card-head h3 { font-size: 1.2rem; margin: .5rem 0 0; }
.offer-rewards { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.offer-rewards h4 { font-size: .95rem; margin-bottom: .7rem; }
.reward-add { display: grid; grid-template-columns: 160px 1fr auto; gap: .6rem; margin-top: .8rem; }
.reward-add .form-control { height: 40px; padding: 0 .8rem; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-family: inherit; font-size: .9rem; }
@media (max-width: 700px) { .reward-add { grid-template-columns: 1fr; } }
.readiness { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .45rem; }
.readiness li { display: flex; align-items: center; gap: .6rem; font-size: .93rem; }
.readiness li.ok { color: var(--text); }
.readiness li.todo { color: var(--text-muted); }
.readiness-mark { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.readiness li.ok .readiness-mark { background: var(--green-soft); color: var(--green); }
.readiness li.todo .readiness-mark { background: var(--surface-2); color: var(--text-faint); }
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.img-tile { margin: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.img-tile.banner { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.img-tile img { width: 100%; height: 130px; object-fit: cover; display: block; }
.img-tile figcaption { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .7rem; flex-wrap: wrap; }
.video-embed { position: relative; padding-top: 56.25%; border-radius: var(--r-md); overflow: hidden; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Payment mode selection ---------- */
.pay-modes { display: grid; gap: .6rem; }
.pay-mode { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--r-md); cursor: pointer; transition: border-color .13s ease, background-color .13s ease; }
.pay-mode.on { border-color: var(--brand); background: var(--brand-tint); }
.pay-mode input { width: 18px; height: 18px; accent-color: var(--brand); flex: 0 0 auto; }
.pay-mode strong { display: block; font-size: .95rem; }
.pay-mode span { font-size: .84rem; color: var(--text-muted); }

/* ---------- Wallet / dons ---------- */
.wallet-balance { display: flex; align-items: baseline; justify-content: space-between; padding: 1.5rem 1.75rem; border-radius: var(--r-lg); background: linear-gradient(120deg, var(--brand-active), var(--brand) 75%); color: #fff; margin-bottom: 2rem; }
.wallet-balance span { font-size: .9rem; opacity: .85; }
.wallet-balance b { font-size: 1.8rem; letter-spacing: -.02em; }
.amt-pos { color: var(--green); }
.amt-neg { color: var(--danger); }
.don-target { font-size: .88rem; color: var(--text-muted); margin: .5rem 0 1rem; }

/* La navigation « enhanced » de Blazor pose tabindex="-1" sur le <h1> et le focalise
   après chaque navigation (annonce lecteur d'écran). On masque l'anneau de focus
   visuel sur ces cibles non interactives — le focus (donc l'a11y) reste en place. */
[tabindex="-1"]:focus { outline: none; }

/* ---------- Notifications ---------- */
.notif-liste { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem; }

.notif {
    border: 1px solid var(--border, #e6ebf1); border-radius: 10px;
    padding: .9rem 1.1rem; background: #fff;
}

/* La non-lue se signale par une BARRE, pas seulement par un fond : un aplat clair de plus ne
   se distingue pas d'un aplat clair de moins, et rien ne le dit à un lecteur d'écran non plus —
   d'où le bouton « Marquer comme lue », qui n'apparaît que sur les non-lues et porte la même
   information en toutes lettres. */
.notif-non-lue { border-inline-start: 4px solid var(--brand, #1749a3); background: #f7faff; }

.notif-entete {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    font-size: .82rem; color: var(--text-muted, #6b7280); margin-bottom: .45rem;
}

.notif-projet { font-weight: 600; color: var(--text, #111827); }
.notif-entete .btn { margin-inline-start: auto; }

/* Le contenu vient de l'éditeur du back-office : il peut porter ses propres marges de bloc,
   qu'on neutralise en tête et en pied pour que la carte reste d'une hauteur prévisible. */
.notif-corps > :first-child { margin-top: 0; }
.notif-corps > :last-child { margin-bottom: 0; }
.notif-corps img { max-width: 100%; height: auto; }

.notif-plafond { margin-top: 1rem; font-size: .85rem; }

/* Mode de règlement momentanément interrompu : visible, mais manifestement inactif.
   On le grise sans le cacher — le retirer laisserait croire qu'Alif n'accepte pas la carte,
   alors que le service est seulement suspendu. Le curseur « not-allowed » et l'opacité disent
   à l'œil ce que l'attribut disabled dit au navigateur et aria-disabled au lecteur d'écran. */
.pay-mode.indispo { opacity: .55; cursor: not-allowed; background: var(--surface-2, #f6f8fb); }
.pay-mode.indispo input { cursor: not-allowed; }
.pay-mode.indispo span { color: var(--text-muted); }