/* OSEOM Finance - subscription journey.
   Ported from the interactive mock-up (React inline styles) to a real stylesheet.
   Palette, spacing, radii and shadows are the mock-up's own values. */

:root {
    --oz-navy:      #1a3a5c;
    --oz-blue:      #2e86c1;
    --oz-green:     #27ae60;
    --oz-green-dk:  #219a52;
    --oz-gold:      #c89b3c;
    --oz-gold-dk:   #a8802c;
    --oz-gold-tint: #f6efe0;
    --oz-red:       #c0392b;
    --oz-bg:        #f4f6f9;
    --oz-card:      #ffffff;
    --oz-field:     #fafbfc;
    --oz-tint:      #eef3f8;
    --oz-info:      #eef6fd;
    --oz-info-bd:   #bdd8f1;
    --oz-line:      #ecf0f1;
    --oz-line-2:    #e8ecf1;
    --oz-border:    #dce1e8;
    --oz-border-2:  #e0e6ed;
    --oz-ink:       #2c3e50;
    --oz-ink-2:     #34495e;
    --oz-muted:     #5a6c7d;
    --oz-muted-2:   #7f8c8d;
    --oz-muted-3:   #95a5a6;
    --oz-muted-4:   #bdc3c7;
    --oz-font:      Calibri, 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body.oz {
    font-family: var(--oz-font);
    background: var(--oz-bg);
    color: var(--oz-ink);
    overflow: hidden;
}

.oz-container { display: flex; height: 100vh; position: relative; overflow: hidden; }

/* ---------------------------------------------------------------- sidebar */

.oz-sidebar {
    width: 280px; min-width: 280px; background: #fff;
    border-right: 1px solid var(--oz-line-2);
    display: flex; flex-direction: column;
    box-shadow: 2px 0 12px rgba(0,0,0,.04);
    z-index: 1002; transition: transform .3s ease;
}

.oz-sidebar-header { padding: 28px 24px 20px; border-bottom: 1px solid var(--oz-line); text-align: center; }
.oz-logo     { font-size: 28px; font-weight: 800; color: var(--oz-navy); letter-spacing: 4px; }
.oz-logo-sub { font-size: 11px; font-weight: 600; color: var(--oz-muted-2); letter-spacing: 6px; margin-top: 2px; }
.oz-fund-badge {
    margin-top: 14px; display: inline-block; padding: 5px 14px;
    background: var(--oz-tint); border-radius: 20px; font-size: 11px;
    font-weight: 600; color: var(--oz-navy); letter-spacing: .5px;
}

.oz-nav { flex: 1; padding: 12px; overflow-y: auto; list-style: none; }
.oz-nav a {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px;
    border-radius: 10px; text-decoration: none; transition: background .2s;
}
.oz-nav a:hover { background: #f7f9fc; }
.oz-nav li.current a { background: var(--oz-tint); }

.oz-dot {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
    background: #dce1e8; color: var(--oz-muted-3);
}
.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-text { font-size: 12.5px; line-height: 1.3; color: var(--oz-muted-2); }
.oz-nav li.current .oz-nav-text { color: var(--oz-navy);  font-weight: 600; }
.oz-nav li.done    .oz-nav-text { color: var(--oz-green); }

.oz-sidebar-footer { padding: 16px 24px; border-top: 1px solid var(--oz-line); text-align: center; }
.oz-sidebar-footer div { font-size: 11px; color: var(--oz-muted-3); }
.oz-sidebar-footer a   { font-size: 11px; color: var(--oz-blue); text-decoration: none; }

/* ---------------------------------------------------------------- content */

.oz-main  { flex: 1; overflow-y: auto; padding: 40px 0; }
.oz-inner { max-width: 740px; margin: 0 auto; padding: 0 32px; }

.oz-step-header { margin-bottom: 32px; }
.oz-step-number {
    font-size: 12px; font-weight: 600; color: var(--oz-muted-3);
    text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px;
}
.oz-step-title { font-size: 26px; font-weight: 700; color: var(--oz-navy); margin: 0 0 16px; }
.oz-progress   { height: 4px; background: var(--oz-line-2); border-radius: 4px; overflow: hidden; }
.oz-progress-fill {
    height: 100%; border-radius: 4px; transition: width .5s ease;
    background: linear-gradient(90deg, #1a3a5c, #2e86c1);
}

.oz-body {
    background: #fff; border-radius: 16px; padding: 32px 36px;
    box-shadow: 0 2px 16px rgba(0,0,0,.05); border: 1px solid var(--oz-line);
}
.oz-intro { color: var(--oz-muted); font-size: 14.5px; line-height: 1.7; margin-bottom: 28px; }

/* ---------------------------------------------------------------- fields */

.oz-field { margin-bottom: 20px; }
.oz-field > label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--oz-ink-2); margin-bottom: 7px;
}
.oz-req { color: var(--oz-red); margin-right: 4px; }

.oz-input, .oz-select, textarea.oz-input {
    width: 100%; padding: 11px 14px; font-size: 14px;
    border: 1.5px solid var(--oz-border); border-radius: 10px;
    outline: none; color: var(--oz-ink); background: var(--oz-field);
    font-family: var(--oz-font);
    transition: border-color .2s, box-shadow .2s;
}
.oz-input:focus, .oz-select:focus {
    border-color: var(--oz-navy);
    box-shadow: 0 0 0 3px rgba(26,58,92,.1);
}
.oz-input:disabled, .oz-input[readonly] {
    background: #f0f3f6; color: var(--oz-muted-3); cursor: not-allowed;
}

/* v102 : l'indicatif et le numero, sur une seule ligne.
   La liste est calee a sa largeur utile - "+590  Guadeloupe..." ne doit pas
   pousser le champ du numero hors de l'ecran - et c'est le numero qui prend
   toute la place restante. Sans JavaScript la liste reste vide : elle
   s'efface alors d'elle-meme et le champ retrouve la largeur entiere. */
.oz-tel { display: flex; gap: 10px; align-items: stretch; }

/* UNE LARGEUR FIXE, ET MESUREE. A 118px, "+508 St-Pierre-et-Miquelon" se
   coupait en "+508 Saint-Pierr" et l'indicatif choisi devenait illisible.

   Pourquoi pas width:auto, qui ferait tenir la liste a son option la plus
   large : le navigateur mesure le texte et les marges interieures, mais PAS la
   place que la fleche du selecteur prend par-dessus. Mesure faite, il manquait
   trois pixels sur le libelle le plus long, et le mot se coupait quand meme.

   240px = 164px pour le plus long libelle, 15px de marge a gauche, 34px degages
   pour la fleche, et le reste en reserve. Fixe, les deux listes de l'ecran ont
   la meme largeur et les deux champs de numero s'alignent. */
.oz-tel .oz-tel-code {
    flex: 0 0 240px;
    width: 240px;
    max-width: 100%;
    padding-right: 34px;
}
.oz-tel .oz-tel-code:empty { display: none; }
.oz-tel .oz-input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) {
    .oz-tel { flex-wrap: wrap; }
    .oz-tel .oz-tel-code { flex: 1 1 100%; width: 100%; max-width: none; }
}
.oz-select {
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237f8c8d'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
.oz-input-sm { width: 180px; }

.oz-hint { font-size: 12px; color: var(--oz-muted-3); margin-top: 6px; line-height: 1.5; }
.oz-row  { display: flex; gap: 16px; flex-wrap: wrap; }
.oz-row > * { flex: 1; min-width: 150px; }
.oz-row .oz-grow-2 { flex: 2; }

.oz-check {
    display: flex; align-items: flex-start; gap: 10px; font-size: 14px;
    color: var(--oz-ink-2); cursor: pointer; margin-top: 8px; line-height: 1.5;
}
.oz-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--oz-navy); cursor: pointer; flex-shrink: 0; }

.oz-radios { display: flex; gap: 24px; flex-wrap: wrap; }
.oz-radios label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--oz-ink-2); cursor: pointer; }
.oz-radios input { accent-color: var(--oz-navy); cursor: pointer; }

.oz-section {
    font-size: 16px; font-weight: 700; color: var(--oz-navy);
    margin: 8px 0 20px; padding-bottom: 8px; border-bottom: 2px solid var(--oz-tint);
}
.oz-divider { height: 1px; background: var(--oz-line); margin: 28px 0; }

/* v93 : un encadre d'information respire aussi PAR LE HAUT.
   Il ne portait qu'une marge basse, si bien qu'il se collait a ce qui le
   precede des que celui-ci n'en avait pas - le recapitulatif de l'etape 10
   (.oz-sim, marge haute seulement) le touchait bord a bord.
   La marge haute ne cree pas d'ecart la ou il y en avait deja un : deux marges
   verticales voisines fusionnent, et la plus grande l'emporte. */
.oz-info {
    display: flex; align-items: flex-start; gap: 8px; padding: 14px 18px;
    background: var(--oz-info); border: 1px solid var(--oz-info-bd);
    border-radius: 10px; font-size: 13.5px; color: var(--oz-ink);
    line-height: 1.6; margin-top: 20px; margin-bottom: 24px;
}
.oz-info.oz-ok   { background: #eafaf1; border-color: var(--oz-green); }
.oz-info.oz-warn  { background: #fdf6ec; border-color: #e0a458; }
.oz-info.oz-error { background: #fdecea; border-color: #f5c6cb; color: #a94442; }

/* ---------------------------------------------------------------- blocks */

.oz-doc-card {
    display: flex; align-items: center; gap: 16px; padding: 16px 20px;
    background: var(--oz-field); border-radius: 12px;
    border: 1px solid var(--oz-line-2); margin-bottom: 12px;
}
.oz-doc-icon  { font-size: 28px; flex-shrink: 0; }
.oz-doc-title { font-size: 14px; font-weight: 600; color: var(--oz-navy); }
.oz-doc-sub   { font-size: 12px; color: var(--oz-muted); margin-top: 2px; }
.oz-doc-meta  { font-size: 12px; color: var(--oz-muted-3); margin-top: 2px; }
.oz-doc-btn {
    padding: 8px 18px; background: var(--oz-tint); border: none; border-radius: 8px;
    font-size: 12px; font-weight: 600; color: var(--oz-navy);
    cursor: pointer; white-space: nowrap; font-family: var(--oz-font);
}

.oz-type-card {
    display: flex; align-items: center; padding: 16px 20px;
    border-radius: 12px; border: 2px solid var(--oz-border-2);
    cursor: pointer; transition: all .2s; margin-bottom: 12px; background: #fff;
}
.oz-type-card:hover { border-color: var(--oz-blue); }
.oz-type-card input { display: none; }
.oz-type-mark {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--oz-muted-4); margin-right: 14px; flex-shrink: 0;
    transition: border .15s;
}
.oz-type-card input:checked ~ .oz-type-mark { border: 6px solid var(--oz-navy); }
.oz-type-card input:checked ~ .oz-type-label { font-weight: 600; }
.oz-type-card:has(input:checked) { border-color: var(--oz-navy); background: #f0f5fa; }
.oz-type-label { color: var(--oz-navy); }

.oz-upload {
    border: 2px dashed var(--oz-border); border-radius: 12px;
    padding: 4px; background: var(--oz-field);
}
.oz-upload-inner {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 20px 16px; gap: 4px;
}
.oz-upload-inner .oz-emoji { font-size: 28px; margin-bottom: 6px; }
.oz-upload-inner span { font-size: 13px; color: var(--oz-muted-2); text-align: center; }
.oz-upload input[type=file] { display: none; }
.oz-upload-btn {
    margin-top: 8px; padding: 7px 20px; background: var(--oz-navy);
    color: #fff; border: none; border-radius: 8px; font-size: 12px;
    font-weight: 600; cursor: pointer; font-family: var(--oz-font);
}

.oz-sim {
    background: linear-gradient(135deg, #f7f9fc 0%, #eef3f8 100%);
    border-radius: 16px; padding: 24px 28px; margin-top: 20px;
    border: 1px solid #dce5ef;
}
.oz-sim-title { font-size: 16px; font-weight: 700; color: var(--oz-navy); text-align: center; }
.oz-sim-row {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; margin-top: 20px; flex-wrap: wrap;
}
.oz-sim-item  { text-align: center; min-width: 120px; }
.oz-sim-value { font-size: 22px; font-weight: 800; color: var(--oz-navy); }
.oz-sim-value.oz-v-green { color: var(--oz-green); }
.oz-sim-label { font-size: 11px; color: var(--oz-muted-2); margin-top: 4px; }
.oz-sim-arrow { font-size: 22px; color: var(--oz-muted-4); }
.oz-sim-note  { font-size: 11px; color: var(--oz-muted-3); text-align: center; margin-top: 12px; }

.oz-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.oz-table tr { border-bottom: 1px solid var(--oz-line); }
.oz-table td { padding: 10px 12px; font-size: 14px; color: var(--oz-muted); }
.oz-table td:last-child { text-align: right; font-weight: 500; color: var(--oz-navy); }
.oz-table tr.oz-strong td:last-child { font-weight: 700; }
.oz-table tr.oz-gain   td:last-child { font-weight: 700; color: var(--oz-green); }

.oz-sign-area {
    border: 2px solid var(--oz-border); border-radius: 12px;
    background: var(--oz-field); position: relative; overflow: hidden;
}
.oz-sign-area canvas { width: 100%; height: 160px; cursor: crosshair; touch-action: none; display: block; }
.oz-sign-placeholder {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    color: var(--oz-muted-4); font-size: 14px; pointer-events: none;
}
.oz-clear-btn {
    margin-top: 8px; padding: 6px 16px; background: transparent;
    border: 1px solid var(--oz-border); border-radius: 8px;
    font-size: 12px; color: var(--oz-muted-2); cursor: pointer; font-family: var(--oz-font);
}

.oz-recap {
    margin-bottom: 20px; background: var(--oz-field); border-radius: 12px;
    overflow: hidden; border: 1px solid var(--oz-line);
}
.oz-recap-title {
    font-size: 14px; font-weight: 700; color: var(--oz-navy);
    padding: 14px 20px; background: var(--oz-tint); border-bottom: 1px solid #dce5ef;
}
.oz-recap-row {
    display: flex; justify-content: space-between;
    padding: 10px 20px; border-bottom: 1px solid #f0f3f6;
}
.oz-recap-label { font-size: 13px; color: var(--oz-muted-2); }
.oz-recap-value { font-size: 13px; font-weight: 600; color: var(--oz-ink); }

/* ---------------------------------------------------------------- actions */

.oz-actions { display: flex; align-items: center; margin-top: 28px; gap: 12px; }
.oz-spacer  { flex: 1; }

.oz-btn {
    padding: 13px 32px; border: none; border-radius: 12px; font-size: 14px;
    font-weight: 700; cursor: pointer; letter-spacing: .3px;
    font-family: var(--oz-font); text-decoration: none;
    display: inline-flex; align-items: center; transition: all .2s;
}
.oz-btn:hover { opacity: .92; transform: translateY(-1px); }
.oz-btn-primary { background: var(--oz-navy); color: #fff; }
.oz-btn-secondary {
    background: #fff; color: var(--oz-muted); font-weight: 600;
    padding: 13px 28px; border: 1.5px solid var(--oz-border);
}
.oz-btn-success { background: linear-gradient(135deg, #27ae60, #219a52); color: #fff; }

/* ---------------------------------------------------------------- mobile */

.oz-mobile-header { display: none; }

@media (max-width: 768px) {
    .oz-mobile-header {
        display: flex; position: fixed; top: 0; left: 0; right: 0;
        height: 56px; background: var(--oz-navy); z-index: 1000;
        align-items: center; justify-content: space-between; padding: 0 16px;
    }
    .oz-hamburger { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }
    .oz-mobile-title { color: #fff; font-weight: 700; font-size: 16px; letter-spacing: 2px; }
    .oz-step-badge { color: #8ab4d7; font-size: 13px; font-weight: 600; }

    .oz-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        transform: translateX(-100%);
    }
    .oz-sidebar.oz-open { transform: translateX(0); }
    .oz-main   { padding-top: 72px; }
    .oz-inner  { padding: 0 16px; }
    .oz-body   { padding: 24px 20px; }
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #dce1e8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #bdc3c7; }


/* ================================================================ landing */

body.oz-landing-body {
    overflow: auto;
    background: #fff;
}

/* ---- top bar ---- */

.oz-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 48px; background: rgba(255,255,255,.88);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(16,58,102,.08);
    position: sticky; top: 0; z-index: 50;
}
.oz-top-brand    { display: flex; align-items: baseline; }
.oz-top-logo     { font-size: 21px; font-weight: 800; color: var(--oz-navy); letter-spacing: 3.5px; }
.oz-top-logo-sub { font-size: 10px; font-weight: 600; color: var(--oz-gold-dk); letter-spacing: 4px; margin-left: 9px; }
.oz-top-user     { display: flex; align-items: center; gap: 16px; }
.oz-top-user form { margin: 0; }
.oz-top-name     { font-size: 13px; color: var(--oz-muted); }

.oz-link-btn {
    background: none; border: none; cursor: pointer;
    font-family: var(--oz-font); font-size: 13px; color: var(--oz-muted-2);
    text-decoration: underline; padding: 0;
}
.oz-link-btn:hover { color: var(--oz-navy); }

/* ---- hero ---- */

.oz-hero {
    position: relative;
    background-image: url("../img/hero.svg");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 104px 32px 210px;
}
.oz-hero-inner { max-width: 900px; margin: 0 auto; text-align: center; }

.oz-hero-eyebrow {
    font-size: 12px; font-weight: 600; color: var(--oz-gold-dk);
    text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 18px;
}
.oz-hero-title {
    font-size: 52px; line-height: 1.1; font-weight: 700;
    color: var(--oz-navy); margin-bottom: 22px; letter-spacing: -.5px;
}
.oz-hero-accent {
    color: var(--oz-gold-dk);
    box-shadow: inset 0 -.13em 0 rgba(200,155,60,.16);
}
.oz-hero-lead {
    font-size: 17px; line-height: 1.75; color: var(--oz-muted);
    max-width: 640px; margin: 0 auto 38px;
}
.oz-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.oz-btn-gold {
    background: linear-gradient(135deg, #d4a94b, #b8873090);
    background: linear-gradient(135deg, #d4a94b 0%, #b88730 100%);
    color: #fff; box-shadow: 0 6px 18px rgba(184,135,48,.28);
}
.oz-btn-ghost {
    background: rgba(255,255,255,.75); color: var(--oz-navy);
    border: 1.5px solid rgba(16,58,102,.18); font-weight: 600;
}

/* ---- figures strip ---- */

.oz-strip { background: var(--oz-navy); padding: 34px 32px; }
.oz-strip-inner {
    max-width: 1040px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center;
}
.oz-fact-value { font-size: 27px; font-weight: 800; color: #fff; letter-spacing: -.5px; }
.oz-fact-label { font-size: 12px; color: #9fc0dd; margin-top: 6px; line-height: 1.45; }

/* ---- how it works ---- */

.oz-how { padding: 88px 32px; background: #fff; }
.oz-how-inner { max-width: 1040px; margin: 0 auto; }

.oz-section-eyebrow {
    font-size: 12px; font-weight: 600; color: var(--oz-gold-dk);
    text-transform: uppercase; letter-spacing: 2.5px; text-align: center; margin-bottom: 12px;
}
.oz-section-title {
    font-size: 32px; font-weight: 700; color: var(--oz-navy);
    text-align: center; margin-bottom: 52px;
}

.oz-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.oz-step-card {
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    border: 1px solid var(--oz-line-2); border-radius: 18px;
    padding: 32px 28px 26px; position: relative;
    box-shadow: 0 3px 18px rgba(16,58,102,.05);
    transition: transform .2s, box-shadow .2s;
}
.oz-step-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(16,58,102,.10); }
.oz-step-num {
    font-size: 13px; font-weight: 800; color: var(--oz-gold-dk);
    letter-spacing: 1px; margin-bottom: 14px;
}
.oz-step-card h3 { font-size: 18px; font-weight: 700; color: var(--oz-navy); margin-bottom: 12px; }
.oz-step-card p  { font-size: 14px; line-height: 1.7; color: var(--oz-muted); margin-bottom: 18px; }
.oz-step-meta {
    display: inline-block; font-size: 11px; font-weight: 600;
    color: var(--oz-blue); background: var(--oz-tint);
    padding: 5px 12px; border-radius: 20px;
}

/* ---- footer ---- */

.oz-foot {
    background: #f7fafd; border-top: 1px solid var(--oz-line-2);
    padding: 40px 32px 34px;
    background-image: url("../img/wash.svg");
    background-size: 100% auto; background-position: center top; background-repeat: no-repeat;
}
.oz-foot-inner { max-width: 1040px; margin: 0 auto; text-align: center; }
.oz-foot-tech  { font-size: 12.5px; color: var(--oz-muted-3); margin-bottom: 20px; }
.oz-foot-legal { font-size: 12px; color: var(--oz-muted-3); margin-top: 20px; }

.oz-tools {
    display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 11px 20px; border: 1px dashed rgba(16,58,102,.18);
    border-radius: 10px; background: rgba(255,255,255,.7);
}
.oz-tools span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--oz-muted-3); }
.oz-tools a    { font-size: 13px; color: var(--oz-blue); text-decoration: none; }
.oz-tools a:hover { text-decoration: underline; }

/* ---- landing, small screens ---- */

@media (max-width: 860px) {
    .oz-top      { padding: 16px 22px; }
    .oz-hero     { padding: 64px 22px 150px; }
    .oz-hero-title { font-size: 34px; }
    .oz-hero-lead  { font-size: 15.5px; }
    .oz-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .oz-how      { padding: 56px 22px; }
    .oz-steps    { grid-template-columns: 1fr; }
    .oz-section-title { font-size: 25px; }
}

/* ---- a touch of the same warmth inside the wizard ---- */

.oz-fund-badge {
    background: var(--oz-gold-tint);
    color: var(--oz-gold-dk);
}
.oz-progress-fill { background: linear-gradient(90deg, #103a66, #2e8bc0 65%, #d4a94b); }


/* ================================================================
   Form refinement pass.
   Everything below deliberately sits at the end so it wins on order,
   and uses element+class selectors where an earlier rule was more specific.
   ================================================================ */

/* ---- the card the form sits in ---- */

.oz-body {
    padding: 36px 40px;
    border-radius: 18px;
    border: 1px solid rgba(16,58,102,.08);
    box-shadow: 0 1px 2px rgba(16,58,102,.04), 0 8px 28px rgba(16,58,102,.06);
    position: relative;
}
.oz-body::before {
    content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--oz-navy), var(--oz-blue) 60%, var(--oz-gold));
    opacity: .5;
}

.oz-intro { font-size: 15px; margin-bottom: 30px; }

/* ---- labels and inputs ---- */

.oz-field { margin-bottom: 22px; }

.oz-field > label {
    font-size: 12.5px; font-weight: 600; letter-spacing: .2px;
    color: var(--oz-ink-2); margin-bottom: 8px;
}
.oz-req { color: var(--oz-red); font-weight: 700; }

.oz-input, .oz-select, textarea.oz-input {
    padding: 12px 15px; font-size: 14.5px;
    border: 1.5px solid #e3e9f0; border-radius: 12px;
    background-color: #fcfdfe;
}

/* the shorthand above would wipe the arrow, so the select keeps its own image */
.oz-select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235a6c7d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}
.oz-select:focus { background-color: #fff; }
.oz-input::placeholder { color: #b6c0cd; }
.oz-input:hover, .oz-select:hover { border-color: #cdd8e4; }
.oz-input:focus, .oz-select:focus {
    border-color: var(--oz-blue); background-color: #fff;
    box-shadow: 0 0 0 3.5px rgba(46,139,192,.13);
}
.oz-input[readonly] {
    background-color: #f4f7fa; border-style: dashed; border-color: #dbe3ec;
    color: var(--oz-muted-2); cursor: default;
}
.oz-hint { font-size: 12px; margin-top: 7px; }

/* ---- section headings get a small accent bar ---- */

.oz-section {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--oz-navy);
    border-bottom: none; padding-bottom: 0; margin: 30px 0 20px;
}
.oz-section::before {
    content: ""; width: 22px; height: 3px; border-radius: 2px; flex: 0 0 22px;
    background: linear-gradient(90deg, var(--oz-navy), var(--oz-gold));
}
.oz-section::after {
    content: ""; flex: 1; height: 1px; background: var(--oz-line);
}
.oz-body > .oz-section:first-of-type { margin-top: 4px; }

.oz-divider { margin: 26px 0; }

/* ---- Oui / Non and other small choices, as a segmented control ---- */

.oz-radios { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.oz-radios label {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-width: 92px; padding: 9px 20px;
    border: 1.5px solid #e3e9f0; border-radius: 11px;
    background: #fcfdfe; font-size: 14px; font-weight: 500;
    color: var(--oz-muted); cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.oz-radios label:hover { border-color: var(--oz-blue); color: var(--oz-navy); }
.oz-radios input { position: absolute; opacity: 0; pointer-events: none; }
.oz-radios label:has(input:checked) {
    border-color: var(--oz-navy); background: var(--oz-tint);
    color: var(--oz-navy); font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--oz-navy);
}

/* ---- check boxes ---- */

label.oz-check {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 16px; margin-top: 10px;
    border: 1.5px solid #e8edf3; border-radius: 12px;
    background: #fcfdfe; font-size: 14px; line-height: 1.6;
    color: var(--oz-ink-2); cursor: pointer;
    transition: border-color .15s, background .15s;
}
label.oz-check:hover { border-color: #cdd8e4; }
label.oz-check:has(input:checked) { border-color: var(--oz-navy); background: var(--oz-tint); }
label.oz-check input {
    appearance: none; -webkit-appearance: none;
    width: 19px; height: 19px; margin: 1px 0 0; flex: 0 0 19px;
    border: 1.5px solid #c3cedb; border-radius: 6px; background: #fff;
    cursor: pointer; position: relative; transition: all .15s;
}
label.oz-check input:checked { background: var(--oz-navy); border-color: var(--oz-navy); }
label.oz-check input:checked::after {
    content: ""; position: absolute; left: 5.5px; top: 1.5px;
    width: 5px; height: 10px; border: solid #fff;
    border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ---- subscriber type cards.
        element+class so this beats the earlier `.oz-field > label` rule ---- */

label.oz-type-card {
    display: flex; align-items: center; gap: 14px;
    padding: 17px 20px; margin-bottom: 10px;
    border: 1.5px solid #e3e9f0; border-radius: 13px;
    background: #fcfdfe; cursor: pointer;
    font-size: 15px; font-weight: 500; color: var(--oz-ink-2);
    transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
label.oz-type-card:hover {
    border-color: var(--oz-blue); background: #fff;
    box-shadow: 0 3px 12px rgba(16,58,102,.07); transform: translateY(-1px);
}
label.oz-type-card input { position: absolute; opacity: 0; pointer-events: none; }

.oz-type-mark {
    display: block; flex: 0 0 20px; width: 20px; height: 20px;
    border-radius: 50%; border: 1.5px solid #c3cedb; background: #fff;
    position: relative; margin: 0; transition: all .15s;
}
label.oz-type-card:has(input:checked) {
    border-color: var(--oz-navy); background: var(--oz-tint);
    box-shadow: inset 0 0 0 1px var(--oz-navy);
}
label.oz-type-card:has(input:checked) .oz-type-mark {
    border-color: var(--oz-navy); border-width: 1.5px;
}
label.oz-type-card:has(input:checked) .oz-type-mark::after {
    content: ""; position: absolute; inset: 3.5px;
    border-radius: 50%; background: var(--oz-navy);
}
label.oz-type-card:has(input:checked) .oz-type-label { font-weight: 600; color: var(--oz-navy); }
.oz-type-label { color: inherit; }

/* ---- notices ---- */

.oz-info {
    gap: 11px; padding: 14px 18px; border-radius: 12px;
    border-width: 1px; border-left-width: 3px; font-size: 13.5px;
}
.oz-info.oz-warn  { border-left-color: var(--oz-gold-dk); }
.oz-info.oz-ok    { border-left-color: var(--oz-green); }
.oz-info.oz-error { border-left-color: var(--oz-red); }

/* v105 : un encart masque doit VRAIMENT disparaitre.
   L'attribut hidden vaut display:none dans la feuille du navigateur, de
   specificite nulle ; .oz-info { display:flex } le bat sans effort, et le bloc
   serait reste visible en permanence. La regle est posee ICI, apres la seconde
   definition de .oz-info : ecrite plus haut, elle aurait perdu a son tour. */
.oz-info[hidden] { display: none; }

/* ---- upload ---- */

.oz-upload {
    border: 1.5px dashed #cfdae6; border-radius: 13px; background: #fbfcfe;
    display: block; cursor: pointer; transition: border-color .15s, background .15s;
}
.oz-upload:hover { border-color: var(--oz-blue); background: #f8fbfe; }
.oz-upload-btn {
    display: inline-block; background: var(--oz-navy); color: #fff;
    padding: 8px 22px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
}

/* ---- actions ---- */

.oz-actions { margin-top: 26px; }
.oz-btn { border-radius: 10px; }
.oz-btn-primary { box-shadow: 0 4px 14px rgba(16,58,102,.20); }
.oz-btn-secondary:hover { border-color: var(--oz-blue); color: var(--oz-navy); }

/* ---- rows keep their proportions on narrow screens ---- */

@media (max-width: 720px) {
    .oz-body { padding: 26px 20px; }
    .oz-row  { gap: 12px; }
    .oz-radios label { min-width: 78px; }
}


/* ================================================================
   Validation and second design pass.
   ================================================================ */

/* ---- per-field errors ---- */

.oz-field-err {
    display: none; margin-top: 6px; font-size: 12.5px; font-weight: 500;
    color: var(--oz-red); line-height: 1.45;
}
.oz-field-err.field-validation-error { display: block; }
.oz-field-err.field-validation-error::before {
    content: "!"; display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; margin-right: 6px; border-radius: 50%;
    background: var(--oz-red); color: #fff; font-size: 10px; font-weight: 700;
    vertical-align: -2px;
}

.oz-input.input-validation-error,
.oz-select.input-validation-error {
    border-color: var(--oz-red); background-color: #fffbfb;
}
.oz-input.input-validation-error:focus,
.oz-select.input-validation-error:focus {
    box-shadow: 0 0 0 3.5px rgba(176,58,46,.13);
}

/* ---- the summary at the top of the card ---- */

.oz-info.oz-error {
    background: #fdf2f1; border-color: #f0cfcb; border-left-color: var(--oz-red);
    color: #8a2f26; font-weight: 500;
}
.oz-info.oz-error div { margin: 2px 0; }

/* ---- second design pass ---- */

.oz-body { padding: 38px 42px; }

.oz-intro {
    padding-bottom: 22px; margin-bottom: 26px;
    border-bottom: 1px solid var(--oz-line);
}

/* pairs of fields sit side by side and stay aligned even when one shows an error */
.oz-row { align-items: flex-start; }
.oz-row > * { margin-bottom: 0; }
.oz-row + .oz-field, .oz-row { margin-bottom: 22px; }

/* a required mark that reads as a mark, not as punctuation */
/* v13 : l'asterisque rouge suffit, la pastille OBLIGATOIRE est retiree. */
/* v94, demande d'OSEOM : l'asterisque passe APRES le libelle - "Situation de
   famille *" et non "* Situation de famille". Un seul reglage suffit : le
   libelle est une boite flex, donc l'ordre d'affichage se decide ici et vaut
   pour les quarante champs a la fois. Le texte du libelle est un element
   anonyme, d'ordre 0 ; l'asterisque passe derriere avec order: 1.
   La marge droite heritee plus haut n'a plus de sens : l'ecart est tenu par
   le gap de la boite. */
.oz-field > label { display: flex; align-items: baseline; gap: 6px; }
.oz-req { order: 1; margin-right: 0; color: var(--oz-red); font-weight: 700; }

/* v102 : l'asterisque du consentement respire.
   Sur un libelle de champ, l'ecart vient du gap du conteneur flex - "Situation
   de famille *". Dans la case a cocher de l'etape 2 l'asterisque est un enfant
   EN LIGNE d'un simple <span> : aucun gap ne s'applique, et il se collait au
   point final, "OFINVEST.*". Une marge suffit, et elle ne concerne que ce cas. */
label.oz-check .oz-req { margin-left: 4px; }

/* selects and inputs line up on the same baseline inside a row */
.oz-row .oz-field { margin-bottom: 0; }

.oz-divider {
    margin: 30px 0; height: 1px;
    background: linear-gradient(90deg, var(--oz-line), transparent);
}

.oz-hint { display: flex; gap: 6px; }
.oz-hint::before {
    content: "i"; flex: 0 0 13px; height: 13px; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #dfe7f0; color: var(--oz-muted-2);
    font-size: 9px; font-weight: 700; font-style: normal;
}

/* the action bar reads as part of the card */
.oz-actions {
    background: #fff; border: 1px solid rgba(16,58,102,.08);
    border-radius: 14px; padding: 16px 20px; margin-top: 18px;
    box-shadow: 0 1px 2px rgba(16,58,102,.04);
}

.oz-btn-success { box-shadow: 0 4px 14px rgba(39,174,96,.25); }
.oz-btn:disabled { cursor: not-allowed; transform: none; }



/* ================================================================
   v14 - PASSE PREMIUM

   Ajoutee a la fin, comme les passes v13 : elle gagne par l'ordre de
   la cascade et ne supprime rien. Retirer ce bloc rend exactement la
   v13, ce qui est la raison de le poser ici plutot que de reecrire
   le fichier la veille d'une demonstration.

   Le point de depart n'est plus une intuition : les couleurs sont
   relevees sur oseom-finance.fr le 26/08. Le portail vivait sur un
   marine #1a3a5c qui n'est la couleur d'aucun support de la maison.
   Le bleu OSEOM est un cobalt franc, #1c4794, accompagne d'un ambre
   #eaa43a et d'un vert-de-gris #4ba69d. Aligner le portail sur le
   site est ce qui le fait passer pour un produit de la maison et non
   pour un outil interne.

   Trois autres leviers, dans l'ordre de ce qui se voit :

   1. Les gris. La v13 herite d'une palette dont les gris tirent sur
      le vert (#95a5a6, #7f8c8d, #ecf0f1). C'est la signature des
      interfaces de 2013 et c'est ce qui date la plateforme le plus
      vite. Ils passent en ardoise franchement froide.
   2. Le relief. Toutes les cartes portaient la meme ombre plate a
      5 %. Trois niveaux desormais, du repos a l'element flottant.
   3. Calibri. Impose par le client, donc on ne le remplace pas : on
      le fait respirer. Chasse resserree dans les grandes tailles,
      chasse tres ouverte dans les petites capitales, et chiffres
      tabulaires partout ou une colonne doit s'aligner.
   ================================================================ */

:root {
    /* ---- la marque ---- */
    --oz-brand:      #1c4794;
    --oz-navy-deep:  #12305f;
    --oz-navy:       #1c4794;
    --oz-navy-soft:  #2e5fb0;
    --oz-blue:       #2c7fb8;
    --oz-blue-soft:  #ddeef8;

    /* ---- l'ambre de la maison : accent et aplat, jamais du texte fin ---- */
    --oz-gold:       #eaa43a;
    --oz-gold-lt:    #f4cd8e;
    --oz-gold-dk:    #9c6b18;   /* la seule version qui tient le contraste sur blanc */
    --oz-gold-tint:  #f7f0d8;

    /* ---- le vert-de-gris de la marque : decoratif, trop clair pour du texte ---- */
    --oz-teal:       #4ba69d;
    --oz-teal-tint:  #dbedeb;
    --oz-teal-dk:    #16645c;   /* le vert-de-gris qui tient le contraste sur blanc */
    --oz-gold-ink:   #33240a;   /* encre posee sur un aplat ambre */

    /* ---- etats ---- */
    --oz-green:      #1a8a52;
    --oz-green-dk:   #13703f;
    --oz-red:        #b8362a;

    /* ---- ardoise froide, a la place des gris verdatres ---- */
    --oz-ink:        #17233a;
    --oz-ink-2:      #26364e;
    --oz-muted:      #506176;
    --oz-muted-2:    #64748b;
    --oz-muted-3:    #7b8798;
    --oz-muted-4:    #a7b1bf;

    --oz-bg:         #f4f6fa;
    --oz-card:       #ffffff;
    --oz-field:      #fbfcfe;
    --oz-tint:       #eaf0fa;
    --oz-info:       #eff5fd;
    --oz-info-bd:    #c3d8f2;
    --oz-line:       #e9edf3;
    --oz-line-2:     #e3e9f1;
    --oz-border:     #dbe2ec;
    --oz-border-2:   #dfe5ef;

    /* ---- relief : trois niveaux, pas un seul ---- */
    --oz-sh-1: 0 1px 2px rgba(18,48,95,.06);
    --oz-sh-2: 0 1px 2px rgba(18,48,95,.05), 0 6px 16px rgba(18,48,95,.07);
    --oz-sh-3: 0 2px 4px rgba(18,48,95,.05), 0 18px 44px rgba(18,48,95,.12);
    --oz-sh-gold: 0 6px 18px rgba(184,124,32,.26);

    /* ---- rayons : une echelle, au lieu de douze valeurs au hasard ---- */
    --oz-r-sm: 8px;
    --oz-r:   12px;
    --oz-r-lg:16px;
    --oz-r-xl:20px;

    /* ---- un seul anneau de focus pour toute la plateforme ---- */
    --oz-ring: 0 0 0 3px rgba(28,71,148,.24);
}

/* ---------------------------------------------------------------- fonte

   Calibri est impose. Il n'a pas de graisse intermediaire et ses
   terminaisons sont rondes : agrandi tel quel, il fait mou. Ce qui le
   rend cher, c'est le contraste d'echelle - grandes tailles serrees,
   petites capitales tres ouvertes - et des chiffres qui s'alignent. */

body.oz, body.ez, body.lp, body.cx {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.oz-step-title, .oz-section-title, .oz-hero-title, .oz-sim-value {
    letter-spacing: -.018em;
}

/* tout ce qui est un nombre s'aligne en colonne */
.oz-sim-value, .oz-table td:last-child, .oz-recap-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* les petites capitales portent le luxe : tres ouvertes, jamais grasses au point de baver */
.oz-step-number, .oz-section, .oz-section-eyebrow, .oz-hero-eyebrow {
    letter-spacing: .16em;
}

::selection { background: rgba(28,71,148,.15); color: var(--oz-navy-deep); }

/* ---------------------------------------------------------------- focus

   La v13 n'avait pas d'anneau de focus coherent : au clavier on se
   perdait. Un seul anneau, visible, et seulement au clavier. */

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--oz-ring);
    border-radius: var(--oz-r-sm);
}
label.oz-check:has(input:focus-visible),
label.oz-type-card:has(input:focus-visible),
.oz-radios label:has(input:focus-visible) {
    box-shadow: var(--oz-ring);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: #ccd5e2; border-radius: 999px;
    border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #aab7c9; background-clip: content-box; }

/* ---------------------------------------------------------------- le rail d'etapes

   La colonne de gauche du parcours. Elle annoncait l'avancement avec
   des pastilles isolees ; un filet continu les relie desormais, ce
   qui se lit d'un coup d'oeil au lieu de se compter. */

.oz-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
    border-right: 1px solid var(--oz-line-2);
    box-shadow: 1px 0 0 rgba(18,48,95,.03), 4px 0 24px rgba(18,48,95,.04);
}
.oz-sidebar-header { padding: 26px 24px 22px; }
.oz-logo { color: var(--oz-navy); letter-spacing: .18em; font-size: 26px; }
.oz-logo-sub { color: var(--oz-muted-3); letter-spacing: .42em; font-size: 10px; }

.oz-nav { padding: 14px 12px; position: relative; }
.oz-nav li { position: relative; }
.oz-nav li + li::before {
    content: ""; position: absolute; left: 25px; top: -7px; height: 7px; width: 2px;
    background: var(--oz-line-2); border-radius: 2px;
}
.oz-nav li.done + li::before { background: var(--oz-green); opacity: .45; }

.oz-nav a { padding: 10px 12px; border-radius: var(--oz-r-sm); gap: 13px; }
.oz-nav a:hover { background: var(--oz-tint); }
.oz-nav li.current a {
    background: var(--oz-tint);
    box-shadow: inset 0 0 0 1px rgba(28,71,148,.14);
}
.oz-dot { width: 27px; height: 27px; font-size: 11px; box-shadow: 0 0 0 3px #fff; }
.oz-nav li.current .oz-dot {
    background: var(--oz-navy);
    box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(28,71,148,.35);
}
.oz-nav li.done .oz-dot { background: var(--oz-green); }
.oz-nav li.done .oz-nav-text { color: var(--oz-green-dk); }
.oz-nav-text { font-size: 12.5px; }

.oz-fund-badge {
    background: var(--oz-gold-tint); color: var(--oz-gold-dk);
    border: 1px solid rgba(234,164,58,.34); font-weight: 700; letter-spacing: .06em;
}

/* ---------------------------------------------------------------- la carte du formulaire */

.oz-main { padding: 44px 0 56px; }

.oz-step-number { color: var(--oz-gold-dk); font-weight: 700; }
.oz-step-title { font-size: 29px; color: var(--oz-navy-deep); margin-bottom: 18px; }

.oz-progress { height: 5px; background: var(--oz-line-2); }
.oz-progress-fill {
    background: linear-gradient(90deg, var(--oz-navy-deep), var(--oz-brand) 55%, var(--oz-gold));
}

.oz-body {
    border-radius: var(--oz-r-lg);
    border: 1px solid rgba(18,48,95,.07);
    box-shadow: var(--oz-sh-2);
}
.oz-body::before {
    left: 0; right: 0; height: 3px;
    border-radius: var(--oz-r-lg) var(--oz-r-lg) 0 0;
    background: linear-gradient(90deg, var(--oz-navy-deep), var(--oz-brand) 45%, var(--oz-gold));
    opacity: 1;
}

.oz-section { color: var(--oz-navy); }
.oz-section::before {
    background: linear-gradient(90deg, var(--oz-brand), var(--oz-gold));
    width: 24px; flex-basis: 24px;
}

/* ---------------------------------------------------------------- champs */

.oz-input, .oz-select, textarea.oz-input {
    border-radius: var(--oz-r-sm);
    border-color: var(--oz-border);
}
.oz-input:hover, .oz-select:hover { border-color: #c3cede; }
.oz-input:focus, .oz-select:focus, textarea.oz-input:focus {
    border-color: var(--oz-brand);
    box-shadow: var(--oz-ring);
}
.oz-radios label, label.oz-check, label.oz-type-card { border-radius: var(--oz-r-sm); }
.oz-radios label:has(input:checked),
label.oz-check:has(input:checked),
label.oz-type-card:has(input:checked) {
    border-color: var(--oz-brand); background: var(--oz-tint);
    box-shadow: inset 0 0 0 1px var(--oz-brand);
}
label.oz-check input:checked { background: var(--oz-brand); border-color: var(--oz-brand); }
label.oz-type-card:has(input:checked) .oz-type-mark::after { background: var(--oz-brand); }

.oz-hint::before { background: var(--oz-tint); color: var(--oz-navy); }

/* ---------------------------------------------------------------- blocs */

.oz-info { border-radius: var(--oz-r-sm); }
.oz-info.oz-ok {
    background: var(--oz-teal-tint);
    border-color: rgba(75,166,157,.5);
    border-left-color: var(--oz-teal);
}

.oz-sim {
    background: linear-gradient(135deg, var(--oz-tint) 0%, #f6f9fd 100%);
    border: 1px solid rgba(28,71,148,.12);
    border-radius: var(--oz-r-lg);
    box-shadow: var(--oz-sh-1);
}
.oz-sim-value { color: var(--oz-navy-deep); font-size: 24px; }
.oz-sim-value.oz-v-green { color: var(--oz-green-dk); }
.oz-sim-arrow { color: var(--oz-gold); }

.oz-recap { border-radius: var(--oz-r); border-color: var(--oz-line-2); }
.oz-recap-title {
    background: var(--oz-tint); color: var(--oz-navy);
    border-bottom-color: rgba(28,71,148,.12); letter-spacing: .04em;
}

.oz-upload { border-radius: var(--oz-r); }
.oz-upload:hover { border-color: var(--oz-brand); background: #f7fafe; }
.oz-upload-btn { background: var(--oz-navy); border-radius: var(--oz-r-sm); }

.oz-doc-card { border-radius: var(--oz-r); border-color: var(--oz-line-2); }
.oz-doc-btn { background: var(--oz-tint); color: var(--oz-navy); border-radius: var(--oz-r-sm); }

/* ---------------------------------------------------------------- boutons

   Un bouton premium se reconnait a son etat actif : il s'enfonce. La
   v13 montait au survol et ne redescendait jamais. */

.oz-btn {
    border-radius: var(--oz-r-sm);
    transition: background .18s, box-shadow .18s, transform .12s;
}
.oz-btn:hover { opacity: 1; transform: translateY(-1px); }
.oz-btn:active { transform: translateY(0); }

.oz-btn-primary {
    background: linear-gradient(180deg, var(--oz-navy-soft) 0%, var(--oz-brand) 60%);
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 4px 14px rgba(28,71,148,.28);
}
.oz-btn-primary:hover {
    background: linear-gradient(180deg, #3568bd 0%, #1f4fa3 60%);
    box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 8px 22px rgba(28,71,148,.34);
}
.oz-btn-primary:active { box-shadow: 0 2px 6px rgba(28,71,148,.3) inset; }

.oz-btn-secondary { border-color: var(--oz-border); color: var(--oz-muted); }
.oz-btn-secondary:hover { border-color: var(--oz-brand); color: var(--oz-navy); background: var(--oz-tint); }

.oz-btn-success {
    background: linear-gradient(180deg, #23a163 0%, var(--oz-green) 60%);
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 4px 14px rgba(26,138,82,.28);
}
.oz-btn-gold {
    background: linear-gradient(180deg, var(--oz-gold) 0%, #d18f22 100%);
    color: #33240a;
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, var(--oz-sh-gold);
}

.oz-actions {
    border-radius: var(--oz-r);
    border-color: rgba(18,48,95,.07);
    box-shadow: var(--oz-sh-1);
}

/* ---------------------------------------------------------------- mouvement

   Une plateforme financiere ne doit pas s'agiter, et un utilisateur
   qui a demande moins d'animation doit etre ecoute. */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* -------------------------------------------------------------------------
   v23 : le vrai logo dans le parcours de souscription.
   La barre laterale est blanche -> le fichier d'origine.
   La barre mobile est marine    -> la version blanche.
   ---------------------------------------------------------------------- */
/* v102 : le logo est CENTRE dans la barre laterale.
   .oz-sidebar-header porte bien text-align:center, mais l'image est un bloc de
   largeur automatique : text-align n'aligne que du contenu en ligne, et le bloc
   restait colle a gauche. Les marges automatiques, elles, centrent un bloc. */
.oz-logo-img { display: block; height: 44px; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; }
.oz-mobile-title img { display: block; height: 26px; width: auto; object-fit: contain; }

/* =========================================================================
   v33 - LE BOUTON "PARCOURIR / REMPLACER" REDEVIENT LISIBLE
   =========================================================================
   Il s'affichait en gris sur le marine, presque illisible. Ce n'etait pas une
   couleur oubliee : .oz-upload-btn pose bien color:#fff (l.220 et l.662), mais
   le bouton est un <span> a l'interieur de .oz-upload-inner, et

       .oz-upload-inner span   (0,1,1)  l'emporte sur
       .oz-upload-btn          (0,1,0)

   quelle que soit leur place dans la feuille. Remonter la regle n'aurait donc
   rien change ; il faut une specificite superieure.

   On ne touche pas a la ligne 216 : elle habille legitimement le nom du
   fichier et le libelle de la zone de depot, qui sont des <span> eux aussi.
   ------------------------------------------------------------------------ */
.oz-upload-inner .oz-upload-btn { color: #fff; }
.oz-upload:hover .oz-upload-btn { color: #fff; }

/* v64 - le millesime de l'avis d'imposition, sous son emplacement de depot. */
/* v115 - la meme boite sert la date d'expiration de la piece d'identite : c'est
   le meme geste, une precision demandee sous un emplacement de depot, et deux
   habillages differents pour deux champs voisins se verraient. Le selecteur est
   elargi plutot que recopie - une copie aurait derive a la premiere retouche. */
.oz-annee, .oz-expiration {
    margin-top: 12px; padding: 12px 14px;
    background: #f7f9fc; border: 1px solid #e3e9f2; border-radius: 8px;
}
/* v95 : le libelle est une boite flex, comme ceux de .oz-field, pour que
   l'asterisque des champs requis se place APRES le texte - c'est
   .oz-req { order: 1 } qui s'en charge, et il ne peut le faire que sur un
   element flex. Sans cela l'asterisque resterait colle devant le libelle,
   seul de son espece dans tout le parcours. */
.oz-annee label, .oz-expiration label {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 12px; font-weight: 600; color: #12305f; margin-bottom: 6px;
}
.oz-annee .oz-hint, .oz-expiration .oz-hint { margin-top: 6px; }

/* v116 - L'ACCORD ENTRE LE CODE POSTAL ET LA COMMUNE, DIT SOUS LE CHAMP.
   ------------------------------------------------------------------------
   Il ne pouvait pas se dire dans la liste : un <datalist> filtre ses
   propositions par ce qui est deja tape, donc sur un champ portant "Rennes"
   aucune commune de 75001 ne s'affichait. Le message vit donc a cote, la ou
   le filtrage ne l'atteint pas.

   Ton d'ALERTE et non d'erreur - ambre, pas rouge. La plateforme signale, elle
   ne refuse pas : hors ligne on ne sait rien, et la Base Adresse Nationale
   ignore certains codes CEDEX qui sont pourtant de vraies adresses.

   La regle est posee EN FIN DE FEUILLE, apres .oz-hint et tout ce qui pourrait
   lui disputer un display : une declaration placee avant celle qu'elle veut
   corriger ne s'applique jamais. */
.oz-villes-avis {
    display: block;
    margin-top: 6px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #7a4b00;
    background: #fff8ec;
    border: 1px solid #f0d9b0;
    border-radius: 8px;
}
.oz-villes-avis[hidden] { display: none; }

/* La correction se prend en un clic : lire l'erreur et devoir retaper la
   commune ne serait que la moitie du service. */
.oz-villes-fix {
    font: inherit;
    font-weight: 700;
    color: #12305f;
    background: #fff;
    border: 1px solid #c9d6e8;
    border-radius: 6px;
    padding: 1px 8px;
    margin: 0 1px;
    cursor: pointer;
}
.oz-villes-fix:hover { background: #eef3fb; border-color: #12305f; }
.oz-villes-fix:focus-visible { outline: 2px solid #12305f; outline-offset: 1px; }


/* =========================================================================
   v120 - LE PARCOURS SUR TELEPHONE (375 / 430) ET TABLETTE (768 / 1024)
   =========================================================================
   Tout ce bloc est pose EN FIN DE FEUILLE, et pour une raison precise : les
   passes v13 et v14 ont reecrit .oz-body, .oz-main et .oz-actions SANS media
   query, APRES les media queries de la l.338 (768px) et de la l.719 (720px).
   A specificite egale c'est la derniere declaration qui gagne, donc :
     - .oz-body { padding: 38px 42px } (l.763) battait les 24px 20px du mobile
       (l.355) et les 26px 20px de la l.720 : 84px de marges sur un ecran de
       375px, il ne restait que 259px pour le formulaire ;
     - .oz-main { padding: 44px 0 56px } (l.1013) battait le padding-top de
       72px prevu pour passer sous la barre fixe de 56px (l.353) : la ligne
       "ETAPE N / 11" se retrouvait SOUS la barre marine.
   Les regles ci-dessous reprennent les MEMES selecteurs, dans des media
   queries, en dernier : elles gagnent par l'ordre et ne touchent pas au
   bureau. Les trois blocs se recouvrent (980 > 768 > 560) : le plus etroit
   est ecrit le dernier, c'est lui qui doit l'emporter.
   ------------------------------------------------------------------------ */

/* ---- v120 : la coquille ------------------------------------------------
   100vh sur iOS et Android compte la barre d'outils du navigateur : le bas du
   volet defilant - donc les boutons Precedent / Enregistrer - restait cache
   derriere elle. dvh suit la barre ; un navigateur qui l'ignore garde vh. */
.oz-container { height: 100vh; height: 100dvh; }

/* ---- v120 : les chaines insecables ---------------------------------------
   Un nom de fichier ou une adresse e-mail n'a pas d'espace ou couper : en
   flex, l'element ne peut pas devenir plus etroit que ce mot et pousse la
   carte hors de l'ecran. anywhere autorise la coupe en dernier recours et ne
   change rien tant que la place suffit, donc pas de media query ici. */
.oz-upload-inner .oz-file-name { overflow-wrap: anywhere; max-width: 100%; }
.oz-recap-value { overflow-wrap: anywhere; min-width: 0; }
.oz-sidebar-footer div { overflow-wrap: anywhere; }

/* ---- v120 : tablette, 769 a 980px ----------------------------------------
   La barre laterale reste ouverte a partir de 769px ; a 800px il ne restait
   que 372px pour le formulaire. Une barre de 240px et une carte moins
   rembourree rendent 88px, de quoi loger le numero a cote de l'indicatif. */
@media (max-width: 980px) {
    .oz-sidebar { width: 240px; min-width: 240px; }
    .oz-body { padding: 28px 24px; }
}

/* ---- v120 : telephone et tablette en portrait, jusqu'a 768px ------------ */
@media (max-width: 768px) {
    /* retablit ce que la l.353 voulait : le contenu commence sous la barre
       fixe de 56px, avec 16px d'air */
    .oz-main { padding: 72px 0 40px; }

    /* retablit ce que la l.355 voulait : des marges de telephone */
    .oz-body { padding: 24px 18px; }

    /* Le volet couvrait le bouton hamburger (z-index 1002 contre 1000, et
       top:0) : une fois ouvert, plus aucun moyen de le refermer sans changer
       de page. Il demarre sous la barre : le hamburger reste visible et
       referme le volet. Le logo du volet est masque - la barre le porte deja,
       et la hauteur manque pour onze etapes sur un ecran de 667px. */
    .oz-sidebar { top: 56px; }
    .oz-sidebar .oz-logo-img { display: none; }
    .oz-sidebar-header { padding: 16px 20px 14px; }
    /* v121 : la pastille du fonds gardait ses 14 px d'ecart avec un logo qui
       n'est plus la - 30 px de blanc en tete du volet au lieu de 16. */
    .oz-sidebar .oz-fund-badge { margin-top: 0; }

    /* cible tactile du hamburger : 44px au lieu du seul glyphe de 24px ; la
       marge negative garde le glyphe a 16px du bord, comme avant */
    .oz-hamburger { min-width: 44px; min-height: 44px; margin-left: -10px; }

    /* Safari iOS zoome sur tout champ dont la police fait moins de 16px, et
       sur une page en overflow:hidden le zoom ne se defait pas tout seul */
    .oz-input, .oz-select, textarea.oz-input { font-size: 16px; }

    /* cibles tactiles a 44px : les choix Oui / Non et les petits boutons.
       .oz-upload-btn garde son display (pose en ligne dans le layout, qui
       passe apres cette feuille) : seul son rembourrage grandit. */
    .oz-radios label { min-height: 44px; }
    .oz-doc-btn { display: inline-flex; align-items: center; min-height: 44px; }
    .oz-upload-btn { padding: 13px 22px; }
}

/* ---- v120 : telephone, jusqu'a 560px ------------------------------------
   Meme seuil que la v105 pour l'indicatif (l.162) : tout ce qui se replie
   sur telephone se replie au meme endroit. */
@media (max-width: 560px) {
    /* le titre de l'etape : 29px sur 300px faisait trois lignes */
    .oz-step-title { font-size: 23px; }

    /* la barre d'actions : deux boutons de 13px 32px ne tiennent pas sur
       303px, ils se retrecissaient jusqu'a couper "Enregistrer et continuer"
       sur trois lignes, le principal a droite et a moitie. Ils passent l'un
       sous l'autre, pleine largeur, le principal EN PREMIER (order) et le
       separateur souple n'a plus de sens. */
    .oz-actions { flex-wrap: wrap; padding: 14px 16px; }
    .oz-spacer { display: none; }
    .oz-actions .oz-btn { width: 100%; justify-content: center; min-height: 48px; }
    .oz-actions .oz-btn-primary, .oz-actions .oz-btn-success { order: -1; }

    /* les cartes de documents : le bloc des deux boutons porte flex-shrink:0
       EN LIGNE dans Documentation.cshtml et mesure 240px ; a cote de l'icone
       il ne restait rien pour le titre, puis la carte debordait de l'ecran.
       Les boutons descendent sur leur propre ligne : flex-basis n'est pas
       pose en ligne, la regle s'applique donc sans !important. */
    .oz-doc-card { flex-wrap: wrap; padding: 14px 16px; gap: 12px; }
    .oz-doc-card > div:last-child { flex-basis: 100%; }
    .oz-doc-card .oz-doc-btn { flex: 1 1 auto; justify-content: center; }

    /* la simulation : trois valeurs et deux fleches se repliaient en
       [Montant ->] / [Reduction ->] / [Gain], chaque fleche pointant dans le
       vide. Une colonne, fleches tournees vers le bas. */
    .oz-sim { padding: 18px 16px; }
    .oz-sim-row { flex-direction: column; gap: 4px; }
    .oz-sim-item { min-width: 0; width: 100%; }
    .oz-sim-arrow { transform: rotate(90deg); line-height: 1; }

    /* le recapitulatif : libelle et valeur cote a cote sans retour possible.
       Le libelle passe au-dessus, la valeur prend la ligne entiere. */
    .oz-recap-title { padding: 12px 16px; }   /* v121 : meme bord gauche que ses lignes */
    .oz-recap-row { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 16px; }
}

/* v121 : le bloc "LES CHAMPS AU TELEPHONE : 16 PX" qui fermait la feuille en
   v120 est retire - la regle du bloc 768 px ci-dessus (.oz-input, .oz-select,
   textarea.oz-input a 16 px) couvre deja toutes ses largeurs ; en double, la
   seconde ne gagnait jamais et trompait sur la regle en vigueur. */
/* =========================================================================
   v127 - LE CALENDRIER DE LA DATE D'EXPIRATION
   Le champ texte jj/mm/aaaa garde la main ; a sa droite, un bouton ouvre le
   calendrier natif du navigateur. Le selecteur natif lui-meme est cree par
   le script et tenu hors de vue mais RENDU (1 px, transparent) : showPicker()
   refuse un element sans boite. Quand showPicker() manque, il se montre a sa
   taille (.visible). Bloc en fin de feuille, apres .oz-input-sm dont il
   depend. Le bouton fait 40 px de haut, comme les champs au telephone.
   ========================================================================= */
.oz-date-saisie { position: relative; display: flex; align-items: center; gap: 8px; }
/* Le champ cede la place au bouton sous 320 px : sans min-width 0 il garderait
   ses 180 px et le bouton deborderait de la boite. */
.oz-date-saisie .oz-input { flex: 1 1 auto; min-width: 0; }
.oz-cal {
    flex: 0 0 auto; width: 44px; min-height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #12305f; border: 1px solid #c9d3e0; border-radius: 8px;
    cursor: pointer;
}
/* display: inline-flex bat [hidden] de la feuille du navigateur, qui ne pese
   rien : sans cette ligne le bouton s'afficherait meme quand le script ne
   tourne pas, et ne ferait rien. Meme garde que .oz-info[hidden]. */
.oz-cal[hidden] { display: none; }
.oz-cal:hover { background: #f7f9fc; border-color: #12305f; }
.oz-cal:focus-visible { outline: 2px solid #c8962e; outline-offset: 2px; }
/* Ancre a DROITE, sous le bouton : le calendrier s'ouvre a l'aplomb de ce qu'on
   a clique, a toutes les largeurs. Une position en dur (left: 190px) supposait
   les 180 px du champ, que le telephone ne garde pas. */
.oz-cal-choix {
    position: absolute; right: 0; top: 100%; width: 1px; height: 1px;
    opacity: 0; border: 0; padding: 0; margin: 0; pointer-events: none;
}
.oz-cal-choix.visible {
    position: static; width: auto; height: auto; opacity: 1; pointer-events: auto;
    min-height: 40px; padding: 0 10px; border: 1px solid #c9d3e0; border-radius: 8px; font-size: 16px;
}

/* ===========================================================================
   v167 - POUR QUI CETTE SOUSCRIPTION EST PREPAREE
   ===========================================================================

   Le bloc vivait en TETE de la barre, entre le logo et la liste des etapes,
   et il etait fait de quatre attributs style= en dur : aucune classe, aucune
   regle, donc rien de reglable depuis cette feuille - un style en ligne bat
   n'importe quel selecteur sans !important.

   Il descend sous la liste des etapes. Ce n'est pas qu'une place : en tete,
   un rectangle ambre plein volait le premier regard a ce que l'ecran sert a
   faire, c'est-a-dire les neuf etapes.

   ECRIT EN FIN DE FICHIER, ET IL LE FAUT. oseom.css redeclare plusieurs de
   ses propres selecteurs plus bas qu'il ne les a ecrits (.oz-sidebar en 47
   puis 974, .oz-nav en 64 puis 983, .oz-sidebar-footer div en 86 puis 1278) :
   a specificite egale, c'est le DERNIER qui gagne. Le fichier documente ce
   piege lui-meme en 1246-1263.

   UN FILET D'OR PLUTOT QU'UN APLAT. L'aplat ambre a 20 % criait aussi fort
   que le bouton d'action principal de la page ; un filet de 3 px sur le bord
   gauche dit la meme chose - ceci concerne quelqu'un d'autre - sans entrer en
   concurrence avec lui. */
.oz-pour {
    margin: 0 12px 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--oz-gold);
    border-radius: 0 8px 8px 0;
    background: var(--oz-gold-tint);
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}
.oz-pour-eti {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--oz-gold-dk);
}
/* Le nom peut etre long et n'a pas de deuxieme ligne a offrir : on coupe
   proprement plutot que d'elargir la barre, dont la largeur est fixe. */
.oz-pour-nom {
    font-size: 14px;
    font-weight: 700;
    color: var(--oz-navy-deep);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oz-pour-sortie {
    margin-top: 4px;
    font-size: 12px;
    color: var(--oz-gold-dk);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    align-self: flex-start;
}
.oz-pour-sortie:hover,
.oz-pour-sortie:focus-visible { border-bottom-color: var(--oz-gold-dk); }

/* En tiroir sur telephone la barre est plus etroite : la gouttiere laterale
   se resserre pour que le nom garde sa place. Ecrit APRES les trois requetes
   d'ecran de la barre (1284, 1290, 1329), sans quoi elles gagneraient. */
@media (max-width: 768px) {
    .oz-pour { margin: 0 10px 8px; padding: 8px 10px; }
}

/* =============================================================================
   v177 - LES DESSINS D ICONES.CS ATTEIGNENT LE PARCOURS
   -----------------------------------------------------------------------------
   Les pages du parcours ne chargent que cette feuille, et .ez-ic vivait dans
   espace.css : un dessin pose ici serait reste invisible, trait absent. Les
   deux regles de base sont donc REECRITES ici, memes valeurs, plutot que de
   charger espace.css entiere sur body.oz et d en assumer toute la cascade.
   Si espace.css est chargee un jour sur ces pages, la derniere declaration
   gagnera et dira la meme chose. */
.ez-ic {
    width: 1em; height: 1em; flex: 0 0 auto;
    fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.ez-ic-pastille {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px;
    background: #e3edf9; color: #0752a4;
}
.ez-ic-pastille .ez-ic { width: 17px; height: 17px; }
.ez-ic-pastille.or    { background: #f7f0d8; color: #9c6b18; }
.ez-ic-pastille.vert  { background: #e7f4ee; color: #13703f; }
.ez-ic-pastille.ambre { background: #f7f0d8; color: #8a6516; }

/* L icone d un bandeau oz-info, et celle d un titre de section du parcours. */
.oz-info .ez-ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
/* Revue v177 : .oz-section est un conteneur flex (584), ou vertical-align est
   inerte et ou une marge s additionnerait au gap de 10px. La taille suffit. */
.oz-section .ez-ic { width: 17px; height: 17px; }
.oz-sim-title .ez-ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
/* L emplacement des anciens emojis : le dessin y prend la meme place. */
.oz-emoji .ez-ic { width: 22px; height: 22px; }
/* La carte du type de souscripteur recoit son medaillon rond. */
.oz-type-card .ez-ic-pastille { width: 40px; height: 40px; border-radius: 50%; }
/* Les trois chiffres du simulateur. */
.oz-sim-item .ez-ic-pastille { width: 36px; height: 36px; border-radius: 50%; margin-bottom: 8px; }
/* =============================================================================
   v179 - LES JETONS DU SYSTEME, POUR LES DEUX ESPACES
   -----------------------------------------------------------------------------
   Ecrits ICI et non dans espace.css parce que le parcours investisseur ne
   charge que cette feuille-ci. Un second :root a poids egal du premier
   (ligne 852) : c est l ordre qui tranche, et celui-ci est le dernier.
   ========================================================================== */
/* ---- 1. LES JETONS -------------------------------------------------------
   Plus plat, plus froid, moins arrondi. Les bordures remplacent les ombres. */
:root {
    /* La police. --oz-font etait deja une variable : un seul mot ici et les
       9145 lignes des deux feuilles suivent. */
    --oz-font: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui,
               -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* La marque. Le navy descend d un cran : il porte le bandeau et les
       titres, il ne doit pas vibrer. */
    --oz-brand:      #1b3a6b;
    --oz-navy:       #1b3a6b;
    --oz-navy-deep:  #0e2440;
    --oz-navy-soft:  #2f5c9e;
    --oz-blue:       #2d6cb5;
    --oz-blue-soft:  #e8f0fa;

    /* L ambre : une action principale par ecran, et rien d autre. */
    --oz-gold:       #e0a235;
    --oz-gold-lt:    #f2d6a0;
    --oz-gold-dk:    #8a6111;
    --oz-gold-tint:  #fdf6e7;
    --oz-gold-ink:   #2b1d05;

    --oz-teal:       #3f8f86;
    --oz-teal-tint:  #e6f2f0;
    --oz-teal-dk:    #156158;

    --oz-green:      #16794a;
    --oz-green-dk:   #11603a;
    --oz-red:        #b03024;

    /* L encre et les gris. Froids, et assez contrastes pour du 12,5 px. */
    --oz-ink:        #16213a;
    --oz-ink-2:      #27364f;
    --oz-muted:      #5a6882;
    --oz-muted-2:    #6b7892;
    --oz-muted-3:    #8794a8;
    --oz-muted-4:    #aab3c2;

    /* Les surfaces. Un fond presque blanc, une carte blanche, un filet fin. */
    --oz-bg:         #f6f7fa;
    --oz-card:       #ffffff;
    --oz-field:      #ffffff;
    --oz-tint:       #f1f4f9;
    --oz-info:       #f0f5fc;
    --oz-info-bd:    #cfdff2;
    --oz-line:       #edeff4;
    --oz-line-2:     #e7eaf1;
    --oz-border:     #e2e6ee;
    --oz-border-2:   #e7eaf1;

    /* Le relief : trois crans, tous discrets. Le brief demande des bordures
       plutot que des ombres, donc les ombres ne font plus que decoller. */
    --oz-sh-1: 0 1px 1px rgba(16,36,64,.04);
    --oz-sh-2: 0 1px 2px rgba(16,36,64,.05);
    --oz-sh-3: 0 8px 28px rgba(16,36,64,.10);
    --oz-sh-gold: 0 1px 2px rgba(138,97,17,.14);
    --oz-ring: 0 0 0 3px rgba(45,108,181,.26);

    /* ---- les jetons neufs : rayons, espace, rail ---- */
    --oz-r-xs: 4px;
    --oz-r-sm: 6px;
    --oz-r-md: 8px;
    --oz-r-lg: 10px;
    --oz-r-pill: 999px;

    --oz-e-1: 4px;
    --oz-e-2: 8px;
    --oz-e-3: 12px;
    --oz-e-4: 16px;
    --oz-e-5: 24px;
    --oz-e-6: 32px;

    --oz-rail:   236px;   /* la colonne de navigation */
    --oz-bandeau: 62px;   /* la hauteur du bandeau sombre */
}


/* ---- v179 : le parcours suit le meme langage que le back office ----------
   Memes rayons, memes bordures, meme absence d ombre portee. Les classes oz-*
   ne changent pas de nom : seules leurs valeurs suivent les jetons. */
.oz-card, .oz-panel, .oz-sim {
    border-radius: 8px; border: 1px solid var(--oz-border);
    box-shadow: var(--oz-sh-1);
}
.oz-input, .oz-select, .oz-textarea {
    border-width: 1px; border-radius: 6px; min-height: 36px;
    font-family: inherit; font-size: 13px;
}
.oz-input:focus, .oz-select:focus, .oz-textarea:focus {
    border-color: var(--oz-blue); box-shadow: var(--oz-ring); outline: none;
}
.oz-btn {
    border-radius: 6px; font-size: 13px; font-weight: 600;
    box-shadow: none; min-height: 38px;
}
.oz-btn-primary { background: var(--oz-gold); border-color: var(--oz-gold); color: var(--oz-gold-ink); }
.oz-btn-secondary { background: #fff; border: 1px solid var(--oz-border); color: var(--oz-ink-2); }
.oz-section { font-size: 15px; font-weight: 650; letter-spacing: -.012em; color: var(--oz-navy-deep); }
.oz-info { border-radius: 6px; border: 1px solid var(--oz-info-bd); background: var(--oz-info); font-size: 13px; }