/* Deduplicated from uploaded style.css (kept most-developed duplicate rules; ties keep latest) */ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Great+Vibes&family=Cinzel:wght@400;700&family=Dancing+Script:wght@400;700&family=Orbitron:wght@400;700&display=swap"); :root { /* Palette Principale 2026 */ --primary: #6366f1; --primary-dark: #4f46e5; --primary-light: #818cf8; --accent: #a855f7; --accent-hover: #9333ea; /* Fonds & Surfaces */ --bg-body: #f8fafc; --bg-card: #ffffff; --bg-panel: #ffffff; /* Etats Modernes */ --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --info: #3b82f6; --purple: #8b5cf6; /* Gradients */ --grad-primary: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); --grad-success: linear-gradient(135deg, #10b981 0%, #34d399 100%); --grad-danger: linear-gradient(135deg, #ef4444 0%, #f87171 100%); --grad-warning: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); --grad-info: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); /* Glassmorphism */ --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(255, 255, 255, 0.3); /* Typographie */ --text-main: #2c3e50; --text-muted: #7f8c8d; --font-main: "Montserrat", "Cairo", "Noto Sans Arabic", "Noto Sans Hebrew", sans-serif; --font-serif: "Playfair Display", serif; /* UI FX */ --shadow-xs: 0 2px 4px rgba(0,0,0,0.05); --shadow-sm: 0 4px 6px rgba(0,0,0,0.05); --shadow-md: 0 10px 15px rgba(0,0,0,0.1); --shadow-lg: 0 20px 25px rgba(0,0,0,0.15); --shadow-xl: 0 25px 50px rgba(0,0,0,0.25); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 50px; --transition: all 0.3s ease; } body { font-family: var(--font-main); background: var(--bg-body); color: var(--text-main); margin: 0; min-height: 100vh; display: flex; flex-direction: column; line-height: 1.6; } ul { list-style: none; padding: 0; margin: 0; } .logo { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 12px; letter-spacing: -0.5px; } .nav-links a:hover { color: var(--accent); transform: translateY(-1px); } .card-panel { background: var(--bg-card); padding: 40px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin-bottom: 40px; border: 1px solid rgba(0,0,0,0.03); animation: slideUp 0.5s ease; } h1, h2, h3 { color: var(--primary); margin-top: 0; border-bottom: 2px solid #f0f2f5; padding-bottom: 15px; margin-bottom: 30px; font-weight: 700; } h2 { font-size: 1.8rem; letter-spacing: -0.5px; } label { font-weight: 600; color: var(--primary); margin-bottom: 8px; display: block; font-size: 0.9rem; } input[type=text], input[type=date], input[type=password], input[type=email], textarea, select { width: 100%; padding: 14px 18px; border: 2px solid #eef2f7; border-radius: var(--radius-md); margin-bottom: 20px; font-family: inherit; font-size: 0.95rem; transition: var(--transition); background: #fdfdfd; } input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; background: #fff; box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1); } .btn, .btn-action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 30px; border-radius: 14px; border: none; cursor: pointer; pointer-events: auto !important; font-weight: 600; color: white !important; background: var(--grad-primary); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); font-size: 0.95rem; height: 50px; letter-spacing: 0.3px; text-transform: none; } .btn:hover, .btn-action:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4); filter: brightness(1.05); } .btn-success { background: var(--grad-success); box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); } .btn-success:hover { box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4); } .btn-danger { background: var(--grad-danger); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); } .btn-danger:hover { box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4); } .btn-warning { background: var(--grad-warning); box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); } .btn-warning:hover { box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4); } .btn-info { background: var(--grad-info); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); } .btn-info:hover { box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4); } .btn:active { transform: translateY(-1px); } .alert { padding: 15px 20px; border-radius: var(--radius-md); margin-bottom: 25px; border-left: 6px solid rgba(0,0,0,0.1); font-weight: 500; display: flex; align-items: center; gap: 10px; } [data-tooltip] { position: relative; } [data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background: var(--primary-dark); color: white; padding: 8px 12px; font-size: 0.8rem; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 10000; box-shadow: var(--shadow-md); opacity: 0; animation: fadeIn 0.2s forwards; } [data-tooltip]:hover::before { content: ""; position: absolute; bottom: 115%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--primary-dark); opacity: 0; animation: fadeIn 0.2s forwards; } @media (max-width: 1100px){ .grid-editor { grid-template-columns: 1fr; } } .card-panel-modern { background: white; border-radius: 30px; padding: 35px; box-shadow: 0 20px 50px rgba(0,0,0,0.05); border: 1px solid #f1f5f9; } .media-container-modern { border: 2px dashed #e2e8f0; border-radius: 20px; padding: 20px; transition: all 0.3s ease; background: #f8fafc; text-align: center; } .media-container-modern:hover { border-color: var(--primary); background: white; } @media (max-width: 600px){ .card-frame { padding: 30px; min-height: 500px; gap: 20px; } .card-text-content { font-size: 1.2rem !important; } } .card-info-item { font-family: var(--font-main); font-size: 0.85rem; color: #444; background: rgba(255,255,255,0.9); padding: 6px 15px; border-radius: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); backdrop-filter: blur(5px); } .shape-round .card-header-overlay { justify-content: center; align-items: center; top: 15%; padding: 0; gap: 15px; } .theme-floral { background: linear-gradient(135deg, #fff0f5 0%, #ffffff 100%); border: 20px solid #ffdde1; font-family: "Playfair Display", serif; color: #8e44ad; } .theme-gold { background: radial-gradient(circle, #fffcf0 0%, #fdf5e6 100%); border: 15px double #d4af37; font-family: "Cinzel", serif; color: #2c3e50; box-shadow: inset 0 0 50px rgba(212, 175, 55, 0.2), var(--shadow-xl); } .theme-modern { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border: none; box-shadow: 0 20px 50px rgba(0,0,0,0.15); font-family: "Montserrat", "Cairo", "Noto Sans Arabic", "Noto Sans Hebrew", sans-serif; color: #333; } .theme-solemn { background: #f9f9f9; border-left: 15px solid #2c3e50; border-right: 15px solid #2c3e50; font-family: "Georgia", serif; color: #000; } .theme-vintage { background-color: #fdf5e6; background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d4cba8' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"); border: 8px dashed #8b4513; font-family: "Dancing Script", cursive; color: #5d4037; font-size: 2rem; } .theme-cyber { background: #0f0f0f; border: 2px solid #00ff00; box-shadow: 0 0 20px #00ff00, inset 0 0 20px #00ff00; font-family: "Orbitron", sans-serif; color: #00ff00; text-shadow: 0 0 5px #00ff00; } .theme-watercolor { background: linear-gradient(to right, #a1c4fd, #c2e9fb); border: 10px solid white; outline: 1px solid #ccc; font-family: "Great Vibes", cursive; color: #2c3e50; font-size: 2.2rem; } .shape-16-9 { aspect-ratio: 16/9; border-radius: 8px; } .shape-9-16 { aspect-ratio: 9/16; border-radius: 8px; } .rich-toolbar { background: white; border: 1px solid #e0e0e0; padding: 12px; border-radius: var(--radius-md); display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; position: relative; z-index: 100; box-shadow: var(--shadow-sm); } .tool-btn { background: #f8f9fa; border: 1px solid #dcdcdc; border-radius: 8px; padding: 8px 14px; cursor: pointer; pointer-events: auto !important; color: var(--primary); min-width: 40px; transition: 0.2s; font-weight: 600; } .tool-btn:hover { background: #eef2f7; color: var(--accent); border-color: var(--accent); } .tool-btn.bg-danger { color: white !important; background: var(--danger); border-color: var(--danger); } .upload-zone { border: 2px dashed #cbd5e0; padding: 25px; text-align: center; cursor: pointer; pointer-events: auto !important; margin-bottom: 20px; background: #f8fafc; border-radius: var(--radius-md); transition: 0.3s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-weight: 600; color: var(--text-muted); } .upload-zone:hover { border-color: var(--accent); background: #ebf8ff; color: var(--accent); transform: scale(1.02); } .status-select { font-weight: 700; color: white; border: none; border-radius: 50px; padding: 10px 30px; transition: 0.3s; } .publish-box { background: #ffffff; padding: 25px; margin-top: 20px; border-radius: var(--radius-md); border: 1px solid #e0e0e0; width: 100%; border-left: 6px solid var(--success); box-shadow: var(--shadow-md); animation: slideUp 0.3s ease; } .publish-box label { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; cursor: pointer; pointer-events: auto !important; } .publish-box input[type="checkbox"] { width: 20px; height: 20px; margin: 0; } .mini-card { background: white; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid #f0f0f0; display: flex; flex-direction: column; transition: all 0.3s ease; position: relative; } .mini-preview { height: 220px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-bottom: 1px solid #f0f0f0; overflow: hidden; padding: 15px; position: relative; } .mini-preview img { width: 100%; height: 100%; object-fit: contain; transition: 0.5s; } .mini-card:hover .mini-preview img { transform: scale(1.05); } .mini-info { padding: 20px; flex: 1; display: flex; flex-direction: column; font-size: 0.85rem; color: #666; gap: 5px; } .info-row { display: flex; align-items: center; gap: 8px; } .btn-icon { width: 40px; height: 40px; border-radius: 10px; border: none; color: white; cursor: pointer; pointer-events: auto !important; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: 0.2s; box-shadow: var(--shadow-sm); font-size: 1.1rem; } .btn-icon:hover { transform: scale(1.15); box-shadow: var(--shadow-md); } .modal-content { background: white; width: 90%; max-width: 1000px; max-height: 85vh; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; overflow: hidden; } .gallery-item { height: 160px; border: 3px solid #eee; border-radius: 12px; overflow: hidden; cursor: pointer; pointer-events: auto !important; transition: 0.2s; display: none; position: relative; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; } .gallery-item:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: var(--shadow-md); } .emoji-item { font-size: 1.6rem; cursor: pointer; pointer-events: auto !important; text-align: center; padding: 5px; border-radius: 6px; transition: 0.2s; } .emoji-item:hover { background: #f0f0f0; transform: scale(1.3); } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1024px){ .grid-editor { grid-template-columns: 1fr; } .pub-toolbar { flex-direction: column; height: auto; align-items: stretch; } } * { box-sizing: border-box; } .container { max-width: 1400px; margin: 0 auto; padding: 0 20px; width: 100%; flex: 1; } a { text-decoration: none; color: inherit; transition: 0.2s; } img { max-width: 100%; display: block; } header { background: var(--white); padding: 15px 0; box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 5000; border-bottom: 1px solid #eee; } .header-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; } .nav-links { display: flex; gap: 20px; align-items: center; font-size: 0.9rem; font-weight: 600; } .nav-item { color: var(--primary); padding: 5px 10px; border-radius: 5px; transition: 0.2s; } .nav-item:hover, .nav-item.active { color: var(--accent); background: #f0f8ff; } .admin-link { color: var(--danger); } .lang-selector a { padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; border: 1px solid #eee; margin-left: 5px; } .lang-selector a.active { background: var(--primary); color: white; border-color: var(--primary); } input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); } .btn:hover { opacity: 0.9; transform: translateY(-2px); } .btn-primary { background: var(--accent); } .btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary) !important; } .btn-outline:hover { background: var(--primary); color: white !important; } .btn-block { width: 100%; } .bg-success { background: var(--success); } .bg-danger { background: var(--danger); } .bg-warning { background: var(--warning); } .bg-purple { background: var(--purple); } .bg-info { background: var(--info); } .alert-success { background: #d4edda; color: #155724; border-color: var(--success); } .alert-danger { background: #f8d7da; color: #721c24; border-color: var(--danger); } .alert-warning { background: #fff3cd; color: #856404; border-color: var(--warning); } table { width: 100%; border-collapse: collapse; margin-top: 20px; background: white; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm); } th, td { padding: 15px; text-align: left; border-bottom: 1px solid #eee; } th { background: #f8f9fa; font-weight: 700; color: var(--primary); } tr:last-child td { border-bottom: none; } tr:hover { background: #fafafa; } .status-pill { padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; text-transform: uppercase; font-weight: 800; letter-spacing: 0.5px; } .status-pub { background: #d4edda; color: #155724; } .status-draft { background: #fff3cd; color: #856404; } .grid-editor { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: start; } .grid-editor, .editor-main, .editor-sidebar, .dashboard-section { min-width: 0; } .card-frame { width: 100%; min-height: 600px; background: white; border: 1px solid #eee; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* LE GRID QUI SÃEPARE IMAGE ET TEXTE PHYSIQUEMENT - NE PAS TOUCHER */ display: grid; padding: 40px; gap: 20px; align-content: center; justify-items: center; position: relative; overflow: hidden; z-index: 1; background-size: cover; background-position: center; transition: all 0.3s ease; box-sizing: border-box; } .card-text-content { grid-area: txt; width: 100%; outline: none; line-height: 1.6; white-space: pre-wrap; font-size: 1.6rem; z-index: 2; font-family: "Playfair Display", "Scheherazade New", "Frank Ruhl Libre", "Noto Serif", serif; max-height: 100%; overflow-y: auto; scrollbar-width: thin; text-shadow: 0 1px 1px rgba(255,255,255,0.8); } .card-img-wrapper.visible { display: block; animation: zoomIn 0.3s; } .card-img-wrapper img { max-width: 100%; max-height: 400px; object-fit: contain; border-radius: 4px; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1)); } .pos-top { grid-template-areas: "img" "txt"; grid-template-rows: auto 1fr; grid-template-columns: 1fr; text-align: center; } .pos-bottom { grid-template-areas: "txt" "img"; grid-template-rows: 1fr auto; grid-template-columns: 1fr; text-align: center; } .pos-left { grid-template-areas: "img txt"; grid-template-columns: 1fr 1.5fr; grid-template-rows: 1fr; text-align: left; align-items: center; } .pos-right { grid-template-areas: "txt img"; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr; text-align: left; align-items: center; } .shape-square { aspect-ratio: 1/1; border-radius: 0; } .shape-round { aspect-ratio: 1/1; border-radius: 50%; padding: 80px; } .shape-portrait { aspect-ratio: 3/4; border-radius: 8px; } .shape-landscape { aspect-ratio: 4/3; border-radius: 8px; } .rich-toolbar select, .rich-toolbar input[type="color"]{ max-width: 100%; } .pub-toolbar { margin-top: 20px; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 15px; display: flex; align-items: center; justify-content: space-between; gap: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); } .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; } .mini-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .mini-header { padding: 15px; border-bottom: 1px solid #f0f0f0; background: #fcfcfc; display: flex; justify-content: space-between; align-items: center; } .mini-title { font-weight: bold; color: var(--primary); font-size: 1rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 65%; } .mini-actions { border-top: 1px solid #eee; padding: 10px; display: flex; justify-content: center; gap: 10px; background: #fff; margin-top: auto; } .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 6000; align-items: center; justify-content: center; backdrop-filter: blur(5px); } .modal-overlay.active { display: flex; animation: fadeIn 0.2s; } .modal-header { padding: 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; background: #f9f9f9; } .modal-body { padding: 20px; overflow-y: auto; flex: 1; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; } .gallery-item.visible { display: block; animation: zoomIn 0.3s; } .main-footer { background-color: var(--primary); color: var(--bg); padding: 50px 0 30px; margin-top: auto; text-align: center; } .footer-inner { display: flex; flex-direction: column; align-items: center; } .social-links { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; } .social-link { color: var(--accent); font-weight: 500; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; font-size: 0.9rem; color: #bdc3c7; width: 100%; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @media (max-width: 900px){ .grid-editor { grid-template-columns: 1fr; } .pub-toolbar { flex-direction: column; } .header-inner { flex-direction: column; gap: 10px; } } @media (max-width: 520px){ #cardFrame.card-frame{ width: 100%; max-width: 100%; min-height: 0 !important; height: auto; padding: 18px !important; } .view-wrapper .card-frame{ width: 100%; max-width: 100%; min-height: 0 !important; height: auto; padding: 18px !important; box-sizing: border-box; } .shape-round{ padding: 36px !important; } .rich-toolbar select{ width: 100% !important; max-width: 100% !important; } } #emojiPicker { display: none; position: absolute; bottom: 100%; left: 0; background: white; border: 1px solid #eee; padding: 10px; width: 300px; z-index: 2000; border-radius: 8px; grid-template-columns: repeat(8, 1fr); gap: 5px; max-height: 200px; overflow-y: auto; box-shadow: var(--shadow-md); } #emojiPicker.active { display: grid; } .wf-tooltip-legacy [data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background: #333; color: white; padding: 5px 10px; font-size: 0.75rem; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10000; } .admin-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 22px} .admin-tabs .tab-link{padding:10px 14px;border-radius:14px;border:1px solid rgba(231,237,243,.95);background:rgba(255,255,255,.9);font-weight:900;color:var(--primary);box-shadow:var(--shadow-xs);transition:var(--transition)} .admin-tabs .tab-link:hover{transform:translateY(-2px);border-color:rgba(52,152,219,.45);color:var(--accent)} .admin-tabs .tab-link.active{background:rgba(52,152,219,.10);border-color:rgba(52,152,219,.25);color:var(--accent)} .alert-info{background:rgba(23,162,184,.10);border-color:rgba(23,162,184,.25);color:#0b5564} .arrow{display:inline-block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.75} .divider-vertical{width:1px;height:28px;background:rgba(231,237,243,.9)} .badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;border-radius:999px;font-weight:900;font-size:.72rem;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap} .badge-light{background:rgba(243,156,18,.16);color:#7a4a00} .facebook{} .twitter{} .whatsapp{} .linkedin{} .footer-section{width:100%} .separator{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.25)} .title{font-family:var(--font-serif);font-size:2rem;color:var(--primary);margin:0 0 18px} .subtitle{font-family:var(--font-serif);font-size:1.25rem;color:var(--primary);margin:28px 0 10px} .text{color:var(--text-muted);font-weight:500} .text.small,.small{font-size:.9rem;opacity:.9} .filters-toolbar select { width: auto; flex: 1; } .filters-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:10px 0 20px;padding:12px;background:rgba(255,255,255,.92);border:1px solid rgba(231,237,243,.95);border-radius:18px;box-shadow:var(--shadow-xs)} .filters-bar .filter-group{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .filters-bar select,.filters-bar input{margin:0} /* ========================================================== ADMIN — dropdowns in filters-bar should NOT be full width on desktop Scope intentionally narrow to avoid regressions: - affects only .filters-bar (used in admin/index) - keeps mobile behavior (mobile rule below forces width:100%) ========================================================== */ @media (min-width: 769px){ .filters-bar select{ width: auto !important; flex: 0 0 auto; min-width: 170px; max-width: 360px; } } .comments-list{display:flex;flex-direction:column;gap:10px} .search-bar-container{display:flex;justify-content:center;margin:12px 0 22px} .search-input{width:min(620px,100%);padding:12px 14px;border-radius:16px;border:1px solid rgba(231,237,243,.95);background:rgba(255,255,255,.95);box-shadow:var(--shadow-xs)} .status-table td,.status-table th{vertical-align:middle} .status-icon{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:10px} .status-allowed{background:rgba(39,174,96,.14);color:#166534} .status-denied{background:rgba(231,76,60,.14);color:#7f1d1d} .top-section{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start} @media (max-width:980px){ .top-section{grid-template-columns:1fr} } .book-preview-container{background:#eee;min-height:400px;display:flex;align-items:center;justify-content:center;border-radius:18px;overflow:hidden;border:1px solid rgba(231,237,243,.95);box-shadow:var(--shadow-xs)} .book-cover{max-height:380px;filter:drop-shadow(0 18px 30px rgba(15,23,42,.16))} @media (max-width:560px){ .book-preview-container{min-height:280px} .book-cover{max-height:240px} } /* ── RTL Support complet (arabe, hébreu, etc.) ─────────────────────────── */ /* Approche explicite par composant, comme dashboardmobile.css */ /* Base : body + héritages globaux */ [dir="rtl"] body { direction: rtl; text-align: right; } /* Navigation */ [dir="rtl"] .nav-links { justify-content: flex-start; } [dir="rtl"] .header-inner { flex-direction: row-reverse; } [dir="rtl"] .lang-dropdown { right: auto; left: 0; } /* Grille carte : inversion image/texte */ [dir="rtl"] .card-frame.pos-left { grid-template-areas: "txt img"; } [dir="rtl"] .card-frame.pos-right { grid-template-areas: "img txt"; } /* text-align: left hardcodé dans les règles générales → override RTL */ [dir="rtl"] th, [dir="rtl"] td { text-align: right; } [dir="rtl"] .pos-left, [dir="rtl"] .pos-right { text-align: right; } [dir="rtl"] .long-text-content { text-align: right; } /* Éditeurs contenteditable : direction explicite (ne pas dépendre du seul cascade) */ [dir="rtl"] #editableShort, [dir="rtl"] #editableLong, [dir="rtl"] #editableFree, [dir="rtl"] .card-text-content, [dir="rtl"] .wf-block-content { direction: rtl; text-align: right; unicode-bidi: embed; } /* blockShort a text-align:center hardcodé → en RTL, right */ [dir="rtl"] #cardFrame #blockShort .wf-block-content { text-align: right; } /* Commentaires / livre d'or */ [dir="rtl"] .comment-body, [dir="rtl"] .comment-text, [dir="rtl"] .guestbook-entry { direction: rtl; text-align: right; } /* Formulaires */ [dir="rtl"] input[type=text], [dir="rtl"] input[type=email], [dir="rtl"] input[type=password], [dir="rtl"] textarea, [dir="rtl"] select { direction: rtl; text-align: right; } /* Listes et blocs génériques */ [dir="rtl"] .card-panel, [dir="rtl"] .share-panel, [dir="rtl"] .mini-info { text-align: right; } /* Icônes directionnelles inversées */ [dir="rtl"] .btn-icon-arrow { transform: scaleX(-1); } .style-modern{} .btn,.btn-action{outline:none} .lang-selector { position: relative; } .lang-dropdown{ position:absolute; top:calc(100% + 10px); right:0; left:auto; min-width:220px; max-width:min(92vw, 360px); display:none; background:#fff; border:1px solid rgba(231,237,243,.95); border-radius:18px; box-shadow:0 18px 44px rgba(15,23,42,.14); overflow:hidden; padding:6px; z-index:9999; /* IMPORTANT : force l’affichage vertical */ white-space: nowrap; } .lang-dropdown a{ display:block; padding:10px 12px; border-radius:14px; font-weight:800; font-size:.92rem; color:var(--primary); line-height:1.1; white-space: nowrap; } .lang-dropdown a:hover{ background:rgba(52,152,219,.10); color:var(--accent); } .lang-dropdown a.active { background: rgba(52, 219, 152, 0.14); color: var(--accent) !important; border-color: rgba(52, 152, 219, 0.22); } @media (hover:hover) and (pointer:fine){ .lang-selector:hover .lang-dropdown{ display:block; } } details.lang-selector[open] .lang-dropdown{ display:block; } .btn, .btn-action, .btn-icon, button, .nav-item, .btn-lang, select, .tool-btn, .status-select, .profile-menu a, .mini-actions a { white-space: nowrap !important; } .btn, .btn-action, button{ overflow:hidden; text-overflow:ellipsis; } select, input[type="text"], input[type="email"], input[type="password"], input[type="date"]{ height:48px; } .btn, .btn-action, .btn-lang, .tool-btn{ min-height:48px; } select{ line-height:1.2; } .nav-links select, .nav-links .btn, .nav-links .btn-action, .nav-links .btn-lang{ display:inline-flex; align-items:center; } .profile-menu{ display:flex; flex-wrap:wrap; gap:10px; padding:10px; border-radius:18px; background:rgba(255,255,255,.92); border:1px solid rgba(231,237,243,.95); box-shadow:0 6px 16px rgba(15,23,42,.06); } .profile-menu a{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:14px; font-weight:900; font-size:.92rem; color:var(--text-muted); background:transparent; border:1px solid transparent; transition:var(--transition); } .profile-menu a:hover{ background:rgba(52,152,219,.08); color:var(--accent); transform:translateY(-1px); } .profile-menu a.active{ background:rgba(52,152,219,.14); color:var(--accent); border-color:rgba(52,152,219,.22); box-shadow:0 10px 22px rgba(52,152,219,.12); } .rich-toolbar select, .rich-toolbar button{ margin:0; } @media (max-width: 820px){ .nav-links{ gap:10px; } .lang-dropdown{ right:0; left:auto; } .profile-menu{ gap:8px; } .profile-menu a{ font-size:.9rem; padding:9px 10px; } } .custom-tooltip{ position: absolute; padding: 8px 10px; background: rgba(20,20,20,0.92); color: #fff; border-radius: 10px; font-size: 12px; line-height: 1.2; white-space: nowrap; z-index: 9999; pointer-events: none; transform: translateY(-2px); } .emoji-picker{ display: none; width: fit-content; max-width: 100%; padding: 10px; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; background: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.08); z-index: 60; } .emoji-picker.active{ display: grid; } .emoji-btn{ border: 1px solid rgba(0,0,0,0.06); background: #fafafa; border-radius: 10px; padding: 6px; cursor: pointer; pointer-events: auto !important; font-size: 18px; } .emoji-btn:hover{ background:#f0f0f0; } .btn-action.loading{ opacity: .75; filter: saturate(.9); position: relative; } .btn-action.loading::after{ content: "…"; margin-left: 8px; display: inline-block; animation: wfDots 1s infinite; } @keyframes wfDots{ 0%{ opacity:.2; } 50%{ opacity:1; } 100%{ opacity:.2; } } .wf-card-stack{ display:flex; flex-direction:column; gap:6px; padding:10px; /* Reserve just enough space for the name/date overlay without creating huge "ghost" gaps */ padding-top:4px; box-sizing:border-box; } .wf-block{ width:100%; position:relative; border-radius:16px; overflow:hidden; } .wf-block.wf-empty{ display:none !important; } .wf-block-short .wf-block-content, .wf-block-long .wf-block-content, .wf-block-free .wf-block-content{ min-height:48px; padding:14px 14px; border-radius:14px; background: rgba(255,255,255,0.35); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,0.25); line-height:1.35; } #editableShort, #editableLong, #editableFree{ outline:none; width:100%; } #cardFrame{ --wf-text-scale: 1; /* M par défaut */ } #cardFrame #editableShort, #cardFrame #editableLong{ font-size: calc(1em * var(--wf-text-scale)); } .wf-block-image{ min-height:220px; aspect-ratio: var(--wf-media-ratio, 16/9); background: rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.25); } .wf-block-image .card-img-wrapper{ width:100%; height:100%; min-height:220px; display:flex; align-items:center; /* keep media centered and contained */ justify-content:center; overflow:hidden; position:relative; } .wf-block-image .wf-img-mover{ display: inline-block; position: relative; /* Pour que les boutons absolute soient relatifs à lui */ will-change: transform; } .wf-img-mover .wf-media-remove{ position: absolute !important; top: 8px !important; right: 8px !important; display: flex; width: 34px; height: 34px; border-radius: 50%; background: #EF4444; border: 2px solid white; color: white; font-size: 18px; font-weight: bold; cursor: pointer; pointer-events: auto !important; display: flex; align-items: center; justify-content: center; z-index: 1001; box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: all 0.2s; padding: 0; line-height: 1; } .wf-img-mover .wf-media-remove:hover{ background: #DC2626; transform: scale(1.15); } .wf-img-mover .wf-resizer-handle{ position: absolute !important; bottom: 8px !important; right: 8px !important; display: flex; width: 34px; height: 34px; border-radius: 12px; background: rgba(255,255,255,0.95); border: 1px solid rgba(0,0,0,0.1); cursor: nwse-resize; display: flex; align-items: center; justify-content: center; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.2); pointer-events: auto !important; } .wf-img-mover .wf-resizer-handle::before{ content: ""; width: 14px; height: 14px; border-right: 3px solid rgba(0,0,0,0.4); border-bottom: 3px solid rgba(0,0,0,0.4); border-radius: 2px; } .wf-block-image .card-img-wrapper video{ display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; border-radius:14px; } .wf-block-image .card-img-wrapper img{ display:block; max-width:100%; height:auto; user-select:none; -webkit-user-drag:none; } .card-header-overlay{ position:absolute; top:8px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:6px 10px; border-radius:12px; background: rgba(255,255,255,0.55); backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,0.35); z-index:40; } .card-header-overlay .mini-title{ font-weight:700; letter-spacing:0.2px; } .card-header-overlay .mini-date{ font-weight:600; opacity:0.85; } .rich-toolbar .tool-group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .rich-toolbar .tool-label{ font-size:12px; opacity:0.75; } .rich-toolbar .tool-btn{ width:36px; height:36px; border-radius:12px; border:1px solid rgba(0,0,0,0.08); background: rgba(255,255,255,0.8); } .rich-toolbar .tool-btn.active{ outline:2px solid rgba(46, 204, 113, 0.35); } #wfTooltip{ position:fixed; z-index:9999; padding:8px 10px; border-radius:12px; font-size:12px; background: rgba(0,0,0,0.85); color:#fff; opacity:0; pointer-events:none; transform: translateY(-6px); transition: opacity .12s ease, transform .12s ease; } #wfTooltip.is-visible{ opacity:1; transform: translateY(0); } @media (max-width: 768px){ .wf-card-stack{ padding:12px; padding-top:48px; } .wf-block-image{ min-height:180px; } .wf-block-image .card-img-wrapper{ min-height:180px; } .card-header-overlay{ flex-direction:column; align-items:flex-start; } } .wf-like-btn{ display:inline-flex; align-items:center; gap:6px; border:1px solid #e7e7e7; background:#fff; color:#111; border-radius:999px; padding:6px 10px; line-height:1; cursor:pointer; } .wf-like-btn:disabled{opacity:.6; cursor:not-allowed;} .wf-like-btn i{font-size:14px;} .wf-like-btn.liked{color:#d1001c; border-color:#f2b8bf;} .wf-like-btn.liked i{color:#d1001c;} .wf-reply-box{background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px; padding:12px; margin-top:12px;} .wf-reply-actions{display:flex; gap:8px; margin-top:10px;} .wf-reply-btn{background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:6px 10px; cursor:pointer;} .wf-like-count{font-weight:600; font-size:12px;} .wf-gb-reply{ margin-top:10px; padding:10px 12px; background:#f7fbff; border:1px solid #d9ecff; border-left:4px solid #2d8cff; border-radius:10px; } .wf-gb-reply-head{font-weight:700; font-size:0.9rem; color:#1c5aa6; margin-bottom:4px;} .wf-gb-reply-body{color:#234; line-height:1.55;} .wf-reply-actions .btn-action{padding:6px 10px; font-size:0.85rem;} #blockImage { position: relative; margin-top: 4px; margin-bottom: 6px; overflow: hidden; /* crop strict */ z-index: 5; } .card-img-wrapper { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-height: none; height: auto; overflow: visible; border-radius: 10px; } .wf-img-mover { position: relative; display: inline-block; } #imgPreview, #videoPreview { display: block; max-width: 100%; max-height: 100%; object-fit: contain; /* adaptatif sans crop sauvage */ border-radius: 10px; } #blockShort { z-index: 30; } #blockFree, #blockLong { z-index: 10; } #btnRemoveVideoInline { position: absolute; top: 10px; right: 10px; z-index: 60; background: rgba(0,0,0,0.7); color: white; border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; pointer-events: auto !important; font-size: 18px; line-height: 1; } #cardFrame.card-frame{ align-content: flex-start !important; justify-items: stretch !important; } .view-wrapper #cardFrame .wf-block-content{ font-size: clamp(0.78rem, 3.4vw, 1rem) !important; line-height: 1.28 !important; padding: clamp(10px, 2.6vw, 14px) clamp(10px, 2.8vw, 14px) !important; } .view-wrapper #cardFrame .wf-block-content *{ font-size: inherit !important; line-height: inherit !important; } .view-wrapper #cardFrame .wf-block-content p, .view-wrapper #cardFrame .wf-block-content h1, .view-wrapper #cardFrame .wf-block-content h2, .view-wrapper #cardFrame .wf-block-content h3, .view-wrapper #cardFrame .wf-block-content h4, .view-wrapper #cardFrame .wf-block-content h5, .view-wrapper #cardFrame .wf-block-content h6{ margin: 0.35em 0 !important; } .view-wrapper #cardFrame .wf-block-image img, .view-wrapper #cardFrame .wf-block-video video{ max-width: 100% !important; height: auto !important; } .view-wrapper #cardFrame .wf-block-image .card-img-wrapper{ overflow: hidden !important; } #cardFrame .wf-card-stack{ height: 100%; display: flex; flex-direction: column; } #cardFrame .wf-block{ overflow: visible; } #cardFrame .wf-block-image .card-img-wrapper{ align-items: flex-start !important; justify-content: center !important; padding-top: 8px; } #cardFrame #blockShort .wf-block-content{ text-align: center; display: flex; align-items: flex-start; justify-content: center; } #cardFrame #blockShort #editableShort{ width: 100%; } #cardFrame #videoPreview{ display: block; max-width: 100%; height: auto; object-fit: contain; } #blockImage #resizer{ /* legacy rule neutralized: kept for compatibility but overridden below */ position: absolute; right: auto; bottom: auto; cursor: nwse-resize; z-index: auto; } #wfImgMover #resizer, #wfVidMover #resizerVideo{ position: absolute !important; bottom: 8px !important; right: 8px !important; z-index: 2147483647 !important; pointer-events: auto !important; } #wfImgMover #btnRemoveMediaInline, #wfVidMover #btnRemoveVideoInline{ position: absolute !important; top: 8px !important; right: 8px !important; z-index: 2147483647 !important; pointer-events: auto !important; } .mini-meta { font-size: 0.85rem; color: var(--text-light); margin-bottom: 15px; display: flex; flex-direction: column; gap: 5px; } .meta-row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .country-badge { font-weight: bold; color: #555; } .views-count { color: #3498db; } .gb-status { font-size: 0.85rem; } .gb-status.gb-open { color: var(--warning); font-weight: bold; } .gb-status.gb-closed { color: #e74c3c; } .mini-video { max-width: 100%; max-height: 220px; border-radius: 12px; } .mini-img { max-width: 100%; border-radius: 12px; } .mini-actions .btn-action { border-radius: 50px; text-align: center; } @media (max-width: 768px){ .header-inner { flex-direction: column; gap: 15px; padding: 15px 20px; } .logo { font-size: 1.4rem; } .nav-links { flex-direction: column; width: 100%; gap: 10px; } .nav-item, .btn, .btn-action, .btn-lang { width: 100%; text-align: center; justify-content: center; } .divider-vertical { display: none; } .lang-dropdown { position: static; width: 100%; margin-top: 10px; } .main-header details.lang-selector { width: 100%; } .main-header details.lang-selector > summary { width: 100%; text-align: center; } } @media (max-width: 480px){ .hero-title { font-size: 1.8rem; } .hero-subtitle { font-size: 1rem; } .hero-btn { font-size: 1rem; padding: 10px 25px; } } @media (max-width: 768px){ .main-footer { padding: 40px 0 25px; } .footer-inner { padding: 0 20px; } .social-links { flex-wrap: wrap; gap: 10px; justify-content: center; } .separator { display: none; } .social-link { display: inline-block; padding: 8px 15px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; margin: 5px; } .footer-legal { display: flex; flex-direction: column; gap: 10px; text-align: center; } .footer-legal .separator { display: none !important; } .footer-legal a { display: block; margin: 5px 0; } } @media (max-width: 480px){ .footer-section h3 { font-size: 1.2rem; } .footer-section p { font-size: 0.85rem; } .social-link { font-size: 0.9rem; padding: 6px 12px; } } @media (max-width: 768px){ .cards-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 25px; } } @media (max-width: 480px){ .cards-grid { grid-template-columns: 1fr; gap: 20px; } .mini-card { max-width: 100%; } .mini-preview { height: 180px; } } @media (max-width: 768px){ .filters-bar { flex-direction: column; gap: 10px; } .search-input, .filters-bar select { width: 100%; } .btn-reset-filters { width: 100%; border-radius: var(--radius-md); padding: 10px; } } .hero-section { text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%); margin-bottom: 40px; border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .hero-title { font-size: 2.5rem; margin-bottom: 15px; font-family: "Playfair Display", serif; color: var(--primary); } .hero-subtitle { font-size: 1.2rem; color: var(--text-light); max-width: 700px; margin: 0 auto 30px; } .hero-btn { padding: 12px 30px !important; border-radius: 50px !important; font-size: 1.1rem; box-shadow: 0 5px 15px rgba(155, 89, 182, 0.3); } .index-container { margin-top: 40px; } .public-creations-title { text-align: center; margin-bottom: 30px; color: var(--primary); font-size: 1.8rem; } .no-cards-message { grid-column: 1 / -1; text-align: center; padding: 40px; color: #666; font-size: 1.1rem; } .filters-toolbar { background: white; border: 1px solid #eee; border-radius: var(--radius-md); padding: 18px; margin-bottom: 30px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; box-shadow: var(--shadow-sm); } .filters-toolbar .form-control { flex: 1; min-width: 180px; padding: 11px 15px; border: 1px solid #ddd; border-radius: var(--radius-md); font-size: 0.95rem; background: white; transition: var(--transition); } .filters-toolbar .form-control:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); } .btn-reset-filters { width: 40px !important; height: 40px !important; min-height: 40px !important; border-radius: 50% !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.2rem; flex-shrink: 0; } .mini-preview video, .mini-preview img { max-width: 100%; max-height: 220px; width: 100%; height: 100%; object-fit: contain; border-radius: 0; } .view-wrapper .card-frame video { max-width: 100% !important; width: 100% !important; height: auto !important; border-radius: 14px; } .view-wrapper .card-frame img { max-width: 100% !important; width: auto !important; height: auto !important; max-height: 450px; } .view-wrapper .card-img-wrapper { max-width: 100%; display: flex; justify-content: center; align-items: center; } @media (max-width: 768px){ .hero-title { font-size: 2rem; } .hero-subtitle { font-size: 1rem; padding: 0 15px; } .hero-btn { font-size: 1rem; padding: 10px 25px !important; } .filters-toolbar { flex-direction: column; padding: 15px; } .filters-toolbar .form-control { width: 100%; min-width: 100%; } .btn-reset-filters { width: 100% !important; border-radius: var(--radius-md) !important; height: 42px !important; min-height: 42px !important; } .cards-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 25px; } .header-inner { flex-direction: column; gap: 15px; padding: 15px 20px; } .logo { font-size: 1.4rem; } .nav-links { flex-direction: column; width: 100%; gap: 10px; } .nav-item, .btn, .btn-action, .btn-lang { width: 100%; text-align: center; justify-content: center; } .divider-vertical { display: none; } .lang-dropdown { position: static; width: 100%; margin-top: 10px; } .main-header details.lang-selector { width: 100%; } .main-header details.lang-selector > summary { width: 100%; text-align: center; } .main-footer { padding: 40px 0 25px; } .footer-inner { padding: 0 20px; } .social-links { flex-wrap: wrap; gap: 10px; justify-content: center; } .separator { display: none; } .social-link { display: inline-block; padding: 8px 15px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; margin: 5px; } .footer-legal { display: flex; flex-direction: column; gap: 10px; text-align: center; } .footer-legal .separator { display: none !important; } .footer-legal a { display: block; margin: 5px 0; } .view-wrapper .card-frame { padding: 20px; } .view-wrapper .card-frame img { max-height: 300px; } } @media (max-width: 480px){ .hero-title { font-size: 1.6rem; } .hero-subtitle { font-size: 0.9rem; } .hero-section { padding: 40px 15px; } .cards-grid { grid-template-columns: 1fr; gap: 20px; } .mini-card { max-width: 100%; } .mini-preview { height: 180px; } .footer-section h3 { font-size: 1.2rem; } .footer-section p { font-size: 0.85rem; } .social-link { font-size: 0.9rem; padding: 6px 12px; } .view-wrapper { padding: 20px 10px; } .view-wrapper .card-frame { padding: 15px; } .view-wrapper .card-frame img { max-height: 200px; } .view-wrapper .card-frame video { max-height: 250px; } } .footer-share-title { margin-bottom: 10px; font-size: 1.3rem; } .footer-share-subtitle { margin-bottom: 20px; font-size: 0.9rem; opacity: 0.8; } .footer-legal { margin-bottom: 10px; font-size: 0.9rem; } .footer-legal a { color: inherit; text-decoration: none; transition: all 0.2s ease; } .footer-legal a:hover { color: white; text-decoration: underline; } .footer-legal .separator { margin: 0 10px; } .style-classic { border: 4px double #d4af37; background-color: #fffcf0; font-family: serif; } .style-nature { border-top: 10px solid #27ae60; border-bottom: 10px solid #27ae60; font-family: serif; } .style-festive { border: 5px dashed #e74c3c; background: #fff0f0; font-family: sans-serif; } .msgs-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .msg-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 15px; position: relative; transition: 0.2s; cursor: pointer; pointer-events: auto !important; display: flex; gap: 10px; } .msg-card:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-color: var(--accent); } .msg-check { width: 20px; height: 20px; margin-top: 5px; cursor: pointer; pointer-events: auto !important; } .msg-body { flex: 1; } .msg-meta { font-weight: bold; color: var(--primary); margin-bottom: 5px; display: flex; justify-content: space-between; font-size: 0.9rem; } .msg-date { color: #999; font-weight: normal; font-size: 0.8rem; } .msg-text { font-size: 0.95rem; line-height: 1.5; color: #555; white-space: pre-wrap; } .dashboard-wrapper { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 1400px; margin: 0 auto; padding: 40px 25px; } .dashboard-section { background: var(--bg-card); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md); border: 1px solid rgba(0,0,0,0.03); animation: dashSlideUp 0.5s ease; } .section-header { display: flex; align-items: center; gap: 15px; margin-bottom: 35px; padding-bottom: 20px; border-bottom: 3px solid var(--accent); } .section-header h2 { margin: 0; font-size: 1.8rem; font-weight: 700; color: var(--primary); } .section-header i { font-size: 1.5rem; color: var(--accent); } .filters-toolbar select:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(52, 152, 219, 0.1); } .mini-info div { display: flex; align-items: center; gap: 8px; font-weight: 500; } .btn-icon:hover:not(.wf-locked) { transform: scale(1.15); box-shadow: var(--shadow-md); } .btn-icon.wf-locked { opacity: 0.45; cursor: not-allowed; } @keyframes dashSlideUp { from { opacity: 0; transform: translateY(20px); } .dashboard-section { padding: 25px; } .section-header h2 { font-size: 1.5rem; } .dashboard-section { padding: 18px; } .section-header { flex-direction: column; align-items: flex-start; gap: 10px; } .shape-round #blockImage { overflow: visible !important; } /* Dashboard editor only: keep resize handle reachable even when the media is translated/cropped. The handle is inside .wf-img-mover; when the mover is translated, the handle can be clipped by overflow. Make the mover non-positioned so the absolute handle anchors to the wrapper instead. */ .dashboard-wrapper #blockImage .wf-img-mover{ position: static !important; } .dashboard-wrapper #blockImage .card-img-wrapper{ position: relative; } /* --- Imported from view.php --- */ .view-header { text-align: center; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 2px solid #f0f2f5; } .view-header p { font-size: 1.1rem; color: var(--text-muted); margin: 0; } .view-header b { color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .long-text-panel { background: var(--bg-card); border-radius: var(--radius-lg); padding: 35px; box-shadow: var(--shadow-md); border: 1px solid #eef2f7; margin-bottom: 40px; animation: viewSlideUp 0.6s ease 0.1s both; } .long-text-panel h3 { margin-top: 0; color: var(--primary); font-size: 1.3rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #f0f2f5; } .long-text-content { text-align: left; line-height: 1.8; color: var(--text-main); font-size: 1rem; } .share-panel { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md); border: 1px solid #eef2f7; margin-bottom: 40px; animation: viewSlideUp 0.6s ease 0.2s both; } .share-panel h3 { text-align: center; color: var(--primary); font-size: 1.3rem; font-weight: 700; margin: 0 0 30px 0; } .qr-code-container { display: flex; justify-content: center; margin-bottom: 30px; } .qr-code-container img { border: 2px solid #ddd; padding: 10px; border-radius: var(--radius-md); background: white; box-shadow: var(--shadow-sm); } .share-buttons { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; } .share-link-container { display: flex; gap: 12px; max-width: 600px; margin: 0 auto; flex-wrap: wrap; } .share-link-container input { flex: 1; min-width: 200px; padding: 12px 16px; border: 2px solid #eef2f7; border-radius: var(--radius-md); font-size: 0.95rem; text-align: center; background: white; transition: var(--transition); } .share-link-container input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1); } .guestbook-panel { background: var(--bg-card); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md); border: 1px solid #eef2f7; animation: viewSlideUp 0.6s ease 0.3s both; } .guestbook-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #eee; padding-bottom: 15px; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; } .guestbook-header h3 { margin: 0; color: var(--primary); font-size: 1.3rem; font-weight: 700; border: none; padding: 0; } .guestbook-stats { display: flex; align-items: center; gap: 20px; font-size: 0.95rem; color: var(--text-muted); } .gb-status-badge { font-size: 0.85rem; color: #666; padding: 4px 12px; background: #f0f0f0; border-radius: var(--radius-pill); white-space: nowrap; } .gb-hidden-notice { background: #ffeaa7; border-left: 4px solid #f39c12; padding: 15px; border-radius: var(--radius-md); margin-bottom: 20px; color: #856404; font-weight: 500; } .gb-search-form { background: #f9f9f9; padding: 18px; border-radius: var(--radius-md); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 25px; border: 1px solid #eee; } .gb-search-form input, .gb-search-form select { padding: 11px 15px; border: 1px solid #ddd; border-radius: var(--radius-md); font-size: 0.9rem; transition: var(--transition); } .gb-search-form input:focus, .gb-search-form select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); } .gb-reset-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; background: var(--danger); color: white; cursor: pointer; pointer-events: auto !important; transition: var(--transition); font-weight: 700; text-decoration: none; } .gb-reset-btn:hover { transform: scale(1.1); box-shadow: var(--shadow-md); } .comment-item { background: #fff; border: 1px solid #f0f0f0; padding: 20px; border-radius: var(--radius-md); border-left: 4px solid var(--accent); box-shadow: 0 2px 5px rgba(0,0,0,0.03); transition: var(--transition); animation: viewSlideUp 0.4s ease; } .comment-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-left-color: var(--primary); } .comment-item.blocked { border-left-color: var(--danger); background: #fff0f0; } .comment-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; border-bottom: 1px solid #f9f9f9; padding-bottom: 10px; flex-wrap: wrap; gap: 10px; } .comment-author { font-weight: 700; color: var(--primary); font-size: 1.05rem; } .comment-meta { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--text-muted); } .comment-date { white-space: nowrap; } .comment-actions { display: flex; align-items: center; gap: 8px; } .comment-body { margin-top: 15px; line-height: 1.6; color: var(--text-main); word-break: break-word; font-size: 0.95rem; } .blocked-notice { color: var(--danger); font-weight: 700; font-size: 0.8rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .no-comments { text-align: center; color: var(--text-muted); padding: 40px 20px; font-size: 0.95rem; } .wf-like-btn:hover:not([disabled]) { border-color: var(--danger); background: #ffe0e0; color: var(--danger); } .wf-like-btn[disabled] { opacity: 0.6; cursor: not-allowed; } .gb-form-section { background: #fff; border-top: 2px solid #eee; padding-top: 25px; margin-top: 20px; } .gb-form-section h4 { margin-top: 0; font-size: 1.1rem; color: var(--primary); font-weight: 700; } @keyframes viewSlideUp { from { opacity: 0; transform: translateY(20px); } .share-panel, .guestbook-panel, .long-text-panel { padding: 25px; } .guestbook-header { flex-direction: column; align-items: flex-start; } .guestbook-stats { flex-direction: column; align-items: flex-start; gap: 10px; } .gb-search-form { flex-direction: column; } .gb-search-form input, .gb-search-form select { width: 100%; } .share-buttons { flex-direction: column; align-items: center; } .share-link-container { flex-direction: column; } .share-link-container input { width: 100%; min-width: auto; } .comment-header { flex-direction: column; align-items: flex-start; } .comment-actions { width: 100%; justify-content: flex-start; } .share-panel, .guestbook-panel, .long-text-panel { padding: 18px; } /* --- Imported @media blocks (as-is) --- */ /* from book_setup.php */ @media(max-width: 900px) { .top-section { grid-template-columns: 1fr; } } /* from dashboard.php */ @media (max-width: 768px) { .dashboard-wrapper { padding: 20px 15px; gap: 25px; } .dashboard-section { padding: 25px; } .section-header h2 { font-size: 1.5rem; } .cards-grid { grid-template-columns: 1fr; } .filters-toolbar { flex-direction: column; } .filters-toolbar select { width: 100%; min-width: auto; } .mini-actions { flex-wrap: wrap; } } /* from dashboard.php */ @media (max-width: 480px) { .dashboard-wrapper { padding: 15px 10px; gap: 20px; } .dashboard-section { padding: 18px; } .section-header { flex-direction: column; align-items: flex-start; gap: 10px; } } /* from view.php */ @media (max-width: 768px) { .view-wrapper { padding: 25px 15px; } .share-panel, .guestbook-panel, .long-text-panel { padding: 25px; } .guestbook-header { flex-direction: column; align-items: flex-start; } .guestbook-stats { flex-direction: column; align-items: flex-start; gap: 10px; } .gb-search-form { flex-direction: column; } .gb-search-form input, .gb-search-form select { width: 100%; } .share-buttons { flex-direction: column; align-items: center; } .share-link-container { flex-direction: column; } .share-link-container input { width: 100%; min-width: auto; } .comment-header { flex-direction: column; align-items: flex-start; } .comment-actions { width: 100%; justify-content: flex-start; } } /* from view.php */ @media (max-width: 480px) { .view-wrapper { padding: 15px 10px; } .share-panel, .guestbook-panel, .long-text-panel { padding: 18px; } } /* ========================================================================== SAFETY STYLES FOR CLASSES USED IN TEMPLATES BUT NOT EXPLICITLY STYLED (kept minimal to avoid regressions) ========================================================================== */ /* Utility backgrounds */ .bg-primary { background: var(--accent); } /* Button color aliases (if used in templates) */ .btn-info { background: var(--info); color: #fff !important; } .btn-warning { background: var(--warning); color: #fff !important; } /* Simple animations helpers (if used) */ .animate-fade { animation: fadeIn 0.35s ease both; } .animate-slide { animation: slideUp 0.45s ease both; } /* Basic 2-column helper seen in templates (bootstrap-like) */ .col-md-6 { width: 100%; } @media (min-width: 768px) { .col-md-6 { width: 50%; } } /* Editor layout helpers (if present in some pages) */ .editor-main { width: 100%; } .editor-sidebar { width: 100%; } /* Checkbox custom (if used) */ .checkbox-container { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; pointer-events: auto !important; user-select: none; } .checkbox-container input { width: 18px; height: 18px; } .checkmark { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 2px solid rgba(226,232,240,.9); border-radius: 6px; } /* Close button (modal) */ .close-x { cursor: pointer; pointer-events: auto !important; font-weight: 900; line-height: 1; } /* ========================================================================== MINI-CARDS META LAYOUT (Index thumbnails polish) - refined Goal: - Keep index responsiveness - Prevent ugly wraps on long names/countries (ellipsis) - Make icons look "premium" (colored badges) even on FontAwesome outline ========================================================================== */ .mini-info{ gap: 0.75rem; } /* 2 items per row (user+country / date+views) */ .mini-info .info-row{ display:flex; align-items:center; justify-content:space-between; gap: 0.9rem; flex-wrap: nowrap; /* default: keep a clean 2-col line */ min-width: 0; } .mini-info .meta-item{ display:inline-flex; align-items:center; gap: 0.6rem; min-width: 0; flex: 1 1 0; font-weight: 600; color: var(--text-muted, #6b7280); } .mini-info .meta-item .meta-text, .mini-info .meta-item b.meta-text{ display:block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mini-info .meta-item b.meta-text{ color: var(--text-main, #111827); font-weight: 800; } /* Icon badge style */ .mini-info .meta-item i{ width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 7px; font-size: 0.85rem; line-height: 1; flex: 0 0 22px; box-shadow: 0 6px 16px rgba(0,0,0,0.06); background: rgba(148,163,184,0.18); color: rgba(17,24,39,0.85); } /* Per-type icon colors (subtle, but clearly colored) */ .mini-info .meta-user i{ background: rgba(139, 92, 246, 0.16); color: #6d28d9; } /* purple */ .mini-info .meta-country i{ background: rgba(59, 130, 246, 0.16); color: #1d4ed8; } /* blue */ .mini-info .meta-date i{ background: rgba(16, 185, 129, 0.16); color: #047857; } /* emerald */ .mini-info .meta-views i{ background: rgba(245, 158, 11, 0.18); color: #b45309; } /* amber */ .mini-info .meta-guestbook.open{ color: #047857; font-weight: 800; } .mini-info .meta-guestbook.open i{ background: rgba(16,185,129,0.16); color:#047857; } .mini-info .meta-guestbook.closed{ color: #dc2626; font-weight: 800; } .mini-info .meta-guestbook.closed i{ background: rgba(239,68,68,0.14); color:#b91c1c; } /* Keep guestbook as a clean single line (no double icons, no wrap) */ .mini-info .meta-guestbook .meta-text{ white-space: nowrap; } /* Responsive: when space is tight, allow wrap gracefully (still avoids ugly splits) */ @media (max-width: 520px){ .mini-info .info-row{ flex-wrap: wrap; justify-content:flex-start; } .mini-info .meta-item{ flex: 1 1 100%; } } /* Ultra small: compact text a bit */ @media (max-width: 380px){ .mini-info{ padding-top: 14px; } .mini-info .meta-item{ font-size: 0.82rem; } .mini-info .meta-item i{ width:20px; height:20px; border-radius:6px; font-size:0.8rem; flex-basis:20px; } } /* Icon colors (subtle, premium) */ .mini-info .meta-user i{ color: var(--purple); } .mini-info .meta-country i{ color: var(--info); } .mini-info .meta-date i{ color: var(--accent); } .mini-info .meta-views i{ color: var(--primary); } .mini-info .meta-guestbook.open{ color: var(--success); } .mini-info .meta-guestbook.open i{ color: var(--success); } .mini-info .meta-guestbook.closed{ color: var(--danger); } .mini-info .meta-guestbook.closed i{ color: var(--danger); } /* Tighten on very small screens */ @media (max-width: 420px){ .mini-info .info-row{ justify-content:flex-start; } .mini-info .meta-item{ font-size: 0.82rem; } } /* ========================================================== FIX MEDIA TOOLS (X + RESIZER) — NO REGRESSION - assure que les boutons restent cliquables et au-dessus du média ========================================================== */ #wfImgMover, #wfVidMover{ position: relative !important; } #wfImgMover img, #wfVidMover video{ position: relative; z-index: 1; } #wfImgMover #btnRemoveMediaInline, #wfVidMover #btnRemoveVideoInline{ position: absolute !important; top: 8px !important; right: 8px !important; z-index: 2147483647 !important; pointer-events: auto !important; } #wfImgMover #resizer, #wfVidMover #resizerVideo{ position: absolute !important; right: 8px !important; bottom: 8px !important; z-index: 2147483647 !important; pointer-events: auto !important; } #wfImgMover .wf-media-remove, #wfVidMover .wf-media-remove, #wfImgMover .wf-resizer-handle, #wfVidMover .wf-resizer-handle{ pointer-events: auto !important; } #wfImgMover .wf-resizer-handle::before, #wfVidMover .wf-resizer-handle::before{ content: "" !important; } /* ========================================================================== RESPONSIVE HARDENING (public pages) - no regression - Avoid horizontal scroll - Improve mobile/tablet spacing - Better thumbnails/text for long names ========================================================================== */ html, body { max-width: 100%; overflow-x: hidden; } /* Containers: reduce side padding on small screens */ @media (max-width: 640px) { .container { padding-left: 16px !important; padding-right: 16px !important; } } /* Make common media always responsive */ img, video, iframe { max-width: 100%; height: auto; } /* Prevent long strings from breaking layout */ .wf-ellipsis, .mini-title, .mini-meta, .public-creations-title { overflow: hidden; text-overflow: ellipsis; } .mini-title, .mini-meta { white-space: nowrap; } /* Public cards grid: allow smaller columns on phones */ @media (max-width: 420px) { .cards-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 16px !important; } } /* Profile layout: reduce padding on small screens */ @media (max-width: 640px) { .profile-content { padding: 18px !important; min-width: 0 !important; } .profile-sidebar { flex: 1 1 100% !important; } } /* ========================================================================== MOBILE WIDTH ALIGNMENT HOTFIX (Header/Footer vs Content) - Some pages use custom wrappers (ex: .dashboard-wrapper) with tighter horizontal padding than the global .container, making the header/footer look "smaller" on phones. - This only adjusts horizontal paddings on small screens to align widths. ========================================================================= */ @media (max-width: 768px) { .container{ padding-left: 15px !important; padding-right: 15px !important; } header .container.header-inner, .main-header .container.header-inner, .main-footer .container.footer-inner{ padding-left: 15px !important; padding-right: 15px !important; } .dashboard-wrapper{ padding-left: 15px !important; padding-right: 15px !important; } } @media (max-width: 480px) { .container{ padding-left: 10px !important; padding-right: 10px !important; } header .container.header-inner, .main-header .container.header-inner, .main-footer .container.footer-inner{ padding-left: 10px !important; padding-right: 10px !important; } .dashboard-wrapper{ padding-left: 10px !important; padding-right: 10px !important; } } /* ========================================================================== VIEW-ONLY RESPONSIVE PATCH (NO REGRESSION) Scope: view.php card rendering only (inside .view-wrapper #cardFrame) Goal: Keep card OK on mobile AND scale text/media proportionally to viewport. ========================================================================== */ /* Prevent any horizontal overflow caused by long words/inline widths in view card */ .view-wrapper #cardFrame, .view-wrapper #cardFrame *{ max-width: 100%; box-sizing: border-box; } .view-wrapper #cardFrame{ overflow: hidden; /* keep round/portrait clean */ } /* Text scaling: override inline font-size coming from saved styles (px) */ .view-wrapper #cardFrame{ --wf-view-text: clamp(0.95rem, 3.7vw, 1.18rem); --wf-view-text-long: clamp(0.92rem, 3.4vw, 1.08rem); --wf-view-line: 1.35; } /* Apply to the blocks used in view */ .view-wrapper #cardFrame .wf-block-short .wf-block-content, .view-wrapper #cardFrame .wf-block-free .wf-block-content{ font-size: var(--wf-view-text) !important; line-height: var(--wf-view-line) !important; } .view-wrapper #cardFrame .wf-block-long .wf-block-content{ font-size: var(--wf-view-text-long) !important; line-height: var(--wf-view-line) !important; } /* Force descendants to inherit (neutralize per-span inline px sizes) */ .view-wrapper #cardFrame .wf-block-content *{ font-size: inherit !important; line-height: inherit !important; } /* Avoid text blocks becoming too tall and pushing media oddly */ .view-wrapper #cardFrame .wf-block-content{ overflow-wrap: anywhere; word-break: break-word; } /* Media: keep centered, contained, and sized to viewport height */ .view-wrapper #cardFrame .wf-block-image, .view-wrapper #cardFrame .wf-block-video{ width: 100%; } .view-wrapper #cardFrame .wf-block-image .card-img-wrapper, .view-wrapper #cardFrame .wf-block-video .card-img-wrapper{ width: 100%; height: auto; min-height: 0 !important; max-height: none; overflow: hidden; } .view-wrapper #cardFrame .wf-block-image img, .view-wrapper #cardFrame .wf-block-video video{ width: 100% !important; height: auto !important; max-height: min(52vh, 520px); object-fit: contain; } /* Fix for mobile: remove fixed height constraints that truncate long media */ @media (max-width: 600px) { .view-wrapper #cardFrame .wf-block-image img, .view-wrapper #cardFrame .wf-block-video video { max-height: none !important; } } /* If an image is moved via translate(), keep the mover from creating overflow */ .view-wrapper #cardFrame .wf-img-mover{ max-width: 100%; } /* Round shape: ensure internal padding doesn't magnify text on small screens */ @media (max-width: 520px){ .view-wrapper #cardFrame.shape-round{ padding: 24px !important; } .view-wrapper #cardFrame .card-header-overlay{ left: 14px !important; right: 14px !important; padding: 10px 12px !important; } .view-wrapper #cardFrame .wf-card-stack{ padding-top: clamp(54px, 14vw, 84px) !important; } } }} /* ========================================================== HOTFIX (VIEW.PHP / MOBILE) — prevent media block truncation Scope: ONLY view.php (inside .view-wrapper) on small screens Goal: - Let #cardFrame grow with content (no fixed aspect-ratio height) - Remove forced 100% height stack that depends on fixed parent height - Make portrait images not get cropped by a forced media ratio ========================================================== */ @media (max-width: 600px){ /* 1) In view page only, disable fixed aspect-ratio sizing of the card container */ .view-wrapper #cardFrame.shape-square, .view-wrapper #cardFrame.shape-round, .view-wrapper #cardFrame.shape-portrait, .view-wrapper #cardFrame.shape-landscape, .view-wrapper #cardFrame.shape-16-9, .view-wrapper #cardFrame.shape-9-16{ aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; } /* 2) The stack must not be locked to the parent's height */ .view-wrapper #cardFrame .wf-card-stack{ height: auto !important; } /* 3) Media block: avoid enforcing a fixed ratio that crops portrait images */ .view-wrapper #cardFrame .wf-block-image{ aspect-ratio: auto !important; min-height: 0 !important; } .view-wrapper #cardFrame .wf-block-image .card-img-wrapper{ height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } .view-wrapper #cardFrame .wf-block-image img{ max-height: none !important; height: auto !important; width: 100% !important; object-fit: contain !important; } } /* ========================================================== VIEW.PHP — MOBILE SHAPE-SAFE MEDIA FIT (NO REGRESSION) Goals (mobile only, view only): - Preserve the chosen card shape (square/portrait/landscape/round) -> NO oval circles - Prevent media truncation by making the media block flex and shrink to available space - Keep media fully contained inside the shape (no overflow outside, especially for round) ========================================================== */ @media (max-width: 600px){ /* Ensure the card keeps its intended aspect ratio (especially for round) */ .view-wrapper #cardFrame.shape-round{ aspect-ratio: 1 / 1 !important; } .view-wrapper #cardFrame.shape-square{ aspect-ratio: 1 / 1 !important; } /* Keep other shapes as defined globally (portrait/landscape/16-9/9-16). Do NOT unset aspect-ratio. */ /* The inner stack should fill the fixed-shape card; allow internal scrolling if needed */ .view-wrapper #cardFrame .wf-card-stack{ height: 100% !important; min-height: 0 !important; display: flex; flex-direction: column; overflow: hidden; /* keep round clean; no spilling outside the shape */ } /* Text blocks keep their natural height; the media block takes remaining space */ .view-wrapper #cardFrame .wf-block:not(.wf-block-image):not(.wf-block-video){ flex: 0 0 auto; } .view-wrapper #cardFrame .wf-block-image, .view-wrapper #cardFrame .wf-block-video{ flex: 1 1 auto; min-height: 0 !important; /* do NOT force a media aspect-ratio on mobile; let it adapt to remaining space */ aspect-ratio: auto !important; } /* Media wrapper fills its block and CONTAINS the media */ .view-wrapper #cardFrame .wf-block-image .card-img-wrapper, .view-wrapper #cardFrame .wf-block-video .card-img-wrapper{ height: 100% !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; /* critical for round: keep inside circle */ display: flex; align-items: center !important; justify-content: center !important; padding: 0 !important; } /* Media must scale down proportionally to fit the available space */ .view-wrapper #cardFrame .wf-block-image img, .view-wrapper #cardFrame .wf-block-video video{ width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; border-radius: 14px; /* harmless for non-round, clipped by parent for round */ } /* If content (texts) is very long, allow scrolling inside the card instead of cutting media/text */ .view-wrapper #cardFrame .wf-card-stack{ overflow: auto; -webkit-overflow-scrolling: touch; } } /* ========================================================== ROUND CARD (VIEW ONLY) — media must stay inside the circle + no name/date gap Scope: ONLY cards rendered in view.php when the card has .shape-round - Prevent media from spilling outside the circular frame - Scale media proportionally (no crop) so it fits within the circle - Remove extra spacing between name and date for round cards IMPORTANT: This patch does NOT touch other shapes or other pages. ========================================================== */ /* 1) Ensure the round frame clips everything inside (circle stays clean) */ .view-wrapper #cardFrame.shape-round{ overflow: hidden; /* clips inner content to the circular border-radius */ } /* 2) Override the editor helper that allows overflow for resize handles */ .view-wrapper #cardFrame.shape-round #blockImage{ overflow: hidden !important; } /* 3) Contain the media inside the circle and scale it proportionally */ .view-wrapper #cardFrame.shape-round .card-img-wrapper{ overflow: hidden !important; } .view-wrapper #cardFrame.shape-round #imgPreview, .view-wrapper #cardFrame.shape-round #videoPreview{ width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; /* proportional resize, no crop */ } /* ========================================================== VIEW.PHP — DESKTOP — ROUND VIDEO FIT (NO REGRESSION) Problem (PC): video keeps its intrinsic height (height:auto) and gets clipped inside the circular frame. On mobile we already force contain. Fix: ONLY for view.php round cards, make the video area take available space and force the