/*
 ovecar-charte.css — Habillage commun de l'Espace Pro (Market)
 Version : 1.2.0
*/

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Chakra+Petch:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --ov-bleu:      #0A6CF1;
    --ov-bleu-p:    #0554C4;
    --ov-bleu-c:    #3D9BFF;
    --ov-nuit:      #0D1321;
    --ov-brume:     #F4F6FA;
    --ov-succes:    #12A150;
    --ov-jaune:     #FFC72C;
    --ov-jaune-txt: #A86B00;
    --ov-rouge:     #B4233A;

    --pro-navy:    #0D1321;   --pro-navy-2:  #1A2440;
    --pro-blue:    #0A6CF1;   --pro-blue-h:  #0554C4;
    --pro-cyan:    #3D9BFF;   --pro-silver:  #C3CBD6;
    --pro-gray-50: #F4F6FA;   --pro-gray-100: #EEF1F5;  --pro-gray-200: #E3E7EE;
    --pro-gray-500: #6B7485;  --pro-gray-700: #3A4457;
    --pro-error:   #B4233A;   --pro-error-bg: #FBE7EA;
    --pro-success: #0E7F3F;   --pro-success-bg: #E3F6EA;
    --pro-info-bg: #EAF2FE;
    --pro-radius: 14px;       --pro-radius-sm: 9px;
    --pro-shadow-sm: 0 1px 2px rgba(13,19,33,.04);
    --pro-shadow-md: 0 4px 14px rgba(13,19,33,.06);
    --pro-shadow-lg: 0 20px 50px rgba(13,19,33,.10);

    --pro-cat-navy: #0D1321;  --pro-cat-navy-light: #1A2440;
    --pro-cat-blue: #0A6CF1;  --pro-cat-cyan: #3D9BFF;  --pro-cat-silver: #C3CBD6;
    --pro-cat-gray-50: #F4F6FA; --pro-cat-gray-100: #EEF1F5; --pro-cat-gray-200: #E3E7EE;
    --pro-cat-gray-300: #C3CBD6; --pro-cat-gray-500: #6B7485; --pro-cat-gray-700: #3A4457;
    --pro-cat-vert: #12A150;  --pro-cat-orange: #E08600; --pro-cat-rouge: #B4233A;
    --pro-cat-radius: 14px;
    --pro-cat-shadow-sm: 0 1px 2px rgba(13,19,33,.04);
    --pro-cat-shadow-md: 0 4px 14px rgba(13,19,33,.06);
    --pro-cat-shadow-lg: 0 20px 50px rgba(13,19,33,.10);

    --ff-d: 'Sora', sans-serif;
    --ff-b: 'Manrope', sans-serif;
    --ff-l: 'Chakra Petch', sans-serif;

    --ov-alu-stries: repeating-linear-gradient(180deg, rgba(255,255,255,.45) 0 1px, rgba(13,19,33,.045) 1px 2px);
    --ov-alu-h: linear-gradient(100deg, #F4F6FA 0%, #E1E6ED 30%, #F5F7FB 52%, #DCE2EA 78%, #EDF0F5 100%);
    --ov-alu-border: #CBD3DE;
}

/* ── Typographie ── */
html body { font-family: var(--ff-b); color: var(--ov-nuit); }
html body h1, html body h2, html body h3, html body h4,
html body .pro-card-title, html body .pro-cat-title, html body .pro-brand { font-family: var(--ff-d); }
html body .pro-label, html body .pro-brand-badge, html body .pro-cat-logo-badge,
html body th, html body .pro-cat-card-label, html body .pro-section-title { font-family: var(--ff-l); letter-spacing: .8px; text-transform: uppercase; }
html body input, html body select, html body textarea, html body button, html body .pro-btn { font-family: var(--ff-b); }

/* ── En-tetes en alu brosse ── */
html body .pro-header, html body .pro-cat-header {
    background: #FFFFFF;
    background-image: var(--ov-alu-stries), var(--ov-alu-h);
    color: var(--ov-nuit);
    border-bottom: 1px solid var(--ov-alu-border);
    box-shadow: none;
}
html body .pro-header { padding: 10px 24px; }
html body .pro-cat-header-inner { padding: 10px 24px; min-height: 64px; }
html body .pro-brand, html body .pro-cat-logo { color: var(--ov-nuit); }
html body .pro-brand img, html body .pro-cat-logo img { height: 44px !important; width: auto; }
html body .pro-brand-badge, html body .pro-cat-logo-badge { background: var(--ov-bleu); color: #FFFFFF; font-size: 11px; font-weight: 600; }

html body .pro-cat-nav-link {
    color: var(--ov-nuit);
    font-weight: 600;
    height: 36px; padding: 0 14px;
    border-radius: 9px;
    border: 1px solid transparent;
}
html body .pro-cat-nav-link:hover { background: rgba(255,255,255,.7); color: var(--ov-nuit); border-color: var(--ov-alu-border); }
html body .pro-cat-nav-link.active, html body .pro-cat-nav-link.is-active { background: #FFFFFF; color: var(--ov-bleu-p); border-color: var(--ov-alu-border); box-shadow: 0 1px 3px rgba(13,19,33,.10); }
html body .pro-cat-user-summary { color: var(--ov-nuit); border: 1px solid var(--ov-alu-border); background: rgba(255,255,255,.55); border-radius: 10px; }
html body .pro-cat-user-hello { color: var(--ov-nuit); }
html body .pro-cat-user-chevron { color: #6B7485; }
html body .pro-cat-avatar { background: var(--ov-bleu); color: #FFFFFF; font-family: var(--ff-d); }
html body .pro-fav-menu-badge, html body .pro-cat-user-badge { background: var(--ov-jaune); color: var(--ov-nuit); }

/* ── Boutons ── */
html body .pro-btn--primary, html body .pro-cat-btn-primary, html body .pro-btn-primary { background: var(--ov-bleu); border-color: var(--ov-bleu); color: #FFFFFF; box-shadow: none; }
html body .pro-btn--primary:hover, html body .pro-cat-btn-primary:hover, html body .pro-btn-primary:hover { background: var(--ov-bleu-p); border-color: var(--ov-bleu-p); transform: none; box-shadow: none; }
html body .pro-input, html body .pro-cat-input, html body .pro-cat-sort-select { border-color: #D0D6E0; border-radius: 10px; }
html body .pro-input:focus, html body .pro-cat-input:focus { border-color: var(--ov-bleu); box-shadow: 0 0 0 3px rgba(10,108,241,.16); }

/* ── Page d'accueil (connexion) : panneau marque + formulaire ── */
html body .pro-page { background: var(--ov-brume); }
html body .pro-login-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 64px - 58px); }
html body .pro-login-grid--sans-entete { min-height: calc(100vh - 58px); }
html body .pro-login-brand-logo { width: 240px; height: auto; display: block; margin-bottom: 36px; }
html body .pro-login-point { align-items: center; }
html body .pro-login-brand {
    position: relative; overflow: hidden;
    padding: 56px 72px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 36px;
    background: linear-gradient(160deg, #FFFFFF 0%, #EEF3FB 100%);
    border-right: 1px solid #E3E7EE;
}
html body .pro-login-brand::before {
    content: '';
    position: absolute; right: -160px; bottom: -180px;
    width: 620px; height: 620px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='76' fill='none' stroke='%230A6CF1' stroke-width='30'/%3E%3Ccircle cx='156' cy='50' r='21' fill='%230D1321' stroke='%23ffffff' stroke-width='6'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: .07; pointer-events: none;
}
html body .pro-login-brand > * { position: relative; }
html body .pro-login-kicker { font-family: var(--ff-l); font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ov-bleu); margin-bottom: 12px; }
html body .pro-login-headline { font-family: var(--ff-d); font-size: 38px; line-height: 1.12; font-weight: 700; letter-spacing: -.6px; margin: 0 0 14px; color: var(--ov-nuit); }
html body .pro-login-lead { font-size: 16.5px; line-height: 1.6; color: #6B7485; font-weight: 500; max-width: 440px; margin: 0; }
html body .pro-login-lead strong { color: var(--ov-nuit); font-weight: 800; }
html body .pro-login-headline { font-size: 34px; }
html body .pro-login-points { display: flex; flex-direction: column; gap: 18px; }
html body .pro-login-point { display: flex; align-items: flex-start; gap: 14px; }
html body .pro-login-point-ico { width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid #E3E7EE; display: flex; align-items: center; justify-content: center; color: var(--ov-bleu); flex-shrink: 0; }
html body .pro-login-point-ico svg { width: 20px; height: 20px; }
html body .pro-login-point-title { font-size: 15px; font-weight: 700; color: var(--ov-nuit); }
html body .pro-login-point-sub { font-size: 13.5px; color: #6B7485; font-weight: 500; }
html body .pro-login-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
html body .pro-login-form .pro-card { width: 100%; max-width: 440px; border-radius: 18px; border: 1px solid #E3E7EE; box-shadow: var(--pro-shadow-lg); padding: 40px 40px 32px; box-sizing: border-box; }
html body .pro-login-form .pro-card-header { margin-bottom: 22px; text-align: left; }
html body .pro-login-form .pro-card-subtitle { font-size: 14px; margin: 6px 0 0; }
html body .pro-login-form .pro-form-group { margin-bottom: 18px; }
html body .pro-login-form .pro-label { font-family: var(--ff-l); font-size: 11.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: #6B7485; margin-bottom: 7px; }
html body .pro-login-form .pro-input { height: 48px; padding: 0 14px; font-size: 15px; font-weight: 500; }
html body .pro-login-form .pro-links { margin-top: 20px; font-size: 13px; font-weight: 600; }
html body .pro-card-title { font-size: 27px; font-weight: 600; letter-spacing: -.3px; }
html body .pro-card-subtitle { color: #6B7485; font-weight: 500; }
html body .pro-login-form .pro-btn--primary { width: 100%; height: 50px; border-radius: 10px; font-weight: 700; font-size: 15px; }
html body .pro-footer { color: #6B7485; }

/* ── Telephone ── */
@media (max-width: 960px) {
    html body .pro-login-grid { grid-template-columns: 1fr; min-height: 0; }
    html body .pro-login-brand { padding: 28px 20px 24px; border-right: 0; border-bottom: 1px solid #E3E7EE; gap: 22px; }
    html body .pro-login-headline { font-size: 28px; }
    html body .pro-login-points { display: none; }
    html body .pro-login-brand-logo { width: 180px; margin-bottom: 20px; }
    html body .pro-login-form { padding: 20px 16px; }
    html body .pro-login-form .pro-card { padding: 28px 22px 24px; }
    html body .pro-brand img, html body .pro-cat-logo img { height: 36px !important; }
    html body .pro-cat-nav-link { height: 40px; padding: 0 12px; }
}