/* Styles communs du site (accueil et pages légales). */

/* Polices hébergées sur le site (sous-ensembles latin et latin-ext).
   Material Symbols Outlined est limitée aux icônes utilisées ; à régénérer depuis Google Fonts (paramètre icon_names) si une icône est ajoutée :
   add,admin_panel_settings,arrow_forward,assignment,badge,calendar_month,call,call_end,campaign,check,check_circle,chevron_left,chevron_right,close,dark_mode,dashboard_customize,dialpad,edit,emoji_events,error,euro,expand_less,expand_more,forum,group,groups,handshake,home,insights,inventory_2,language,light_mode,link,lock,lock_open,manage_accounts,map,mic,more_vert,notifications,pause,play_circle,podcasts,publish,quiz,radio,radio_button_checked,radio_button_unchecked,redeem,rule,schedule,search,settings,sms,stacks,touch_app,trending_up,tune,unfold_more,verified_user,visibility,webhook,workspace_premium */
/* Plus Jakarta Sans (latin-ext) */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    src: url('/view/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
}

/* Plus Jakarta Sans (latin) */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    src: url('/view/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}

/* Inter (latin-ext) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    src: url('/view/fonts/inter-latin-ext.woff2') format('woff2');
}

/* Inter (latin) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    src: url('/view/fonts/inter-latin.woff2') format('woff2');
}

/* JetBrains Mono (latin-ext) */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    src: url('/view/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
}

/* JetBrains Mono (latin) */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    src: url('/view/fonts/jetbrains-mono-latin.woff2') format('woff2');
}

/* Material Symbols Outlined */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('/view/fonts/material-symbols-outlined.woff2') format('woff2');
}

/* Tokens : --s-* site, --a-* maquette app V6, --o-* couleurs de section (L C OKLCH), --c-* maquette StudioCall */
:root {
    --s-bg: #1F1E1D; --s-bg-rgb: 31 30 29; --s-card: #1F1E1D; --s-alt: #262624;
    --s-t1: #F3F1EC; --s-t1b: #E9E6E0; --s-t2: #BDB9B1; --s-t3: #8E8A83; --s-t3b: #A9A5A0;
    --s-acc: #9DAEEA; --s-gold: #E2C877; --s-orange: #F0B077; --s-green: #34D399; --s-onair: #FF8A8E;
    --s-ink: 255 255 255; --s-card-n: #2A2927; --s-pro: #252A3A; --s-sc: #232321; --s-toggle: #3A3A37;
    --s-pill-n: #C9C5BD; --s-pill-p: #C3CDF0; --a-canvas: #1A1918; --s-scbg: #141312;
    --c-bg0: #191817; --c-bg1: #1F1E1D; --c-bg2: #262624; --c-bg3: #2B2A28; --c-bg4: #31302D;
    --c-line: rgba(237,234,227,.07); --c-line2: rgba(237,234,227,.12);
    --c-t0: #EDEAE3; --c-t1: #CFC9BD; --c-t2: #A29C8F; --c-t3: #7A756A;
    --c-green: #10b981; --c-amber: #D89B4A; --c-red: #CE5A68; --c-blue: #7D92CE; --c-violet: #8F84C4;
    --c-well: rgba(0,0,0,.28); --c-chip: rgba(255,255,255,.04); --c-chipl: rgba(255,255,255,.08);
    --a-raised: #2D2C29; --a-hover: rgba(255,255,255,.045); --a-neutral: rgba(255,255,255,.07);
    --a-line-input: #4A4740; --a-surface: #252421; --a-surface-rgb: 37 36 33; --a-gray: #2F2E2A;
    --a-text: #E6E1D6; --a-soft: #A39D90; --a-line: #34322E;
    --a-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2);
    --a-ptext: #9AAAE0; --a-ptint: rgba(95,118,190,.20); --a-ptint2: rgba(95,118,190,.22); --a-ptint3: rgba(95,118,190,.38);
    --a-ok: #8FBC9B; --a-ok-t: rgba(127,175,138,.15); --a-warn: #DDAE6C; --a-warn-t: rgba(217,165,94,.15);
    --a-err: #DB8B9C; --a-err-t: rgba(210,124,143,.15);
    --o-ink: 0.86 0.07; --o-soft: 0.33 0.05; --o-tag: 0.34 0.05; --o-card: 0.255 0.025; --o-line: 0.36 0.045;
    --o-dot: 0.78 0.1; --o-btn: 0.48 0.10; --o-icon: 0.76 0.10; --o-pill: 0.29 0.04; --o-pilli: 0.38 0.06;
    --o-pillf: 0.90 0.07; --o-sel: 0.32 0.045; --o-edge: 0.50 0.08; --o-tint: 0.62 0.10; --o-tint-a: .20; --o-ring: 0.42 0.06;
    --sc-stage-shadow: 0 30px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(16,185,129,.20);
    color-scheme: dark;
}

:root[data-theme="light"] {
    --s-bg: #F4F1EA; --s-bg-rgb: 244 241 234; --s-card: #FBF9F5; --s-alt: #EAE5DA;
    --s-t1: #2E2C27; --s-t1b: #3A3832; --s-t2: #57534A; --s-t3: #6B665A; --s-t3b: #5E5A50;
    --s-acc: #445CA6; --s-gold: #8A6D1E; --s-orange: #A0561A; --s-green: #0F7F58; --s-onair: #B4343A;
    --s-ink: 46 44 39; --s-card-n: #EAE5DA; --s-pro: #E6EAF6; --s-sc: #FBF9F5; --s-toggle: #E4DED2;
    --s-pill-n: #57534A; --s-pill-p: #3D52A0; --a-canvas: #E7E2D7; --s-scbg: #E9E4D9;
    --c-bg0: #DED8CB; --c-bg1: #E7E2D7; --c-bg2: #F2EEE5; --c-bg3: #EEE9DE; --c-bg4: #F6F3EA;
    --c-line: rgba(46,44,39,.10); --c-line2: rgba(46,44,39,.16);
    --c-t0: #2E2C27; --c-t1: #3B3830; --c-t2: #6B665A; --c-t3: #8A8477;
    --c-green: #059669; --c-amber: #C08A3E; --c-red: #A6445C; --c-blue: #445CA6; --c-violet: #715FA6;
    --c-well: rgba(46,44,39,.07); --c-chip: rgba(46,44,39,.05); --c-chipl: rgba(46,44,39,.10);
    --a-raised: #FBF9F5; --a-hover: rgba(46,44,39,.045); --a-neutral: rgba(107,102,90,.11);
    --a-line-input: #CDC4B2; --a-surface: #F4F1EA; --a-surface-rgb: 244 241 234; --a-gray: #DED8CB;
    --a-text: #2E2C27; --a-soft: #6B665A; --a-line: #E2DCCF;
    --a-shadow: 0 1px 2px rgba(46,44,39,.06), 0 4px 16px rgba(46,44,39,.05);
    --a-ptext: #445CA6; --a-ptint: rgba(68,92,166,.10); --a-ptint2: rgba(68,92,166,.10); --a-ptint3: rgba(68,92,166,.18);
    --a-ok: #4A7056; --a-ok-t: rgba(95,138,107,.15); --a-warn: #8E6223; --a-warn-t: rgba(192,138,62,.16);
    --a-err: #93374E; --a-err-t: rgba(166,68,92,.12);
    --o-ink: 0.40 0.09; --o-soft: 0.90 0.045; --o-tag: 0.91 0.045; --o-card: 0.965 0.018; --o-line: 0.87 0.04;
    --o-dot: 0.60 0.12; --o-btn: 0.50 0.10; --o-icon: 0.52 0.11; --o-pill: 0.93 0.035; --o-pilli: 0.86 0.06;
    --o-pillf: 0.38 0.09; --o-sel: 0.93 0.035; --o-edge: 0.72 0.09; --o-tint: 0.55 0.10; --o-tint-a: .13; --o-ring: 0.75 0.07;
    --sc-stage-shadow: 0 12px 32px rgba(46,44,39,.10), 0 0 0 1px rgba(15,127,88,.22);
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--s-bg);
    color: var(--s-t1);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

a {
    color: var(--s-acc);
    text-decoration: none;
}

a:hover {
    color: var(--s-t1);
}

button {
    font-family: inherit;
}

summary {
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px);
}

/* Icônes Material Symbols (la taille vient de font-size) */
.msi {
    display: block;
    width: 1em;
    height: 1em;
    overflow: hidden;
    font-family: 'Material Symbols Outlined';
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    white-space: nowrap;
    font-variation-settings: 'FILL' 0;
    font-feature-settings: 'liga';
}

.msi.fill {
    font-variation-settings: 'FILL' 1;
}

/* Titres de section */
.eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--s-acc);
}

.section-title {
    margin: 16px 0 0;
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.04;
    letter-spacing: -0.035em;
    font-weight: 700;
    text-wrap: balance;
}

.section-intro {
    margin: 20px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--s-t2);
    text-wrap: pretty;
}

/* Boutons */
.btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    white-space: nowrap;
    border-radius: 999px;
    font-weight: 600;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1), filter .2s cubic-bezier(.2,.8,.2,1), background-color .1s ease, border-color .1s ease;
}

.btn-solid,
.btn-solid:hover {
    background: #445CA6;
    color: #FFFFFF;
}

.btn-outline,
.btn-outline:hover {
    border: 1px solid rgb(var(--s-ink) / 0.16);
    color: var(--s-t1);
}

.btn-sm {
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
}

.btn-sm.btn-solid {
    padding: 0 18px;
}

.btn-lg {
    gap: 10px;
    height: 50px;
    padding: 0 24px;
    font-size: 15.5px;
}

.btn-lg.btn-outline {
    border-color: rgb(var(--s-ink) / 0.18);
}

.btn-lg .msi {
    font-size: 20px;
}

.btn-arrow {
    font-size: 17px;
}

/* Survols : aussi utilisés par les maquettes, dont les styles sont en ligne (d'où les !important) */
@media (hover: hover) {
    .btn-solid:hover,
    .hv-solid:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 16px color-mix(in oklch, #445CA6 45%, transparent) !important;
        filter: brightness(1.08) !important;
    }

    .btn-outline:hover,
    .hv-outline:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 16px color-mix(in oklch, currentColor 13%, transparent) !important;
        background: color-mix(in oklch, currentColor 8%, transparent) !important;
        border-color: color-mix(in oklch, currentColor 50%, transparent) !important;
    }

    .hv-bright:hover {
        filter: brightness(1.12) !important;
    }

    .hv-lift:hover {
        transform: translateY(-3px) !important;
        border-color: rgb(var(--s-ink) / 0.14) !important;
        background: rgb(var(--s-ink) / 0.045) !important;
    }

    .hv-lift-amber:hover {
        transform: translateY(-4px) !important;
        border-color: rgba(245,158,11,0.3) !important;
        background: rgba(245,158,11,0.06) !important;
    }

    .hv-green:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 16px rgba(16,185,129,0.2) !important;
    }
}

.btn:active,
.ac-press:active {
    transform: scale(.97) !important;
    transition: transform .12s ease !important;
}

/* En-tête */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(var(--s-bg-rgb) / 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgb(var(--s-ink) / 0.08);
}

.site-header .container {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 68px;
}

.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: auto;
}

.brand img {
    display: block;
    height: 24px;
    width: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 14.5px;
    font-weight: 500;
}

.site-nav a {
    color: var(--s-t2);
}

.site-nav a:hover {
    color: var(--s-t1);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgb(var(--s-ink) / 0.16);
    background: transparent;
    color: var(--s-t1);
    cursor: pointer;
}

.theme-toggle:hover {
    border-color: rgb(var(--s-ink) / 0.4);
}

.theme-toggle .msi {
    font-size: 20px;
}

@media (max-width: 1119.98px) {
    .site-nav {
        display: none;
    }
}

@media (max-width: 639.98px) {
    .btn-login {
        display: none;
    }
}


/* Pied de page */
.site-footer {
    border-top: 1px solid rgb(var(--s-ink) / 0.08);
}

.site-footer .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 40px;
    padding-top: 40px;
    padding-bottom: 48px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-brand img {
    display: block;
    align-self: flex-start;
    height: 22px;
    width: auto;
}

.footer-brand p {
    margin: 0;
    font-size: 14px;
    color: var(--s-t3);
}

.social-links {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.social-links a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgb(var(--s-ink) / 0.05);
    border: 1px solid rgb(var(--s-ink) / 0.1);
    color: var(--s-t2);
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.social-links a:hover {
    color: var(--s-t1);
    background: rgb(var(--s-ink) / 0.1);
    border-color: rgb(var(--s-ink) / 0.18);
}

.social-links svg {
    display: block;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-left: auto;
    font-size: 14px;
}

.footer-nav a {
    color: var(--s-t2);
}

.footer-nav a:hover {
    color: var(--s-t1);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-basis: 100%;
    gap: 8px 24px;
    font-size: 13px;
    color: var(--s-t3);
}

@keyframes ruVu { 0% { transform: scaleY(0.15); } 100% { transform: scaleY(1); } }
@keyframes ruPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes ruFaderA { from { transform: scaleY(.15); } to { transform: scaleY(.7); } }
@keyframes ruFaderB { from { transform: scaleY(.25); } to { transform: scaleY(.85); } }
@keyframes ruFaderC { from { transform: scaleY(.1); } to { transform: scaleY(.6); } }
@keyframes ruVuH { 0% { transform: scaleX(.18); } 14% { transform: scaleX(.62); } 27% { transform: scaleX(.34); } 41% { transform: scaleX(.78); } 55% { transform: scaleX(.46); } 68% { transform: scaleX(.9); } 82% { transform: scaleX(.38); } 100% { transform: scaleX(.66); } }
@keyframes ruMeter { 0% { transform: scaleX(.52); } 25% { transform: scaleX(.74); } 50% { transform: scaleX(.6); } 75% { transform: scaleX(.82); } 100% { transform: scaleX(.58); } }
@keyframes ruProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        scroll-behavior: auto !important;
    }
}