/* ════════════════════════════════════════════════════════════════════ FATAX — Calque d'amélioration (scroll, cookies, thème immersif, espacements) Chargé en DERNIER dans le pour gagner la priorité CSS. N'altère aucune structure : surcharge uniquement. ════════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────────────── 1) CORRECTIF DÉFILEMENT — la page peut toujours défiler verticalement ──────────────────────────────────────────────────────────────────── */ html, body{ height:auto !important; min-height:100% !important; overflow-x:hidden !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; } .main, html.mobile-device .main, .shell, html.mobile-device .shell{ overflow-x:hidden !important; overflow-y:visible !important; height:auto !important; min-height:auto !important; touch-action:pan-y !important; } .screen{ overflow:visible !important; height:auto !important; min-height:auto !important; } /* On ne fige le scroll QUE quand une vraie modale est ouverte */ html:not(.modal-open), body:not(.modal-open){ overflow-y:auto !important; touch-action:auto !important; position:static !important; } html.modal-open, body.modal-open{ overflow:hidden !important; } @media(max-width:1200px),(pointer:coarse){ .main, .shell, .screen{ overflow-y:visible !important; height:auto !important; max-height:none !important; } } /* ──────────────────────────────────────────────────────────────────── 2) CORRECTIF COOKIES — le bandeau ne bloque plus la page ──────────────────────────────────────────────────────────────────── */ .cookie-panel{ position:fixed !important; inset:auto 0 0 0 !important; top:auto !important; background:transparent !important; backdrop-filter:none !important; pointer-events:none !important; z-index:140 !important; align-items:flex-end !important; } .cookie-panel.show{ display:flex !important; } .cookie-panel .cookie-card{ pointer-events:auto !important; width:100% !important; box-shadow:0 -18px 60px rgba(0,0,0,.45) !important; } /* ──────────────────────────────────────────────────────────────────── 3) THÈME IMMERSIF PREMIUM ──────────────────────────────────────────────────────────────────── */ :root{ --gold-bright:#ffd76a; --gold-deep:#c98f1e; --glass-edge:rgba(255,255,255,.08); --glass-fill:rgba(255,255,255,.045); } body{ background: radial-gradient(60% 80% at 12% 8%, rgba(242,201,91,.10), transparent 60%), radial-gradient(50% 60% at 88% 14%, rgba(122,167,255,.07), transparent 55%), radial-gradient(70% 90% at 50% 110%, rgba(94,224,172,.07), transparent 60%), linear-gradient(160deg, #06070b 0%, #0b0e16 45%, #070810 100%) !important; background-attachment:fixed !important; } body::before{ content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none; background: radial-gradient(38% 50% at 20% 30%, rgba(242,201,91,.06), transparent 60%), radial-gradient(32% 44% at 80% 70%, rgba(94,224,172,.05), transparent 60%); animation:auroraDrift 26s ease-in-out infinite alternate; } @keyframes auroraDrift{ 0%{transform:translate3d(0,0,0) scale(1);opacity:.85} 50%{transform:translate3d(3%,-2%,0) scale(1.06);opacity:1} 100%{transform:translate3d(-2%,3%,0) scale(1.03);opacity:.9} } .hero-copy,.hero-panel,.card,.metric,.modal-card{ background:linear-gradient(180deg, var(--glass-fill), rgba(255,255,255,.02)) !important; border:1px solid var(--glass-edge) !important; backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15); box-shadow:0 24px 70px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.06) !important; transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease; } .card:hover{ transform:translateY(-3px); border-color:rgba(255,215,106,.32) !important; box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,215,106,.12), inset 0 1px 0 rgba(255,255,255,.08) !important; } .hero-copy h1{ background:linear-gradient(135deg, #fff7e6 0%, var(--gold-bright) 55%, var(--gold-deep) 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 6px 24px rgba(242,201,91,.18)); } .metric strong,.big-number{ background:linear-gradient(135deg, #fff7e6, var(--gold-bright)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .primary{ background:linear-gradient(135deg, var(--gold-bright), var(--gold-deep)) !important; box-shadow:0 14px 34px rgba(242,201,91,.28), inset 0 1px 0 rgba(255,255,255,.4) !important; position:relative;overflow:hidden; } .primary::before{ content:"";position:absolute;top:0;left:-120%;width:80%;height:100%; background:linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-18deg);transition:left .7s ease; } .primary:hover::before{left:140%} .primary:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(242,201,91,.4), inset 0 1px 0 rgba(255,255,255,.5) !important} .nav button.active{ background:linear-gradient(135deg, rgba(255,215,106,.20), rgba(255,255,255,.04)) !important; border-color:rgba(255,215,106,.32) !important; box-shadow:inset 2px 0 0 var(--gold-bright); } .eyebrow{ background:linear-gradient(135deg, rgba(255,215,106,.16), rgba(255,215,106,.04)) !important; border-color:rgba(255,215,106,.28) !important; color:var(--gold-bright) !important; } .brand img,.phone-logo img{ filter:drop-shadow(0 8px 22px rgba(242,201,91,.32)); animation:logoFloat 5s ease-in-out infinite; } @keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} .mobile-nav{ background:rgba(9,12,18,.86) !important; backdrop-filter:blur(20px) saturate(1.2); border:1px solid var(--glass-edge) !important; box-shadow:0 -8px 40px rgba(0,0,0,.5) !important; } .mobile-nav button.active{ background:linear-gradient(135deg, rgba(255,215,106,.2), rgba(255,255,255,.04)) !important; color:var(--gold-bright) !important; } .field input:focus,.field select:focus,.field textarea:focus,input:focus,select:focus,textarea:focus{ border-color:rgba(255,215,106,.5) !important; box-shadow:0 0 0 3px rgba(242,201,91,.14) !important; background:rgba(255,255,255,.07) !important; outline:none !important; } .row,.premium-item,.loyalty-card{ transition:transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s ease, background .2s ease, box-shadow .2s ease; } .row:hover,.premium-item:hover{ transform:translateX(3px); border-color:rgba(255,215,106,.28) !important; background:rgba(255,255,255,.06) !important; } .loyalty-card:hover{ transform:translateY(-4px) scale(1.01); box-shadow:0 26px 70px rgba(0,0,0,.32) !important; } .modal{background:rgba(4,5,9,.78) !important;backdrop-filter:blur(12px) !important} .modal-card{box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 0 1px var(--glass-edge) !important} /* Barre de défilement stylée */ *{scrollbar-width:thin;scrollbar-color:rgba(242,201,91,.3) transparent} *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(242,201,91,.4), rgba(185,130,32,.3));border-radius:99px;border:2px solid transparent;background-clip:padding-box} *::-webkit-scrollbar-thumb:hover{background:rgba(242,201,91,.55);background-clip:padding-box} *::-webkit-scrollbar-track{background:transparent} /* ──────────────────────────────────────────────────────────────────── 4) ESPACEMENTS HARMONISÉS ──────────────────────────────────────────────────────────────────── */ .main{ padding-top:18px !important; padding-bottom:calc(120px + env(safe-area-inset-bottom)) !important; } .screen{ padding-bottom:24px !important; } .screen > .card-head{ margin-bottom:20px !important; } .grid, .layout, .metrics, .info-strip, .trust-row{ gap:18px !important; } .section-gap{ margin-bottom:28px !important; } .screen > .card + .card, .screen > .layout + .card, .screen > .card + .layout, .screen > .info-strip + .card{ margin-top:18px !important; } @media(max-width:1040px){ .main{ padding-bottom:calc(130px + env(safe-area-inset-bottom)) !important; } } /* Apparition douce au défilement (activée via JS) */ .reveal-on-scroll{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1)} .reveal-on-scroll.is-visible{opacity:1;transform:none} /* Accessibilité : respect du mouvement réduit */ @media(prefers-reduced-motion:reduce){ body::before,.brand img,.phone-logo img{animation:none !important} *{transition:none !important} } @media(max-width:768px){ body::before{animation-duration:34s} .hero-copy,.hero-panel,.card,.metric{backdrop-filter:blur(8px)} } /* ════════════════════════════════════════════════════════════════════ ESPACEMENTS LOGO — bureau + mobile (V2.3) ════════════════════════════════════════════════════════════════════ */ /* Logo barre latérale (bureau) : plus d'air autour */ .brand{ gap:16px !important; padding:14px 14px 24px 14px !important; cursor:pointer; } .brand img{ width:54px !important; height:54px !important; flex:0 0 54px !important; } .brand b{ line-height:1.1 !important; } .brand span{ display:block; margin-top:2px; } /* Logo barre du haut (mobile) : espace entre logo et texte */ .mobile-brand{ gap:14px !important; cursor:pointer; padding:2px 0 !important; } .mobile-brand img{ width:44px !important; height:44px !important; flex:0 0 44px !important; margin-right:2px !important; } .mobile-brand b{ font-size:19px !important; letter-spacing:.01em !important; } /* Indique que c'est cliquable */ .brand:hover, .mobile-brand:hover{ opacity:.92; } /* ════════════════════════════════════════════════════════════════════ ARTICLES DÉTECTÉS — séparer le nom du libellé "Article détecté" ════════════════════════════════════════════════════════════════════ */ .item-row > div{ display:flex !important; flex-direction:column !important; gap:3px !important; min-width:0; } .item-row b{ display:block !important; line-height:1.3 !important; } .item-row span{ display:block !important; margin-top:1px !important; opacity:.7; } /* ════════════════════════════════════════════════════════════════════ ÉCHÉANCE MASQUÉE — la plupart des factures sont déjà payées ════════════════════════════════════════════════════════════════════ */ .fatax-hide-echeance{ display:none !important; } /* ════════════════════════════════════════════════════════════════════ CALENDRIER D'EXPORT — sélection de période + détail du jour ════════════════════════════════════════════════════════════════════ */ .calendar-head-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px} .calendar-head-bar h2{margin:0;font-size:20px} .export-period-bar{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0} .export-day.in-range{background:rgba(242,201,91,.14)!important;border-color:rgba(242,201,91,.3)!important} .export-day.range-edge{background:linear-gradient(135deg,rgba(242,201,91,.28),rgba(242,201,91,.12))!important;border-color:var(--gold)!important;box-shadow:0 0 0 1px rgba(242,201,91,.4)} .export-day .day-amount{color:var(--gold-bright,#ffd76a)!important;font-weight:800} .export-selection-info{margin-top:14px} .export-period-summary{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line2);border-radius:12px;background:rgba(242,201,91,.07);font-size:14px} .export-period-summary b{color:var(--gold-bright,#ffd76a)} .export-day-detail{margin-top:14px;display:flex;flex-direction:column;gap:8px} .export-detail-head{display:flex;justify-content:space-between;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line2);text-transform:capitalize} .export-detail-head span{color:var(--gold-bright,#ffd76a);font-weight:800} .export-detail-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line2);border-radius:12px;background:rgba(0,0,0,.14)} .export-detail-row > div{display:flex;flex-direction:column;gap:2px;min-width:0} .export-detail-row small{opacity:.7} .export-detail-row strong{white-space:nowrap} @media(max-width:680px){.export-period-summary{flex-direction:column;gap:6px}}