/* ================================ COFEL — Thème Apple Dark (global) À inclure en DERNIER dans ================================== */ :root{ /* On garde les noms historiques (violet etc.) pour éviter de casser le CSS existant */ --violet:#000000; --violet-2:#0b0b0b; --txt:#ffffff; --txt-dim:rgba(255,255,255,.72); --accent:#ffffff; /* “Bulles” */ --glass: rgba(255,255,255,.06); --glass-soft: rgba(255,255,255,.04); --glass-hr: rgba(255,255,255,.12); --radius:18px; --blur:18px; --shadow: 0 12px 35px rgba(0,0,0,.55); } /* Fond général — Option 2 (dégradé + halos) */ body{ background: linear-gradient(180deg, #0b0b0d 0%, #121216 55%, #0b0b0d 100%); } /* Si tes anciens styles utilisent des halos/gradients via pseudo-elements */ body::before, body::after{ background: transparent !important; opacity: 0 !important; } /* Typo + liens */ a{ color: var(--txt) !important; opacity:.9; } a:hover{ opacity:1; } /* “Bulles / cartes” (on vise large pour couvrir tes classes existantes) */ .glass, .glass-card, .cofel-card, .cofel-panel, .panel, .card, .step, .box{ background: var(--glass) !important; border: 1px solid var(--glass-hr) !important; box-shadow: var(--shadow) !important; backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); border-radius: var(--radius) !important; } /* Barres / séparateurs */ hr{ border:0; height:1px; background: var(--glass-hr) !important; } .cofer-hr, .cofel-hr, .divider{ background: var(--glass-hr) !important; } /* Inputs */ input, select, textarea{ background: rgba(255,255,255,.05) !important; color: var(--txt) !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 14px; } input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.45) !important; } /* Focus “Apple clean” */ :focus-visible{ outline: 2px solid rgba(255,255,255,.35); outline-offset: 2px; } /* Boutons (primaire en blanc, secondaire en gris sombre) */ button, input[type="button"], input[type="submit"], .cofel-btn, .btn{ background:#fff !important; color:#000 !important; border: 1px solid rgba(255,255,255,.25) !important; border-radius: 999px; box-shadow: 0 10px 25px rgba(0,0,0,.35); } .btn-secondary, .cofel-btn-secondary, .secondary, .ghost, .cofel-btn-ghost{ background: rgba(255,255,255,.08) !important; color: var(--txt) !important; border: 1px solid rgba(255,255,255,.16) !important; box-shadow: none !important; } /* Header si tu utilises .cofel-header */ .cofel-header{ background: rgba(0,0,0,.65) !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* Récaps / badges */ .badge, .tag, .chip, .pill{ background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; color: var(--txt) !important; } /* Tables (si tu en as) */ table{ color: var(--txt) !important; } th, td{ border-color: rgba(255,255,255,.12) !important; } /* Bouton "Retour accueil (Devis)" */ a.cofel-back{ background: rgba(255,255,255,.08) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 999px !important; text-decoration: none !important; padding: 10px 14px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; } a.cofel-back:hover{ background: rgba(255,255,255,.12) !important; } a.cofel-back:active{ transform: translateY(1px); } a.cofel-back:focus-visible{ outline: 2px solid rgba(255,255,255,.35); outline-offset: 2px; } /* ✅ Radios + checkboxes : coche noire (au lieu de violet) */ .cofel-container input[type="radio"], .cofel-container input[type="checkbox"]{ accent-color: #000 !important; } /* ✅ SELECT (menus déroulants) : enlever le focus violet, harmoniser Dark */ .cofel-container select{ background: rgba(255,255,255,.06) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 14px !important; } /* Focus / ouverture : on force un halo neutre (blanc/gris) */ .cofel-container select:focus, .cofel-container select:focus-visible{ outline: none !important; border-color: rgba(255,255,255,.35) !important; box-shadow: 0 0 0 3px rgba(255,255,255,.16) !important; } /* Options (quand le navigateur le permet) */ .cofel-container select option{ background: #0b0b0b !important; color: #fff !important; } /* (Optionnel) si tes fieldset passent en violet au clic */ .cofel-container fieldset:focus-within{ border-color: rgba(255,255,255,.14) !important; box-shadow: none !important; } /* =========================== PATCH — Custom Select (Lettres) Enlève le menu violet (#3c1f61) =========================== */ /* Le bouton (fermé) */ .cselect-toggle{ background: rgba(255,255,255,.06) !important; color:#fff !important; border: 1px solid rgba(255,255,255,.18) !important; } /* Le menu (ouvert) */ .cselect-menu{ background:#0b0b0b !important; /* ✅ plus de violet */ border-color: rgba(255,255,255,.18) !important; box-shadow: 0 16px 40px rgba(0,0,0,.60) !important; } /* Les options */ .cselect-option{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; color:#fff !important; } .cselect-option:hover, .cselect-option[aria-selected="true"]{ background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.22) !important; } /* Au cas où un select natif serait visible ailleurs */ select option{ background:#0b0b0b !important; color:#fff !important; } /* ✅ Accent noir pour radios + checkboxes (tous configurateurs) */ input[type="radio"], input[type="checkbox"]{ accent-color: #000 !important; } /* (Optionnel) si tu veux limiter aux pages Cofel */ .wrap input[type="radio"], .wrap input[type="checkbox"], .cofel-container input[type="radio"], .cofel-container input[type="checkbox"]{ accent-color: #000 !important; } /* ========================================================= INDEX (page devis) — Harmonisation boutons (plus de blanc) Cible uniquement l'index via .hero et .panel ========================================================= */ /* Déconnexion (en haut à droite) */ .hero .logout-btn{ background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) !important; color: var(--txt) !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: var(--shadow) !important; backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); } .hero .logout-btn:hover{ background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)) !important; } /* Tous les boutons du devis (Ajouter / Qté / Modifier / Export PDF / Vider) */ .panel .btn{ background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) !important; color: var(--txt) !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: 0 10px 24px rgba(0,0,0,.25) !important; border-radius: 999px !important; /* look plus “pill” et homogène */ } .panel .btn:hover{ background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)) !important; } .panel .btn:active{ transform: translateY(1px); box-shadow: 0 6px 16px rgba(0,0,0,.28) !important; } /* Variante ghost (Qté / Modifier / Ajouter manuel) */ .panel .btn.btn-ghost{ background: rgba(255,255,255,.06) !important; color: var(--txt) !important; border: 1px solid rgba(255,255,255,.16) !important; box-shadow: none !important; } .panel .btn.btn-ghost:hover{ background: rgba(255,255,255,.10) !important; } /* Danger (Suppr. + Vider le devis) */ .panel .btn.btn-danger{ background: rgba(255,107,107,.12) !important; color: #ffe3e3 !important; border: 1px solid rgba(255,107,107,.45) !important; box-shadow: none !important; } .panel .btn.btn-danger:hover{ background: rgba(255,107,107,.18) !important; } /* Bouton PDF désactivé : cohérent */ .panel .btn[disabled]{ opacity: .45 !important; cursor: not-allowed !important; box-shadow: none !important; }