/* ============================================================
   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;
}
/* LE SOULEVEMENT AU SURVOL EST RESERVE AUX CARTES QUI SONT DES LIENS.
   Il s'appliquait a TOUTE carte : les panneaux de la page « Investir » — recapitulatif,
   calculateur, detail de l'offre — se soulevaient donc au passage de la souris, promettant un clic
   qui n'existe pas. Signale par Nabil le 01/09/2026 sur /investir/229.
   « a.card » plutot qu'une classe a poser : l'affordance suit ce que l'element EST. Une carte
   cliquable ajoutee demain l'aura sans qu'on y pense, un panneau statique ne l'aura jamais par
   erreur. Une seule carte du site est aujourd'hui dans ce cas : celle d'un projet, dans la
   grille. */
a.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); }
/* ALERT-WARNING N'EXISTAIT PAS, et trois écrans l'employaient déjà — dont, depuis le 13/08/2026,
   celui qui annonce au contributeur que la collecte a échoué. Un `.alert` sans variante ne pose ni
   fond ni bordure : le message le plus important de la page s'affichait en texte nu, sous un bloc
   vert de succès qui, lui, était stylé. Les variables existaient ; seule la règle manquait. */
.alert-warning { background: var(--warning-soft); color: var(--warning); border-color: #f0dcb8; }

/* ============================================================
   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: .5rem; }

/* Champs obligatoires : l'etoile et sa legende.
   L'etoile est portee par un span aria-hidden — elle est DECORATIVE. Ce qui rend le champ
   obligatoire pour un lecteur d'ecran, c'est l'attribut de validation du modele, pas ce
   caractere ; l'annoncer deux fois ferait lire « etoile » au milieu de chaque libelle.
   La legende, elle, reste lue : c'est elle qui donne son sens au symbole. */
.auth-legende { color: var(--text-muted); font-size: .85rem; margin-bottom: 1.5rem; }
.champ-requis { color: #dc2626; margin-inline-start: .15rem; font-weight: 600; }

/* L'aide sous un champ : une regle ANNONCEE plutot que decouverte au refus. */
.auth-aide { display: block; color: var(--text-muted); font-size: .8rem; margin-top: .35rem; }

.auth-card.wide { max-width: 560px; }
.auth-form { display: grid; gap: 1.1rem; }
.auth-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* TROIS COLONNES, DONT UNE PLUS ETROITE. « Monsieur » est le plus long des trois choix de
   civilite ; lui donner autant de place qu'un nom de famille deforme la lecture d'une ligne ou
   l'oeil cherche d'abord le nom. En dessous de 640px, les trois passent l'une sous l'autre : a
   cette largeur, trois colonnes rendraient chaque champ trop etroit pour etre lisible. */
.auth-grid3 { display: grid; grid-template-columns: .62fr 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .auth-grid3 { grid-template-columns: 1fr; } }
.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; align-content: start; }
/* LES DEUX COLONNES D'UNE LIGNE NE S'ETIRENT PLUS L'UNE SUR L'AUTRE.
   Sans align-content, les deux .auth-field d'une meme ligne prennent la hauteur de la plus haute :
   celle du mot de passe porte une aide sous le champ (« 6 caracteres minimum »), la colonne
   « Confirmation » n'en a pas, et son contenu se repartissait sur la hauteur excedentaire — le
   champ descendait de vingt pixels et ne s'alignait plus avec son voisin. Constate par Nabil le
   19/08/2026. Les contenus s'empilent desormais depuis le haut, quelle que soit la hauteur du
   voisin. */
.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; }
/* « RETOUR AU SITE » ETAIT INVISIBLE, ET LE LIEN EXISTAIT DEPUIS TOUJOURS.
   Il est place en haut a DROITE, donc AU-DESSUS DU PANNEAU DU FORMULAIRE, dont le fond est
   rgb(250,251,254) — et il etait peint en rgba(255,255,255,.85). Blanc sur blanc : mesure sur
   la page servie le 02/09/2026, apres que Nabil a signale qu'aucun moyen ne permettait de
   revenir a l'accueil depuis /inscription. Il y en avait un ; on ne le voyait pas.
   La couleur blanche etait celle d'un lien pose sur le panneau BLEU de gauche : elle n'a pas
   suivi le lien quand il est passe a droite. La regle mobile (< 860 px), elle, avait deja la
   bonne couleur — c'est elle qui donne la reference ici. */
.auth-back { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 2; font-size: .85rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: .35rem; }
.auth-back:hover { color: var(--brand); }

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

@media (max-width: 860px) {
    .auth-brand { display: none; }
    .auth-mobile-logo { display: flex; }
    /* La couleur du lien de retour est desormais la meme aux deux tailles : la surcharge qui
       vivait ici est remontee dans la regle de base, ou elle manquait. */
}

/* ---------- 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; }
/* Ce bloc est tantot un <div> portant un degrade, tantot l'<img> de la banniere du projet :
   width et object-fit ne servent qu'au second, et sont sans effet sur le premier. Sans eux,
   une banniere plus large que la colonne deborderait, et une plus haute serait ecrasee. */
.proj-detail-media { height: 280px; width: 100%; object-fit: cover; display: block;
                     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); }

/* Le score combiné : c'est la valeur que le guide met en avant auprès des contributeurs, donc
   elle passe devant les trois piliers et non après. */
.esg-global { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.esg-global-score { font-size: 2.6rem; font-weight: 800; color: var(--green); line-height: 1; }
.esg-global-sur { font-size: 1rem; color: var(--text-soft); }
.esg-global-niveau { margin-inline-start: auto; background: var(--green-soft); color: var(--green);
                     border-radius: var(--r-md); padding: .35rem .75rem; font-weight: 700;
                     font-size: .85rem; }

.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; }
/* LE GAP N'EST PAS DECORATIF : sans lui, une valeur assez large pour remplir la ligne vient
   toucher son libelle, et les deux se lisent comme un seul mot. Vu le 14/08/2026 en rejouant le
   manuel : « ContrepartieUn pot de miel de la vallee... » sur le recapitulatif du don, et
   « IBANMA95 0078 1000 0022 0000 1234 5678 » sur la page de confirmation — celle-la meme ou le
   donateur releve le numero pour son virement. space-between ne reserve aucun espace : il
   repartit ce qui RESTE, et il ne reste rien. */
.offer-facts li { display: flex; justify-content: space-between; gap: 1.25rem; 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; }
/* LES DOCUMENTS PUBLICS DU PROJET. Meme facture que les paliers de contrepartie juste
   au-dessus : une carte par ligne, bordee et posee sur la surface. Le format est une etiquette
   discrete a droite du titre — un visiteur doit savoir ce qu'il ouvre avant de cliquer. */
.doc-pub-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem; }
.doc-pub-list li { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.doc-pub-list a { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
                  padding: .8rem 1rem; color: var(--text); text-decoration: none; font-weight: 600; }
.doc-pub-list a:hover { border-color: transparent; color: var(--brand); }
.doc-pub-format { font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--text-muted);
                  border: 1px solid var(--border); border-radius: 999px; padding: .15rem .5rem; }

.cp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
/* CE COMMENTAIRE PARLAIT D'UN FLEX-WRAP QUI N'EXISTE PLUS. La liste est passee en grille le
   01/09/2026 (voir juste dessous) et « flex: 1 0 100% » sur .cp-delai est devenu sans effet : le
   delai a repris sa place de troisieme colonne et recomprime le libelle — exactement le defaut que
   l'ancienne regle evitait, revenu par la porte d'a cote. Il est corrige AU MEME ENDROIT que la
   grille, sur .cp-delai, et non par un retour au flex. */
/* LA LIGNE D'UNE CONTREPARTIE : TROIS COLONNES, ET NON UNE RANGEE QUI SE REPLIE.

   Ce qu'elle faisait : display:flex + flex-wrap. « Retirer » passait donc a la ligne ou restait
   colle au texte SELON LA LONGUEUR DE CE TEXTE — trois paliers, trois mises en page differentes,
   et le bouton tantot a gauche sous la description, tantot colle a la fin de la phrase. Le detail
   de la valeur et du delai, lui, courait dans le fil de la description sans separation.
   Signale par Nabil le 01/09/2026 : « c'est mal formatte ».

   Ce qu'elle fait : le montant tient sa colonne, la description prend le reste, le bouton est
   pose a droite. Le detail passe SOUS la description, ou il se lit comme ce qu'il est — une
   precision, pas la suite de la phrase. La mise en page ne depend plus du texte. */
.cp-list li { display: grid; grid-template-columns: max-content 1fr max-content;
              align-items: baseline; column-gap: .9rem; row-gap: .15rem;
              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; }

/* Le montant ne se coupe jamais : « 5 000 DH » sur deux lignes serait illisible. */
.cp-amount { font-weight: 700; color: var(--brand); white-space: nowrap; }
.cp-list li.earned .cp-amount { color: var(--green); }

.cp-ex { grid-column: 2; color: var(--text-soft); font-size: .9rem; }

/* Le detail sur sa propre ligne, sous la description, aligne avec elle. */
.cp-meta { display: block; margin-top: .2rem; color: var(--text-faint); font-size: .8rem; }

.cp-list li > .link-danger { grid-column: 3; justify-self: end; }

/* En etroit, le bouton descend sous la description plutot que de comprimer les trois colonnes. */
@media (max-width: 560px) {
    .cp-list li { grid-template-columns: max-content 1fr; }
    .cp-list li > .link-danger { grid-column: 2; justify-self: start; margin-top: .35rem; }
}
/* Le délai de remise : un engagement, pas un détail. Il passe à la ligne pour ne pas
   comprimer le libellé de la contrepartie, qui reste l'information principale. */
/* LE DELAI SOUS LA DESCRIPTION, ET NON A COTE. « grid-column: 2 / -1 » le pose sur une nouvelle
   rangee, alignee avec le libelle, en occupant tout ce qui reste a droite du montant. Mesure du
   01/09/2026 avant correction, a 545 px de large : le delai prenait 300 px et comprimait le
   libelle a 115 px — « Une carte de remerciement des eleves, signee de la classe » y tenait sur
   cinq lignes. */
/* LA MENTION QUI DIT LEQUEL EST OBTENU. Le vert seul ne se lit pas par tout le monde, et ne dit
   pas qu'on n'obtient qu'UNE contrepartie. */
.cp-obtenue { display: inline-block; margin-inline-start: .5rem; font-size: .72rem; font-weight: 700;
              text-transform: uppercase; letter-spacing: .03em; color: var(--green);
              background: var(--green-soft); border-radius: var(--r-pill); padding: .1rem .5rem;
              vertical-align: .05em; }

.cp-delai { grid-column: 2 / -1; color: var(--text-soft); font-size: .8rem; font-style: italic;
            margin-top: .2rem; }
/* La renonciation est un choix définitif : on lui donne sa propre place et un cadre, plutôt
   que de la glisser dans une liste où elle passerait inaperçue. */
.cp-renonce { display: flex; align-items: flex-start; gap: .5rem; margin-top: .75rem;
              padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--r-md);
              font-size: .88rem; cursor: pointer; }
.cp-renonce input { margin-top: .15rem; flex: 0 0 auto; }

/* Le suivi des contreparties à remettre, côté porteur. Les colonnes s'empilent en dessous de
   860 px : cette liste se consulte souvent depuis un téléphone, au moment de préparer un envoi. */
.cpr-list { display: flex; flex-direction: column; gap: .35rem; margin-top: 1rem; }
.cpr-row { display: grid; grid-template-columns: 2fr 1fr 2fr 1fr 1.4fr; gap: .75rem;
           align-items: center; padding: .6rem .8rem; border: 1px solid var(--border);
           border-radius: var(--r-md); font-size: .9rem; }
.cpr-head { font-weight: 700; background: var(--green-soft); border-color: transparent; }
.cpr-row.remise { background: var(--green-soft); }
/* Une renonciation n'est ni un succès ni une alerte : elle s'efface, sans disparaître. */
.cpr-row.renoncee { opacity: .62; }
.cpr-check { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
@media (max-width: 860px) {
  .cpr-row { grid-template-columns: 1fr; gap: .25rem; }
  .cpr-head { display: none; }
}

.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; }
/* Meme gap, et c'est ICI que le defaut se voyait : le recapitulatif du don et la page de
   confirmation utilisent recap-list, pas offer-facts. La regle ci-dessus a ete corrigee par
   precaution, celle-ci l'est sur mesure. */
.recap-list li { display: flex; justify-content: space-between; gap: 1.25rem; 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); }
/* LE « nowrap » EST REVENU A CE POUR QUOI IL A ETE POSE : les liens d'ACTION d'une cellule
   (« Consulter → », « Livrables → »), qui ne doivent pas se couper en deux. Pose sur TOUT
   .tbl-link, il empechait aussi le NOM D'UN PROJET de passer a la ligne — et « Extension de la
   cooperative d'argan de Tamanar » sur une seule ligne faisait deborder le tableau de
   « Mes investissements » de 50 pixels. Un titre a le droit de tenir sur deux lignes ; un verbe
   d'action, non. */
.tbl-link { font-weight: 600; color: var(--brand); }
.tbl-actions .tbl-link { white-space: nowrap; }

/* LA CELLULE D'ACTIONS ESPACE SES LIENS. Sans elle, « Consulter → » et « Contreparties → » se
   touchaient et se lisaient comme une phrase. Le retour a la ligne est autorise : trois liens ne
   tiennent pas toujours sur une ligne d'un tableau deja large. */
.tbl-actions { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.tbl-muted { color: var(--text-muted); }

/* UNE ACTION EN ICONE DANS UN TABLEAU. Elle remplace un libelle — « Telecharger », « Detail » —
   sur un tableau qui debordait en largeur. La zone cliquable reste de 32 px : une icone de 18 px
   sans marge autour est un piege a la souris, et pire au doigt. */
.tbl-icone { display: inline-grid; place-items: center; width: 32px; height: 32px;
             border-radius: var(--r-sm); color: var(--brand); }
.tbl-icone svg { width: 18px; height: 18px; }
.tbl-icone:hover { background: var(--brand-tint); }

/* Les colonnes d'action ne prennent que ce qu'il leur faut : sans cela, le tableau leur donne
   une part egale et vole la largeur a la colonne du projet, qui est celle qu'on lit. */
.tbl-col-etroite { width: 1%; white-space: nowrap; }

/* LE TYPE D'ENGAGEMENT, SOUS LE NOM DU PROJET. En bloc et non en pastille coloree : le tableau
   porte deja une pastille de STATUT, et deux pastilles sur une meme ligne se disputeraient la
   lecture alors qu'elles ne disent pas la meme chose. */
.tbl-type { display: block; margin-top: .15rem; font-size: .74rem; font-weight: 700;
            letter-spacing: .04em; text-transform: uppercase; 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; }
/* LA CARTE EST UNE COLONNE, POUR QUE SA RANGEE DE BOUTONS TOMBE EN BAS. Les deux cartes n'ont
   pas le meme contenu — celle de l'investisseur porte en plus une ligne « Valide le … » — et
   leurs boutons se retrouvaient donc a des hauteurs differentes. La grille leur donne deja la
   meme hauteur ; il ne manquait qu'un « margin-top: auto » sur la rangee d'actions. */
.chooser-card { padding: 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
                display: flex; flex-direction: column; }
.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); }
/* DEUX COLONNES, ET NON UNE RANGEE QUI SE REPLIE.
   Ce qu'elle faisait : display:flex + flex-wrap. Les deux boutons tenaient cote a cote dans la
   carte de gauche — « Explorer les projets » + « Mes investissements » — et passaient l'un sous
   l'autre dans celle de droite, ou « Devenir porteur de projet » est plus long. Deux cartes
   jumelles, deux mises en page. Signale par Nabil le 01/09/2026.
   Chaque carte porte TOUJOURS exactement deux boutons : la grille de deux colonnes egales les
   pose donc cote a cote quelle que soit la longueur des libelles, au lieu de laisser le plus
   bavard decider pour les deux. */
.chooser-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                   gap: .6rem; margin-top: auto; padding-top: 1.25rem; }
.chooser-actions .btn { text-align: center; }

/* LA PASTILLE NE S'ETIRE PAS. Passer la carte en colonne flexible etire par defaut tout ce
   qu'elle contient : la pastille d'etat, qui doit epouser son texte, prenait la largeur de la
   carte. Elle se recale a gauche, la rangee de boutons garde son etirement. */
.chooser-card .kyc-badge-inline { align-self: flex-start; }

/* En etroit, les boutons s'empilent : deux colonnes sur un telephone les rendraient illisibles. */
@media (max-width: 420px) { .chooser-actions { grid-template-columns: 1fr; } }

@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; }

/* UN MESSAGE POSE SOUS UNE RANGEE DE BOUTONS DOIT S'EN DETACHER. Sans marge haute, le refus
   touchait le bouton qui venait de le declencher, et se lisait comme une etiquette collee a lui
   plutot que comme sa reponse. Signale le 01/09/2026 sur l'etape Conditions du dossier
   investisseur. */
.form-alert-apres-boutons { margin-top: 1.1rem; }
.alert-success { background: var(--green-soft); color: var(--green); }

/* L'INDICATIF TELEPHONIQUE TIENT SUR UNE COLONNE ETROITE, JUSTE AVANT SON NUMERO.
   La grille compte deux colonnes egales : sans cette regle, l'indicatif — quatre caracteres —
   occupait la meme largeur qu'une adresse, et rien ne disait qu'il forme UN numero avec le champ
   suivant. Sur une grille en douziemes, l'indicatif prend 3 colonnes et le numero les 9 restantes,
   donc ils partagent une ligne. Voir ChampsIdentiteRules.EstEtroit, qui decide QUELS champs sont
   etroits — la feuille de style ne fait que l'habiller. */
.form-grid { grid-template-columns: repeat(12, 1fr); }
.form-grid > .form-field { grid-column: span 6; }
.form-grid > .form-field-etroit { grid-column: span 3; }
.form-grid > .form-field-etroit + .form-field { grid-column: span 9; }

@media (max-width: 700px) {
    /* Sur mobile chaque champ prend la ligne entiere, MAIS le couple indicatif/numero reste
       cote a cote : les separer casserait la seule paire que l'oeil lit comme une seule saisie.
       LA GRILLE RESTE EN DOUZE COLONNES. La regle d'origine posait ici « grid-template-columns:
       1fr », ce qui ramenait la grille a UNE colonne et rendait tous les spans sans effet — la
       paire se serait empilee malgre la regle ci-dessous. Constate a la mesure, pas a la lecture. */
    .form-grid { grid-template-columns: repeat(12, 1fr); }
    .form-grid > .form-field { grid-column: span 12; }
    .form-grid > .form-field-etroit { grid-column: span 4; }
    .form-grid > .form-field-etroit + .form-field { grid-column: span 8; }
}

/* ---------- 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; }
/* LE TRAIT DE SEPARATION RESPIRE APRES, PAS SEULEMENT AVANT. Le remplissage etait symetrique
   (1.1rem de part et d'autre), mais le trait paraissait colle a la question suivante : une legende
   en gras attire l'oeil plus haut que ne finit une liste de choix. On ajoute donc de l'air APRES le
   trait. Signale par Nabil le 31/08/2026. */
.kyc-question { padding: 1.1rem 0; border-bottom: 1px solid var(--border); margin-bottom: .9rem; }
.kyc-question:last-child { margin-bottom: 0; }
.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; }

/* UNE RANGEE DE BOUTONS QUI SUIT UN PARAGRAPHE DOIT S'EN DETACHER. Posee juste apres un texte
   sans marge basse, elle le colle — et le bouton se lit comme la suite de la phrase plutot que
   comme le geste qu'elle annonce. Troisieme fois que ce defaut se signale aujourd'hui, dans les
   deux sens (message sous des boutons, boutons sous un texte) : d'ou une classe nommee plutot
   qu'une marge en ligne, pour qu'on la reconnaisse la prochaine fois. */
.stack-apres-texte { margin-top: 1.25rem; }
.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; }
/* LA LIGNE D'AJOUT D'UNE CONTREPARTIE. Un seul gabarit — « 160px 1fr auto » — servait aux DEUX
   rangees, qui n'ont pas le meme nombre de champs. La premiere en a deux, et laissait donc une
   troisieme colonne vide ; la seconde en a trois, et heritait de colonnes qui ne lui allaient pas :
   « Delai de remise » tombait sur le 1fr, donc immense, et « Justification de la valeur » sur le
   auto, donc reduit a la taille par defaut d'un champ. Exactement l'inverse de ce qu'il faut : un
   delai tient en trois chiffres, une justification est une phrase.
   Signale par Nabil le 01/09/2026. */
/* 185px, ET NON 160 : c'est ce qu'il faut pour que « Montant du don (DH) » et « Valeur estimee
   (DH) » tiennent en entier. Ces invites sont les seuls libelles de ces champs — la rangee est
   compacte et n'en porte pas d'autres —, donc une invite tronquee est un champ sans nom. */
.reward-add { display: grid; grid-template-columns: 185px 1fr; gap: .6rem; margin-top: .8rem; }

/* La rangee des trois champs de valeur : montant fixe, delai etroit, justification au reste. */
.reward-add-valeurs { grid-template-columns: 185px 190px 1fr; }

.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: 900px) { .reward-add-valeurs { grid-template-columns: 185px 190px; } }
@media (max-width: 700px) { .reward-add, .reward-add-valeurs { 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); }

/* CE QUE LE BACK-OFFICE DEMANDE DE CORRIGER, sur la fiche du porteur. Un champ par ligne, le
   motif sous son nom : c'est une liste de choses a faire, pas un paragraphe a dechiffrer. Le
   porteur ne recevait auparavant qu'une notification annoncant « des erreurs », sans lesquelles. */
.retour-bo-liste { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.retour-bo-liste li { display: flex; flex-wrap: wrap; gap: .15rem .6rem; }
.retour-bo-champ { font-weight: 700; flex: 0 0 auto; }
.retour-bo-motif { flex: 1 0 100%; font-size: .9rem; }


/* LE BANDEAU DU MODE PASSE-PARTOUT.
   Collant en haut de page et sans croix de fermeture : un agent qui oublie qu'il travaille dans
   l'espace de quelqu'un d'autre est le scenario dont naissent les vrais incidents. La couleur
   d'alerte n'est pas decorative — elle doit se distinguer au premier coup d'oeil de tout le reste
   du site, y compris des bandeaux d'information ordinaires. */
.pp-bandeau {
    position: sticky; top: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .55rem 1rem;
    background: #7a1020; color: #fff;
    font-size: .9rem;
    border-bottom: 3px solid #ffb300;
}
.pp-bandeau.expiree { background: #4a4a4a; border-bottom-color: #999; }
.pp-bandeau-texte { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.pp-bandeau-texte strong { text-transform: uppercase; letter-spacing: .04em; }
.pp-bandeau-sortie { background: #fff; color: #7a1020; font-weight: 600; white-space: nowrap; }
.pp-bandeau form { margin: 0; }

/* LE CHAMP-PIEGE. Il doit etre invisible SANS etre display:none : certains automates ignorent les
   champs masques de cette facon, et le piege ne prendrait plus. Sorti de l'ecran, il reste dans le
   HTML — donc dans ce que lit un robot — et hors de portee d'un humain. */
.pot-de-miel { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px;
               overflow: hidden; opacity: 0; }

/* LA MESSAGERIE DU MEMBRE.
   Ancree en bas a droite, au-dessus de tout le reste. En arabe elle passe a gauche : la valeur
   logique « inset-inline-end » suit la direction du document, contrairement a « right ». */
.chat-ancre { position: fixed; inset-block-end: 1.2rem; inset-inline-end: 1.2rem; z-index: 1040; }

.chat-bulle { position: relative; width: 3.4rem; height: 3.4rem; border: none; border-radius: 50%;
              background: #1d5ba6; color: #fff; cursor: pointer;
              box-shadow: 0 6px 20px rgba(12, 42, 82, .28); }
.chat-bulle-icone { display: block; width: 1.5rem; height: 1.5rem; margin: 0 auto;
                    background: currentColor;
                    -webkit-mask: var(--chat-icone) center / contain no-repeat;
                    mask: var(--chat-icone) center / contain no-repeat; }
:root { --chat-icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9.9 9.9 0 0 1-4.2-.9L3 21l1.9-4.7A8.4 8.4 0 0 1 12 3.1a8.4 8.4 0 0 1 9 8.4z'/></svg>"); }

.chat-pastille { position: absolute; top: -.2rem; inset-inline-end: -.2rem; min-width: 1.25rem;
                 padding: 0 .3rem; border-radius: 999px; background: #dc2626; color: #fff;
                 font-size: .7rem; font-weight: 700; line-height: 1.25rem; }

.chat-panneau { display: flex; flex-direction: column; width: min(22rem, calc(100vw - 2.4rem));
                height: min(30rem, calc(100vh - 6rem)); border: 1px solid #dbe4ef;
                border-radius: .8rem; background: #fff;
                box-shadow: 0 10px 34px rgba(12, 42, 82, .22); overflow: hidden; }
.chat-tete { display: flex; align-items: center; justify-content: space-between;
             padding: .7rem .9rem; border-bottom: 1px solid #e6ebf1; background: #f8fafc; }
.chat-fermer { border: none; background: none; font-size: 1rem; cursor: pointer; color: #6b7280; }

.chat-fil { flex: 1; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column;
            gap: .6rem; }
.chat-vide { color: #8b93a0; font-size: .85rem; }

.chat-message { max-width: 85%; padding: .5rem .7rem; border-radius: .6rem; font-size: .87rem; }
/* LE COTE PORTE LE SENS AUTANT QUE LA COULEUR : un message aligne a droite est le mien, meme
   imprime en noir et blanc. */
.chat-message.moi  { align-self: flex-end; background: #1d5ba6; color: #fff; }
.chat-message.alif { align-self: flex-start; background: #f1f5f9; color: #0c2a52; }
.chat-auteur { display: block; font-size: .72rem; font-weight: 700; margin-bottom: .15rem; }
/* Les retours a la ligne du membre sont conserves a l'affichage : c'est un corps de message. */
.chat-corps { white-space: pre-wrap; word-break: break-word; }
.chat-heure { margin-top: .2rem; font-size: .68rem; opacity: .7; }

.chat-erreur { margin: 0; padding: .4rem .8rem; color: #8a1c1c; background: #fff5f5;
               font-size: .8rem; }

.chat-saisie { display: flex; gap: .5rem; align-items: flex-end; padding: .7rem;
               border-top: 1px solid #e6ebf1; }
/* LA ZONE DE SAISIE PREND TOUTE LA PLACE LIBRE, ET C'EST CE QUI POUSSE LE BOUTON A DROITE.
   Sans ce flex, elle gardait sa largeur intrinseque — une vingtaine de colonnes, soit 181 px
   mesures sur un panneau de 352 — et le bouton se posait juste apres elle, au MILIEU, laissant
   une soixantaine de pixels morts derriere lui. Signale par Nabil le 20/08/2026.
   min-width: 0 est indispensable : un element flexible ne descend pas sous sa largeur
   intrinseque sans cela, et le flex n'aurait servi qu'a l'agrandir, jamais a le laisser retrecir
   sur un ecran etroit. */
.chat-saisie textarea { flex: 1; min-width: 0; resize: none; font-size: .87rem; }
/* Le bouton ne se comprime pas : « Envoyer » sur deux lignes serait pire que tout. */
.chat-saisie .btn { flex: 0 0 auto; }

/* CE QUI MANQUE ENCORE, SOUS LE BOUTON D'ENVOI.
   Le bloc touchait le bouton : on lisait les deux comme un seul ensemble, et le message se
   confondait avec une legende de bouton. Signale par Nabil le 31/08/2026. */
.kyc-manques { margin-top: 1.1rem; }

/* La case de demande d'accompagnement, detachee du paragraphe qui l'explique : collee dessous,
   elle se lisait comme la derniere ligne du texte et non comme un choix a faire. */
.acc-choix { margin-top: .9rem; }

/* L'acces aux offres, dans le fil du formulaire de projet. Encadre discret plutot que bouton nu :
   il porte un etat (« aucune offre definie ») que le bouton seul ne pouvait pas dire. */
.proj-offres-lien { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
                    flex-wrap: wrap; margin-top: 1.4rem; padding: 1rem 1.1rem;
                    border: 1px solid var(--border); border-radius: var(--r-md);
                    background: var(--brand-tint); }
.proj-offres-lien p { margin: .25rem 0 0; max-width: 52ch; }

/* LE CHAMP DATE : NOTRE FORMAT DANS LE CHAMP, LE CALENDRIER DU NAVIGATEUR A COTE.

   Un input[type=date] affiche ses trois nombres dans l'ordre de la langue de CHROME : mesure du
   01/09/2026, le 1er septembre s'ecrivait « 09/01/2026 » sur un site en francais, et ni lang="fr"
   sur le document, ni sur le champ, ni lang="fr-FR" n'y changeaient rien. Ce qu'on lit et ce qu'on
   tape est donc un champ TEXTE, dont nous ecrivons le format.

   Le champ date reel est conserve, reduit a son seul bouton calendrier : son texte est masque, il
   ne sert plus qu'a ouvrir le calendrier natif — qu'on ne reecrira pas — et a rendre une valeur,
   que le composant reecrit ensuite en jour / mois / annee. */
.date-champ { position: relative; display: block; }

/* La place du bouton, prise sur le champ texte pour que la saisie ne passe jamais dessous. */
.date-champ .form-control { padding-inline-end: 2.8rem; }

.date-champ .date-natif {
    position: absolute; inset-inline-end: .35rem; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; padding: 0; border: 0; background: none;
    color: var(--text-faint); cursor: pointer;
}
.date-champ .date-natif:disabled { cursor: default; opacity: .4; }

/* Tout le champ natif disparait SAUF son bouton calendrier. Les selecteurs -webkit- couvrent
   Chrome, Edge et Safari ; Firefox n'a pas de bouton et le champ reste simplement invisible, le
   champ texte suffisant a saisir la date. */
.date-champ .date-natif::-webkit-datetime-edit,
.date-champ .date-natif::-webkit-inner-spin-button,
.date-champ .date-natif::-webkit-clear-button { display: none; }
.date-champ .date-natif::-webkit-calendar-picker-indicator {
    width: 26px; height: 26px; margin: 0; padding: 0; cursor: pointer; opacity: .55;
}
.date-champ .date-natif::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Le refus de lecture se voit : sans couleur, la ligne d'aide qui dit « date incomprise » se lit
   comme le rappel de format qu'elle remplace. */
.field-hint-erreur { color: var(--red, #b3261e); }

/* LE MEME CHAMP SUR LES PAGES D'AUTHENTIFICATION. Elles ont leur propre habillage (.auth-input,
   hauteur et retraits differents de .form-field) : le bouton calendrier s'y pose de la meme
   facon, mais doit suivre CES mesures-la. */
.auth-input.date-champ .form-control { padding-inline-end: 2.8rem; }
.auth-input.date-champ .date-natif { inset-inline-end: .5rem; }

/* LE BLOC DE FIN D'ECRAN : ou l'on en est, et ou l'on va. Meme forme que .proj-offres-lien, qui
   fait le chemin inverse depuis le formulaire de projet — les deux ecrans se renvoient l'un a
   l'autre, et se ressembler aide a le comprendre. */
.acct-suite { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
              flex-wrap: wrap; margin-top: 1.5rem; padding: 1.1rem 1.2rem;
              border: 1px solid var(--border); border-radius: var(--r-md);
              background: var(--brand-tint); }
.acct-suite p { margin: .25rem 0 0; max-width: 62ch; color: var(--text-soft); font-size: .92rem; }

/* LA VIDEO DU PROJET. Rapport 16/9 tenu par aspect-ratio plutot que par le vieux calage en
   padding-bottom : le conteneur garde sa hauteur meme avant que l'iframe ne charge, ce qui evite
   que la page ne saute sous le lecteur. */
.proj-detail-video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 1.5rem;
                     border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.proj-detail-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* LES AUTRES VISUELS. La banniere est deja en tete de fiche et n'est pas reprise ici. */
.proj-detail-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
                       gap: .7rem; margin: 0 0 1.5rem; }
.proj-detail-galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
                           border-radius: var(--r-sm); border: 1px solid var(--border); }

/* Les sous-titres des textes libres : plus bas que les titres de section, sans les concurrencer. */
.proj-detail-sous { font-size: 1rem; margin: 1.1rem 0 .35rem; }

/* LA REFERENCE DE VIREMENT SE RECOPIE A LA MAIN dans un formulaire bancaire : elle est grande,
   espacee et a chasse fixe, pour qu'un 0 ne se confonde pas avec un O. */
.ref-virement { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                font-size: 1.4rem; font-weight: 700; letter-spacing: .08em; margin: .35rem 0;
                word-break: break-all; }

/* LE SOUTIEN D'UN PROJET. Pose sur la banniere sombre de l'en-tete de fiche, d'ou le contraste
   clair. Discret tant qu'il n'est pas actif : c'est un agrement, pas un appel a l'action — le
   bouton d'investissement, lui, est orange et pleine largeur dans la colonne de droite. */
.proj-hero-actions { margin-top: 1.1rem; }
.jaime { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
         padding: .5rem .95rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
         color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
         transition: background .15s ease, border-color .15s ease; }
.jaime:hover:not(:disabled) { background: rgba(255,255,255,.24); }
.jaime:disabled { opacity: .6; cursor: default; }
/* ACTIF : le coeur se remplit et le fond passe au chaud. Le changement doit se voir sans lire le
   libelle, qui reste « J'aime » dans les deux etats. */
.jaime-actif { background: rgba(240,90,40,.9); border-color: transparent; }
.jaime-actif:hover:not(:disabled) { background: rgba(240,90,40,1); }
.jaime-compte { font-variant-numeric: tabular-nums; padding-inline-start: .35rem;
                border-inline-start: 1px solid rgba(255,255,255,.35); }