.text-gradient {
    background: linear-gradient(135deg, #0d6efd, #0dcaf0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-authed-bg {
    position: fixed;
    inset: 0;
    background-image: var(--home-bg-logo);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: min(80%, 680px);
    opacity: 0.06;
    pointer-events: none;
    z-index: -1;
}
.home-authed-content {
    position: relative;
}
.home-authed-header {
    border-bottom: 1px solid #e9ecef;
    padding: 1.5rem 1.5rem 1.5rem 0;
}
.dark-mode .home-authed-header {
    border-color: #2a2a3a;
}
.home-kpi-card {
    border-radius: 1rem;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    height: 100%;
}
.home-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.home-quick-action {
    border-radius: 1rem;
    border: 1px solid #e9ecef;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
}
.home-quick-action:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    transform: translateY(-1px);
    color: inherit;
}
.dark-mode .home-quick-action {
    border-color: #3f3f55;
}

/* ---------- Modal de connexion (reprend le style de la page Login) ---------- */
.login-shell {
    border-radius: 1.5rem;
    overflow: hidden;
}
.login-visual {
    background: linear-gradient(160deg, #0d6efd 0%, #0a58ca 55%, #0dcaf0 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 3rem;
}
.login-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.15) 0, transparent 45%),
                       radial-gradient(circle at 85% 75%, rgba(255,255,255,0.12) 0, transparent 40%);
}
.login-visual-icon {
    width: 90px;
    height: 90px;
    border-radius: 1.25rem;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}
.login-visual-content {
    position: relative;
    z-index: 1;
}
.login-form-side {
    background: #f8f9fb;
}
.dark-mode .login-form-side {
    background: #17171f;
}
.password-toggle-icon {
    cursor: pointer;
    background-color: #f8f9fa;
    border-left: none;
}
.dark-mode .password-toggle-icon {
    background-color: #1e1e2e;
    border-color: #3f3f55;
    color: #e4e4e7;
}

/* ============================================================
   Page vitrine (visiteur non connecté) — scopée sous .home-vitrine
   pour ne jamais entrer en conflit avec Bootstrap / le reste de l'app.
   ============================================================ */
.home-vitrine {
    --ink:#0B1220;
    --ink-soft:#4A5568;
    --porcelain:#F5F7FA;
    --porcelain-2:#EDF1F6;
    --card:#FFFFFF;
    --blue:#0D6EFD;
    --blue-deep:#0A58CA;
    --cyan:#0DCAF0;
    --gold:#F5A524;
    --gold-soft:#FFF3DC;
    --line:#E3E8EF;
    --shadow-sm: 0 2px 10px rgba(11,18,32,.06);
    --shadow-md: 0 12px 32px rgba(11,18,32,.10);
    --shadow-lg: 0 24px 60px rgba(11,18,32,.16);
    --radius: 1.25rem;
    --ease: cubic-bezier(.22,1,.36,1);

    background:var(--porcelain);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

.home-vitrine, .home-vitrine *{ box-sizing:border-box; }
.home-vitrine h1, .home-vitrine h2, .home-vitrine h3, .home-vitrine h4{
    font-family:'Space Grotesk',sans-serif;
    letter-spacing:-.02em;
    margin:0;
    color:var(--ink);
}
.home-vitrine .mono{ font-family:'JetBrains Mono',monospace; letter-spacing:-.01em; }
.home-vitrine p{ margin:0; color:var(--ink-soft); }
.home-vitrine a{ color:inherit; }
.home-vitrine img:not(.light-logo):not(.dark-logo){max-width:100%;display:block;}
.home-vitrine .wrap{ max-width:1120px; margin:0 auto; padding:0 1.5rem; }
/* Spécificité (section.wrap) volontairement > .wrap seul, sinon le padding
   horizontal de .wrap écrase le padding vertical ci-dessous (même propriété
   shorthand "padding" sur le même élément <section class="wrap">). */
.home-vitrine section.wrap{ padding-top:2rem; padding-bottom:2rem; }
.home-vitrine section.wrap + section.wrap{ margin-top:0.5rem; }
@media (max-width:768px){
    .home-vitrine section.wrap{ padding-top:5rem; padding-bottom:5rem; }
    .home-vitrine section.wrap + section.wrap{ margin-top:1.5rem; }
}

/* ---------- reveal-on-scroll ---------- */
.home-vitrine .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.home-vitrine .reveal.is-visible{ opacity:1; transform:translateY(0); }
.home-vitrine .reveal-stagger > * { transition-delay: calc(var(--i,0) * 90ms); }
@media (prefers-reduced-motion: reduce){
    .home-vitrine .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- nav ---------- */
.home-vitrine .nav{
    position:sticky; top:0; z-index:40;
    background:rgba(245,247,250,.82);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
}
.home-vitrine .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:.9rem 0;
}
.home-vitrine .brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.home-vitrine .brand-mark{
    width:34px; height:34px; border-radius:.7rem;
    background:linear-gradient(135deg,var(--blue),var(--cyan));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(13,110,253,.35);
}
.home-vitrine .brand-mark svg{ width:17px; height:17px; }
.home-vitrine .brand-word{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.2rem; }
.home-vitrine .nav-hours{
    display:flex; align-items:center; gap:.5rem;
    font-size:.82rem; font-weight:600; color:var(--blue-deep);
}
.home-vitrine .btn{
    font-family:'Inter',sans-serif; font-weight:600; font-size:.92rem;
    border:none; cursor:pointer; text-decoration:none;
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.7rem 1.4rem; border-radius:999px;
    transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.home-vitrine .btn-primary{ background:var(--ink); color:#fff; box-shadow:var(--shadow-sm); }
.home-vitrine .btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); background:var(--blue-deep); color: #fff; }
.home-vitrine .btn-light{ background:#fff; color:var(--ink); }
.home-vitrine .btn-light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); color: var(--ink); }
.home-vitrine .btn-sm{ padding:.5rem 1.05rem; font-size:.85rem; }
.home-vitrine .btn svg{ width:14px; height:14px; transition:transform .2s var(--ease); }
.home-vitrine .btn:hover svg{ transform:translateX(3px); }

/* ---------- hero ---------- */
.home-vitrine .hero{ position:relative; padding:5rem 0 3rem; overflow:hidden; }
.home-vitrine .hero-glow{
    position:absolute; inset:-30% -10% auto -10%; height:120%; z-index:0;
    background:
        radial-gradient(circle at 18% 30%, rgba(13,110,253,.16), transparent 45%),
        radial-gradient(circle at 82% 15%, rgba(13,202,240,.18), transparent 42%);
    filter:blur(50px); pointer-events:none;
}
.home-vitrine .hero-grid{
    position:relative; z-index:1;
    display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center;
}
@media (max-width:900px){ .home-vitrine .hero-grid{ grid-template-columns:1fr; } }
.home-vitrine .eyebrow{
    display:inline-flex; align-items:center; gap:.5rem;
    font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
    color:var(--blue-deep); background:rgba(13,110,253,.08);
    padding:.4rem .8rem; border-radius:999px; margin-bottom:1.25rem;
}
.home-vitrine .hero h1{ font-size:clamp(2.1rem,4vw,3.2rem); line-height:1.08; margin-bottom:1.1rem; }
.home-vitrine .hero h1 em{
    font-style:normal;
    background:linear-gradient(135deg,var(--blue),var(--cyan));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.home-vitrine .hero p.lead{ font-size:1.12rem; max-width:46ch; margin-bottom:1.9rem; }
.home-vitrine .hero-actions{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.home-vitrine .hero-note{ font-size:.85rem; color:var(--ink-soft); }

.home-vitrine .hero-card{
    position:relative;
    background:var(--card); border-radius:1.5rem;
    box-shadow:var(--shadow-lg); border:1px solid var(--line);
    padding:1.6rem; max-width:400px; margin-left:auto;
    animation: home-vitrine-floatCard 6s ease-in-out infinite;
}
@keyframes home-vitrine-floatCard{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
@media (prefers-reduced-motion: reduce){ .home-vitrine .hero-card{ animation:none; } }
.home-vitrine .hero-card-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.1rem; }
.home-vitrine .hero-card-tag{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }
.home-vitrine .hero-card-num{ font-family:'JetBrains Mono',monospace; font-weight:600; font-size:.95rem; }
.home-vitrine .hero-card-title{ font-size:1.5rem; font-weight:700; margin-bottom:.3rem; }
.home-vitrine .hero-card-sub{ font-size:.88rem; margin-bottom:1.2rem; }
.home-vitrine .hero-progress{ height:6px; border-radius:99px; background:var(--porcelain-2); overflow:hidden; margin-bottom:1rem; }
.home-vitrine .hero-progress-bar{
    height:100%; width:0%; border-radius:99px;
    background:linear-gradient(90deg,var(--blue),var(--cyan));
    animation: home-vitrine-fillBar 2.4s var(--ease) .3s forwards;
}
@keyframes home-vitrine-fillBar{ to{ width:72%; } }
.home-vitrine .hero-card-steps{ display:flex; justify-content:space-between; font-size:.72rem; font-weight:600; color:var(--ink-soft); }
.home-vitrine .hero-card-steps span.done{ color:var(--blue-deep); }
.home-vitrine .hero-card-badge{
    position:absolute; top:-14px; right:22px;
    background:var(--gold-soft); color:#8a5a00;
    font-size:.72rem; font-weight:700;
    padding:.35rem .7rem; border-radius:999px;
    box-shadow:var(--shadow-sm);
}

/* ---------- section headers ---------- */
.home-vitrine .section-head{ max-width:640px; margin:0 auto 3rem; text-align:center; }
.home-vitrine .section-head .eyebrow{ margin-bottom:1rem; }
.home-vitrine .section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:.75rem; }
.home-vitrine .section-head p{ font-size:1.02rem; }

/* ---------- journey track ---------- */
.home-vitrine .journey{ background:var(--ink); color:#fff; border-radius:2rem; position:relative; overflow:hidden; }
.home-vitrine .journey .wrap{ padding-top:5rem; padding-bottom:5rem; }
.home-vitrine .journey .section-head h2, .home-vitrine .journey .section-head p{ color:#fff; }
.home-vitrine .journey .section-head p{ color:rgba(255,255,255,.65); }
.home-vitrine .journey-track{ position:relative; }
.home-vitrine .journey-line{
    position:absolute; left:0; right:0; top:27px; height:2px;
    background:rgba(255,255,255,.14);
}
.home-vitrine .journey-line-fill{
    position:absolute; left:0; top:0; height:100%; width:0%;
    background:linear-gradient(90deg,var(--gold),var(--cyan));
    transition:width 1.4s var(--ease);
}
.home-vitrine .journey-steps{
    position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem;
}
@media (max-width:900px){
    .home-vitrine .journey-steps{ grid-template-columns:1fr; gap:2.2rem; }
    .home-vitrine .journey-line{ left:27px; top:0; bottom:0; right:auto; width:2px; height:auto; }
    .home-vitrine .journey-line-fill{ width:100%; height:0%; }
}
.home-vitrine .journey-step{ text-align:center; }
@media (max-width:900px){ .home-vitrine .journey-step{ text-align:left; display:flex; gap:1.2rem; align-items:flex-start; } }
.home-vitrine .journey-dot{
    width:56px; height:56px; border-radius:50%;
    background:#12192b; border:2px solid rgba(255,255,255,.16);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 1.1rem; position:relative; z-index:1;
    font-family:'JetBrains Mono',monospace; font-weight:600; font-size:.95rem;
    transition:border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
    flex-shrink:0;
}
.home-vitrine .journey-step.on .journey-dot{
    background:linear-gradient(135deg,var(--blue),var(--cyan));
    border-color:transparent; box-shadow:0 0 0 6px rgba(13,202,240,.15);
}
.home-vitrine .journey-step h4{ color:#fff; font-size:1rem; margin-bottom:.4rem; }
.home-vitrine .journey-step p{ font-size:.86rem; color:rgba(255,255,255,.62); }

/* ---------- features ---------- */
.home-vitrine .features-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}
@media (max-width:900px){ .home-vitrine .features-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .home-vitrine .features-grid{ grid-template-columns:1fr; } }
.home-vitrine .feature-card{
    background:var(--card); border-radius:1.1rem; padding:1.7rem;
    border:1px solid var(--line);
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.home-vitrine .feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.home-vitrine .feature-icon{
    width:44px; height:44px; border-radius:.85rem;
    display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.home-vitrine .feature-card h3{ font-size:1.02rem; margin-bottom:.45rem; }
.home-vitrine .feature-card p{ font-size:.88rem; }

/* ---------- trusted (ancienne section, avec les vrais logos) ---------- */
.home-vitrine .trusted-row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:3rem; }
.home-vitrine .trusted-logo img{
    height: 42px;
    max-width: 180px;
    object-fit: contain;
    filter: grayscale(1) opacity(0.55);
    transition: filter .2s ease;
}
.home-vitrine .trusted-logo:hover img{
    filter: grayscale(0) opacity(1);
}

/* ---------- cta band ---------- */
.home-vitrine .cta-band{
    position:relative; overflow:hidden;
    border-radius:1.8rem; text-align:center;
    padding:4rem 2rem;
    background:linear-gradient(135deg,var(--blue) 0%, var(--blue-deep) 55%, var(--cyan) 100%);
    color:#fff;
}
.home-vitrine .cta-band::before{
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(circle at 12% 20%, rgba(255,255,255,.16), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(255,255,255,.12), transparent 40%);
}
.home-vitrine .cta-band > *{ position:relative; z-index:1; }
.home-vitrine .cta-band h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:.7rem; }
.home-vitrine .cta-band p{ color:rgba(255,255,255,.85); font-size:1.05rem; margin-bottom:1.8rem; }

.home-vitrine footer{ text-align:center; padding:2.5rem 0; font-size:.85rem; color:var(--ink-soft); }

/* ============================================================
   Mode sombre — surcharge les variables/couleurs de fond et de
   texte. --ink garde volontairement sa valeur sombre d'origine
   (utilisée aussi comme fond de .journey et .btn-primary), donc
   on ne la réassigne pas ici : on override directement le texte
   et les fonds concernés à la place.
   ============================================================ */
.dark-mode .home-vitrine{
    --porcelain:#0B1220;
    --porcelain-2:#141B2C;
    --card:#161E2E;
    --line:#232C40;
    --ink-soft:#A6B0C3;
    --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
    --shadow-md: 0 12px 32px rgba(0,0,0,.45);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
    color:#F1F5F9;
}
.dark-mode .home-vitrine h1,
.dark-mode .home-vitrine h2,
.dark-mode .home-vitrine h3,
.dark-mode .home-vitrine h4{
    color:#F1F5F9;
}
.dark-mode .home-vitrine .nav{
    background:rgba(11,18,32,.82);
}
.dark-mode .home-vitrine .eyebrow{
    color:#6EC1FF;
    background:rgba(13,202,240,.14);
}
.dark-mode .home-vitrine .btn-primary{
    background:linear-gradient(135deg,var(--blue),var(--cyan));
    color:#fff;
}
.dark-mode .home-vitrine .btn-primary:hover{
    background:linear-gradient(135deg,var(--blue-deep),var(--cyan));
}
.dark-mode .home-vitrine .journey{
    background:#05080F;
}
.dark-mode .home-vitrine .journey-dot{
    background:#0B1220;
}