/* ========================================================= EVANCO – GLOBAL CSS (NETTOYE) - Pas de doublons - Plans: input:checked + card (robuste) - Légifrance: un seul système (ev-legal-text + alias ev-law-html) - Tags + statuts harmonisés ========================================================= */ /* ========================= 1) Design tokens ========================= */ :root{ /* Brand */ --ev-color-brand-pink: #ef0a6a; --ev-color-brand-purple: #b6359c; --ev-gradient-brand: linear-gradient(135deg, #ef0a6a, #b6359c); /* Light */ --ev-bg-soft: #f5f5f7; --ev-bg-surface: #ffffff; --ev-border-subtle: #e5e7eb; --ev-text-main: #0f172a; --ev-text-muted: #6b7280; /* Dark (fallback vars, mais on override via .dark) */ --ev-bg-soft-dark: #020617; --ev-bg-surface-dark: #020617; --ev-border-subtle-dark: #111827; --ev-text-main-dark: #e5e7eb; --ev-text-muted-dark: #9ca3af; /* Feedback */ --ev-success: #10b981; --ev-warning: #f59e0b; --ev-danger: #ef4444; /* Radius & shadows */ --ev-radius-lg: 1rem; --ev-radius-full: 999px; --ev-shadow-soft: 0 18px 45px rgba(15,23,42,0.08); --ev-shadow-glow: 0 0 30px rgba(239, 10, 106, 0.35); --ev-sidebar-w: 250px; --ev-modal-z: 1000000; --ev-modal-overlay: rgba(70,20,60,.55); } /* Dark mode overrides (via ou ) */ .dark{ --ev-bg-soft: var(--ev-bg-soft-dark); --ev-bg-surface: var(--ev-bg-surface-dark); --ev-text-main: var(--ev-text-main-dark); --ev-text-muted: var(--ev-text-muted-dark); --ev-border-subtle: var(--ev-border-subtle-dark); } /* ========================= 2) Base layout ========================= */ body.ev-body{ background: var(--ev-bg-soft); color: var(--ev-text-main); font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } /* Surfaces */ .ev-surface{ background-color: var(--ev-bg-surface); border-radius: var(--ev-radius-lg); border: 1px solid var(--ev-border-subtle); box-shadow: var(--ev-shadow-soft); } .ev-card{ background-color: var(--ev-bg-surface); border-radius: var(--ev-radius-lg); border: 1px solid var(--ev-border-subtle); padding: 1.25rem 1.5rem; } /* ========================= 3) Buttons ========================= */ .ev-btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border-radius: var(--ev-radius-full); padding:.7rem 1.4rem; font-size:.85rem; font-weight:500; color:#fff; background-image: var(--ev-gradient-brand); border:none; cursor:pointer; transition: transform .08s ease-out, box-shadow .08s ease-out, opacity .1s; } .ev-btn-primary:hover{ transform: translateY(-1px); } .ev-btn-primary:active{ transform: translateY(0); opacity:.9; } .ev-btn-primary-cookie{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border-radius: var(--ev-radius-full); padding: .5rem 1rem; font-size: .75rem; font-weight:500; color:#fff; background-image: var(--ev-gradient-brand); border:none; cursor:pointer; transition: transform .08s ease-out, box-shadow .08s ease-out, opacity .1s; } .ev-btn-primary-cookie:hover{ transform: translateY(-1px); } .ev-btn-primary-cookie:active{ transform: translateY(0); opacity:.9; } .ev-btn-secondary{ display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border-radius: var(--ev-radius-full); padding:.7rem 1.4rem; font-size:.85rem; font-weight: 500; color: var(--ev-text-main); background-color: #f9fafb; border: 1px solid var(--ev-border-subtle); cursor: pointer; transition: background-color .1s, box-shadow .1s, transform .08s; } .ev-btn-secondary:hover{ transform: translateY(-1px); } .ev-btn-secondary-cookie{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border-radius: var(--ev-radius-full); font-size:.85rem; padding: .5rem 1rem; font-size: .75rem; font-weight:500; color: var(--ev-text-main); background-color:#f9fafb; border:1px solid var(--ev-border-subtle); cursor:pointer; transition: background-color .1s, box-shadow .1s, transform .08s; } .ev-btn-secondary-cookie:hover{ transform: translateY(-1px); } /* ========================= 4) Badges / avatars / logo ========================= */ .ev-badge-pill{ display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem; border-radius: 999px; font-size:.7rem; font-weight:500; border:1px solid var(--ev-border-subtle); background-color: rgba(255,255,255,.9); color: var(--ev-text-muted); } .ev-badge-brand{ background-image: var(--ev-gradient-brand); color:#fff; border-radius:999px; padding:.25rem .7rem; font-size:.7rem; font-weight:600; box-shadow: var(--ev-shadow-glow); display:inline-flex; align-items:center; gap:.35rem; } .ev-avatar{ display:inline-flex; align-items:center; justify-content:center; height:2rem; width:2rem; border-radius:999px; background-image: var(--ev-gradient-brand); color:#fff; font-size:.7rem; font-weight:600; text-transform: uppercase; } .ev-logo{ display:inline-flex; align-items:center; } .ev-logo__img{ height:28px; width:auto; display:block; } .ev-logo-mark{ height:2rem; width:2rem; border-radius:1rem; background-image: var(--ev-gradient-brand); box-shadow: var(--ev-shadow-glow); } /* ========================= 5) KPI ========================= */ .ev-kpi-label{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ev-text-muted); } .ev-kpi-value{ margin-top:.25rem; font-size:1.8rem; font-weight:600; letter-spacing:-.03em; } .ev-kpi-caption{ margin-top:.25rem; font-size:.72rem; color: var(--ev-text-muted); } /* ========================= 6) Dashboard shell (header / sidebar) ========================= */ .ev-sidebar{ position: fixed; top: 64px; left: 0; width: 250px; height: calc(100vh - 64px); background-color: #0f172a; z-index: 1001; padding-top: 1rem; border-right: 1px solid var(--ev-border-subtle); box-shadow: 2px 0 15px rgba(0,0,0,.1); overflow-y: auto; /* ✅ scroll vertical */ overflow-x: hidden; /* ✅ évite le scroll horizontal */ scrollbar-gutter: stable; /* ✅ évite le “shift” quand la barre apparaît */ overscroll-behavior: contain; } /* Firefox */ .ev-sidebar{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; } /* Chrome / Edge / Safari */ .ev-sidebar::-webkit-scrollbar{ width: 10px; } .ev-sidebar::-webkit-scrollbar-track{ background: transparent; } .ev-sidebar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; border: 2px solid rgba(15,23,42,1); /* “marge” visuelle dans le fond */ } .ev-sidebar::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.28); } /* Réponses FAQ (HTML venant du RTE) */ .ev-faq-answer ul { list-style: disc; padding-left: 1.25rem; margin: .5rem 0; } .ev-faq-answer ol { list-style: decimal; padding-left: 1.25rem; margin: .5rem 0; } .ev-faq-answer li { margin: .25rem 0; } .ev-faq-answer a { text-decoration: underline; } .ev-main-content{ margin-left:250px; width:calc(100% - 250px); padding-top: var(--ev-main-padding-top, 8rem); } .ev-header{ position:fixed; top:0; left:0; width:100%; z-index:9999; background-color: var(--ev-bg-surface); border-bottom:1px solid var(--ev-border-subtle); padding:1rem 1.5rem; box-shadow:0 4px 10px rgba(0,0,0,.1); backdrop-filter: blur(10px); } .ev-subheader{ position:fixed; top:4rem; left:250px; width:calc(100% - 250px); z-index:1000; background-color: var(--ev-bg-surface); border-bottom:1px solid var(--ev-border-subtle); padding:1rem 1.5rem; box-shadow:0 4px 8px rgba(0,0,0,.05); } /* ========================= 7) Pagination ========================= */ .ev-pagination-wrapper{ border-top:1px solid #e5e7eb; padding-top:1.5rem; margin:1.5rem 0; display:flex; justify-content:center; } .ev-pagination{ display:flex; gap:.4rem; list-style:none; padding:0; } .ev-page-link{ display:inline-block; padding:.4rem .75rem; border-radius:999px; font-size:.85rem; border:1px solid #e2e2e8; } .ev-page-active .ev-page-link{ border:none; background: linear-gradient(to right, #ef0a6a, #b6359c); color:#fff; } .ev-page-disabled .ev-page-link{ opacity:.4; cursor:default; } /* ========================= 8) Tables Evenco (classiques) ========================= */ .ev-table{ width:100%; border-collapse:collapse; font-size:.85rem; } .ev-table thead{ background-color:#f9fafb; } .ev-table th, .ev-table td{ padding:.6rem .75rem; border-bottom:1px solid var(--ev-border-subtle); text-align:left; vertical-align:top; } .ev-table th{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600; color: var(--ev-text-muted); white-space:nowrap; } .ev-table tbody tr:hover{ background-color:#f9fafb; } .ev-table-wrapper{ width:100%; overflow-x:auto; } /* ========================= 9) SR-only + curseurs UX ========================= */ .sr-only{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } /* UX pointer */ a,button,summary,[role="button"],input[type="submit"],input[type="button"],.ev-btn{ cursor:pointer; } button:disabled,input:disabled,[aria-disabled="true"]{ cursor:not-allowed; } /* ========================= 10) Subscription plans (CARDS) - IMPORTANT: structure attendue:

... ...

========================= */ .ev-plan-label{ display:block; } /* Input caché mais actif */ .ev-plan-input{ position:absolute; opacity:0; pointer-events:none; } /* Sécurité si reset CSS force l'affichage natif */ .ev-plan-input[type="radio"], .ev-plan-input[type="checkbox"]{ appearance:none !important; -webkit-appearance:none !important; } /* Card */ .ev-plan-card{ border:1px solid rgb(226 232 240); /* slate-200 */ border-radius:16px; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease; padding: 1.25rem 1.5rem; background-color: var(--ev-bg-surface); } /* Hover */ .ev-plan-label:hover .ev-plan-card{ border-color: rgb(203 213 225); /* slate-300 */ } /* Selected */ .ev-plan-input:checked + .ev-plan-card{ background: var(--ev-color-brand-pink); border-color: var(--ev-color-brand-pink); color:#fff; box-shadow: var(--ev-shadow-glow); } /* Text helpers (optionnel si tu utilises ces classes dans tes cards) */ .ev-plan-input:checked + .ev-plan-card .ev-plan-text, .ev-plan-input:checked + .ev-plan-card .ev-plan-text-muted{ color:#fff; } .ev-plan-input:checked + .ev-plan-card .ev-plan-text-muted{ opacity:.85; } .ev-plan-input:checked + .ev-plan-card .ev-btn-primary{ background: #fff; color: var(--ev-color-brand-pink); border-color: #fff; } .ev-plan-input:checked + .ev-plan-card .ev-bullet{ background: #fff; box-shadow: none; } /* Selected (la card = le label) */ .ev-plan-label.is-selected{ background: var(--ev-color-brand-pink); border-color: var(--ev-color-brand-pink); color:#fff; box-shadow: var(--ev-shadow-glow); } /* Text helpers */ .ev-plan-label.is-selected .ev-plan-text, .ev-plan-label.is-selected .ev-plan-text-muted{ color:#fff; } .ev-plan-label.is-selected .ev-plan-text-muted{ opacity:.85; } /* CTA blanc */ .ev-plan-label.is-selected .ev-btn-primary, .ev-plan-label.is-selected .ev-btn-secondary{ background:#fff; color: var(--ev-color-brand-pink); border-color:#fff; } /* Bullet en blanc */ .ev-plan-label.is-selected .ev-bullet{ background:#fff; box-shadow:none; } .ev-plan-label { display:flex; flex-direction:column; height:100%; } .ev-plan-body { flex: 1 1 auto; } .ev-plan-cta { margin-top: auto; } .ev-bullet{ width: 8px; height: 8px; border-radius: 999px; background: var(--ev-color-brand-pink); box-shadow: 0 0 0 3px rgba(236,72,153,.12); flex: 0 0 auto; } /* Radio visuel */ .ev-radio{ width:20px; height:20px; border-radius:999px; border:2px solid rgb(203 213 225); background:#fff; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; } .ev-radio::after{ content:""; width:10px; height:10px; border-radius:999px; background:transparent; } .ev-plan-input:checked + .ev-plan-card .ev-radio{ border-color:#fff; background:#fff; } .ev-plan-input:checked + .ev-plan-card .ev-radio::after{ background: var(--ev-color-brand-pink); } /* ========================= 11) Legal content (Légifrance) - Un seul rendu: ev-legal-text - ev-law-html est aliasé dessus ========================= */ /* Wrapper (si tu veux forcer le scroll) */ .ev-legal-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* Conteneur */ .ev-legal-text{ overflow-wrap:anywhere; } /* Links */ .ev-legal-text a{ color: var(--ev-color-brand-pink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; font-weight: 500; } .ev-legal-text a:hover{ text-decoration:none; } /* Lists */ .ev-legal-text ul, .ev-legal-text ol{ padding-left:1.25rem; } /* Tables (clean + lisible) */ .ev-legal-text table{ width:100%; border-collapse:separate; border-spacing:0; margin:1rem 0; font-size:.875rem; line-height:1.25rem; border:1px solid rgba(148,163,184,.35); border-radius:14px; overflow:hidden; background:#fff; min-width:720px; /* force le scroll plutôt que squeeze */ } .dark .ev-legal-text table{ background: rgba(2,6,23,.35); border-color: rgba(51,65,85,.6); } .ev-legal-text th, .ev-legal-text td{ padding:10px 12px; vertical-align:top; border-bottom:1px solid rgba(148,163,184,.25); text-align:left !important; } .dark .ev-legal-text th, .dark .ev-legal-text td{ border-bottom-color: rgba(51,65,85,.6); } .ev-legal-text th{ font-weight:600; background: rgba(241,245,249,.9); color:#0f172a; position:sticky; top:0; z-index:1; } .dark .ev-legal-text th{ background: rgba(15,23,42,.7); color: rgba(226,232,240,.95); } /* Zebra */ .ev-legal-text tbody tr:nth-child(even) td{ background: rgba(241,245,249,.6); } .dark .ev-legal-text tbody tr:nth-child(even) td{ background: rgba(15,23,42,.35); } /* Lisibilité ++ : pas de coupure sur CIP/prix, wrap sur colonne 2 */ .ev-legal-text table td, .ev-legal-text table th{ white-space: nowrap; word-break: keep-all; hyphens: none; } .ev-legal-text table td:nth-child(2), .ev-legal-text table th:nth-child(2){ white-space: normal; word-break: break-word; } /* Colonnes numériques */ .ev-legal-text table td:nth-child(1), .ev-legal-text table td:last-child, .ev-legal-text table td:nth-last-child(2){ font-variant-numeric: tabular-nums; white-space: nowrap; padding-left:14px; padding-right:14px; } /* Alias: si ton HTML utilise ev-law-html au lieu de ev-legal-text */ .ev-law-html{ font-size: .9rem; line-height: 1.5; overflow-x:auto; -webkit-overflow-scrolling:touch; } /* On applique exactement les mêmes règles aux tables internes */ .ev-law-html table{ all: unset; } .ev-law-html table, .ev-law-html th, .ev-law-html td{ all: revert; } .ev-law-html table{ width:100%; border-collapse:separate; border-spacing:0; margin:1rem 0; font-size:.875rem; line-height:1.25rem; border:1px solid rgba(148,163,184,.35); border-radius:14px; overflow:hidden; background:#fff; min-width:720px; } .dark .ev-law-html table{ background: rgba(2,6,23,.35); border-color: rgba(51,65,85,.6); } .ev-law-html th, .ev-law-html td{ padding:10px 12px; vertical-align:top; border-bottom:1px solid rgba(148,163,184,.25); text-align:left !important; white-space: nowrap; word-break: keep-all; hyphens:none; } .ev-law-html th{ font-weight:600; background: rgba(241,245,249,.9); color:#0f172a; position:sticky; top:0; z-index:1; } .dark .ev-law-html th{ background: rgba(15,23,42,.7); color: rgba(226,232,240,.95); } .ev-law-html tbody tr:nth-child(even) td{ background: rgba(241,245,249,.6); } .dark .ev-law-html tbody tr:nth-child(even) td{ background: rgba(15,23,42,.35); } .ev-law-html td:nth-child(2), .ev-law-html th:nth-child(2){ white-space: normal; word-break: break-word; } .ev-law-html td:nth-child(1), .ev-law-html td:last-child, .ev-law-html td:nth-last-child(2){ font-variant-numeric: tabular-nums; padding-left:14px; padding-right:14px; } .ev-law-html a{ color: var(--ev-color-brand-pink); text-decoration: underline; text-decoration-thickness:1px; text-underline-offset:2px; font-weight:500; } .ev-law-html a:hover{ text-decoration:none; } /* ========================= 12) Board Premium – cards ========================= */ .legislation-card{ cursor:grab; transition: transform .15s ease, opacity .15s ease; } .legislation-card:active{ cursor:grabbing; } .legislation-card .ev-lawcard__titleline{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem; } .legislation-card .ev-lawcard__titlelink{ font-weight:600; color: var(--ev-text-main); text-decoration:none; line-height:1.35; } .legislation-card:hover .ev-lawcard__titlelink{ text-decoration: underline; text-decoration-thickness:1px; text-underline-offset:3px; } .legislation-card .ev-lawcard__date{ font-size:.72rem; color: var(--ev-text-muted); white-space:nowrap; } .legislation-card .ev-lawcard__tags{ display:flex; flex-wrap:wrap; gap:.4rem; min-height:28px; } /* Tag (secteur) – padding + confort (harmonisé) */ .ev-tag{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:11px; line-height:1.2; background-color:#f1f5f9; color:#334155; border:1px solid #e2e8f0; white-space:nowrap; } .dark .ev-tag{ background: rgba(148,163,184,.10); border-color: rgba(148,163,184,.18); color: var(--ev-text-main); } .legislation-card .ev-lawcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; } .legislation-card .ev-lawcard__remove{ margin-left:auto; display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:600; color: var(--ev-text-muted); background:transparent; border:0; padding:.25rem .5rem; border-radius:.65rem; cursor:pointer; transition: background-color .12s ease, color .12s ease; } .legislation-card .ev-lawcard__remove:hover{ color: var(--ev-danger); background: rgba(239,68,68,.08); } /* ========================= 13) Statuts (taille homogène) ========================= */ .ev-status{ display:inline-flex; align-items:center; justify-content:center; min-width:96px; height:26px; padding:0 10px; border-radius:999px; font-size:11px; font-weight:500; line-height:1; white-space:nowrap; } /* variantes */ .ev-status--todo{ background:#fffbeb; border-color:#fde68a; color:#92400e; } .ev-status--done{ background:#ecfdf5; border-color:#bbf7d0; color:#166534; } .ev-status--archived{ background:#f1f5f9; border-color:#e2e8f0; color:#475569; } .ev-status--none{ background:#f8fafc; border-color:#e2e8f0; color:#64748b; } /* ========================= 14) Misc / HTMX / inputs ========================= */ .htmx-indicator{ display:none; } .htmx-request .htmx-indicator{ display:flex; } /* Hide native password reveal icons */ input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear{ display:none; } input[type="password"]::-webkit-contacts-auto-fill-button, input[type="password"]::-webkit-credentials-auto-fill-button{ visibility:hidden; display:none !important; pointer-events:none; } input[type="password"]::-webkit-textfield-decoration-container{ display:none !important; } /* Codexia chat */ .codexia-chat-answer{ white-space: pre-wrap !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word !important; overflow-wrap: anywhere !important; } .codexia-chat-card{ height:720px; overflow:hidden; display:flex; flex-direction:column; min-height:0; } .codexia-chat-body{ flex:1; min-height:0; display:flex; gap:24px; } .codexia-chat-messages{ flex:1; min-height:0; overflow-y:auto; } /* Panel chat: soft, pas "card dans card" */ .codexia-chat-panel{ display:flex; flex-direction:column; min-height:0; border-top: 1px solid rgba(148,163,184,.35); /* le "trait simple" */ border-radius: 0; /* plus GPT */ background: transparent; } /* Messages: fond gris léger comme ChatGPT */ .codexia-chat-messages{ padding: 16px; border-radius: 14px; } .dark .codexia-chat-messages{ background: rgba(148,163,184,.10); } /* Composer collé en bas, blanc */ .codexia-composer{ padding-bottom: 6px; } /* Zone input + bouton : hauteur 40px par défaut */ .codexia-composer-inner{ display:flex; align-items:flex-end; gap: 10px; padding: 10px 10px; border-radius: 16px; border: 1px solid rgba(148,163,184,.35); background: rgba(255,255,255,.85); } /* IMPORTANT: zone cliquable facile */ .codexia-textarea{ flex: 1; height: 40px; /* même hauteur que le bouton */ min-height: 40px; max-height: 160px; /* grandit puis scroll interne */ padding: 10px 12px; /* clic facile */ border: 0; outline: none; background: transparent; font-size: 14px; line-height: 20px; resize: none; overflow-y: hidden; /* togglé en JS quand dépasse */ cursor: text; } /* Bouton send carré 40px */ .codexia-send-btn{ height: 40px; width: 40px; border-radius: 14px; border: 0; color: white; background: linear-gradient(90deg, #ef0a6a, #b6359c); display:inline-flex; align-items:center; justify-content:center; } .codexia-send-btn:hover{ filter: brightness(.98); } .codexia-send-btn:disabled{ opacity:.5; cursor:not-allowed; } /* Liste à gauche : fond gris, OK */ .codexia-threads-panel{ background: rgba(148,163,184,.10); border-radius: 14px; padding: 12px; } .dark .codexia-threads-panel{ background: rgba(148,163,184,.12); } /* ITEM : aucune border, aucun bg par défaut (comme GPT) */ .codexia-thread-item{ position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 10px; border-radius: 12px; border: 0 !important; background: transparent !important; } /* Active uniquement : bg visible */ .codexia-thread-item.is-active{ background: rgba(148,163,184,.22) !important; } .dark .codexia-thread-item.is-active{ background: rgba(148,163,184,.16) !important; } .codexia-thread-link{ flex: 1; min-width: 0; display: block; text-decoration: none; } .codexia-thread-title{ font-size: 14px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dark .codexia-thread-title{ color: #f8fafc; } .codexia-thread-meta{ margin-top: 2px; font-size: 12px; color: rgba(100,116,139,1); } .dark .codexia-thread-meta{ color: rgba(148,163,184,1); } /* Bouton ... : invisible, apparaît au hover/active/open */ .codexia-thread-more{ width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: rgba(100,116,139,1); display: inline-flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .12s ease, background .12s ease; } .codexia-thread-item:hover .codexia-thread-more, .codexia-thread-item.is-active .codexia-thread-more, .codexia-thread-item.menu-open .codexia-thread-more{ opacity: 1; pointer-events: auto; } .codexia-thread-more:hover{ background: rgba(148,163,184,.18); } .dark .codexia-thread-more{ color: rgba(148,163,184,1); } .dark .codexia-thread-more:hover{ background: rgba(148,163,184,.12); } /* MENU : on le rend "fixed" pour qu'il ne soit JAMAIS affecté par un parent scrollable */ .codexia-thread-menu{ position: fixed; /* <- clé du "pas scrollable" */ min-width: 180px; border-radius: 12px; border: 1px solid rgba(148,163,184,.35); background: rgba(255,255,255,.98); box-shadow: 0 18px 45px rgba(2,6,23,.15); padding: 6px; z-index: 9999; display: none; } .dark .codexia-thread-menu{ border-color: rgba(30,41,59,.9); background: rgba(2,6,23,.98); box-shadow: 0 18px 45px rgba(0,0,0,.35); } /* quand ouvert */ .codexia-thread-item.menu-open .codexia-thread-menu{ display: block; } .codexia-thread-menu-item{ width: 100%; text-align: left; padding: 10px 10px; border-radius: 10px; border: 0; background: transparent; font-size: 14px; color: rgba(15,23,42,1); cursor: pointer; } .codexia-thread-plus{ width: 32px; height: 32px; border-radius: 999px; border: 0; background: rgba(148,163,184,.18); color: rgba(15,23,42,1); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; } .codexia-thread-plus:hover{ filter: brightness(.98); } .dark .codexia-thread-plus{ background: rgba(148,163,184,.14); color: rgba(248,250,252,1); } .codexia-thread-plus.is-disabled{ opacity:.5; cursor:not-allowed; } .dark .codexia-thread-menu-item{ color: rgba(248,250,252,1); } .codexia-thread-menu-item:hover{ background: rgba(148,163,184,.18); } .dark .codexia-thread-menu-item:hover{ background: rgba(148,163,184,.12); } .codexia-thread-menu-item.danger{ color: #dc2626; } /* ========================= 15) Maintenance banner ========================= */ .ev-maintenance-banner{ display: flex; z-index: 99999; position: absolute; padding: .65rem 1rem; text-align: center; background: #ef0a6a; color: var(--ev-bg-soft); font-size: 12px; align-items: center; justify-content: center; } .ev-maintenance-banner-dashboard{ display: flex; z-index: 99999; padding: .65rem 1rem; text-align: center; background: #ef0a6a; color: var(--ev-bg-soft); font-size: 12px; align-items: center; justify-content: center; border-radius: 20px; } .ev-maintenance-banner__hint{ margin-left:.35rem; color: var(--ev-text-muted); font-weight:500; } /* Layout offsets when banner visible */ body.has-maintenance-banner .ev-header{ top: var(--ev-maintenance-h, 44px); } body.has-maintenance-banner .ev-subheader{ top: calc(4rem + var(--ev-maintenance-h, 44px)); } body.has-maintenance-banner .ev-main-content{ padding-top: calc(8rem + var(--ev-maintenance-h, 44px)); } .ev-table--nice{ border:1px solid var(--ev-border-subtle); border-radius: 16px; overflow:hidden; background: var(--ev-bg-surface); } .ev-table--nice thead{ background: rgba(241,245,249,.9); } .dark .ev-table--nice thead{ background: rgba(15,23,42,.7); } .ev-table--nice tbody tr{ transition: background-color .12s ease; } .ev-table--nice tbody tr:hover{ background: rgba(241,245,249,.65); } .dark .ev-table--nice tbody tr:hover{ background: rgba(15,23,42,.45); } .ev-table--nice td{ padding-top:.85rem; padding-bottom:.85rem; } .ev-table-actions{ display:flex; justify-content:flex-end; gap:.5rem; white-space:nowrap; } .ev-link{ color: var(--ev-text-main); font-weight:600; text-decoration:none; } .ev-link:hover{ text-decoration: underline; text-underline-offset: 3px; } .ev-link-cookie{ color: var(--ev-text-main); font-weight:600; text-decoration:none; } .ev-link-cookie:hover{ text-decoration: underline; text-underline-offset: 3px; color: #ef0a6a; } /* Root doit être “au-dessus de tout” */ #ev-modal-root{ position: fixed; inset: 0; z-index: var(--ev-modal-z); pointer-events: none; /* le contenu active les clics */ } /* Conteneur modal */ .ev-modal{ position: fixed; inset: 0; pointer-events: auto; } /* Overlay sombre */ .ev-modal__overlay{ position: absolute; inset: 0; background: var(--ev-modal-overlay); } /* Option blur si supporté */ @supports (backdrop-filter: blur(2px)){ .ev-modal__overlay{ backdrop-filter: blur(2px); } } /* Dialog centré */ .ev-modal__center{ position: relative; height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; } /* Le point clé : la "card" du modal ne peut pas dépasser */ .ev-modal__center > .ev-modal__panel{ width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; } /* Sheet (bulk) en bas, alignée “wrapper” */ .ev-modal__sheet{ position: absolute; left: var(--ev-sidebar-w); right: 0; bottom: 0; padding: 0 0 24px 0; } .ev-modal__sheet-inner{ max-width: 1200px; margin: 0 auto; padding: 0 24px; } .drop-zone-download { text-align: center; border: 2px dashed #aaa; border-radius: 12px; padding: 2rem; background-color: #f4f6f8; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease; } .drop-zone-download:hover { border-color: var(--ev-color-brand-pink); } .ev-progress { width: var(--p, 0%); } .storage-bar { width: var(--pct); } .step-circle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; font-weight: 600; } .step-disabled { background: #fff; color: var(--ev-text-muted); border: 1px solid var(--ev-border-subtle); } .dark .step-disabled { background: var(--ev-bg-surface-dark); border-color: var(--ev-border-subtle-dark); color: var(--ev-text-muted-dark); } .bg-gradient { background: var(--ev-gradient-brand); box-shadow: var(--ev-shadow-glow); } .ev-drag-handle{ align-self: stretch; display: flex; align-items: center; justify-content: center; width: 36px; border-radius: 10px; cursor: grab; user-select: none; color: #94a3b8; } .ev-drag-handle:hover{ background: #f8fafc; color: #475569; } .ev-drag-handle:active{ cursor: grabbing; } .ev-sort-ghost { opacity: .35; } .ev-sort-chosen { box-shadow: 0 8px 18px rgba(15, 23, 42, .10); } /* Remove native select arrow everywhere */ .ev-select { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-image: none !important; padding-right: 2.5rem; /* laisse la place à l'icône */ } /* IE/Edge legacy */ .ev-select::-ms-expand { display: none; } /* Scroll reveal */ [data-reveal]{ opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 700ms ease; will-change: opacity, transform; } [data-reveal].is-visible{ opacity: 1; transform: translateY(0); } /* Variante stagger */ [data-reveal][data-delay="1"]{ transition-delay: 80ms; } [data-reveal][data-delay="2"]{ transition-delay: 160ms; } [data-reveal][data-delay="3"]{ transition-delay: 240ms; } section.productpage { padding:50px 20px; } /* ========================= Marketing header (dashboard-like + nav) ========================= */ .ev-mkt-header{ position: sticky; max-width: 1200px; margin: 0 auto; border-radius: 50px; top: .50rem; z-index: 9999; background: rgba(255,255,255,.80); border-bottom: 1px solid var(--ev-border-subtle); backdrop-filter: blur(10px); } .dark .ev-mkt-header{ background: rgba(2,6,23,.70); } .ev-mkt-header__inner{ margin: 0 auto; padding: 0 24px; height: 64px; display: grid; grid-template-columns: auto 1fr auto; /* logo | nav | actions */ align-items: center; gap: 16px; } .ev-mkt-header__brand{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } /* Nav centré */ .ev-mkt-nav{ display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-width: 0; } .ev-mkt-nav__link{ font-size: 13px; font-weight: 600; color: rgba(51,65,85,.85); text-decoration: none; padding: 8px 10px; border-radius: 999px; transition: background-color .12s ease, color .12s ease; } .ev-mkt-nav__link:hover{ background: rgba(148,163,184,.16); color: rgba(15,23,42,1); } .dark .ev-mkt-nav__link{ color: rgba(203,213,225,.85); } .dark .ev-mkt-nav__link:hover{ background: rgba(148,163,184,.14); color: rgba(248,250,252,1); } /* Actions à droite */ .ev-mkt-header__actions{ display: inline-flex; align-items: center; gap: 10px; } .ev-cookie-banner { max-width: 600px; margin: 0 auto; border-radius: 50px; background: rgba(255, 255, 255, .80); border-bottom: 1px solid var(--ev-border-subtle); backdrop-filter: blur(10px); position: fixed; inset: auto 16px 16px 16px; z-index: 9999; } .ev-cookie-card { margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 16px; justify-content: space-between; } .ev-cookie-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; } .ev-cookie-desc { font-size: .75rem; margin: 0; color: var(--color-slate-900); } .ev-cookie-text { width: 60%; color: var(--color-slate-900); } .ev-cookie-actions { width: 40%; display: flex; gap: 10px; align-items: center; flex-direction: row } .ev-cookie-prefs { margin-top: 12px; border-top: 1px solid rgba(148,163,184,.25); padding-top: 12px; } .ev-cookie-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14px; } /* ========================= Mega dropdown – Produits ========================= */ .ev-mkt-dropdown { position: relative; } .ev-mkt-dropdown__trigger { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .ev-caret { font-size: 0.75em; opacity: 0.6; } /* Panel */ .ev-mkt-dropdown__panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 640px; margin-top: 0; padding: 24px; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.12); opacity: 0; visibility: hidden; pointer-events: none; transition: all .2s ease; z-index: 50; } /* Show on hover */ .ev-mkt-dropdown:hover .ev-mkt-dropdown__panel { opacity: 1; visibility: visible; pointer-events: auto; } /* Grid */ .ev-mkt-dropdown__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } /* Product card */ .ev-mkt-product { display: block; padding: 20px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .2s ease, transform .2s ease; } .ev-mkt-product:hover { background: #f8f9fb; transform: translateY(-2px); } .ev-mkt-product__title { font-size: 1.1rem; font-weight: 600; margin-bottom: 6px; } .ev-mkt-product__desc { font-size: 0.9rem; color: #6b7280; line-height: 1.5; } .ev-mkt-product__cta { display: inline-block; margin-top: 10px; font-size: 0.85rem; font-weight: 500; color: var(--ev-pink, #e11d48); } /* Option : si tu veux éviter la casse sur petits écrans */ @media (max-width: 980px){ .ev-mkt-nav{ display:none; } } /* Mobile fallback si sidebar hidden */ @media (max-width:768px){ .ev-modal__sheet{ left: 0; } } /* ========================= 16) Responsive (basic) ========================= */ @media (max-width:768px){ .ev-sidebar{ display:none; } .ev-sidebar-mobile{ display:block; } .ev-main-content{ margin-left:0; width:100%; } .ev-subheader{ left:0; width:100%; } }