/* Neutralise la bannière décorative générique de site-builder.css (#previewContent[data-page-variant="banner"]::before, un bandeau dégradé de 72px + cadre coloré sur chaque .site-block) — habillage pensé à l'origine pour les pages applicatives des structures "riches" qui n'avaient pas de design dédié par page. Depuis que ces 14 pages ont leur propre design .tpl-* (mêmes raisons que la neutralisation équivalente dans structure-original.css), le garder ferait un bandeau générique par-dessus un design déjà fidèle. Ciblé via :has(.tpl-app-wrap, .tpl-hero) pour ne désactiver la bannière QUE sur les pages effectivement passées au système .tpl-* — .tpl-app-wrap pour les pages applicatives (wallet, dashboard...), .tpl-hero pour les pages qui réutilisent les blocs "marketing" (ex: partner-landing/index-partner.php, pas dans JOBIZ_MARKETING_PAGES donc toujours résolue en variant "banner"/"standard" comme une page app). Les vraies pages marketing (accueil, services...) qui utilisent encore le variant "banner" pour du contenu généré par l'éditeur restent inchangées. Doit rester APRÈS le de site-builder.css dans pour gagner la cascade à spécificité égale (même structure de sélecteur). */ #previewContent[data-page-variant="banner"]:has(.tpl-app-wrap, .tpl-hero) { padding-top: 0; } #previewContent[data-page-variant="banner"]:has(.tpl-app-wrap, .tpl-hero)::before { content: none; } #previewContent[data-page-variant="banner"]:has(.tpl-app-wrap, .tpl-hero) .site-block { background: transparent; border-radius: 0; box-shadow: none; margin: 0; } #previewContent[data-page-variant="banner"]:has(.tpl-app-wrap, .tpl-hero) .site-block[data-block-type]:not([data-block-type="hero"]) { border-top: none; } /* ============================================================ Pages applicatives PARTAGÉES (.tpl-*) pour les 14 structures non-original — chargé EN PLUS du fichier structure-{clé}.css actif (qui définit les vraies couleurs et fournit les alias génériques --tpl-bg/--tpl-card/--tpl-border/ --tpl-text/--tpl-dim/--tpl-accent, voir bas de chaque structure-*.css). Une seule feuille de style pour les 14 structures : leur identité vient uniquement des alias CSS, jamais de règles dupliquées ici. "original" ne charge jamais ce fichier — elle garde son propre design déjà cloné du vrai JOboost (structure-original.css). ============================================================ */ .tpl-catalog-search{display:flex; gap:.6rem; max-width:640px; margin:0 auto 1.5rem;} .tpl-catalog-search input{flex:1; padding:.75rem 1rem; border-radius:10px; border:1px solid var(--tpl-border); background:var(--tpl-card); color:var(--tpl-text); font-family:inherit; font-size:.9rem;} .tpl-catalog-search input::placeholder{color:var(--tpl-dim);} .tpl-catalog-search button{padding:.75rem 1.4rem; border-radius:10px; border:none; background:var(--tpl-accent); color:var(--tpl-bg); font-weight:700; cursor:pointer; white-space:nowrap;} .tpl-catalog-pills{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:1.25rem;} .tpl-catalog-pill{padding:.5rem 1.1rem; border-radius:999px; border:1px solid var(--tpl-border); background:var(--tpl-card); color:var(--tpl-dim); font-size:.82rem; font-weight:600; text-decoration:none;} .tpl-catalog-pill.active{background:var(--tpl-accent); color:var(--tpl-bg); border-color:var(--tpl-accent);} .tpl-catalog-selects{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; align-items:center; margin-bottom:1.5rem;} .tpl-catalog-selects label{font-size:.82rem; color:var(--tpl-dim); font-weight:600;} .tpl-catalog-selects select{padding:.55rem .8rem; border-radius:8px; border:1px solid var(--tpl-border); background:var(--tpl-card); color:var(--tpl-text); font-family:inherit; font-size:.85rem;} .tpl-catalog-results-bar{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; max-width:1100px; margin:0 auto 1.25rem; padding:0 1.5rem;} .tpl-catalog-results-bar p{margin:0; font-size:.85rem; color:var(--tpl-dim);} .tpl-catalog-actions{display:flex; gap:.6rem; flex-wrap:wrap;} .tpl-catalog-mini-btn{display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border-radius:8px; border:1px solid var(--tpl-border); background:var(--tpl-card); color:var(--tpl-text); font-size:.8rem; font-weight:600; text-decoration:none;} .tpl-product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; max-width:1100px; margin:0 auto; padding:0 1.5rem;} @media(max-width:1000px){.tpl-product-grid{grid-template-columns:repeat(3,1fr);}} @media(max-width:760px){.tpl-product-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:480px){.tpl-product-grid{grid-template-columns:1fr;}} .tpl-product-card{background:var(--tpl-card); border:1px solid var(--tpl-border); border-radius:16px; padding:1.3rem; display:flex; flex-direction:column; gap:.6rem;} .tpl-product-top{display:flex; align-items:center; justify-content:space-between; gap:.5rem;} .tpl-product-icon{width:38px; height:38px; border-radius:10px; background:var(--tpl-bg); border:1px solid var(--tpl-border); display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--tpl-accent); flex-shrink:0; overflow:hidden;} .tpl-product-badges{display:flex; flex-wrap:wrap; gap:.35rem; flex:1;} .tpl-product-badge{font-size:.68rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; background:var(--tpl-bg); border:1px solid var(--tpl-border); color:var(--tpl-dim);} .tpl-product-fav{background:none; border:none; cursor:pointer; padding:0; font-size:1rem; color:var(--tpl-dim); flex-shrink:0;} .tpl-product-fav.active{color:#ef4444;} .tpl-product-title{font-size:.92rem; font-weight:700; color:var(--tpl-text); margin:0;} .tpl-product-desc{font-size:.78rem; color:var(--tpl-dim); line-height:1.5; margin:0;} .tpl-product-sales{font-size:.72rem; color:var(--tpl-dim); display:flex; align-items:center; gap:.35rem;} .tpl-product-price{font-size:1.05rem; font-weight:800; color:var(--tpl-accent); margin-top:auto;} .tpl-product-buy{display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.65rem; border-radius:10px; background:var(--tpl-accent); color:var(--tpl-bg); font-weight:700; font-size:.85rem; text-decoration:none;} .tpl-catalog-empty{text-align:center; padding:3rem 1.5rem; color:var(--tpl-dim);} .tpl-pagination{display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem; margin:1.75rem auto 0; max-width:1100px;} .tpl-page-btn{padding:.5rem .9rem; border-radius:8px; border:1px solid var(--tpl-border); background:var(--tpl-card); color:var(--tpl-text); font-size:.82rem; font-weight:600; text-decoration:none;} .tpl-page-btn.active{background:var(--tpl-accent); color:var(--tpl-bg); border-color:var(--tpl-accent);} .tpl-catalog-reset{text-align:center; margin-top:1.25rem;} .tpl-catalog-reset a{font-size:.8rem; color:var(--tpl-dim); text-decoration:none;} /* Formulaires génériques (candidature partenaire, etc.) */ .tpl-alert{display:flex; align-items:center; gap:.6rem; padding:.85rem 1.1rem; border-radius:10px; font-size:.85rem; margin-bottom:1rem;} .tpl-alert-error{background:rgba(239,68,68,0.12); color:#ef4444;} .tpl-configured-box{display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; background:var(--tpl-bg); border:1px solid var(--tpl-border); border-radius:10px; padding:.8rem 1rem; font-size:.85rem; color:var(--tpl-text); margin-top:.4rem;} .tpl-configured-box i{color:var(--tpl-accent); margin-right:.4rem;} .tpl-configured-box a{color:var(--tpl-accent); font-weight:700; font-size:.8rem; white-space:nowrap; text-decoration:none;} .tpl-configured-box.missing{background:rgba(239,68,68,0.08); border-color:rgba(239,68,68,0.25); color:#ef4444;} .tpl-configured-box.missing i{color:#ef4444;} .tpl-configured-box.missing a{color:#ef4444; text-decoration:underline;} .tpl-form-field{margin-bottom:1.1rem;} .tpl-form-field label{display:flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:700; color:var(--tpl-text); margin-bottom:.3rem;} /* ===== Pages d'authentification (connexion, inscription, mot de passe) ===== */ .tpl-auth-wrap{min-height:70vh; display:flex; align-items:center; justify-content:center; padding:3rem 1.5rem;} .tpl-auth-card{width:100%; max-width:420px; background:var(--tpl-card); border:1px solid var(--tpl-border); border-radius:18px; padding:2.25rem;} .tpl-auth-header{text-align:center; margin-bottom:1.75rem;} .tpl-auth-logo{width:52px; height:52px; border-radius:14px; background:var(--tpl-accent); color:var(--tpl-bg); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin:0 auto 1rem;} .tpl-auth-header h1{font-size:1.35rem; font-weight:800; color:var(--tpl-text); margin:0 0 .4rem;} .tpl-auth-header p{font-size:.85rem; color:var(--tpl-dim); margin:0;} .tpl-auth-card .tpl-field{margin-bottom:1.1rem; text-align:left;} .tpl-auth-card .tpl-field label{display:flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:700; color:var(--tpl-text); margin-bottom:.4rem;} .tpl-auth-input-wrap{position:relative;} .tpl-auth-input-wrap i.ri-icon{position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--tpl-dim); font-size:.85rem;} .tpl-auth-input-wrap input{width:100%; box-sizing:border-box; padding:.75rem .9rem; border-radius:10px; border:1px solid var(--tpl-border); background:var(--tpl-bg); color:var(--tpl-text); font-family:inherit; font-size:.9rem;} .tpl-auth-input-wrap input.has-icon{padding-left:2.4rem;} .tpl-auth-toggle-eye{position:absolute; right:.9rem; top:50%; transform:translateY(-50%); color:var(--tpl-dim); cursor:pointer; font-size:.85rem;} .tpl-auth-options{display:flex; justify-content:space-between; align-items:center; font-size:.78rem; margin-bottom:1.25rem; color:var(--tpl-dim);} .tpl-auth-options a{color:var(--tpl-accent); text-decoration:none; font-weight:600;} .tpl-auth-submit{width:100%; box-sizing:border-box; justify-content:center;} .tpl-auth-footer{text-align:center; font-size:.82rem; color:var(--tpl-dim); margin-top:1.5rem;} .tpl-auth-footer a{color:var(--tpl-accent); font-weight:700; text-decoration:none;} .tpl-alert-success{background:rgba(34,197,94,0.12); color:#22c55e;} /* ===== Portefeuille ===== */ .tpl-app-wrap{max-width:640px; margin:0 auto; padding:2rem 1.5rem;} .tpl-wallet-balance{background:linear-gradient(135deg, var(--tpl-accent), var(--tpl-accent)); background:var(--tpl-card); border:1px solid var(--tpl-border); border-radius:18px; padding:1.75rem; text-align:center; margin-bottom:1.25rem;} .tpl-wallet-label{display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.82rem; color:var(--tpl-dim); font-weight:700; margin-bottom:.75rem;} .tpl-wallet-amount{font-size:2.1rem; font-weight:800; color:var(--tpl-text);} .tpl-wallet-sub{font-size:.8rem; color:var(--tpl-dim); margin-bottom:1.25rem;} .tpl-wallet-stats{display:flex; justify-content:center; gap:1.75rem; flex-wrap:wrap;} .tpl-wallet-stats .stat-value{font-size:1.1rem; font-weight:800; color:var(--tpl-accent);} .tpl-wallet-stats .stat-label{font-size:.72rem; color:var(--tpl-dim);} .tpl-quick-actions{display:flex; gap:.75rem; margin-bottom:1.5rem;} .tpl-quick-btn{flex:1; display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:1rem; border-radius:14px; border:1px solid var(--tpl-border); background:var(--tpl-card); color:var(--tpl-text); text-decoration:none; font-size:.82rem; font-weight:700;} .tpl-quick-btn.primary{background:var(--tpl-accent); color:var(--tpl-bg); border-color:var(--tpl-accent);} .tpl-quick-btn .icon{font-size:1.3rem;} .tpl-history-card{background:var(--tpl-card); border:1px solid var(--tpl-border); border-radius:16px; padding:1.5rem;} .tpl-history-card h3{display:flex; align-items:center; gap:.5rem; font-size:.95rem; color:var(--tpl-text); margin:0 0 1rem;} .tpl-tx-item{display:flex; align-items:center; gap:.9rem; padding:.75rem 0; border-bottom:1px solid var(--tpl-border);} .tpl-tx-item:last-child{border-bottom:none;} .tpl-tx-icon{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--tpl-bg); color:var(--tpl-accent);} .tpl-tx-icon.credit{color:#22c55e;} .tpl-tx-icon.debit{color:#ef4444;} .tpl-tx-info{flex:1; min-width:0;} .tpl-tx-title{font-size:.85rem; font-weight:700; color:var(--tpl-text);} .tpl-tx-date{font-size:.72rem; color:var(--tpl-dim);} .tpl-tx-amount{font-size:.9rem; font-weight:800; white-space:nowrap;} .tpl-tx-amount.credit{color:#22c55e;} .tpl-tx-amount.debit{color:#ef4444;} .tpl-empty-state{text-align:center; padding:2.5rem 1rem; color:var(--tpl-dim);} .tpl-empty-state i{font-size:1.8rem; margin-bottom:.75rem; display:block;} /* ===== Recharge portefeuille ===== */ .tpl-recharge-header{display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem;} .tpl-recharge-header .icon{width:52px; height:52px; border-radius:14px; background:var(--tpl-accent); color:var(--tpl-bg); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0;} .tpl-recharge-header h1{font-size:1.3rem; font-weight:800; color:var(--tpl-text); margin:0 0 .2rem;} .tpl-recharge-header p{font-size:.82rem; color:var(--tpl-dim); margin:0;} .tpl-recharge-card{background:var(--tpl-card); border:1px solid var(--tpl-border); border-radius:16px; padding:1.75rem;} .tpl-amount-field{display:flex; align-items:center; gap:.6rem; border:1.5px solid var(--tpl-border); border-radius:12px; padding:.4rem .9rem; margin:.6rem 0 .4rem;} .tpl-amount-field span{font-weight:700; color:var(--tpl-dim); font-size:.85rem;} .tpl-amount-field input{flex:1; border:none; background:none; outline:none; font-size:1.1rem; font-weight:700; color:var(--tpl-text); font-family:inherit; padding:.6rem 0;} .tpl-min-info{font-size:.78rem; color:var(--tpl-dim); margin:0 0 1.1rem;} .tpl-quick-amounts{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:1.5rem;} .tpl-quick-amount-btn{padding:.65rem; border-radius:10px; border:1px solid var(--tpl-border); background:var(--tpl-bg); color:var(--tpl-text); font-size:.82rem; font-weight:700; cursor:pointer;} .tpl-quick-amount-btn.active{background:var(--tpl-accent); color:var(--tpl-bg); border-color:var(--tpl-accent);} .tpl-recharge-steps{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem;} .tpl-recharge-steps > div{flex:1; min-width:130px; display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--tpl-dim); background:var(--tpl-card); border:1px solid var(--tpl-border); border-radius:10px; padding:.6rem .8rem;} .tpl-step-n{width:22px; height:22px; border-radius:50%; background:var(--tpl-accent); color:var(--tpl-bg); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; flex-shrink:0;} .tpl-help-row{margin-top:1.25rem;} .tpl-help-link{display:flex; align-items:center; gap:.9rem; background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.3); border-radius:12px; padding:1rem; text-decoration:none;} .tpl-help-link i{font-size:1.5rem; color:#22c55e;} .tpl-help-link strong{display:block; font-size:.85rem; color:var(--tpl-text);} .tpl-help-link small{font-size:.76rem; color:var(--tpl-dim);} /* ===== Commande / confirmation ===== */ .tpl-order-header{display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem;} .tpl-order-icon{width:52px; height:52px; border-radius:14px; background:var(--tpl-bg); border:1px solid var(--tpl-border); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--tpl-accent); flex-shrink:0; overflow:hidden;} .tpl-order-header h1{font-size:1.15rem; font-weight:800; color:var(--tpl-text); margin:0;} .tpl-order-desc{font-size:.85rem; color:var(--tpl-dim); margin:0 0 1.25rem;} .tpl-order-card{background:var(--tpl-card); border:1px solid var(--tpl-border); border-radius:16px; padding:1.75rem;} .tpl-order-card select{width:100%; box-sizing:border-box; padding:.75rem .9rem; border-radius:10px; border:1px solid var(--tpl-border); background:var(--tpl-bg); color:var(--tpl-text); font-family:inherit; font-size:.9rem;} .tpl-order-card input{width:100%; box-sizing:border-box; padding:.75rem .9rem; border-radius:10px; border:1px solid var(--tpl-border); background:var(--tpl-bg); color:var(--tpl-text); font-family:inherit; font-size:.9rem;} .tpl-help-text{font-size:.74rem; color:var(--tpl-dim); margin:.4rem 0 0;} .tpl-receipt{background:var(--tpl-bg); border:1px solid var(--tpl-border); border-radius:12px; padding:1rem 1.1rem; margin:1.25rem 0;} .tpl-receipt-row{display:flex; justify-content:space-between; font-size:.82rem; color:var(--tpl-dim); margin-bottom:.5rem;} .tpl-receipt-row .val{color:var(--tpl-text); font-weight:700;} .tpl-receipt-total{display:flex; justify-content:space-between; align-items:center; padding-top:.6rem; border-top:1px solid var(--tpl-border);} .tpl-receipt-total .label{font-size:.85rem; font-weight:700; color:var(--tpl-text);} .tpl-receipt-total .amount{font-size:1.2rem; font-weight:800; color:var(--tpl-accent);} .tpl-receipt-total .amount.empty{color:var(--tpl-dim); font-size:.85rem; font-weight:600;} .tpl-wallet-info-row{display:flex; justify-content:space-between; align-items:center; font-size:.85rem; color:var(--tpl-dim); margin-bottom:1rem;} .tpl-wallet-info-row strong{color:var(--tpl-text);} .tpl-warning{display:none; align-items:center; gap:.5rem; background:rgba(239,68,68,0.1); color:#ef4444; padding:.75rem 1rem; border-radius:10px; font-size:.82rem; margin-bottom:1rem;} .tpl-warning a{color:inherit; text-decoration:underline;} .tpl-recharge-link{display:block; text-align:center; margin-top:.9rem; font-size:.82rem; color:var(--tpl-accent); text-decoration:none; font-weight:700;} .tpl-success-card{max-width:440px; margin:0 auto; text-align:center; background:var(--tpl-card); border:1px solid var(--tpl-border); border-radius:18px; padding:2.25rem;} .tpl-success-card .icon{font-size:2.5rem; color:#22c55e; margin-bottom:1rem;} .tpl-success-card h2{font-size:1.25rem; font-weight:800; color:var(--tpl-text); margin:0 0 .4rem;} .tpl-success-card .msg{font-size:.85rem; color:var(--tpl-dim); margin:0 0 1.25rem;} .tpl-detail-box{background:var(--tpl-bg); border:1px solid var(--tpl-border); border-radius:12px; padding:1rem 1.1rem; text-align:left; margin-bottom:1.25rem;} .tpl-detail-item{display:flex; justify-content:space-between; font-size:.82rem; color:var(--tpl-dim); margin-bottom:.5rem;} .tpl-detail-item:last-child{margin-bottom:0;} .tpl-detail-item .value{color:var(--tpl-text); font-weight:700;} .tpl-action-buttons{display:flex; gap:.6rem; margin-top:1.25rem;} .tpl-action-buttons a{flex:1; text-align:center;} /* ===== Tableau de bord client ===== */ .tpl-dash-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap; gap:.75rem;} .tpl-dash-header h1{font-size:1.3rem; font-weight:800; color:var(--tpl-text); margin:0 0 .2rem;} .tpl-dash-header p{font-size:.82rem; color:var(--tpl-dim); margin:0;} .tpl-logout-btn{display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1rem; border-radius:10px; border:1px solid var(--tpl-border); background:var(--tpl-card); color:var(--tpl-dim); font-size:.8rem; font-weight:700; text-decoration:none;} .tpl-dash-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem;} @media(max-width:700px){.tpl-dash-stats{grid-template-columns:1fr 1fr;}} .tpl-dash-stat{background:var(--tpl-card); border:1px solid var(--tpl-border); border-radius:14px; padding:1.1rem; text-align:center;} .tpl-dash-stat i{font-size:1.2rem; color:var(--tpl-accent); margin-bottom:.5rem; display:block;} .tpl-dash-stat .value{font-size:1.15rem; font-weight:800; color:var(--tpl-text);} .tpl-dash-stat .label{font-size:.72rem; color:var(--tpl-dim);} .tpl-dash-actions{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-bottom:1.5rem;} @media(max-width:700px){.tpl-dash-actions{grid-template-columns:1fr 1fr;}} .tpl-dash-action{display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:1.1rem; border-radius:14px; background:var(--tpl-card); border:1px solid var(--tpl-border); color:var(--tpl-text); text-decoration:none; font-size:.8rem; font-weight:700;} .tpl-dash-action i{font-size:1.3rem; color:var(--tpl-accent);} .tpl-order-list{display:flex; flex-direction:column;} .tpl-order-item{display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.85rem 0; border-bottom:1px solid var(--tpl-border);} .tpl-order-item:last-child{border-bottom:none;} .tpl-order-info{flex:1; min-width:0;} .tpl-order-name{font-size:.85rem; font-weight:700; color:var(--tpl-text);} .tpl-order-meta{font-size:.72rem; color:var(--tpl-dim);} .tpl-order-price{font-size:.85rem; font-weight:800; color:var(--tpl-accent); white-space:nowrap;} .tpl-badge{font-size:.68rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; white-space:nowrap;} .tpl-badge-success{background:rgba(34,197,94,0.14); color:#22c55e;} .tpl-badge-info{background:rgba(59,130,246,0.14); color:#3b82f6;} .tpl-badge-warning{background:rgba(245,158,11,0.14); color:#f59e0b;} .tpl-badge-danger{background:rgba(239,68,68,0.14); color:#ef4444;} .tpl-badge-muted{background:var(--tpl-bg); color:var(--tpl-dim);} .tpl-btn-danger-outline{background:transparent; color:#ef4444; border:1px solid rgba(239,68,68,0.4);} .tpl-btn-danger-outline:hover{background:rgba(239,68,68,0.1);} /* ===== Notifications ===== */ .tpl-notif-header{display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem;} .tpl-notif-header .icon{width:52px; height:52px; border-radius:14px; background:var(--tpl-bg); border:1px solid var(--tpl-border); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--tpl-accent); flex-shrink:0;} .tpl-notif-header h1{font-size:1.2rem; font-weight:800; color:var(--tpl-text); margin:0 0 .2rem;} .tpl-notif-header p{font-size:.82rem; color:var(--tpl-dim); margin:0;} .tpl-notif-toolbar{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; margin-bottom:1.25rem;} .tpl-notif-filters{display:flex; gap:.5rem; flex-wrap:wrap;} .tpl-filter-btn{padding:.5rem 1rem; border-radius:999px; border:1px solid var(--tpl-border); background:var(--tpl-card); color:var(--tpl-dim); font-size:.8rem; font-weight:700; text-decoration:none;} .tpl-filter-btn.active{background:var(--tpl-accent); color:var(--tpl-bg); border-color:var(--tpl-accent);} .tpl-notif-actions{display:flex; gap:.5rem;} .tpl-notif-card{display:flex; gap:.9rem; align-items:flex-start; background:var(--tpl-card); border:1px solid var(--tpl-border); border-radius:14px; padding:1rem 1.1rem; margin-bottom:.75rem;} .tpl-notif-card.unread{border-color:var(--tpl-accent);} .tpl-notif-icon{width:36px; height:36px; border-radius:10px; background:var(--tpl-bg); display:flex; align-items:center; justify-content:center; color:var(--tpl-accent); flex-shrink:0;} .tpl-notif-content{flex:1; min-width:0;} .tpl-notif-content h3{font-size:.88rem; font-weight:700; color:var(--tpl-text); margin:0 0 .3rem;} .tpl-notif-content p{font-size:.82rem; color:var(--tpl-dim); margin:0 0 .4rem; line-height:1.5;} .tpl-notif-time{font-size:.7rem; color:var(--tpl-dim);} .tpl-notif-actions-row{display:flex; gap:.4rem; flex-shrink:0;} .tpl-btn-icon{width:32px; height:32px; border-radius:8px; border:1px solid var(--tpl-border); background:var(--tpl-bg); color:var(--tpl-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.78rem;} .tpl-btn-icon.danger{color:#ef4444;} /* ===== Gestion du profil ===== */ .tpl-profile-header{display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem;} .tpl-profile-avatar{width:64px; height:64px; border-radius:50%; background:var(--tpl-accent); color:var(--tpl-bg); display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:800; flex-shrink:0;} .tpl-profile-header h1{font-size:1.2rem; font-weight:800; color:var(--tpl-text); margin:0 0 .2rem;} .tpl-profile-header p{font-size:.82rem; color:var(--tpl-dim); margin:0;} .tpl-section-title{display:flex; align-items:center; gap:.5rem; font-size:1rem; font-weight:800; color:var(--tpl-text); margin:0 0 1rem;} .tpl-readonly-field{background:var(--tpl-card) !important; color:var(--tpl-dim) !important; cursor:not-allowed;} /* ===== Menu ===== */ .tpl-menu-profile{display:flex; align-items:center; gap:1rem; background:var(--tpl-card); border:1px solid var(--tpl-border); border-radius:16px; padding:1.25rem; margin-bottom:1.5rem;} .tpl-menu-profile h3{font-size:1rem; font-weight:800; color:var(--tpl-text); margin:0 0 .2rem;} .tpl-menu-profile p{font-size:.78rem; color:var(--tpl-dim); margin:0;} .tpl-menu-profile a{color:var(--tpl-accent); font-weight:700;} .tpl-menu-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin-bottom:1.5rem;} @media(max-width:600px){.tpl-menu-grid{grid-template-columns:1fr 1fr;}} .tpl-menu-nav-item{display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:1.1rem .5rem; border-radius:14px; background:var(--tpl-card); border:1px solid var(--tpl-border); color:var(--tpl-text); text-decoration:none; font-size:.76rem; font-weight:700; text-align:center;} .tpl-menu-nav-item i{font-size:1.2rem; color:var(--tpl-accent);} .tpl-menu-accordion{display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.5rem;} .tpl-accordion-item{background:var(--tpl-card); border:1px solid var(--tpl-border); border-radius:12px; overflow:hidden;} .tpl-accordion-header{width:100%; display:flex; align-items:center; gap:.6rem; padding:1rem 1.1rem; background:none; border:none; text-align:left; font-size:.85rem; font-weight:700; color:var(--tpl-text); cursor:pointer;} .tpl-accordion-header i{color:var(--tpl-accent);} .tpl-accordion-body{display:none; flex-direction:column; padding:0 1.1rem 1rem;} .tpl-accordion-item.active .tpl-accordion-body{display:flex;} .tpl-accordion-body a{padding:.5rem 0; font-size:.82rem; color:var(--tpl-dim); text-decoration:none; display:flex; align-items:center; gap:.5rem;} .tpl-menu-logout{text-align:center; margin-top:1rem;} .tpl-menu-logout a{display:inline-flex; align-items:center; gap:.5rem; color:#ef4444; font-size:.85rem; font-weight:700; text-decoration:none;} /* ===== TikTok Cash ===== */ .tpl-tk-hero{text-align:center; padding:2rem 0;} .tpl-tk-hero h1{font-size:1.4rem; font-weight:800; color:var(--tpl-text); margin:0 0 .4rem;} .tpl-tk-hero p{font-size:.9rem; color:var(--tpl-dim); margin:0 0 1rem;} .tpl-tk-price{font-size:2.2rem; font-weight:800; color:var(--tpl-accent); margin-bottom:.6rem;} .tpl-tk-subtext{font-size:.78rem; color:var(--tpl-dim);} .tpl-tk-features{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:1.5rem 0;} @media(max-width:600px){.tpl-tk-features{grid-template-columns:1fr 1fr;}} .tpl-tk-feature{text-align:center; background:var(--tpl-card); border:1px solid var(--tpl-border); border-radius:14px; padding:1.2rem .8rem;} .tpl-tk-feature i{font-size:1.3rem; color:var(--tpl-accent); margin-bottom:.6rem; display:block;} .tpl-tk-feature h4{font-size:.85rem; font-weight:700; color:var(--tpl-text); margin:0 0 .2rem;} .tpl-tk-feature p{font-size:.72rem; color:var(--tpl-dim); margin:0;} .tpl-tk-benefits{background:var(--tpl-card); border:1px solid var(--tpl-border); border-radius:16px; padding:1.75rem; margin-bottom:1.5rem;} .tpl-tk-benefits h3{font-size:1rem; font-weight:800; color:var(--tpl-text); margin:0 0 1.2rem;} .tpl-tk-benefit-item{display:flex; gap:1rem; margin-bottom:1.2rem;} .tpl-tk-benefit-icon{width:40px; height:40px; border-radius:10px; background:var(--tpl-bg); color:var(--tpl-accent); display:flex; align-items:center; justify-content:center; flex-shrink:0;} .tpl-tk-benefit-item h4{font-size:.85rem; font-weight:700; color:var(--tpl-text); margin:0 0 .3rem;} .tpl-tk-benefit-item p{font-size:.8rem; color:var(--tpl-dim); margin:0; line-height:1.5;} .tpl-tk-stats{display:flex; justify-content:center; gap:2rem; margin-top:1.5rem; flex-wrap:wrap;} .tpl-tk-stat{text-align:center;} .tpl-tk-stat-number{font-size:1.2rem; font-weight:800; color:var(--tpl-accent);} .tpl-tk-stat-label{font-size:.72rem; color:var(--tpl-dim);} .tpl-tk-cta{text-align:center; background:var(--tpl-accent); color:var(--tpl-bg); border-radius:16px; padding:1.75rem; margin-bottom:1.5rem;} .tpl-tk-cta h3{margin:0 0 .6rem; font-size:1.05rem;} .tpl-tk-cta p{margin:0; font-size:.85rem; opacity:.92;} /* ===== Mes Commandes (transactions) ===== */ .tpl-txorder-list{display:flex; flex-direction:column; gap:1rem; max-width:900px; margin:0 auto;} .tpl-txorder-card{background:var(--tpl-card); border:1px solid var(--tpl-border); border-radius:16px; padding:1.25rem 1.4rem;} .tpl-txorder-header{display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; margin-bottom:.75rem;} .tpl-txorder-title{display:flex; align-items:center; gap:.7rem;} .tpl-txorder-icon{width:36px; height:36px; border-radius:9px; background:var(--tpl-bg); border:1px solid var(--tpl-border); display:flex; align-items:center; justify-content:center; font-size:.95rem; color:var(--tpl-accent); flex-shrink:0; overflow:hidden;} .tpl-txorder-title h3{margin:0; font-size:.9rem; font-weight:700; color:var(--tpl-text);} .tpl-txorder-id{font-size:.72rem; color:var(--tpl-dim); font-weight:600;} .tpl-txorder-error{display:flex; align-items:flex-start; gap:.6rem; background:rgba(239,68,68,0.1); color:#ef4444; border-radius:10px; padding:.65rem .85rem; font-size:.78rem; margin-bottom:.75rem;} .tpl-txorder-meta{display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-bottom:.9rem;} @media(max-width:700px){.tpl-txorder-meta{grid-template-columns:repeat(2,1fr);}} .tpl-txorder-meta-item{font-size:.76rem; color:var(--tpl-dim);} .tpl-txorder-meta-item .val{display:block; color:var(--tpl-text); font-weight:700; font-size:.82rem; margin-top:.15rem;} .tpl-txorder-meta-item a.val{color:var(--tpl-accent); text-decoration:none;} .tpl-txorder-footer{display:flex; justify-content:flex-end; padding-top:.75rem; border-top:1px solid var(--tpl-border);} .tpl-btn-report{display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:8px; background:rgba(239,68,68,0.1); color:#ef4444; font-size:.78rem; font-weight:700; text-decoration:none;} /* ===== Partner Hub (dashboard partenaire, pageKey 'partner') ===== */ .tpl-pv3-tabs{display:flex; gap:.4rem; flex-wrap:wrap; padding:1.25rem 0;} .tpl-pv3-tab{display:flex; align-items:center; gap:.4rem; padding:.6rem .9rem; border-radius:10px 10px 0 0; font-size:.82rem; font-weight:700; color:var(--tpl-dim); text-decoration:none;} .tpl-pv3-tab.active{background:var(--tpl-accent); color:var(--tpl-bg);} .tpl-pv3-tab:not(.active):hover{background:var(--tpl-card); color:var(--tpl-text);} .tpl-pv3-card{background:var(--tpl-card); border:1px solid var(--tpl-border); border-radius:16px; padding:1.75rem;} .tpl-pv3-card h3{display:flex; align-items:center; gap:.5rem; font-size:1rem; font-weight:800; color:var(--tpl-text); margin:0 0 1rem;} .tpl-pv3-stat-advanced{background:#0d0d14; color:#fff; padding:1.25rem; border-radius:14px; position:relative; overflow:hidden; isolation:isolate;} .tpl-pv3-stat-advanced::before{content:''; position:absolute; top:-50%; right:-20%; width:60%; padding-bottom:60%; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--tpl-accent) 45%, transparent), transparent 75%); filter:blur(30px); z-index:-1;} .tpl-pv3-stat-advanced h4{margin:0 0 .5rem; font-size:.78rem; opacity:.75; font-weight:600;} .tpl-pv3-stat-advanced .value{font-size:1.4rem; font-weight:800;} .tpl-pv3-code-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.9rem;} .tpl-pv3-code-box{background:var(--tpl-bg); border:1.5px solid var(--tpl-border); border-radius:12px; padding:1rem; text-align:center;} .tpl-pv3-code-box strong{display:block; font-size:1rem; color:var(--tpl-accent); margin-bottom:.4rem;} .tpl-pv3-code-box small{color:var(--tpl-dim); font-size:.74rem;} .tpl-pv3-btn-small{padding:.4rem .7rem; background:var(--tpl-card); border:1px solid var(--tpl-border); color:var(--tpl-text); border-radius:8px; cursor:pointer; font-size:.74rem; font-weight:700; margin:.3rem .15rem 0; font-family:inherit;} .tpl-pv3-btn-small:hover{border-color:var(--tpl-accent); color:var(--tpl-accent);} .tpl-pv3-hidden-input{display:none;} .tpl-pv3-table-wrap{overflow-x:auto;} .tpl-pv3-table{width:100%; border-collapse:collapse; background:var(--tpl-card); border-radius:14px; overflow:hidden; border:1px solid var(--tpl-border);} .tpl-pv3-table thead{background:var(--tpl-bg);} .tpl-pv3-table th{padding:.75rem .85rem; text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--tpl-dim);} .tpl-pv3-table td{padding:.75rem .85rem; border-top:1px solid var(--tpl-border); font-size:.85rem; color:var(--tpl-text);} .tpl-pv3-rank-row{display:flex; justify-content:space-between; align-items:center; padding:.9rem 0; border-bottom:1px solid var(--tpl-border);} .tpl-pv3-rank-row:last-child{border-bottom:none;} .tpl-pv3-rank-left{display:flex; align-items:center; gap:.9rem;} .tpl-pv3-rank-medal{color:#1a1a1a; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.78rem; flex-shrink:0;} .tpl-pv3-rank-amount{font-size:1rem; font-weight:800; color:var(--tpl-accent);} .tpl-pv3-tier-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.9rem;} .tpl-pv3-tier-card{padding:1.1rem; border-radius:12px; text-align:center; background:var(--tpl-bg); border:2px solid var(--tpl-border); opacity:.55; transition:opacity .2s;} .tpl-pv3-tier-card.reached{opacity:1;} .tpl-pv3-tier-card.active{border-color:var(--tpl-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--tpl-accent) 20%, transparent);} .tpl-pv3-tier-icon{font-size:1.5rem; margin-bottom:.5rem;} .tpl-pv3-tier-name{font-weight:800; font-size:.88rem; color:var(--tpl-text);} .tpl-pv3-tier-range{color:var(--tpl-dim); font-size:.72rem; margin:.4rem 0;} .tpl-pv3-tier-pct{color:var(--tpl-accent); font-weight:800; font-size:.85rem;} .tpl-pv3-current-status{margin-top:1.25rem; padding:1.1rem; border-radius:12px; text-align:center; background:var(--tpl-bg);} .tpl-pv3-current-status .label{font-size:.78rem; font-weight:700; color:var(--tpl-dim);} .tpl-pv3-current-status .value{font-size:1.5rem; margin:.5rem 0;} .tpl-pv3-current-status .desc{font-size:.82rem; color:var(--tpl-text);} .tpl-pv3-progress-bar{width:100%; height:6px; background:var(--tpl-border); border-radius:3px; margin-top:.6rem; overflow:hidden;} .tpl-pv3-progress-bar-fill{height:100%; background:var(--tpl-accent); border-radius:3px;} .tpl-pv3-message-template{background:var(--tpl-bg); padding:1rem; border-radius:10px; margin:0 0 .7rem; border:1px solid var(--tpl-border); border-left:3px solid var(--tpl-accent); cursor:pointer; transition:transform .2s;} .tpl-pv3-message-template:hover{transform:translateX(3px);} .tpl-pv3-message-template strong{display:block; margin:.3rem 0 .2rem; color:var(--tpl-text); font-size:.88rem;} .tpl-pv3-message-template small{color:var(--tpl-dim); font-size:.78rem; line-height:1.5;} .tpl-pv3-transaction-item{display:flex; justify-content:space-between; align-items:center; padding:.9rem; background:var(--tpl-bg); border-radius:10px; margin:.5rem 0;} .tpl-pv3-tx-title{font-weight:700; color:var(--tpl-text); font-size:.85rem;} .tpl-pv3-tx-date{color:var(--tpl-dim); font-size:.76rem;} .tpl-pv3-tx-amount{font-weight:800; color:var(--tpl-accent); font-size:.95rem;} .tpl-pv3-modal-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1000; align-items:center; justify-content:center;} .tpl-pv3-modal-overlay.show{display:flex;} .tpl-pv3-modal-box{background:var(--tpl-card); padding:1.75rem; border-radius:16px; max-width:420px; width:92%; text-align:left; border:1px solid var(--tpl-border);} .tpl-pv3-modal-head{display:flex; align-items:center; gap:.9rem; margin-bottom:.4rem;} .tpl-pv3-modal-icon{width:46px; height:46px; border-radius:14px; background:var(--tpl-bg); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0;} .tpl-pv3-modal-head h3{margin:0 0 .25rem; font-size:1.05rem; color:var(--tpl-text);} .tpl-pv3-modal-head p{margin:0; font-size:.82rem; color:var(--tpl-dim);} .tpl-pv3-modal-head p strong{color:var(--tpl-accent);} .tpl-pv3-modal-box .tpl-field{margin:.9rem 0;} .tpl-pv3-modal-box label{display:block; margin:0 0 .4rem; font-weight:700; font-size:.82rem; color:var(--tpl-text);} .tpl-pv3-modal-box input, .tpl-pv3-modal-box select{width:100%; box-sizing:border-box; padding:.65rem .8rem; border:1.5px solid var(--tpl-border); border-radius:8px; font-size:.88rem; font-family:inherit; background:var(--tpl-bg); color:var(--tpl-text);} .tpl-pv3-modal-actions{display:flex; gap:.6rem; margin:1rem 0 0;} .tpl-pv3-modal-actions .tpl-btn{flex:1; justify-content:center;} .tpl-pv3-modal-cancel{flex:1; padding:.75rem 1.2rem; background:var(--tpl-bg); color:var(--tpl-text); border:1px solid var(--tpl-border); border-radius:999px; cursor:pointer; font-weight:700; font-family:inherit;} .tpl-pv3-qr-box{max-width:320px; text-align:center;} .tpl-pv3-qr-container{margin:1.1rem 0; display:flex; justify-content:center;} .tpl-pv3-qr-actions{display:flex; gap:.5rem; justify-content:center; margin-top:.6rem;} .tpl-pv3-promo-form-row{display:flex; gap:.6rem; flex-wrap:wrap;} .tpl-pv3-promo-form-row input{flex:1; min-width:180px;}