/* =============================================================================
   OSEOM · THEME COMMUN (oseom-theme.css)

   v189. Feuille chargee APRES oseom.css et espace.css par toutes les pages :
   back office, parcours de souscription, espace investisseur. Sur Connexion,
   Activation et l accueil, elle passe juste apres oseom.css et AVANT le bloc
   <style> propre a la page, qui garde donc le dernier mot. Elle ne renomme aucune classe
   et ne touche aucun balisage : elle aligne les valeurs (jetons) et la finition
   des composants sur l'annuaire des cabinets CGP, pour que les deux outils
   d'OSEOM parlent la meme langue visuelle.

   Regle de travail : les fonctions se modifient dans espace.css, oseom.css et
   les pages ; l'apparence commune se regle ici. Ne pas supprimer ce fichier ni
   la ligne qui le charge dans les gabarits.
   ========================================================================== */

/* ---- 1. LES JETONS ------------------------------------------------------- */
:root {
    --oz-brand:      #173C7A;
    --oz-navy:       #173C7A;
    --oz-navy-deep:  #0F2C5E;
    --oz-navy-soft:  #1E4C94;
    --oz-blue:       #1C55AF;
    --oz-blue-soft:  #EAF0FA;

    --oz-gold:       #E29E33;
    --oz-gold-lt:    #F3D9A9;
    --oz-gold-dk:    #8A5A0B;
    --oz-gold-tint:  #FDF3E2;
    --oz-gold-ink:   #2A1C05;

    --oz-teal:       #2E8C80;
    --oz-teal-tint:  #E3F3F1;
    --oz-teal-dk:    #1E6B61;
    --oz-green:      #1E7A55;
    --oz-green-dk:   #17603F;
    --oz-red:        #B3261E;

    --oz-ink:        #13284B;
    --oz-ink-2:      #34445F;
    --oz-muted:      #5B6A82;
    --oz-muted-2:    #6B7A90;
    --oz-muted-3:    #8794A8;
    --oz-muted-4:    #B4BECD;

    --oz-bg:         #F4F6FA;
    --oz-card:       #FFFFFF;
    --oz-field:      #FFFFFF;
    --oz-tint:       #F3F6FB;
    --oz-info:       #F0F5FC;
    --oz-info-bd:    #D4E0F3;
    --oz-line:       #EEF1F6;
    --oz-line-2:     #E9EDF3;
    --oz-border:     #E3E8F0;
    --oz-border-2:   #D5DCE7;

    --oz-sh-1: 0 1px 2px rgba(15,44,94,.06), 0 1px 1px rgba(15,44,94,.04);
    --oz-sh-2: 0 4px 16px rgba(15,44,94,.08), 0 1px 3px rgba(15,44,94,.06);
    --oz-sh-3: 0 18px 50px rgba(11,33,72,.20);
    --oz-sh-gold: 0 1px 2px rgba(138,90,11,.18);
    --oz-ring: 0 0 0 3px rgba(28,85,175,.16);

    --oz-r-xs: 5px;
    --oz-r-sm: 8px;
    --oz-r-md: 12px;
    --oz-r-lg: 14px;

    --oz-rail:    244px;
    --oz-bandeau: 62px;
    --oz-degrade: linear-gradient(120deg, #0B2148 0%, #0F2C5E 40%, #173C7A 100%);
}
body { -webkit-font-smoothing: antialiased; }
::selection { background: rgba(226,158,51,.28); }
:focus-visible { outline: 2px solid var(--oz-gold); outline-offset: 2px; }

/* ---- 2. LE BANDEAU : celui de l'annuaire -------------------------------- */
.ez-top {
    position: sticky; top: 0; z-index: 40;
    background: var(--oz-degrade);
    box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(11,33,72,.16);
}
.ez-top::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: linear-gradient(90deg, var(--oz-gold), rgba(226,158,51,.12));
}
.ez-top-inner { min-height: var(--oz-bandeau); padding: 0 22px; }
.ez-brand img { height: 30px; width: auto; }
.ez-space-name {
    font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: #fff;
    padding-left: 16px; margin-left: 2px; border-left: 1px solid rgba(255,255,255,.22);
    opacity: 1;
}
.ez-compte {
    padding: 3px 14px 3px 3px; border-radius: 999px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    transition: background .15s;
}
.ez-compte:hover { background: rgba(255,255,255,.14); }
.ez-compte-med { width: 32px; height: 32px; font-size: 12px; }
.ez-compte-nom { font-size: 13px; }
.ez-compte-role { font-size: 10px; opacity: .65; }
.ez-out {
    background: transparent; color: #fff;
    border: 1px solid rgba(255,255,255,.28); border-radius: 8px;
    padding: 7px 13px; font-size: 12.5px; font-weight: 600;
}
.ez-out:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); }

/* ---- 3. LE RAIL DE NAVIGATION ------------------------------------------ */
.ez-tabs {
    top: calc(var(--oz-bandeau) + 2px);
    height: calc(100vh - var(--oz-bandeau) - 2px);
    background: #fff; border-right: 1px solid var(--oz-border);
}
.ez-tabs-inner { padding: 18px 12px 24px; gap: 3px; }
.ez-tabs-inner::before {
    content: "Navigation"; display: block;
    padding: 0 12px 8px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--oz-muted-3);
}
.ez-tab {
    padding: 9px 12px; border-radius: 8px;
    font-size: 13.5px; font-weight: 550; color: var(--oz-ink-2);
}
.ez-tab::before { opacity: .6; }
.ez-tab:hover { background: var(--oz-tint); color: var(--oz-ink); }
.ez-tab.on {
    background: var(--oz-blue-soft); color: var(--oz-navy); font-weight: 650;
    box-shadow: inset 3px 0 0 var(--oz-gold);
}
.ez-tab.on::before { opacity: 1; color: var(--oz-navy); }
.ez-tab-count { background: var(--oz-gold); color: var(--oz-gold-ink); font-size: 10.5px; line-height: 17px; padding: 0 7px; }

/* ---- 4. LA PAGE ET SON EN-TETE ----------------------------------------- */
body.ez { background: var(--oz-bg); color: var(--oz-ink); }
.ez-page { padding: 26px 28px 48px; }
.ez-fil { font-size: 11px; letter-spacing: .12em; color: var(--oz-muted-3); margin-bottom: 4px; }
.ez-h1, .cp-tete .ez-h1 { font-size: 26px; letter-spacing: -.02em; color: var(--oz-ink); }
.ez-sub, .cp-tete .ez-sub { color: var(--oz-muted-2); }

/* ---- 5. CARTES, BANDES DE CHIFFRES, TUILES ----------------------------- */
.ez-card, .tb-kpi, .ez-stats, .pz-tuile {
    border-radius: var(--oz-r-md); border-color: var(--oz-border); box-shadow: var(--oz-sh-1);
}
.ez-card { overflow: hidden; }
.ez-card-head { padding: 15px 20px; font-size: 15px; font-weight: 650; color: var(--oz-ink); }
.ez-stat { padding: 16px 20px 15px 22px; }
.ez-stat b { font-size: 24px; color: var(--oz-ink); }
.ez-stat span { color: var(--oz-muted-2); }
.ez-stat::before { top: 14px; bottom: 14px; border-radius: 2px; }
.tb-kpi b { color: var(--oz-ink); }
.tb-kpi-fort { border-color: var(--oz-gold-lt); box-shadow: inset 3px 0 0 var(--oz-gold), var(--oz-sh-1); }
.ez-count, .ez-chip { background: var(--oz-tint); color: var(--oz-muted); }

/* ---- 6. LES TABLEAUX : tete grise claire, lignes aerees ---------------- */
.ez-table thead th, .ez-carte-liste .ez-table thead th, .pz-tab thead th {
    background: #F8FAFC; color: var(--oz-muted-2);
    font-size: 11px; font-weight: 650; letter-spacing: .05em;
    border-bottom: 1px solid var(--oz-border);
}
.ez-table tbody td { padding: 11px 14px; border-bottom-color: var(--oz-line); color: var(--oz-ink-2); }
.ez-table tbody tr { transition: background .08s; }
.ez-table tbody tr:hover { background: #F6F9FD; }
.ez-ref { color: var(--oz-blue); font-weight: 650; }
.ez-c-qui a { color: var(--oz-ink); }

/* ---- 7. LES PASTILLES D'ETAT ------------------------------------------- */
.ez-pill { padding: 2px 9px; font-size: 11.5px; line-height: 18px; font-weight: 600; }
.ez-pill .ez-pill-pt { width: 6px; height: 6px; }

/* ---- 8. LES BOUTONS : memes formes partout ----------------------------- */
.ez-btn, .oz-btn {
    border-radius: 8px; font-weight: 600; font-size: 13px;
    transition: background .12s, border-color .12s, box-shadow .12s, color .12s;
}
.ez-btn { box-shadow: var(--oz-sh-1); }
.ez-btn:hover { border-color: var(--oz-border-2); background: #FBFCFE; }
.ez-btn-primary, .ez-btn-primaire, .cp-tete .ez-btn-primaire, .oz-btn-primary {
    background: var(--oz-navy); border-color: var(--oz-navy); color: #fff; background-image: none;
}
.ez-btn-primary:hover, .ez-btn-primaire:hover, .oz-btn-primary:hover { background: var(--oz-navy-deep); border-color: var(--oz-navy-deep); }
.ez-btn-gold, .oz-btn-gold {
    background: var(--oz-gold); border-color: var(--oz-gold); color: var(--oz-gold-ink);
    background-image: none; box-shadow: var(--oz-sh-gold); font-weight: 650;
}
.ez-btn-gold:hover, .oz-btn-gold:hover { background: #D69227; border-color: #D69227; }
.ez-btn-ghost, .oz-btn-ghost, .oz-btn-secondary { background: #fff; color: var(--oz-ink-2); border: 1px solid var(--oz-border); box-shadow: var(--oz-sh-1); }
.oz-btn:hover { transform: none; }
.ez-btn:disabled, .ez-btn[disabled], .oz-btn:disabled { opacity: .5; box-shadow: none; }

/* ---- 9. LES CHAMPS ------------------------------------------------------ */
.oz-input, .oz-select, .oz-textarea, .ez-filter-q, .ez-date,
.ez-form input[type="text"], .ez-form input[type="email"], .ez-form input[type="tel"],
.ez-form input[type="password"], .ez-form input[type="number"], .ez-form select,
.ez-form textarea, .ez-filter select {
    border: 1px solid var(--oz-border-2); border-radius: 8px; background: #fff;
    font-size: 13.5px; min-height: 36px;
}
.oz-input:focus, .oz-select:focus, .oz-textarea:focus, .ez-filter-q:focus, .ez-date:focus,
.ez-form input:focus, .ez-form select:focus, .ez-form textarea:focus, .ez-filter select:focus {
    border-color: var(--oz-blue); box-shadow: var(--oz-ring);
}

/* ---- 10. PAGINATION ET MESSAGES ---------------------------------------- */
/* L'ambre reste reserve a l'action principale : la page courante passe au bleu nuit. */
.ez-page-on { background: var(--oz-navy); border-color: var(--oz-navy); color: #fff; }
.ez-page-lien, .ez-page-on { border-radius: 8px; }
.ez-msg { border-radius: 10px; }

/* ---- 11. LE PARCOURS DE SOUSCRIPTION ------------------------------------
   Meme bandeau sombre en tete de colonne que le back office, logo en blanc,
   meme rail clair dessous : on ne change plus de site en ouvrant un dossier. */
.oz-sidebar { background: #fff; border-right: 1px solid var(--oz-border); box-shadow: none; }
.oz-sidebar-header {
    background: var(--oz-degrade); border-bottom: 0; position: relative;
    padding: 18px 20px 16px;
}
.oz-sidebar-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, var(--oz-gold), rgba(226,158,51,.12));
}
.oz-sidebar-header .oz-logo-img { filter: brightness(0) invert(1); height: 36px; }
.oz-fund-badge {
    background: rgba(226,158,51,.16); color: #F6D7A2; border: 1px solid rgba(226,158,51,.4);
    border-radius: 999px; letter-spacing: .08em;
}
.oz-nav li a { border-radius: 8px; }
.oz-nav li.current a { background: var(--oz-blue-soft); box-shadow: inset 3px 0 0 var(--oz-gold); border-color: transparent; }
.oz-nav li.current .oz-dot { background: var(--oz-navy); color: #fff; }
.oz-nav li.done .oz-dot { background: var(--oz-green); color: #fff; }
.oz-nav li.current .oz-nav-text { color: var(--oz-navy); font-weight: 650; }
.oz-nav li.done .oz-nav-text { color: var(--oz-ink-2); }
.oz-main { background: var(--oz-bg); }
.oz-step-number { color: var(--oz-gold-dk); letter-spacing: .14em; }
.oz-step-title { color: var(--oz-ink); letter-spacing: -.02em; }
.oz-card, .oz-panel, .oz-sim { border-radius: var(--oz-r-md); border: 1px solid var(--oz-border); box-shadow: var(--oz-sh-1); }
.oz-actions { border-radius: var(--oz-r-md); }
.oz-pour { border-radius: 10px; }

/* ---- 13. HARMONISATION ENTRE LES PAGES ---------------------------------- */
/* Comptes : meme titre de carte, meme tableau que les autres listes */
.cp-carte { border-radius: var(--oz-r-md); box-shadow: var(--oz-sh-1); }
.cp-carte > .ez-card-head { padding: 15px 20px; font-size: 15px; font-weight: 650; }
.cp-carte thead { background: #F8FAFC; }
.cp-carte td { padding: 11px 14px; border-bottom-color: var(--oz-line); }
.cp-carte tbody tr:nth-child(even) { background: transparent; }
.cp-carte tbody tr:hover { background: #F6F9FD; }
.cp-carte .ez-c-qui a { color: var(--oz-ink); font-weight: 650; }
/* L action principale d une page est toujours doree */
.cp-tete .cp-nouveau {
    background: var(--oz-gold); border-color: var(--oz-gold); color: var(--oz-gold-ink);
    box-shadow: var(--oz-sh-gold); font-weight: 650;
}
.cp-tete .cp-nouveau-ouvrir { display: inline-flex; align-items: center; gap: 6px; }
.cp-tete .cp-nouveau:hover { background: #D69227; border-color: #D69227; }
/* Bouton dans un titre de carte : discret et range a droite */
.ez-card-head > .ez-btn-sm:last-child { margin-left: auto; }
.ez-card-head > .ez-btn-primary.ez-btn-sm {
    background: #fff; color: var(--oz-navy); border: 1px solid var(--oz-border-2); box-shadow: var(--oz-sh-1);
}
.ez-card-head > .ez-btn-primary.ez-btn-sm:hover { background: var(--oz-blue-soft); border-color: var(--oz-blue-soft); }

/* Dossier : respiration entre la carte des documents et la grille du dessous */
.ez-page > .ez-card + .ez-grid { margin-top: 20px; }
/* Une pastille dans une cellule garde sa largeur naturelle */
.ez-table td > .ez-pill, .ez-ligne-txt > .ez-pill { align-self: flex-start; width: fit-content; }

/* ---- 12. RESPIRATION SUR PETIT ECRAN ----------------------------------- */
@media (max-width: 1100px) {
    .ez-tabs { top: auto; height: auto; }
    .ez-tabs-inner::before { display: none; }
    .ez-tab.on { box-shadow: inset 0 -2px 0 var(--oz-gold); }
    .ez-page { padding: 18px 16px 40px; }
}
@media (max-width: 760px) {
    .ez-top { position: static; }
    .ez-space-name { display: none; }
}

/* =============================================================================
   v181 : RETOURS DU 09/11 SUR LA v180
   ========================================================================== */

/* ---- 15. LE VRAI LOGO, EN COULEUR, SUR FOND BLANC ------------------------
   Le logo OSEOM n est plus passe en blanc : il garde ses couleurs (le globe
   bleu), sur une zone blanche alignee sur la colonne de navigation. */
.ez-top-inner { padding-left: 0; }
.ez-brand {
    align-self: stretch; display: flex; align-items: center;
    width: var(--oz-rail); flex: 0 0 var(--oz-rail); box-sizing: border-box;
    padding: 0 22px; background: #fff;
    border-right: 1px solid var(--oz-border);
}
.ez-brand img { height: 34px; width: auto; filter: none; }
.ez-space-name { border-left: 0; padding-left: 22px; margin-left: 0; }
@media (max-width: 1100px) {
    .ez-brand { width: auto; flex: 0 0 auto; padding: 0 16px; }
    .ez-space-name { padding-left: 16px; }
}
.oz-sidebar-header { background: #fff; padding: 22px 20px 18px; }
.oz-sidebar-header .oz-logo-img { filter: none; height: 44px; }
.oz-fund-badge {
    background: var(--oz-blue-soft); color: var(--oz-navy);
    border: 1px solid var(--oz-info-bd);
}

/* ---- 16. CABINET : LA MEME BANDE DE CHIFFRES QUE LES SOUSCRIPTIONS ------- */
.ez-stats.pz-tuiles { display: flex; flex-wrap: wrap; gap: 0; }
.pz-tuiles > .pz-tuile {
    flex: 1 1 0; min-width: 150px;
    padding: 15px 18px 15px 20px;
    background: none; border: 0; border-right: 1px solid var(--oz-line);
    border-radius: 0; box-shadow: none; overflow: visible;
}
.pz-tuiles > .pz-tuile:last-child { border-right: 0; }
.pz-tuiles > .pz-tuile::before {
    content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
    width: 3px; background: var(--oz-muted-4);
}
.pz-tuiles > .pz-tuile.vert::before  { background: var(--oz-green); }
.pz-tuiles > .pz-tuile.ambre::before { background: var(--oz-gold); }
.pz-tuiles > .pz-tuile.ko::before    { background: var(--oz-red); }
.pz-tuiles .pz-tuile-txt b { font-size: 25px; color: var(--oz-navy-deep); }
.pz-tuiles .pz-tuile.ko .pz-tuile-txt b { color: var(--oz-red); }
.pz-tuiles .pz-tuile-txt span { font-size: 12.5px; color: var(--oz-muted); }

/* ---- 17. CABINET : LE VOLET « MODIFIER LE CABINET » ---------------------- */
.pz-bande { border-radius: var(--oz-r-md); box-shadow: var(--oz-sh-1); }
.pz-bande > summary {
    padding: 14px 20px; font-size: 15px; font-weight: 650; color: var(--oz-ink);
    background: var(--oz-card); border-bottom: 0;
}
.pz-bande > summary:hover { background: var(--oz-tint); }
.pz-bande[open] > summary { border-bottom: 1px solid var(--oz-line); }
.pz-bande-ic {
    display: inline-flex; width: auto; height: auto; border: 0;
    background: none; color: var(--oz-muted-3);
}
.pz-bande-ic .ez-ic { width: 16px; height: 16px; }
.pz-bande > summary::after {
    content: ""; margin-left: auto; width: 7px; height: 7px;
    border-right: 2px solid var(--oz-muted-3); border-bottom: 2px solid var(--oz-muted-3);
    transform: rotate(-45deg); transition: transform .15s;
}
.pz-bande[open] > summary::after { transform: rotate(45deg); }
.pz-bande-corps {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 0;
}
.pz-bande-corps > form.ez-form {
    display: flex; flex-direction: column; gap: 14px;
    max-width: none; padding: 20px 22px 22px;
    margin: 0 !important; border-top: 0 !important;
}
.pz-bande-corps > form.ez-form + form.ez-form {
    padding-top: 20px !important; border-left: 1px solid var(--oz-line);
}
.pz-bande-corps > form.ez-form::before {
    display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--oz-muted-3);
}
.pz-bande-corps > form.ez-form:first-child::before { content: "Identité du cabinet"; }
.pz-bande-corps > form.ez-form + form.ez-form::before { content: "Fonds rattaché"; }
.pz-bande-corps .ez-btn { align-self: flex-start; width: auto; min-width: 0; padding: 0 16px; }
/* v185 : deux colonnes egales, et les deux boutons alignes en bas. */
.pz-bande-corps > form.ez-form > .ez-btn { margin-top: auto; }
.pz-bande-corps > form.ez-form > .ez-f-row,
.pz-bande-corps > form.ez-form > .ez-f { margin-bottom: 6px; }
/* v185 : le volet « Ajouter un CGP / un conseiller » se referme par Annuler. */
.pz-volet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pz-volet-actions .ez-btn { min-width: 0; }
.pz-bande-corps .ez-f-aide { margin-top: 6px; }
@media (max-width: 900px) {
    .pz-bande-corps { grid-template-columns: minmax(0, 1fr); }
    .pz-bande-corps > form.ez-form + form.ez-form {
        border-left: 0; border-top: 1px solid var(--oz-line) !important;
    }
}

/* ---- 18. LES FILS D ACTIVITE : A LA HAUTEUR DE LEUR VOISIN --------------
   Souscriptions (Activite recente) et fiche d une souscription (Historique).
   Sur grand ecran, la carte prend exactement la hauteur de la colonne
   principale et fait defiler sa liste au lieu de s allonger. */
@media (min-width: 1081px) {
    .ez-grid > aside.ez-card:has(> .ez-act) {
        contain: size; align-self: stretch; min-height: 420px;
        display: flex; flex-direction: column;
    }
    .ez-grid > aside.ez-card:has(> .ez-act) > .ez-act {
        flex: 1 1 auto; min-height: 0; overflow-y: auto;
        scrollbar-width: thin; scrollbar-color: var(--oz-border-2) transparent;
    }
}
.ez-act { padding: 4px 0; }
.ez-act-item { padding: 11px 18px 11px 16px; gap: 10px; }
.ez-act-item:hover { background: #F8FAFD; }
.ez-act-dot { margin-top: 5px; }
.ez-act-body { flex: 1 1 auto; }
.ez-act-ligne { display: flex; align-items: baseline; gap: 8px; }
.ez-act-ligne .ez-act-title { flex: 1 1 auto; min-width: 0; }
.ez-act-title { font-size: 13px; font-weight: 600; color: var(--oz-ink); line-height: 1.35; }
.ez-act-quand {
    flex: 0 0 auto; font-size: 11.5px; color: var(--oz-muted-3);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ez-act-meta { font-size: 12px; color: var(--oz-muted-2); line-height: 1.45; }
.ez-act-ref {
    display: inline-block; margin-top: 6px; padding: 1px 8px;
    border-radius: 999px; background: var(--oz-blue-soft); color: var(--oz-navy);
    font-size: 11.5px; font-weight: 650; letter-spacing: .02em; text-decoration: none;
}
.ez-act-ref:hover { background: #DCE6F6; }

/* ---- 19. DOCUMENTS JUSTIFICATIFS : UN DEPOT QUI SE VOIT -------------------
   Vide : une zone pointillee claire. Deposee : une carte verte, la coche
   verte, le nom du fichier, Remplacer a droite ; en dessous, la date, l etat
   et un vrai bouton Voir le document. Les !important repondent a ceux du
   bloc <style> de _SubscriptionLayout. */
.oz-upload {
    border: 1.5px dashed var(--oz-border-2); border-radius: var(--oz-r-md);
    background: #FBFCFE; transition: border-color .15s, background .15s;
}
.oz-upload:hover { border-color: var(--oz-blue); background: var(--oz-info); }
.oz-upload .oz-emoji { color: var(--oz-muted-3); }
.oz-upload-btn {
    border-radius: 8px; font-weight: 600; font-size: 13px;
}
.oz-upload.oz-upload-ok {
    border: 1px solid #BFE3D3; border-radius: var(--oz-r-md) var(--oz-r-md) 0 0;
    background: #F2FAF6; padding: 14px 16px;
}
.oz-upload.oz-upload-ok:hover { background: #EAF6F0; border-color: #A9D8C3; }
.oz-upload.oz-upload-ok:not(:has(~ .oz-depot-pied)) { border-radius: var(--oz-r-md); }
.oz-upload.oz-upload-ok { padding: 12px 14px 12px 16px; }
.oz-upload.oz-upload-ok:has(~ .oz-depot-pied) { margin-bottom: 0; }
.oz-upload.oz-upload-ok .oz-upload-inner {
    flex-direction: row !important; align-items: center !important;
    justify-content: flex-start !important; text-align: left !important; gap: 12px;
    padding: 0 !important;
}
.oz-upload.oz-upload-ok .oz-emoji {
    margin: 0 !important; flex: 0 0 auto;
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex !important; align-items: center; justify-content: center;
    background: var(--oz-green); color: #fff;
}
.oz-upload.oz-upload-ok .oz-emoji .ez-ic,
.oz-upload.oz-upload-ok .oz-emoji svg { width: 17px; height: 17px; stroke-width: 2.4; }
.oz-upload.oz-upload-ok .oz-file-name {
    flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 650; color: var(--oz-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left !important;
}
.oz-upload.oz-upload-ok .oz-upload-btn {
    margin: 0 !important; flex: 0 0 auto;
    background: #fff; color: var(--oz-ink-2); border: 1px solid var(--oz-border-2);
    box-shadow: var(--oz-sh-1); padding: 7px 14px;
}
.oz-depot-pied {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
    margin: 0 !important; padding: 10px 16px;
    border: 1px solid #BFE3D3; border-top: 0;
    border-radius: 0 0 var(--oz-r-md) var(--oz-r-md);
    background: #fff; font-size: 12.5px; color: var(--oz-muted-2);
}
.oz-depot-pied::before { display: none !important; }
.oz-depot-etat {
    display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
    background: var(--oz-gold-tint); color: var(--oz-gold-dk); font-size: 11.5px; font-weight: 600;
}
.oz-depot-voir {
    margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px; border-radius: 8px;
    background: #fff; border: 1px solid var(--oz-border-2); box-shadow: var(--oz-sh-1);
    color: var(--oz-navy); font-weight: 600; font-size: 12.5px; text-decoration: none;
}
.oz-depot-voir:hover { background: var(--oz-blue-soft); border-color: var(--oz-info-bd); }
.oz-depot-voir svg { width: 15px; height: 15px; }

/* ---- 20. FICHE D UNE SOUSCRIPTION : LES ENCARTS ALIGNES ------------------ */
.ez-encarts { display: flex; flex-direction: column; gap: 12px; }
.ez-encarts > .ez-alerte-points { margin: 0; border-left-width: 3px; border-radius: 10px; }
.ez-encarts > .ez-msg { margin: 0; }

/* ---- 21. LE BANDEAU DU HAUT (PETIT ECRAN SEULEMENT DEPUIS LA v182) --------
   Sur grand ecran il disparait : le logo, l espace et le compte passent dans
   le rail (section 25). Sous 1100 px il reste, marine uni, sans decor. */
.ez-top { background: var(--oz-degrade); }
.ez-brand { justify-content: center; box-shadow: 0 2px 0 #fff; position: relative; z-index: 1; }

/* ---- 22. LE RAIL : RUBRIQUES, ETAT ACTIF, PIED ------------------------- */
.ez-tabs { display: flex; flex-direction: column; }
.ez-tabs-inner { flex: 0 0 auto; width: 100%; margin: 0; box-sizing: border-box; padding: 14px 12px 12px; gap: 2px; }
.ez-tabs-inner::before { content: none; display: none; }
.ez-tabs-titre {
    padding: 16px 12px 7px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--oz-muted-3);
}
.ez-tabs-inner > .ez-tabs-titre:first-child { padding-top: 6px; }
.ez-tab {
    padding: 10px 12px; border-radius: 10px;
    font-size: 13.5px; font-weight: 550; color: var(--oz-ink-2);
}
.ez-tab:hover { background: var(--oz-tint); color: var(--oz-navy); }
.ez-tab.on {
    background: linear-gradient(90deg, #E6EEFA 0%, #F1F5FC 100%);
    color: var(--oz-navy); font-weight: 650;
    box-shadow: inset 3px 0 0 var(--oz-gold);
}
@media (max-width: 1100px) {
    .ez-tabs-titre { display: none; }
    .ez-tab.on { background: var(--oz-blue-soft); }
}

/* ---- 23. LES FILS D ACTIVITE : SANS FIL NI PASTILLE ---------------------
   Le trait vertical et les points verts de la v170 partent : une liste
   simple, separee par des filets, avec une vraie marge a gauche. */
.ez-act { padding: 0; }
.ez-act-item {
    margin-left: 0; border-left: 0;
    padding: 13px 18px; border-bottom: 1px solid var(--oz-line);
}
.ez-act-item:last-child { border-bottom: 0; border-left: 0; }
.ez-act-dot { display: none; }
.ez-act-meta { margin-top: 2px; }

/* ---- 24. LES LISTES DEROULANTES --------------------------------------------
   Fermee : un chevron dessine, partout. Ouverte : dans les navigateurs qui
   savent la dessiner (Chrome, Edge recents), une vraie liste aux angles
   arrondis, ombree, l option choisie marquee. Ailleurs, la liste native du
   systeme, sans rien casser. */
select:not([multiple]):not([size]) {
    -webkit-appearance: none; appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6A82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 15px 15px;
    cursor: pointer;
}
@supports (appearance: base-select) {
    select:not([multiple]):not([size]) {
        appearance: base-select;
        display: inline-flex; align-items: center;
        background-image: none; padding-right: 12px;
    }
    select:not([multiple]):not([size])::picker-icon {
        content: ""; width: 15px; height: 15px; margin-left: auto;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6A82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
        transition: transform .15s;
    }
    select:not([multiple]):not([size]):open::picker-icon { transform: rotate(180deg); }
    select:not([multiple]):not([size])::picker(select) {
        appearance: base-select;
        margin-top: 6px; padding: 6px;
        background: #fff; border: 1px solid var(--oz-border);
        border-radius: 12px; box-shadow: 0 16px 40px rgba(11, 33, 72, .16), 0 2px 6px rgba(11, 33, 72, .06);
        max-height: 320px; min-width: anchor-size(width);
    }
    select:not([multiple]):not([size]) option {
        display: flex; align-items: center; gap: 10px;
        padding: 9px 12px; border-radius: 8px;
        font-size: 13.5px; color: var(--oz-ink-2); cursor: pointer;
    }
    select:not([multiple]):not([size]) option:hover,
    select:not([multiple]):not([size]) option:focus-visible {
        background: var(--oz-tint); color: var(--oz-navy); outline: none;
    }
    select:not([multiple]):not([size]) option:checked {
        background: var(--oz-blue-soft); color: var(--oz-navy); font-weight: 650;
    }
    select:not([multiple]):not([size]) option::checkmark {
        order: 1; margin-left: auto; content: ""; width: 14px; height: 14px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E29E33' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 7'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    }
    select:not([multiple]):not([size]) optgroup { font-weight: 700; color: var(--oz-muted-3); font-size: 11px; }
}

/* =============================================================================
   v182 : LE RAIL DEVIENT LA NAVIGATION, LE TITRE PASSE EN BANDEAU MARINE
   ========================================================================== */

/* ---- 25. LE RAIL PORTE LE LOGO ET LE COMPTE (GRAND ECRAN) ----------------
   Le bandeau du haut disparait au dessus de 1100 px. Le rail prend toute la
   hauteur de l ecran : le logo en haut, sur le meme blanc que la
   navigation, le compte et la deconnexion en bas. Rien ne defile avec la
   page : le logo reste visible quelle que soit la longueur de l ecran. */
.ez-rail-tete, .ez-rail-compte { display: none; }
@media (min-width: 1101px) {
    :root { --oz-bandeau: 0px; }
    .ez-top { display: none; }
    .ez-shell { min-height: 100vh; }
    .ez-tabs {
        top: 0; height: 100vh; background: #fff;
        border-right: 1px solid var(--oz-border);
    }
    .ez-rail-tete {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
        flex: 0 0 auto; height: var(--oz-tete); box-sizing: border-box; padding: 0 16px;
        border-bottom: 1px solid var(--oz-line);
        text-decoration: none;
    }
    .ez-rail-tete img { display: block; height: 40px; width: auto; }
    .ez-rail-espace {
        font-size: 10px; font-weight: 700; letter-spacing: .14em;
        text-transform: uppercase; color: var(--oz-gold-dk);
    }
    .ez-rail-compte {
        display: flex; flex-direction: column; gap: 8px;
        margin-top: auto; flex: 0 0 auto;
        padding: 12px 12px 16px; border-top: 1px solid var(--oz-line);
    }
    .ez-rail-profil {
        display: flex; align-items: center; gap: 10px;
        padding: 8px 10px; border-radius: 10px;
        color: var(--oz-ink); text-decoration: none;
        transition: background .12s;
    }
    .ez-rail-profil:hover { background: var(--oz-tint); }
    .ez-rail-profil .ez-compte-med { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
    .ez-rail-qui { display: flex; flex-direction: column; min-width: 0; }
    .ez-rail-nom {
        font-size: 13px; font-weight: 650; color: var(--oz-ink);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ez-rail-role {
        font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
        text-transform: uppercase; color: var(--oz-muted-3);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ez-rail-compte form { margin: 0; }
    .ez-rail-sortie {
        width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        min-height: 36px; padding: 0 12px; border-radius: 8px;
        background: #fff; border: 1px solid var(--oz-border-2); box-shadow: var(--oz-sh-1);
        color: var(--oz-ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    }
    .ez-rail-sortie:hover { background: var(--oz-tint); color: var(--oz-navy); }
    .ez-rail-sortie svg { width: 15px; height: 15px; }
}

/* ---- 26. LE BANDEAU DE PAGE ------------------------------------------------
   Le fil, le titre, la phrase et les actions de la page, sur le marine. Le
   bloc est forme au chargement par le script de _EspaceLayout, qui deplace
   .ez-fil et .ez-head dans .ez-bandeau-page : aucune page n est retouchee.
   Les couleurs sont posees sur les elements nommes, jamais heritees : les
   volets de Comptes et de Fonds vivent dans .ez-head et gardent les leurs. */
.ez-page { --pg-t: 26px; --pg-x: 28px; padding: var(--pg-t) var(--pg-x) 48px; }
@media (max-width: 1100px) { .ez-page { --pg-t: 18px; --pg-x: 16px; padding: var(--pg-t) var(--pg-x) 40px; } }
/* v183 : le bandeau a exactement la hauteur du bloc du logo, pour que les
   deux bas s alignent d un bord a l autre de l ecran. */
:root { --oz-tete: 104px; }
.ez-bandeau-page {
    margin: calc(-1 * var(--pg-t)) calc(-1 * var(--pg-x)) 24px;
    min-height: var(--oz-tete); box-sizing: border-box;
    padding: 14px var(--pg-x);
    display: flex; flex-direction: column; justify-content: center;
    background: var(--oz-degrade);
}
.ez-bandeau-page .ez-fil {
    margin: 0 0 6px; color: rgba(255, 255, 255, .6);
}
.ez-bandeau-page .ez-head { margin: 0; align-items: center; }
.ez-bandeau-page .ez-h1,
.ez-bandeau-page .cp-tete .ez-h1 { color: #fff; }
.ez-bandeau-page .ez-sub,
.ez-bandeau-page .cp-tete .ez-sub { color: rgba(255, 255, 255, .72); }
.ez-bandeau-page .ez-sub .ez-ic { color: rgba(255, 255, 255, .6); }
.ez-bandeau-page .pz-tete-ic { display: none; }
/* Les actions secondaires passent en verre clair ; la doree reste doree. */
.ez-bandeau-page .ez-head-actions > .ez-btn:not(.ez-btn-gold):not(.ez-btn-ok),
.ez-bandeau-page .ez-head-actions > form > .ez-btn:not(.ez-btn-gold):not(.ez-btn-ok),
.ez-bandeau-page .ez-head-actions > .pz-pil {
    background: rgba(255, 255, 255, .08); color: #fff;
    border: 1px solid rgba(255, 255, 255, .24); box-shadow: none;
}
.ez-bandeau-page .ez-head-actions > .ez-btn:not(.ez-btn-gold):not(.ez-btn-ok):hover,
.ez-bandeau-page .ez-head-actions > form > .ez-btn:not(.ez-btn-gold):not(.ez-btn-ok):hover,
.ez-bandeau-page .ez-head-actions > .pz-pil:hover {
    background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4);
}
.ez-bandeau-page .ez-head-actions > .ez-danger,
.ez-bandeau-page .ez-head-actions > form > .ez-danger { color: #FFC2BA; }
.ez-bandeau-page .ez-head-actions > .cp-compteur {
    background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .78);
}
.ez-bandeau-page .ez-head-actions > .cp-compteur span { color: rgba(255, 255, 255, .78); }
.ez-bandeau-page .ez-head-actions > .cp-compteur b { color: #fff; }
.ez-bandeau-page .ez-head-actions > .cp-compteur .ez-ic { color: var(--oz-gold); }

/* =============================================================================
   v184
   ========================================================================== */

/* ---- 27. LE BANDEAU SANS FIL D ARIANE ----------------------------------------
   Le petit libelle au dessus du titre redisait le titre : il part. Le
   bandeau garde la hauteur du bloc du logo et centre son titre. */
.ez-bandeau-page .ez-fil { display: none; }

/* ---- 28. FONDS ET TAUX : UNE GRILLE QUI SE SAISIT D UN COUP D OEIL -----------
   Une ligne par fonds, sur deux lignes de texte : le code, puis le nom et le
   nombre de cabinets. La courbe et la pastille « actif » (sur chaque ligne,
   elle ne disait rien) partent ; « inactif » et « agrément » restent. Les
   cases passent de 50 a 40 px. Sur ecran tactile, les tailles au doigt
   d espace.css restent en vigueur. */
@media (hover: hover) and (min-width: 761px) {
    .fd-spark { display: none; }
    /* v185 : le nom complet se lit. La colonne s elargit, le nombre de
       cabinets passe en haut a droite, a cote du code. */
    .fd-grille td.fd-fonds-cell { padding: 7px 14px 7px 18px; white-space: nowrap; min-width: 300px; }
    .fd-code { font-size: 13.5px; line-height: 1.3; padding-right: 86px; }
    .fd-nom { display: block; max-width: none; margin-top: 1px; font-size: 11.5px; }
    .fd-meta {
        position: absolute; top: 8px; right: 14px;
        display: inline-flex; gap: 4px; margin: 0;
    }
    .fd-meta .ez-pill { font-size: 10px; padding: 0 7px; line-height: 17px; }
    .fd-meta .ez-pill.ok { display: none; }
    .fd-cellule { min-height: 40px; }
    .fd-cellule input { padding: 9px 3px 9px 0; font-size: 13.5px; }
    .fd-grille th { padding: 9px 6px 8px; }
}

/* ---- 29. FONDS ET TAUX : RATTACHER TOUS LES CABINETS A UN FONDS -----------
   Deux phrases a gauche ; a droite, dans un encart teinte, le choix du fonds
   et le bouton d apercu. L apercu, quand il s affiche, prend toute la largeur. */
.fd-app-corps {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px;
    padding: 20px 24px 22px;
}
.fd-app-texte { flex: 1 1 360px; min-width: 0; }
.fd-app-phrase { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--oz-ink-2); max-width: 640px; }
.fd-app-note { display: block; margin: 8px 0 0; }
.fd-app-note::before { display: none; }
.fd-app-note a { color: var(--oz-navy); font-weight: 600; }
.fd-app-action {
    flex: 0 1 auto; padding: 14px 16px;
    background: var(--oz-tint); border: 1px solid var(--oz-border); border-radius: var(--oz-r-md);
}
.fd-app-action:has(ul, .ez-msg, .ez-acces-ligne) { flex-basis: 100%; }
.fd-app-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.fd-app-form label {
    flex-basis: 100%; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--oz-muted-3);
}
.fd-app-form select { flex: 1 1 300px; width: auto; min-width: 260px; background-color: #fff; }
.fd-app-form .ez-btn { flex: 0 0 auto; }

/* ---- 30. FICHE : L ACCES DE L INVESTISSEUR ------------------------------------
   Un encart a part entiere, aligne sur les encadres du dessus : le titre,
   la situation en une phrase, puis le bouton et sa note sur une ligne. */
.ez-card > .ez-acces {
    margin: 4px 18px 18px; padding: 16px 18px 18px;
    border: 1px solid var(--oz-border); border-radius: var(--oz-r-md);
    background: #FAFBFD;
}
.ez-card > .ez-acces .ez-acces-titre {
    display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--oz-muted-3);
}
.ez-card > .ez-acces .ez-acces-titre::before {
    content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
    background: var(--oz-gold);
}
.ez-card > .ez-acces .ez-acces-dit { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--oz-ink-2); }
.ez-card > .ez-acces .ez-acces-dit b { color: var(--oz-ink); font-weight: 650; }
.ez-card > .ez-acces form { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.ez-card > .ez-acces .ez-acces-note { margin: 0; font-size: 12.5px; color: var(--oz-muted-2); }
.ez-card > .ez-acces > label { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--oz-ink-2); }
.ez-card > .ez-acces .ez-acces-ligne .oz-input { background: #fff; font-size: 12.5px; }

/* ---- 31. NOUVELLE SOUSCRIPTION ------------------------------------------------
   Le formulaire a gauche, en blocs numerotes ; a droite, le parcours qui
   suivra. Les deux cartes de choix portent un vrai bouton radio dessine. */
.nv-grille {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px; align-items: stretch;
}
/* v189 : la carte du parcours a la hauteur du formulaire, ses etapes
   reparties sur toute cette hauteur. */
.nv-carte, .nv-parcours { margin: 0; }
.nv-parcours { display: flex; flex-direction: column; }
.nv-pas { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
@media (max-width: 1180px) {
    .nv-pas { justify-content: flex-start; }
}
@media (max-width: 1180px) { .nv-grille { grid-template-columns: minmax(0, 1fr); } }
#ez-form-nouveau { counter-reset: nvetape; max-width: none; padding: 22px 26px 24px; gap: 16px; }
.nv-etape {
    counter-increment: nvetape;
    display: flex; align-items: center; gap: 10px; margin: 2px 0 -2px;
    font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--oz-muted-2);
}
.nv-etape::before {
    content: counter(nvetape);
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--oz-navy); color: #fff; font-size: 11px; letter-spacing: 0;
}
.nv-etape::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--oz-line); }
.nv-identite { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 190px; }
@media (max-width: 760px) { .nv-identite { grid-template-columns: minmax(0, 1fr); } }
#ez-form-nouveau .ez-mode-pick label {
    position: relative; padding: 16px 16px 16px 48px;
    border-radius: var(--oz-r-md); cursor: pointer;
}
#ez-form-nouveau .ez-mode-pick label::before {
    content: ""; position: absolute; left: 16px; top: 18px;
    width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box;
    border: 2px solid var(--oz-border-2); background: #fff;
}
#mode-n:checked ~ .ez-mode-pick label[for="mode-n"]::before,
#mode-e:checked ~ .ez-mode-pick label[for="mode-e"]::before {
    border-color: var(--oz-gold);
    background: radial-gradient(circle, var(--oz-gold) 0 4px, #fff 4.5px);
}
#ez-form-nouveau .ez-form-actions {
    margin-top: 6px !important; padding-top: 18px;
    border-top: 1px solid var(--oz-line);
}
.nv-parcours-intro { margin: 0; padding: 14px 18px 4px; font-size: 13px; line-height: 1.55; color: var(--oz-muted); }
.nv-pas { list-style: none; margin: 0; padding: 8px 18px 18px; }
.nv-pas li {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--oz-line);
    font-size: 13.5px; color: var(--oz-ink-2);
}
.nv-pas li:last-child { border-bottom: 0; }
.nv-pas-num {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--oz-blue-soft); color: var(--oz-navy);
    font-size: 11.5px; font-weight: 700;
}
.nv-pas li.fait .nv-pas-num { background: var(--oz-green); color: #fff; }
.nv-pas li.fait .nv-pas-titre { color: var(--oz-muted-2); }

/* ---- 32. SOUSCRIPTIONS : FILTRE CABINET ET PORTEE --------------------------
   La recherche cede de la place au filtre par cabinet ; la phrase de portee
   se lit sous les filtres, dans la carte, sur toute sa largeur. */
@media (min-width: 761px) {
    .ez-filter #sg-q { flex: 1 1 200px; min-width: 180px; max-width: 360px; }
    .ez-filter select[name="Cabinet"] { max-width: 240px; }
}
.ez-portee.ez-portee-liste {
    margin: 0; padding: 8px 18px;
    background: #FFFAF0; border: 0; border-top: 1px solid var(--oz-line);
    border-radius: 0; font-size: 12.5px; color: var(--oz-gold-dk);
}
.ez-portee.ez-portee-liste + .ez-portee.ez-portee-liste { margin-top: 0; }
.ez-portee.ez-portee-liste.ez-portee-nb { background: var(--oz-tint); color: var(--oz-muted); }

/* ---- 33. LISTE DE CABINETS AVEC RECHERCHE (v190, v191) ---------------------
   Le bouton prend l allure des autres listes ; le volet, celle des listes
   ouvertes de la section 24 : angles arrondis, ombre, coche or. */
.oz-combo-natif { display: none !important; }
.oz-combo-btn {
    display: inline-flex; align-items: center; gap: 8px;
    max-width: 240px; min-height: 36px; padding: 7px 36px 7px 11px;
    font: inherit; font-size: 13px; color: var(--oz-ink); text-align: left;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6A82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 15px 15px no-repeat;
    border: 1px solid var(--oz-border); border-radius: var(--oz-r-sm);
    cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.oz-combo-btn:hover { border-color: var(--oz-gold); }
.oz-combo-btn:focus-visible, .oz-combo-btn[aria-expanded="true"] {
    outline: none; border-color: var(--oz-blue); box-shadow: var(--oz-ring);
}
.oz-combo-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oz-combo-btn.oz-combo-choisi .oz-combo-val { color: var(--oz-navy); font-weight: 600; }
.tb-cmd .oz-combo-btn { min-height: 32px; padding-top: 5px; padding-bottom: 5px; max-width: 220px; }

.oz-combo-volet {
    position: absolute; z-index: 1000; width: max-content; max-width: min(380px, calc(100vw - 16px));
    padding: 6px; background: #fff;
    border: 1px solid var(--oz-border); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(11, 33, 72, .16), 0 2px 6px rgba(11, 33, 72, .06);
}
.oz-combo-volet[hidden] { display: none; }
.oz-combo-q {
    display: block; width: 100%; box-sizing: border-box; margin: 0 0 6px;
    padding: 8px 11px 8px 34px; min-height: 36px;
    font: inherit; font-size: 13px; color: var(--oz-ink);
    background: var(--oz-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 11px center / 15px 15px no-repeat;
    border: 1px solid transparent; border-radius: 8px;
}
.oz-combo-q:focus { outline: none; background-color: #fff; border-color: var(--oz-blue); box-shadow: var(--oz-ring); }
.oz-combo-q::-webkit-search-cancel-button { cursor: pointer; }
.oz-combo-liste {
    list-style: none; margin: 0; padding: 0;
    max-height: 280px; overflow-y: auto; overscroll-behavior: contain;
}
.oz-combo-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px;
    font-size: 13.5px; color: var(--oz-ink-2); cursor: pointer;
}
.oz-combo-opt[hidden] { display: none; }
.oz-combo-opt.est-actif { background: var(--oz-tint); color: var(--oz-navy); }
.oz-combo-opt[aria-selected="true"] { background: var(--oz-blue-soft); color: var(--oz-navy); font-weight: 650; }
.oz-combo-opt[aria-selected="true"]::after {
    content: ""; flex: none; margin-left: auto; width: 14px; height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E29E33' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 7'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.oz-combo-txt { min-width: 0; white-space: pre-wrap; }
.oz-combo-opt mark { background: none; color: var(--oz-navy); font-weight: 700; padding: 0; }
.oz-combo-tous { margin-bottom: 4px; position: relative; }
.oz-combo-tous::before {
    content: ""; position: absolute; left: 8px; right: 8px; bottom: -3px;
    border-bottom: 1px solid var(--oz-line);
}
.oz-combo-vide { margin: 0; padding: 12px; font-size: 13px; color: var(--oz-muted-2); }

/* ---- 34. NOUVELLE SOUSCRIPTION : LE CABINET DE SA DERNIERE SOUSCRIPTION (v192)
   Une phrase sous la recherche dit quel cabinet a ete repris ; elle passe en
   or quand le back office en choisit un autre. */
.nv-porteur-note {
    margin-top: 10px; padding: 9px 12px;
    background: var(--oz-blue-soft); color: var(--oz-navy);
    border-radius: 8px; font-size: 13px; line-height: 1.45;
}
.nv-porteur-note[hidden] { display: none; }
.nv-porteur-note.nv-porteur-autre { background: #FFFAF0; color: var(--oz-gold-dk); }
.nv-autre-cabinet { margin-top: 12px; }

/* ---- 35. LE CALENDRIER DES BORNES DE DATE (v193) ----------------------------
   Meme volet que les listes : angles arrondis, ombre douce. Le jour choisi en
   marine, aujourd hui cercle d or, la plage Du / au teintee. */
.oz-agenda {
    position: absolute; z-index: 1000; width: 284px; box-sizing: border-box;
    padding: 12px; background: #fff;
    border: 1px solid var(--oz-border); border-radius: 14px;
    box-shadow: 0 16px 40px rgba(11, 33, 72, .16), 0 2px 6px rgba(11, 33, 72, .06);
    font-size: 13px; color: var(--oz-ink);
}
.oz-agenda[hidden] { display: none; }
.oz-agenda button { font: inherit; }
.oz-agenda-tete { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.oz-agenda-titre {
    flex: 1; padding: 6px 8px; border: 0; border-radius: 8px; background: none;
    font-size: 14px !important; font-weight: 700; color: var(--oz-navy);
    cursor: pointer; text-transform: capitalize;
}
.oz-agenda-titre:hover { background: var(--oz-tint); }
.oz-agenda-nav {
    width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
    background: center / 16px 16px no-repeat; cursor: pointer;
}
.oz-agenda-nav:hover { background-color: var(--oz-tint); }
.oz-agenda-prec { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173C7A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E"); }
.oz-agenda-suiv { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173C7A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
.oz-agenda-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.oz-agenda-jsem {
    padding: 4px 0 6px; text-align: center;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--oz-muted-2);
}
.oz-agenda-jour {
    position: relative; height: 34px; padding: 0; border: 0; background: none;
    font-variant-numeric: tabular-nums; color: var(--oz-ink-2); cursor: pointer;
    border-radius: 9px;
}
.oz-agenda-jour:hover { background: var(--oz-tint); color: var(--oz-navy); }
.oz-agenda-jour:focus-visible { outline: 2px solid var(--oz-blue); outline-offset: -2px; }
.oz-agenda-jour.hors-mois { color: #B4BDCB; }
.oz-agenda-jour.dans-plage { background: var(--oz-blue-soft); border-radius: 0; color: var(--oz-navy); }
.oz-agenda-jour.est-borne { background: var(--oz-blue-soft); color: var(--oz-navy); font-weight: 700; }
.oz-agenda-jour.est-auj { box-shadow: inset 0 0 0 1.5px var(--oz-gold); font-weight: 700; color: var(--oz-navy); }
.oz-agenda-jour.est-choisi,
.oz-agenda-jour.est-choisi:hover { background: var(--oz-navy); color: #fff; font-weight: 700; box-shadow: none; }
.oz-agenda-vue-mois .oz-agenda-grille { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 0; }
.oz-agenda-mois {
    height: 40px; padding: 0; border: 0; border-radius: 9px; background: none;
    color: var(--oz-ink-2); cursor: pointer;
}
.oz-agenda-mois:hover { background: var(--oz-tint); color: var(--oz-navy); }
.oz-agenda-mois.est-auj { box-shadow: inset 0 0 0 1.5px var(--oz-gold); font-weight: 700; }
.oz-agenda-mois.est-choisi { background: var(--oz-navy); color: #fff; font-weight: 700; box-shadow: none; }
.oz-agenda-pied {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--oz-line);
}
.oz-agenda-lien {
    padding: 6px 10px; border: 0; border-radius: 8px; background: none;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.oz-agenda-effacer { color: var(--oz-muted-2); }
.oz-agenda-auj { color: var(--oz-navy); }
.oz-agenda-lien:hover { background: var(--oz-tint); }

/* ---- 36. COMPTES : « CORRIGER CETTE FICHE » (v193) ----------------------------
   Le declencheur devient une petite pilule ; ouvert, le formulaire tient dans
   une carte de largeur raisonnable, Nom et Telephone cote a cote, Enregistrer
   en bleu. La ligne s'aligne en haut pour que l acces et les actions restent
   en face du nom. */
.pz-corr { margin-top: 8px; }
.pz-corr-tete {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px 4px 9px; list-style: none; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--oz-navy);
    background: var(--oz-tint); border: 1px solid var(--oz-border); border-radius: 999px;
    transition: border-color .15s, background-color .15s;
}
.pz-corr-tete::-webkit-details-marker { display: none; }
.pz-corr-tete::marker { content: ""; }
.pz-corr-tete .ez-ic { width: 13px; height: 13px; }
.pz-corr-tete:hover { border-color: var(--oz-gold); }
.pz-corr-tete:focus-visible { outline: none; box-shadow: var(--oz-ring); }
.pz-corr[open] > .pz-corr-tete { background: var(--oz-blue-soft); border-color: var(--oz-blue-soft); }
.pz-corr-corps {
    margin: 10px 0 2px; max-width: 560px; padding: 16px 18px 14px;
    background: #fff; border: 1px solid var(--oz-border); border-radius: 12px;
    box-shadow: 0 8px 24px rgba(11, 33, 72, .08);
}
.pz-corr-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.pz-corr-corps .ez-f { margin: 0 0 12px; }
.pz-corr-corps .oz-input {
    width: 100%; box-sizing: border-box; margin: 0;
    height: 38px; min-height: 38px; padding: 7px 11px; border-radius: 8px; font-size: 13.5px;
}
.pz-corr-corps .ez-f-aide { margin-top: 6px; }
.pz-corr-actions {
    display: flex; gap: 8px; margin-top: 2px; padding-top: 12px;
    border-top: 1px solid var(--oz-line);
}
.pz-corr-actions .ez-btn { width: auto; flex: 0 0 auto; }
tr:has(> td > .pz-corr[open]) > td { vertical-align: top; }
@media (max-width: 620px) { .pz-corr-grille { grid-template-columns: 1fr; } }

/* ---- 37. LES BORNES DE DATE TIENNENT LEUR DATE (v194) -------------------------
   8,5 em laissaient la date choisie coupee (« 09/11/202 ») une fois le bouton
   du calendrier pose dans le champ. */
.ez-filter .ez-date-boite .ez-date { width: 136px; box-sizing: border-box; }

/* ---- 38. CGP : LES ONGLETS DANS LE BANDEAU (v196) -----------------------------
   Toutes / Mes souscriptions / Conseillers du cabinet choisissent ce que toute
   la page montre : ils passent sur le marine, en verre clair, l onglet choisi
   en blanc. */
.ez-bandeau-page .ez-bascule.ez-bascule-bandeau {
    margin: 0; padding: 3px; gap: 2px; align-self: center;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 11px;
}
.ez-bandeau-page .ez-bascule-bandeau .ez-bascule-b {
    padding: 7px 12px; font-size: 13px; color: rgba(255, 255, 255, .8); background: transparent;
}
.ez-bandeau-page .ez-bascule-bandeau .ez-bascule-b:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.ez-bandeau-page .ez-bascule-bandeau .ez-bascule-b.on {
    background: #fff; color: var(--oz-navy); box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.ez-bandeau-page .ez-bascule-bandeau .ez-bascule-b:focus-visible { outline: 2px solid var(--oz-gold); outline-offset: 1px; }
.ez-bandeau-page .ez-bascule-bandeau .ez-bascule-n { background: rgba(255, 255, 255, .16); color: #fff; }
.ez-bandeau-page .ez-bascule-bandeau .ez-bascule-b.on .ez-bascule-n { background: var(--oz-navy); color: #fff; }

/* ---- 39. TABLEAU DE BORD DU CGP : A RELANCER (v196) ------------------------------ */
.tb-relance-liste { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: auto; }
.tb-relance-l {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 72px; align-items: center; gap: 12px;
    padding: 8px 10px; border-radius: 10px; color: inherit; text-decoration: none;
}
.tb-relance-l:hover { background: var(--oz-tint); }
.tb-relance-qui { display: flex; flex-direction: column; min-width: 0; }
.tb-relance-qui b, .tb-relance-qui small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-relance-qui b { font-size: 13.5px; color: var(--oz-navy); }
.tb-relance-qui small { font-size: 12px; color: var(--oz-muted-2); }
.tb-relance-j {
    justify-self: end; padding: 3px 9px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--oz-tint); color: var(--oz-ink-2); white-space: nowrap;
}
.tb-relance-j.tiede { background: #FFF4E0; color: var(--oz-gold-dk); }
.tb-relance-j.vieux { background: #FDECEA; color: #B42318; }
.tb-relance-vide { margin: 6px 0; font-size: 13px; color: var(--oz-muted-2); }
@media (max-width: 620px) {
    .tb-relance-l { grid-template-columns: minmax(0, 1fr) auto; }
    .tb-relance-l .ez-pill { display: none; }
}

/* ---- 40. TABLEAU DE BORD DU CONSEILLER : DERNIERES SIGNATURES (v198) ------------- */
.tb-signee-l { grid-template-columns: minmax(0, 1fr) auto 86px; }
.tb-signee-montant { font-size: 13.5px; font-weight: 700; color: var(--oz-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-signee-date { justify-self: end; font-size: 12.5px; color: var(--oz-muted-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- 41. LE TOTAL DU GRAPHIQUE SUIT SON TITRE (v199) -----------------------------
   Le compteur et la bascule « 12 mois / Annee » portaient tous deux
   margin-left: auto : l espace libre se partageait entre eux et le total
   flottait au milieu de l en-tete. Il se colle desormais au titre. */
.ez-card-head:has(> .tb-axe) > .ez-count { margin-left: 8px; }

/* ---- 42. LISTE DES SOUSCRIPTIONS : LA DATE DE MISE A JOUR SUR DEUX LIGNES (v200)
   La date, puis l heure en plus petit dessous : la colonne perd un tiers de
   sa largeur et le tableau tient dans sa carte. En fiches (petit ecran), les
   deux restent sur la meme ligne. */
.ez-maj-h { display: block; margin-top: 1px; font-size: 11.5px; color: var(--oz-muted-3); }
@media (max-width: 800px) { .ez-maj-h { display: inline; margin: 0 0 0 6px; } }

/* ---- 43. COLLECTE PAR CGP ET CONSEILLER : QUI EST QUI (v202) ---------------------
   Une etiquette a cote du nom, doree pour le CGP, bleue pour le conseiller,
   et la pastille d initiale du CGP en or. */
.tb-rang-nom:has(> .tb-role) { display: flex; align-items: center; gap: 8px; }
.tb-rang-nom:has(> .tb-role) > b { min-width: 0; }
.tb-role {
    flex: none; padding: 1px 7px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: var(--oz-blue-soft); color: var(--oz-navy);
}
.tb-role.cgp { background: #FDF1DC; color: var(--oz-gold-dk); }
.ez-com-avatar.tb-av-cgp { background: #FDF1DC; color: var(--oz-gold-dk); }

/* ---- 44. LES FILTRES DU MENU (v203) ------------------------------------------------
   Un bloc replie au-dessus de la navigation : Cabinet, CGP, Conseiller,
   Investisseur. Les listes reprennent la recherche de la section 33. Masque
   sous 1100 px, ou le menu devient une bande. */
.ez-fg {
    flex: 0 0 auto; margin: 12px 12px 0;
    background: var(--oz-tint); border: 1px solid var(--oz-border); border-radius: 12px;
}
.ez-fg-tete {
    display: flex; align-items: center; gap: 8px; padding: 9px 12px;
    list-style: none; cursor: pointer;
    font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--oz-muted-3);
}
.ez-fg-tete::-webkit-details-marker { display: none; }
.ez-fg-tete::marker { content: ""; }
.ez-fg-tete::after {
    content: ""; width: 12px; height: 12px; margin-left: auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A90' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
    transition: transform .15s;
}
.ez-fg[open] > .ez-fg-tete::after { transform: rotate(180deg); }
.ez-fg-n {
    display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 999px; background: var(--oz-gold); color: #fff;
    font-size: 11px; letter-spacing: 0;
}
.ez-fg-form { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; }
.ez-fg-l { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.ez-fg-l > span { font-size: 11px; font-weight: 600; color: var(--oz-muted-2); }
.ez-fg .oz-combo-btn, .ez-fg select, .ez-fg-q {
    width: 100%; max-width: none; box-sizing: border-box;
    min-height: 34px; font-size: 13px; background-color: #fff;
}
.ez-fg-q {
    padding: 7px 10px; font: inherit; font-size: 13px; color: var(--oz-ink);
    border: 1px solid var(--oz-border); border-radius: 8px;
}
.ez-fg select { padding: 6px 10px; border: 1px solid var(--oz-border); border-radius: 8px; color: var(--oz-ink); }
.ez-fg-q:focus { outline: none; border-color: var(--oz-blue); box-shadow: var(--oz-ring); }
.ez-fg-inv { position: relative; }
.ez-fg-res {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
    margin: 0; padding: 4px; list-style: none; max-height: 260px; overflow: auto;
    background: #fff; border: 1px solid var(--oz-border); border-radius: 10px;
    box-shadow: 0 16px 40px rgba(11, 33, 72, .16), 0 2px 6px rgba(11, 33, 72, .06);
}
.ez-fg-res[hidden] { display: none; }
.ez-fg-res button {
    display: block; width: 100%; padding: 7px 9px; border: 0; border-radius: 7px;
    background: none; text-align: left; cursor: pointer; font: inherit;
}
.ez-fg-res button:hover, .ez-fg-res button:focus-visible { background: var(--oz-tint); outline: none; }
.ez-fg-res b { display: block; font-size: 13px; color: var(--oz-navy); }
.ez-fg-res small {
    display: block; font-size: 11.5px; color: var(--oz-muted-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ez-fg-res .vide { padding: 8px; font-size: 12.5px; color: var(--oz-muted-2); }
.ez-fg-effacer {
    align-self: flex-start; padding: 2px 0; border: 0; background: none;
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--oz-navy);
    text-decoration: underline; cursor: pointer;
}
@media (min-width: 1101px) { .ez-tabs { overflow-y: auto; } }
@media (max-width: 1100px) { .ez-fg { display: none; } }

/* ---- 45. LA PERIODE DU MENU (v206) ----------------------------------------------------
   Le mois et le cumul quittent le tableau de bord pour le panneau Filtres :
   un bouton qui dit la periode, un panneau annee puis mois, et la bascule
   Mois / Depuis janvier sous lui. */
.ez-fg-mois { margin: 0; }
.ez-fg-mois-btn {
    display: flex; align-items: center; gap: 8px; min-height: 34px; box-sizing: border-box;
    padding: 6px 10px; list-style: none; cursor: pointer;
    font-size: 13px; color: var(--oz-ink); background: #fff;
    border: 1px solid var(--oz-border); border-radius: 8px;
}
.ez-fg-mois-btn::-webkit-details-marker { display: none; }
.ez-fg-mois-btn::marker { content: ""; }
.ez-fg-mois-btn::after {
    content: ""; flex: none; width: 15px; height: 15px; margin-left: auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6A82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}
.ez-fg-mois[open] > .ez-fg-mois-btn { border-color: var(--oz-blue); box-shadow: var(--oz-ring); }
.ez-fg-mois-panneau {
    margin-top: 6px; padding: 8px; background: #fff;
    border: 1px solid var(--oz-border); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(11, 33, 72, .08);
}
.ez-fg-ans { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ez-fg-an, .ez-fg-case, .ez-fg-tout, .ez-fg-cumul button {
    font: inherit; cursor: pointer; border: 0; background: none; color: var(--oz-ink-2);
}
.ez-fg-an { padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ez-fg-an:hover { background: var(--oz-tint); }
.ez-fg-an.on { background: var(--oz-navy); color: #fff; }
.ez-fg-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.ez-fg-grille[hidden] { display: none; }
.ez-fg-case { padding: 6px 0; border-radius: 7px; font-size: 12px; text-transform: capitalize; }
.ez-fg-case:hover:not(:disabled) { background: var(--oz-tint); color: var(--oz-navy); }
.ez-fg-case.on { background: var(--oz-navy); color: #fff; font-weight: 700; }
.ez-fg-case:disabled { color: #C2CAD6; cursor: default; }
.ez-fg-tout {
    display: block; width: 100%; margin-top: 6px; padding: 6px 0;
    border-top: 1px solid var(--oz-line); font-size: 12.5px; font-weight: 600; color: var(--oz-navy);
}
.ez-fg-tout.on { color: var(--oz-gold-dk); }
.ez-fg-cumul {
    display: flex; gap: 2px; margin-top: 6px; padding: 2px;
    background: #fff; border: 1px solid var(--oz-border); border-radius: 8px;
}
.ez-fg-cumul button { flex: 1; padding: 5px 6px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.ez-fg-cumul button.on { background: var(--oz-navy); color: #fff; }

/* ---- 46. LE RAIL TIENT SUR UN ECRAN (v208) ----------------------------------
   Demande du 09/11 : pas de defilement dans la colonne de gauche. La bascule
   Mois / Annee monte sur la ligne du titre Periode, les champs du panneau et
   les rubriques du menu se resserrent. Sous 900 px de haut, un cran de plus. */
.ez-fg-per-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.ez-fg-per-tete > span { font-size: 11px; font-weight: 600; color: var(--oz-muted-2); }
.ez-fg-per-tete .ez-fg-cumul { margin-top: 0; padding: 1px; border-radius: 7px; }
.ez-fg-per-tete .ez-fg-cumul button { flex: 0 0 auto; padding: 2px 9px; font-size: 11.5px; border-radius: 5px; }
@media (min-width: 1101px) {
    .ez-fg { margin: 10px 12px 0; }
    .ez-fg-tete { padding: 7px 12px; }
    .ez-fg-form { gap: 6px; padding: 0 10px 8px; }
    .ez-fg-l { gap: 2px; }
    .ez-fg .oz-combo-btn, .ez-fg select, .ez-fg-q, .ez-fg-mois-btn { min-height: 30px; padding-top: 4px; padding-bottom: 4px; }
    .ez-fg-mois-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ez-tabs-inner { padding: 8px 12px 8px; gap: 1px; }
    .ez-tabs-titre { padding: 10px 12px 4px; }
    .ez-tabs-inner > .ez-tabs-titre:first-child { padding-top: 4px; }
    .ez-tab { padding: 8px 12px; }
    .ez-rail-compte { gap: 4px; padding: 8px 12px 10px; }
    .ez-rail-profil { padding: 6px 10px; }
}
@media (min-width: 1101px) and (max-height: 900px) {
    .ez-fg-form { gap: 4px; }
    .ez-fg-l > span, .ez-fg-per-tete > span { font-size: 10.5px; }
    .ez-fg .oz-combo-btn, .ez-fg select, .ez-fg-q, .ez-fg-mois-btn { min-height: 28px; font-size: 12.5px; }
    .ez-fg-tete { padding: 5px 12px; }
    .ez-tabs-inner { padding: 4px 12px; }
    .ez-tab { padding: 5px 12px; font-size: 13px; }
    .ez-tabs-titre { padding: 6px 12px 2px; }
    /* Le compte sur une ligne : le profil, puis la sortie en icone seule
       (son nom reste dans title et aria-label). */
    .ez-rail-compte { flex-direction: row; align-items: center; gap: 6px; }
    .ez-rail-profil { flex: 1 1 auto; min-width: 0; }
    .ez-rail-compte form { flex: 0 0 auto; }
    .ez-rail-sortie { width: 36px; padding: 0; gap: 0; font-size: 0; }
}

/* ---- 47. LES TABLEAUX D'ANALYSE : PAR CGP, PAR CONSEILLER, PAR INVESTISSEUR (v209)
   Une grille a deux colonnes, des cartes de meme matiere que la vue
   d'ensemble, et le sous menu sous "Tableau de bord". */
.ez-tab-sous-liste { display: contents; }
.ez-tab.ez-tab-sous { padding-top: 5px; padding-bottom: 5px; padding-left: 18px; font-size: 12.5px; font-weight: 500; }
.ez-tab.ez-tab-sous::before {
    width: 5px; height: 5px; margin: 0 6px; border-radius: 50%;
    -webkit-mask-image: none; mask-image: none;
}
@media (min-width: 1101px) and (max-height: 900px) {
    .ez-tab-sous-liste { display: flex; flex-wrap: wrap; gap: 2px; padding-left: 12px; }
    .ez-tab.ez-tab-sous { flex: 0 0 auto; width: auto; padding: 3px 8px; font-size: 12px; }
    .ez-tab.ez-tab-sous::before { display: none; }
    .ez-tabs-titre { padding: 5px 12px 1px; }
    :root { --oz-tete: 92px; }
}
/* Le lien Effacer monte dans la tete du panneau Filtres : une ligne de moins. */
@media (min-width: 1101px) {
    .ez-fg { position: relative; }
    .ez-fg-effacer { position: absolute; top: 7px; right: 30px; padding: 0; font-size: 11.5px; }
}

.an-kpis { margin-bottom: 14px; }
.an-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.an-grille > .ez-card { margin: 0; min-width: 0; }
.an-grille > .an-large { grid-column: 1 / -1; }
@media (max-width: 1080px) { .an-grille { grid-template-columns: minmax(0, 1fr); } }
.an-grille .tb-corps { padding: 14px 18px 14px; }
.an-grille .tb-note { margin-top: 12px; }

/* Le classement : un vrai tableau, la barre dans la colonne Collecte. */
.an-tablewrap { overflow-x: auto; }
.an-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.an-table th {
    padding: 0 8px 8px; text-align: left; white-space: nowrap;
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oz-muted-3);
    border-bottom: 1px solid var(--oz-line);
}
.an-table td { padding: 6px 8px; border-bottom: 1px solid var(--oz-line); font-size: 13px; color: var(--oz-ink-2); vertical-align: middle; }
.an-table tbody tr:last-child td { border-bottom: 0; }
.an-table .an-no { width: 40px; padding-left: 0; }
.an-table .tb-rang-no { width: 24px; height: 24px; font-size: 11.5px; }
.an-table .an-num { text-align: right; white-space: nowrap; }
.an-table .an-num small { color: var(--oz-muted-3); font-size: 11.5px; }
.an-nom { font-weight: 650; color: var(--oz-navy); max-width: 320px; }
.an-nom a { color: var(--oz-navy); text-decoration: none; }
.an-nom a:hover { text-decoration: underline; }
.an-nom small { display: block; font-size: 11.5px; font-weight: 500; color: var(--oz-muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-barre-th, .an-barre-td { width: 34%; }
.an-barre { display: grid; grid-template-columns: minmax(60px, 1fr) auto; align-items: center; gap: 10px; }
.an-barre b { font-size: 13.5px; color: var(--oz-navy-deep); white-space: nowrap; }
.an-regroupe td, .an-regroupe .an-nom { color: var(--oz-muted-2); font-weight: 500; }

.an-qui { display: flex; align-items: center; gap: 8px; min-width: 0; }
.an-qui > b { min-width: 0; font-size: 13.5px; font-weight: 650; color: var(--oz-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Legende et couleurs des series : la marine, l'or, le vert, un bleu clair, un gris. */
.an-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; font-size: 12px; color: var(--oz-ink-2); }
.an-legende span { display: inline-flex; align-items: center; gap: 6px; }
.an-legende i { width: 10px; height: 10px; border-radius: 3px; }
.an-f0 { background: var(--oz-brand); }
.an-f1 { background: var(--oz-gold); }
.an-f2 { background: var(--oz-teal); }
.an-f3 { background: #7FA7D9; }
.an-f4 { background: #B8C2D0; }
.an-cree { background: #D5DFEC; }

/* Le mix des fonds : une barre a 100 % par cabinet. */
.an-piles, .an-tendances { display: flex; flex-direction: column; gap: 10px; }
.an-pile-l, .an-tendance { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 82px; align-items: center; gap: 12px; }
.an-pile-nom { font-size: 13px; font-weight: 650; color: var(--oz-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-pile { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: #eef1f6; gap: 1px; }
.an-pile > span { height: 100%; }
.an-pile-total { text-align: right; font-size: 13px; font-weight: 700; color: var(--oz-navy-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* La tendance : de petites colonnes sur une echelle commune. */
.an-mini { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.an-mini-b { flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 0 0; background: var(--oz-brand); }
.an-mini-b.vide { height: 2px !important; background: #e3e8ef; }
.an-tendance.an-axe .an-mini { height: auto; justify-content: space-between; font-size: 11px; color: var(--oz-muted-3); }

/* Creees et signees : deux colonnes par mois. */
.an-paires { display: flex; align-items: stretch; gap: 6px; height: 190px; }
.an-paire { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.an-paire-v { font-size: 11.5px; font-weight: 700; color: var(--oz-navy-deep); font-variant-numeric: tabular-nums; min-height: 15px; }
.an-paire-b { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.an-paire-b > span { width: 38%; max-width: 16px; border-radius: 3px 3px 0 0; }
.an-paire-eti { font-size: 10.5px; color: var(--oz-muted-3); white-space: nowrap; }

/* Les repartitions et le travail en cours. */
.an-dist { display: flex; flex-direction: column; gap: 9px; }
.an-dist-l { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(50px, 1fr) 72px 80px; align-items: center; gap: 12px; }
.an-dist-n { text-align: right; font-size: 13px; font-weight: 700; color: var(--oz-navy-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-dist-n small { font-weight: 500; color: var(--oz-muted-3); font-size: 11.5px; }
.an-dist-m { text-align: right; font-size: 13px; font-weight: 600; color: var(--oz-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-nr .an-qui > b { color: var(--oz-muted-2); font-weight: 500; font-style: italic; }
.an-nr .tb-rang-part { background: #9aa8ba; }

/* Les listes d'etat. */
.tb-relance-l.an-l2 { grid-template-columns: minmax(0, 1fr) auto; }
.tb-relance-qui .an-qui > b { font-size: 13.5px; }
@media (min-width: 1081px) { .an-colonnes2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } }
@media (max-width: 620px) {
    .an-pile-l, .an-tendance { grid-template-columns: minmax(0, 100px) minmax(0, 1fr) 70px; gap: 8px; }
    .an-dist-l { grid-template-columns: minmax(0, 1fr) 60px 64px; }
    .an-dist-l .tb-rang-piste { display: none; }
}

/* ---- 48. LA NORME IBCS DANS LES TABLEAUX D'ANALYSE (v210) -----------------------
   A la maniere de Zebra BI : AC en gris fonce, PY en gris clair, l'ecart en
   vert quand il est bon et en rouge quand il est mauvais. Les couleurs disent
   quelque chose ; le bleu OSEOM reste celui de la marque, pas celui des donnees. */
:root {
    --ib-ac: #3A3F47;
    --ib-ac-pale: #9AA0A8;
    --ib-py: #C9CDD3;
    --ib-bon: #7DB52A;
    --ib-bon-txt: #4E8A12;
    --ib-mauvais: #E0201B;
    --ib-mauvais-txt: #C81E1A;
    --ib-axe: #8F969F;
    --ib-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* Les tuiles. */
.ib-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin-bottom: 12px; }
.ib-tuile { position: relative; padding: 12px 16px 12px; background: #fff; border: 1px solid var(--oz-line-2); border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); min-width: 0; }
.ib-tuile-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 20px; }
.ib-tuile label { font-family: var(--ib-serif); font-size: 16px; font-weight: 600; color: var(--oz-navy-deep); line-height: 1.2; }
.ib-courbe { flex: 0 1 120px; width: 120px; height: 34px; overflow: visible; }
.ib-courbe polyline { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ib-courbe .ac { stroke: var(--oz-navy); }
.ib-courbe .py { stroke: var(--ib-py); }
.ib-courbe circle { fill: #fff; stroke: var(--oz-navy); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ib-tuile-v { margin-top: 2px; font-family: var(--ib-serif); font-size: 38px; font-weight: 500; line-height: 1.05; color: var(--oz-navy-deep); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.ib-tuile-v span { margin-left: 4px; font-size: 18px; color: var(--oz-navy-deep); letter-spacing: 0; }
.ib-tuile-cmp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 12.5px; color: var(--oz-muted-2); }
.ib-tuile small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--oz-muted-3); }
.ib-tuile .tb-jauge { margin-top: 8px; }
.ib-puce { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--oz-ink-2); }
.ib-puce b { font-weight: 600; opacity: .85; }
.ib-puce i { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; font-style: normal; font-size: 10px; color: #fff; background: var(--ib-axe); }
.ib-puce.bon { color: var(--ib-bon-txt); }
.ib-puce.bon i { background: var(--ib-bon); }
.ib-puce.mauvais { color: var(--ib-mauvais-txt); }
.ib-puce.mauvais i { background: var(--ib-mauvais); }
.ib-py-v { font-size: 12px; color: var(--oz-muted-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Le message en tete, comme le titre d'un etat IBCS. */
.ib-message { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; padding: 10px 16px; border-radius: 12px; background: #FFFBF2; border: 1px solid #F1E2BF; }
.ib-message b { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oz-gold-dk); }
.ib-message p { margin: 0; font-family: var(--ib-serif); font-size: 15.5px; line-height: 1.4; color: var(--oz-navy-deep); }

.ib-sous { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--oz-muted-3); }
.ib-legende { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--oz-muted-2); }
.ib-legende span { display: inline-flex; align-items: center; gap: 5px; }
.ib-legende i { width: 10px; height: 10px; border-radius: 2px; }
.ib-l-ac { background: var(--ib-ac); }
.ib-l-py { background: var(--ib-py); }
.ib-l-bon { background: var(--ib-bon); }
.ib-l-mauvais { background: var(--ib-mauvais); }

/* La barre AC, avec le trait de PY. */
.ib-hbar { position: relative; display: block; height: 12px; min-width: 50px; }
.ib-hbar > b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 1px; background: var(--ib-ac); }
.ib-hbar > i { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; background: var(--ib-py); box-shadow: 0 0 0 1px #fff; }
.an-regroupe .ib-hbar > b { background: var(--ib-ac-pale); }

/* Le tableau a la Zebra BI : PY, AC, ecart en barres, ecart en epingles. */
.ib-table { font-size: 13px; }
.ib-table th { border-bottom: 1px solid var(--ib-ac); }
.ib-table th.ib-ac-th { color: var(--ib-ac); }
.ib-table td { padding-top: 6px; padding-bottom: 6px; border-bottom-color: #EEF0F3; }
.ib-table .ib-ac { font-weight: 700; color: var(--ib-ac); }
.ib-table .ib-pyc { color: var(--oz-muted-2); }
.ib-table .ib-col-barre { width: 24%; min-width: 120px; }
.ib-table .ib-col-ecart { width: 22%; min-width: 170px; padding-left: 0; padding-right: 0; }
.ib-table .ib-col-pin { width: 15%; min-width: 130px; padding-left: 0; padding-right: 0; }
.ib-table th.ib-col-ecart, .ib-table th.ib-col-pin { text-align: center; }
.ib-table .an-nom { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-table tr.ib-total td { border-top: 1.5px solid var(--ib-ac); border-bottom: 0; background: #EEF3FA; font-weight: 700; color: var(--oz-navy-deep); }
.ib-table tr.ib-total .an-nom { color: var(--oz-navy-deep); }

.ib-dbar, .ib-pin { position: relative; display: block; height: 22px; }
.ib-axe { position: absolute; left: 50%; top: -7px; bottom: -7px; width: 1px; background: var(--ib-axe); }
.ib-dbar > b { position: absolute; top: 5px; height: 12px; }
.ib-pin > b { position: absolute; top: 10px; height: 2px; }
.ib-pin > u { position: absolute; top: 7px; width: 8px; height: 8px; border-radius: 50%; }
.ib-dbar > b.bon, .ib-pin > b.bon, .ib-pin > u.bon { background: var(--ib-bon); }
.ib-dbar > b.mauvais, .ib-pin > b.mauvais, .ib-pin > u.mauvais { background: var(--ib-mauvais); }
.ib-pin > u:not(.bon):not(.mauvais) { background: var(--ib-axe); }
.ib-dbar > em, .ib-pin > em { position: absolute; top: 3px; font-style: normal; font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--oz-muted-2); }
.ib-pin > em { font-style: italic; }
.ib-pin > em.nouveau { font-weight: 500; color: var(--oz-muted-3); }
em.bon { color: var(--ib-bon-txt) !important; }
em.mauvais { color: var(--ib-mauvais-txt) !important; }

/* Le pont PY vers AC, a l'horizontale. */
.ib-pont { display: flex; flex-direction: column; gap: 4px; }
.ib-pont-l { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); align-items: center; gap: 12px; height: 26px; }
.ib-pont-nom { font-size: 13px; color: var(--oz-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-pont-l.total .ib-pont-nom, .ib-pont-l.total-py .ib-pont-nom { font-weight: 700; color: var(--oz-navy-deep); }
.ib-pont-piste { position: relative; height: 100%; margin-right: 72px; }
.ib-pont-piste b { position: absolute; top: 5px; bottom: 5px; border-radius: 1px; }
.ib-pont-l.total-py b { background: var(--ib-py); }
.ib-pont-l.total b { background: var(--ib-ac); }
.ib-pont-l.bon b { background: var(--ib-bon); }
.ib-pont-l.mauvais b { background: var(--ib-mauvais); }
.ib-pont-piste em { position: absolute; top: 4px; font-style: normal; font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ib-ac); }
.ib-pont-l.bon em { color: var(--ib-bon-txt); }
.ib-pont-l.mauvais em { color: var(--ib-mauvais-txt); }
.ib-pont-piste em small { font-size: 12px; }
.ib-pont-piste em small.bon { color: var(--ib-bon-txt); }
.ib-pont-piste em small.mauvais { color: var(--ib-mauvais-txt); }

/* Les mois en trois etages : ecart en %, ecart absolu, AC devant PY. */
.ib-3 { display: flex; flex-direction: column; }
.ib-3-etage { display: flex; align-items: stretch; gap: 4px; }
.ib-3-eti { flex: 0 0 26px; align-self: center; font-size: 12px; font-weight: 700; color: var(--oz-muted-2); }
.ib-3-c { position: relative; flex: 1 1 0; min-width: 0; }
.ib-3-pct { height: 74px; }
.ib-3-delta { height: 84px; border-bottom: 1px solid #EEF0F3; margin-bottom: 8px; }
.ib-3-cols { height: 150px; }
.ib-3-axex { height: 20px; }
.ib-3-axe { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ib-axe); }
.ib-3-pin { position: absolute; left: 50%; width: 2px; margin-left: -1px; }
.ib-3-pin.bon { background: var(--ib-bon); }
.ib-3-pin.mauvais { background: var(--ib-mauvais); }
.ib-3-pin u { position: absolute; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ib-ac); }
.ib-3-pin[style*="bottom"] u { top: -4px; }
.ib-3-pin[style*="top"] u { bottom: -4px; }
.ib-3-pin em, .ib-3-bar em { position: absolute; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ib-ac); }
.ib-3-pin[style*="bottom"] em, .ib-3-bar[style*="bottom"] em { bottom: calc(100% + 4px); }
.ib-3-pin[style*="top"] em, .ib-3-bar[style*="top"] em { top: calc(100% + 3px); }
.ib-3-bar { position: absolute; left: 22%; right: 22%; }
.ib-3-bar.bon { background: var(--ib-bon); }
.ib-3-bar.mauvais { background: var(--ib-mauvais); }
.ib-3-py, .ib-3-ac { position: absolute; bottom: 0; }
.ib-3-py { left: 10%; width: 56%; background: var(--ib-py); }
.ib-3-ac { left: 32%; width: 56%; background: var(--ib-ac); }
.ib-3-val { position: absolute; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--oz-ink-2); font-variant-numeric: tabular-nums; }
.ib-3-c.fort .ib-3-val { font-weight: 800; color: var(--ib-ac); }
.ib-3-c.hors .ib-3-ac { background: #5B626C; }
.ib-3-cols .ib-3-c { border-bottom: 1px solid var(--ib-ac); }
.ib-3-axex .ib-3-c { text-align: center; font-size: 11.5px; color: var(--oz-muted-2); padding-top: 3px; }
.ib-3-axex .ib-3-c.fort { font-weight: 800; color: var(--ib-ac); }

/* Creees et signees par mois (tableau par conseiller). */
.ib-mois { display: flex; align-items: stretch; gap: 6px; height: 230px; }
.ib-mois-c { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ib-mois-v { font-size: 11px; font-weight: 700; color: var(--ib-ac); white-space: nowrap; min-height: 14px; font-variant-numeric: tabular-nums; }
.ib-mois-zone { position: relative; flex: 1 1 auto; width: 100%; border-bottom: 1px solid var(--ib-ac); }
.ib-mois-py, .ib-mois-ac { position: absolute; bottom: 0; }
.ib-mois-py { left: 10%; width: 56%; background: var(--ib-py); }
.ib-mois-ac { left: 32%; width: 56%; background: var(--ib-ac); }
.ib-mois-eti { font-size: 10.5px; color: var(--oz-muted-3); white-space: nowrap; }
.ib-mois-taux { font-size: 11px; font-weight: 700; color: var(--oz-ink-2); min-height: 14px; font-variant-numeric: tabular-nums; }

/* Les operations. */
.ib-ops { display: flex; flex-direction: column; gap: 16px; }
.ib-ops-titre { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oz-muted-3); }
.ib-ops-titre b { font-size: 13px; letter-spacing: 0; color: var(--ib-ac); }
.ib-ops-titre small { font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--oz-muted-2); }
.ib-etape { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(50px, 1fr) 36px 76px; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 8px; color: inherit; text-decoration: none; }
.ib-etape:hover { background: var(--oz-tint); }
.ib-etape-nom { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--oz-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-etape-nom .tb-barre-pt { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.ib-etape-n { text-align: right; font-size: 13px; font-weight: 700; color: var(--ib-ac); font-variant-numeric: tabular-nums; }
.ib-etape-m { text-align: right; font-size: 12.5px; color: var(--oz-muted-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ib-ages { display: flex; height: 22px; gap: 2px; border-radius: 6px; overflow: hidden; background: #EEF1F5; }
.ib-age { display: flex; align-items: center; justify-content: center; min-width: 24px; font-size: 11.5px; font-weight: 700; color: #fff; }
.ib-age.frais { background: #9AA3AE; }
.ib-age.tiede { background: #E3A93B; }
.ib-age.chaud { background: #E2702F; }
.ib-age.vieux { background: var(--ib-mauvais); }
.ib-ages-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--oz-muted-2); }
.ib-ages-leg span { display: inline-flex; align-items: center; gap: 6px; }
.ib-ages-leg i { width: 10px; height: 10px; min-width: 0; border-radius: 2px; }
.ib-ages-leg b { color: var(--ib-ac); }
.ib-delai { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--oz-line); font-size: 13px; color: var(--oz-ink-2); }
.ib-delai:last-child { border-bottom: 0; }
.ib-delai b { font-size: 14px; color: var(--ib-ac); white-space: nowrap; }
.ib-delai small { font-size: 11.5px; color: var(--oz-muted-3); white-space: nowrap; }

/* Les repartitions a la Zebra BI. */
.ib-dist { display: flex; flex-direction: column; gap: 8px; }
.ib-dist-l { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(60px, 1fr) 70px 92px 72px; align-items: center; gap: 10px; }
.ib-dist-l.sans-py { grid-template-columns: minmax(0, 1.3fr) minmax(60px, 1fr) 70px 72px; }
.ib-dist-tete { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--oz-muted-3); }
.ib-dist-tete span:nth-child(n+3) { text-align: right; }
.ib-dist-e { text-align: right; }
.an-nr .ib-hbar > b { background: var(--ib-ac-pale); }

.ib-top { grid-template-columns: minmax(0, 1fr) minmax(60px, 120px) 80px; }
.ib-count-mauvais { background: #FCE8E6; color: var(--ib-mauvais-txt); }
.ib-ok { color: var(--ib-bon-txt); }
.ib-muettes { box-shadow: none; background: transparent; border-style: dashed; }
.ib-muettes .tb-corps { padding: 8px 18px; }
.ib-muettes .tb-note { margin: 0; }

@media (max-width: 620px) {
    .ib-tuile-v { font-size: 30px; }
    .ib-3-etage { gap: 2px; }
    .ib-3-pin em, .ib-3-bar em, .ib-3-ac em { display: none; }
    .ib-pont-l { grid-template-columns: 96px minmax(0, 1fr); }
    .ib-dist-l, .ib-dist-l.sans-py { grid-template-columns: minmax(0, 1fr) 56px 84px; }
    .ib-dist-l .ib-hbar, .ib-dist-l .an-dist-m, .ib-dist-tete span:nth-child(2) { display: none; }
    .ib-top { grid-template-columns: minmax(0, 1fr) 72px; }
    .ib-top .ib-hbar { display: none; }
}

/* Le panneau : l'annee et le mois en deux listes, sans fenetre a ouvrir. */
.ez-fg-per-sel { display: grid; grid-template-columns: 1fr 1.25fr; gap: 6px; }
.ez-fg-per-sel select { min-width: 0; }

/* ---- 49. LES TABLEAUX D'ANALYSE SUR UN SEUL ECRAN (v211) -------------------------
   Demande du 09/11 : tout voir sans defiler, des visuels compacts. Les tuiles
   sur une rangee basse, puis deux colonnes a la hauteur de l'ecran : a gauche
   le pont et les mois, a droite une carte a onglets. Une carte trop pleine
   defile en elle-meme, jamais la page. */
.ib-bande { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 1100px; line-height: 1.35; }
.ib-tuiles { gap: 10px; margin-bottom: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ib-tuile { padding: 9px 14px 9px; }
.ib-tuile label { font-size: 14.5px; }
.ib-tuile-v { font-size: 31px; }
.ib-tuile-v span { font-size: 15px; }
.ib-tuile-cmp { margin-top: 2px; min-height: 18px; }
.ib-tuile .tb-jauge { margin-top: 7px; }
.ib-courbe { width: 100px; height: 28px; }

.ib-ecran { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr); gap: 10px; }
.ib-ecran-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ib-col { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.ib-carte { display: flex; flex-direction: column; min-height: 0; min-width: 0; margin: 0; }
.ib-col > .ib-carte { flex: 1 1 0; }
.ib-col > .ib-carte-pont { flex: 0 1 auto; }
.ib-tete { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 14px; }
.ib-titre { font-size: 13.5px; font-weight: 650; color: var(--oz-navy-deep); white-space: nowrap; }
.ib-titre small { margin-left: 6px; font-size: 11.5px; font-weight: 500; color: var(--oz-muted-3); }
.ib-corps { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 14px 10px; }
.ib-corps[hidden] { display: none; }
.ib-corps-fl { display: flex; flex-direction: column; }
.ib-corps .tb-note { margin: 8px 0 0; font-size: 11.5px; }
.ib-pied { margin: 8px 2px 0; font-size: 11.5px; color: var(--oz-muted-3); }
.ib-ecran > *, .ib-col > * { min-width: 0; }
.ib-carte .ib-col-ecart { width: 26%; }
.ez-fg-cumul button { white-space: nowrap; font-size: 11.5px; padding: 4px 4px; }
.tb-head .ez-head-titre { flex: 1 1 0; min-width: 0; }
.tb-head .ez-head-actions { flex: none; }
.ib-tuile-cmp { flex-wrap: nowrap; overflow: hidden; }
.ib-tuile-cmp .ib-py-v { overflow: hidden; text-overflow: ellipsis; }

/* Les onglets d'une carte. */
.ib-onglets { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 9px; background: #F1F3F6; }
.ib-onglets button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--oz-muted-2); cursor: pointer; white-space: nowrap; }
.ib-onglets button:hover { color: var(--oz-navy); }
.ib-onglets button.on { background: #fff; color: var(--oz-navy-deep); box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
.ib-onglets button i { font-style: normal; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: #E3E7EC; color: var(--oz-ink-2); }
.ib-onglets button i.alerte { background: #FCE8E6; color: var(--ib-mauvais-txt); }

/* Tableaux et graphiques resserres. */
.ib-carte .ib-table th { padding: 0 6px 6px; font-size: 10.5px; position: sticky; top: 0; background: #fff; z-index: 1; }
.ib-carte .ib-table th small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.ib-carte .ib-table td { padding: 4px 6px; font-size: 12.5px; }
.ib-carte .ib-table .an-nom { max-width: 230px; font-size: 12.5px; }
.ib-carte .ib-table .an-nom small { display: block; font-size: 11px; font-weight: 500; color: var(--oz-muted-3); overflow: hidden; text-overflow: ellipsis; }
.ib-carte .ib-dbar, .ib-carte .ib-pin { height: 18px; }
.ib-carte .ib-dbar > b { top: 4px; height: 10px; }
.ib-carte .ib-pin > b { top: 8px; }
.ib-carte .ib-pin > u { top: 5px; }
.ib-carte .ib-dbar > em, .ib-carte .ib-pin > em { top: 1px; font-size: 11.5px; }
.ib-carte .ib-col-ecart { min-width: 140px; }
.ib-carte .ib-col-pin { min-width: 110px; }
.ib-pont-l { height: 22px; gap: 10px; }
.ib-pont-nom { font-size: 12.5px; }
.ib-pont-piste b { top: 4px; bottom: 4px; }
.ib-pont-piste em { top: 2px; font-size: 12px; }
.ib-corps-fl .ib-3 { flex: 1 1 auto; min-height: 220px; }
.ib-3 .ib-3-pct { height: auto; flex: 0.85 1 0; min-height: 48px; }
.ib-3 .ib-3-delta { height: auto; flex: 1 1 0; min-height: 54px; margin-bottom: 4px; }
.ib-3 .ib-3-cols { height: auto; flex: 2.1 1 0; min-height: 90px; }
.ib-3 .ib-3-axex { height: 18px; flex: none; }
.ib-corps-fl .ib-mois { flex: 1 1 auto; height: auto; min-height: 180px; }
.ib-liste .tb-relance-l { padding: 5px 8px; }
.ib-ops { gap: 12px; }
.ib-ops-titre { margin-bottom: 4px; }
.ib-etape { padding: 2px 6px; }
.ib-delai { padding: 3px 0; }
.ib-dist { gap: 6px; }

/* La hauteur de l'ecran : seulement sur un ecran large et assez haut. */
@media (min-width: 1101px) and (min-height: 640px) {
    .ib-ecran { height: calc(100vh - var(--oz-tete) - 188px); min-height: 400px; }
    .ib-ecran > .ib-carte, .ib-ecran > .ib-col { min-height: 0; }
}
@media (min-width: 1101px) and (max-height: 900px) {
    .ib-ecran { height: calc(100vh - var(--oz-tete) - 194px); }
    .ib-tuiles { margin-bottom: 8px; }
    .ib-tuile { padding: 7px 12px; }
    .ib-corps-fl .ib-3 { min-height: 120px; }
    .ib-3 .ib-3-pct { min-height: 26px; }
    .ib-3 .ib-3-delta { min-height: 32px; }
    .ib-3 .ib-3-cols { min-height: 48px; }
    .ib-corps-fl .ib-mois { min-height: 110px; }
    .ib-carte .ib-table td { padding: 2px 6px; }
    .ib-corps { padding: 6px 12px 8px; }
    .ib-tuile-v { font-size: 27px; }
    .ib-tuile label { font-size: 13.5px; }
    .ib-courbe { height: 24px; }
    .ib-tete { min-height: 36px; padding: 4px 12px; }
    .ib-pont-l { height: 19px; }
    .ib-carte .ib-table td { padding: 3px 6px; }
}
@media (max-width: 1100px) {
    .ib-tuiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .ib-ecran, .ib-ecran-3 { grid-template-columns: minmax(0, 1fr); }
    .ib-corps { overflow: visible; }
}

/* ---- 50. LA LISTE DES SOUSCRIPTIONS TIENT DANS SA LARGEUR (v211) ----------------
   Le nom du conseiller passe a la ligne (deux lignes au plus, le nom entier
   dans l'infobulle) au lieu d'elargir le tableau jusqu'a cacher le montant. */
.ez-table .ez-who-cell { min-width: 130px; max-width: 230px; }
.ez-table .ez-who-cell .ez-nowrap {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.3; overflow-wrap: anywhere;
}
.ez-table .ez-who-cell .ez-cut { max-width: 230px; }
.ez-table .ez-c-qui { max-width: 250px; overflow-wrap: anywhere; }
.ez-table .ez-c-qui .ez-cut { max-width: 250px; }

/* ---- 14. ECRANS TACTILES : LES PLANCHERS DE LA v179 RESTENT VRAIS -------
   Ce fichier est charge en dernier : sans ce bloc, ses tailles de bureau
   (boutons 36 px, champs 13,5 px) battraient les planchers tactiles
   d espace.css (boutons 44 a 46 px, champs 16 px contre le zoom iOS).
   Ils sont donc repris ici, a l identique, et doivent rester en fin de
   fichier. */
@media (hover: none), (max-width: 760px) {
    .ez-btn    { min-height: 46px; }
    .ez-btn-sm { padding: 9px 14px; font-size: 14px; min-height: 40px; }
    .ez-out    { min-height: 40px; padding: 9px 14px; }
    .oz-input, .oz-select, .oz-textarea, .ez-filter-q, .ez-date,
    .ez-form input, .ez-form select, .ez-form textarea,
    .ez-filter input, .ez-filter select, .oz-combo-btn, .oz-combo-q {
        font-size: 16px; min-height: 44px;
    }
    .ez-filter .ez-date-boite .ez-date { width: 152px; }
}