{"id":18793,"date":"2026-04-30T18:03:32","date_gmt":"2026-04-30T17:03:32","guid":{"rendered":"https:\/\/altaydagistan.com\/?page_id=18793"},"modified":"2026-05-15T20:54:08","modified_gmt":"2026-05-15T19:54:08","slug":"ad-pro-portfolio-grid","status":"publish","type":"page","link":"https:\/\/altaydagistan.com\/en\/ad-pro-portfolio-grid\/","title":{"rendered":"AD Pro Portfolio Grid - WordPress portfolio plugin"},"content":{"rendered":"\n<style>\n:root {\n  --bg: #0A0A12;\n  --bg-card: #0e0e1a;\n  --bg-elevated: #12121e;\n  --white: #FFFFFF;\n  --gray-light: #B9B9B9;\n  --gray: #8E8E8E;\n  --gray-dark: #434343;\n  --accent: #1b998b;\n  --blue: #287CCA;\n  --purple: #6B4FBB;\n  --red: #CD3434;\n  --border: #434343;\n  --font: 'Manrope', sans-serif;\n}\n* { box-sizing: border-box; margin: 0; padding: 0; }\n\n.adp-page { font-family: var(--font); color: var(--white); background: var(--bg); }\n.adp-page img { pointer-events: none; }\n.adp-container { max-width: 1160px; margin: 0 auto; padding: 0 32px; }\n\n\/* Sticky CTA *\/\n.adp-sticky {\n  position: fixed; bottom: 20px; left: 50%;\n  transform: translateX(-50%) translateY(calc(100% + 40px));\n  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n  z-index: 9999; width: calc(100% - 32px); max-width: 780px;\n  border-radius: 16px; border: 1px solid rgba(255,255,255,0.1);\n  background: rgba(14,14,22,0.92);\n  backdrop-filter: blur(24px) saturate(160%);\n  -webkit-backdrop-filter: blur(24px) saturate(160%);\n}\n.adp-sticky.adp-visible { transform: translateX(-50%) translateY(0); }\n.adp-sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; }\n.adp-sticky-text { font-size: 13px; color: var(--gray-light); font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; line-height: 1; }\n.adp-sticky-text strong { color: var(--white); }\n.adp-sticky-btn { flex-shrink: 0; padding: 10px 20px; font-size: 13px; background: #8B5CF6; color: #fff; text-decoration: none; border-radius: 8px; font-weight: 700; border: none; cursor: pointer; font-family: var(--font); }\n.adp-sticky-btn:hover { filter: brightness(1.1); color: #fff; }\n\n\/* Hero *\/\n.adp-hero { padding: 80px 0 60px; position: relative; overflow: hidden; }\n.adp-hero::before { content: ''; position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 1000px; height: 600px; background: radial-gradient(ellipse, rgba(27,153,139,0.08) 0%, transparent 60%); pointer-events: none; }\n.adp-hero-inner { position: relative; z-index: 1; text-align: center; }\n.adp-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; color: var(--accent); padding: 6px 14px; border: 1px solid rgba(27,153,139,0.3); border-radius: 4px; margin-bottom: 28px; }\n.adp-hero h1 { font-size: clamp(34px, 5.5vw, 58px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 24px; max-width: 880px; margin-left: auto; margin-right: auto; }\n.adp-hero h1 .adp-grad { color: var(--accent); }\n.adp-hero-sub { font-size: 18px; color: var(--gray-light); line-height: 1.6; max-width: 620px; margin: 0 auto 36px; }\n.adp-hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }\n.adp-btn-primary { padding: 15px 30px; background: #8B5CF6; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; font-family: var(--font); cursor: pointer; text-decoration: none; display: inline-block; transition: filter 0.2s; }\n.adp-btn-primary:hover { filter: brightness(1.1); color: #fff; }\n.adp-btn-ghost { padding: 15px 30px; background: transparent; color: var(--white); border: 1px solid var(--border); border-radius: 8px; font-size: 15px; font-weight: 700; font-family: var(--font); cursor: pointer; text-decoration: none; display: inline-block; transition: border-color 0.2s, color 0.2s; }\n.adp-btn-ghost:hover { border-color: var(--white); color: var(--white); }\n\n.adp-hero-image-wrap { position: relative; max-width: 980px; margin: 0 auto; padding: 0 20px; }\n.adp-hero-image { width: 100%; aspect-ratio: 16\/9; border: 1px solid var(--border); border-radius: 20px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }\n\n\/* Trust band *\/\n.adp-trust { padding: 32px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }\n.adp-trust-label { text-align: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gray); margin-bottom: 20px; }\n.adp-trust-items { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }\n.adp-trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-light); font-weight: 500; }\n.adp-trust-item svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }\n\n\/* Section base *\/\n.adp-section { padding: 88px 0; }\n.adp-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }\n.adp-section-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; color: var(--accent); margin-bottom: 14px; }\n.adp-section h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; color: var(--white); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 16px; }\n.adp-section-sub { font-size: 16px; color: var(--gray-light); line-height: 1.7; }\n\n\/* Grid styles showcase *\/\n.adp-styles { padding: 88px 0; border-top: 1px solid var(--border); }\n.adp-styles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }\n.adp-style-card { border: 1px solid var(--border); border-radius: 20px; padding: 24px; background: var(--bg-card); transition: border-color 0.25s, transform 0.25s; }\n.adp-style-card:hover { border-color: rgba(255,255,255,0.15); transform: translateY(-3px); }\n.adp-style-preview { aspect-ratio: 4\/3; background: linear-gradient(135deg, var(--bg-elevated) 0%, #1a1a2e 100%); border-radius: 12px; overflow: hidden; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; position: relative; }\n.adp-style-preview::after { color: var(--gray); font-size: 12px; padding: 16px; text-align: center; }\n.adp-style-preview[data-style=\"card\"]::after { content: 'AI image \u2014 Card style preview'; }\n.adp-style-preview[data-style=\"overlay\"]::after { content: 'AI image \u2014 Overlay style preview'; }\n.adp-style-preview[data-style=\"simple\"]::after { content: 'AI image \u2014 Simple style preview'; }\n.adp-style-preview img { width: 100%; height: 100%; object-fit: cover; }\n.adp-style-name { font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 6px; }\n.adp-style-desc { font-size: 14px; color: var(--gray-light); line-height: 1.6; }\n\n\/* AJAX showcase *\/\n.adp-ajax-showcase { padding: 88px 0; border-top: 1px solid var(--border); }\n.adp-showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }\n.adp-showcase-title { font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; color: var(--white); line-height: 1.15; margin-bottom: 16px; letter-spacing: -0.01em; }\n.adp-showcase-desc { font-size: 15px; color: var(--gray-light); line-height: 1.75; }\n.adp-showcase-mockup { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 24px; }\n.adp-showcase-filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }\n.adp-filter-pill { padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); color: var(--gray); cursor: pointer; display: flex; align-items: center; gap: 6px; }\n.adp-filter-pill.adp-filter-active { background: var(--accent); border-color: var(--accent); color: #fff; }\n.adp-filter-count { font-size: 10px; opacity: 0.75; }\n.adp-showcase-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }\n.adp-mock-card { border-radius: 10px; border: 1px solid var(--border); overflow: hidden; background: var(--bg-elevated); position: relative; }\n.adp-mock-card-pin { border-color: rgba(27,153,139,0.35); }\n.adp-mock-img { height: 80px; }\n.adp-mock-pin-label { position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 700; background: rgba(27,153,139,0.9); color: #fff; padding: 3px 7px; border-radius: 4px; }\n.adp-mock-title { height: 8px; background: rgba(255,255,255,0.12); border-radius: 4px; margin: 10px 10px 6px; }\n.adp-mock-cat { height: 6px; width: 50%; background: rgba(255,255,255,0.06); border-radius: 4px; margin: 0 10px 10px; }\n.adp-showcase-pagination { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }\n.adp-page-btn { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--gray); }\n.adp-page-btn.adp-page-active { background: var(--accent); border-color: var(--accent); color: #fff; }\n.adp-showcase-url { background: #08080f; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-family: ui-monospace, 'SF Mono', Monaco, Menlo, monospace; font-size: 11px; word-break: break-all; }\n\n\/* Story section *\/\n.adp-story { padding: 88px 0; border-top: 1px solid var(--border); }\n.adp-story-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: start; }\n.adp-story-left { position: sticky; top: 150px; }\n.adp-story-quote { font-size: 19px; font-weight: 700; color: var(--white); line-height: 1.55; border-left: 3px solid var(--accent); padding-left: 20px; margin-bottom: 28px; }\n.adp-story-author { display: flex; align-items: center; gap: 14px; padding-left: 23px; }\n.adp-story-avatar { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--border); overflow: hidden; background: var(--bg-elevated); flex-shrink: 0; }\n.adp-story-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.adp-story-name { font-size: 14px; font-weight: 800; color: var(--white); margin-bottom: 3px; }\n.adp-story-role { font-size: 12px; color: #8B5CF6; line-height: 1.5; font-weight: 600; }\n.adp-story-right p { font-size: 16px; color: var(--gray-light); line-height: 1.85; margin-bottom: 20px; }\n.adp-story-right p:last-child { margin-bottom: 0; }\n.adp-story-right strong { color: var(--white); font-weight: 700; }\n\n\/* Story section *\/\n.adp-diff { padding: 88px 0; border-top: 1px solid var(--border); }\n.adp-diff-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }\n.adp-diff-card { border: 1px solid var(--border); border-radius: 20px; padding: 36px 32px; background: var(--bg-card); position: relative; overflow: hidden; transition: border-color 0.25s; }\n.adp-diff-card:hover { border-color: rgba(27,153,139,0.4); }\n.adp-diff-card-featured { background: linear-gradient(160deg, #0f1a0f 0%, var(--bg-card) 55%); border-color: rgba(27,153,139,0.25); }\n.adp-diff-card-featured:hover { border-color: rgba(27,153,139,0.6); }\n\n\/* Diff thumbnails *\/\n.adp-diff-thumb { background: #ffffff; border: 1px solid #e8e8ee; border-radius: 12px; padding: 18px; margin-bottom: 24px; overflow: hidden; position: relative; }\n\n\/* Thumb 1 \u2014 Featured Projects *\/\n.adpt-search { display: flex; align-items: center; gap: 8px; background: #f5f5f8; border: 1px solid #e0e0e8; border-radius: 7px; padding: 8px 12px; margin-bottom: 6px; }\n.adpt-search-icon { font-size: 11px; opacity: 0.4; color: #333; }\n.adpt-search-text { font-size: 12px; color: #1a1a2e; font-weight: 500; flex: 1; }\n.adpt-search-cursor { width: 1px; height: 13px; background: var(--accent); display: inline-block; animation: adp-blink 1s step-end infinite; }\n@keyframes adp-blink { 0%,100%{opacity:1} 50%{opacity:0} }\n.adpt-dropdown { background: #ffffff; border: 1px solid #e0e0e8; border-radius: 7px; overflow: hidden; margin-bottom: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.07); }\n.adpt-result { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 11px; color: #666; border-bottom: 1px solid #f0f0f5; }\n.adpt-result:last-child { border-bottom: none; }\n.adpt-result-selected { background: rgba(27,153,139,0.07); color: #1a1a2e; font-weight: 600; }\n.adpt-result-check { width: 14px; height: 14px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 8px; color: #fff; font-weight: 900; }\n.adpt-result-dot { width: 14px; height: 14px; border: 1.5px solid #d0d0dc; border-radius: 50%; flex-shrink: 0; }\n.adpt-pin-list { display: flex; flex-direction: column; gap: 5px; }\n.adpt-pin-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; background: #f5f5f8; border: 1px solid #e0e0e8; }\n.adpt-pin-row.adpt-pin-active { border-color: rgba(27,153,139,0.5); background: rgba(27,153,139,0.06); }\n.adpt-drag-handle { display: flex; flex-direction: column; gap: 2px; opacity: 0.3; flex-shrink: 0; cursor: grab; }\n.adpt-drag-handle span { display: block; width: 10px; height: 1.5px; background: #555; border-radius: 2px; }\n.adpt-pin-icon { font-size: 10px; flex-shrink: 0; }\n.adpt-pin-label { font-size: 11px; color: #666; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.adpt-pin-row.adpt-pin-active .adpt-pin-label { color: #1a1a2e; font-weight: 600; }\n.adpt-pin-badge { font-size: 9px; font-weight: 700; color: var(--accent); background: rgba(27,153,139,0.12); padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }\n.adpt-pin-row-muted { opacity: 0.35; }\n\n\/* Thumb 2 \u2014 AJAX Filtering *\/\n.adpt-ajax-bar { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }\n.adpt-pill { padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; border: 1px solid #e0e0e8; color: #777; background: #f5f5f8; display: flex; align-items: center; gap: 5px; }\n.adpt-pill-active { background: var(--accent); border-color: var(--accent); color: #fff; }\n.adpt-pill-count { font-size: 9px; opacity: 0.75; }\n.adpt-grid-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 10px; }\n.adpt-card-mini { border-radius: 6px; border: 1px solid #e8e8ee; overflow: hidden; background: #f5f5f8; }\n.adpt-card-mini-img { height: 44px; }\n.adpt-card-mini-body { padding: 6px; }\n.adpt-card-mini-title { height: 6px; background: rgba(0,0,0,0.1); border-radius: 3px; margin-bottom: 4px; }\n.adpt-card-mini-cat { height: 4px; width: 55%; background: rgba(0,0,0,0.06); border-radius: 3px; }\n.adpt-card-mini-pin { border-color: rgba(27,153,139,0.45); }\n.adpt-ajax-status { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(27,153,139,0.07); border: 1px solid rgba(27,153,139,0.25); border-radius: 6px; }\n.adpt-ajax-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: adp-pulse 1.8s ease-in-out infinite; flex-shrink: 0; }\n@keyframes adp-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }\n.adpt-ajax-status-text { font-size: 10px; font-weight: 600; color: #1b998b; }\n\n\/* Thumb 3 \u2014 URL Filtering *\/\n.adpt-browser { background: #f5f5f8; border: 1px solid #e0e0e8; border-radius: 8px; overflow: hidden; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }\n.adpt-browser-bar { background: #ececf2; border-bottom: 1px solid #e0e0e8; padding: 8px 12px; display: flex; align-items: center; gap: 8px; }\n.adpt-browser-dots { display: flex; gap: 4px; }\n.adpt-browser-dot { width: 8px; height: 8px; border-radius: 50%; }\n.adpt-url-bar { background: #fff; border: 1px solid #d8d8e4; border-radius: 4px; padding: 4px 10px; flex: 1; font-family: ui-monospace, 'SF Mono', Monaco, Menlo, monospace; font-size: 10px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.adpt-url-param-hl { color: var(--accent); font-weight: 700; }\n.adpt-browser-content { padding: 12px; background: #fff; }\n.adpt-browser-filter-row { display: flex; gap: 5px; margin-bottom: 8px; }\n.adpt-browser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }\n.adpt-browser-card { height: 32px; background: #f0f0f5; border: 1px solid #e0e0e8; border-radius: 5px; }\n.adpt-share-row { display: flex; align-items: center; gap: 8px; }\n.adpt-share-box { flex: 1; background: #f5f5f8; border: 1px solid #e0e0e8; border-radius: 6px; padding: 7px 10px; font-family: ui-monospace, 'SF Mono', Monaco, Menlo, monospace; font-size: 10px; color: #888; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n.adpt-share-btn { padding: 7px 12px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; border-radius: 6px; white-space: nowrap; }\n\n\/* Thumb 4 \u2014 Visual Control *\/\n.adpt-inspector { display: flex; flex-direction: column; gap: 6px; }\n.adpt-inspector-row { display: flex; align-items: center; gap: 10px; background: #f5f5f8; border: 1px solid #e0e0e8; border-radius: 7px; padding: 8px 12px; }\n.adpt-inspector-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #999; width: 80px; flex-shrink: 0; }\n.adpt-inspector-value { font-size: 11px; color: #1a1a2e; font-weight: 600; flex: 1; }\n.adpt-swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); flex-shrink: 0; }\n.adpt-inspector-tag { font-size: 10px; color: #1b998b; background: rgba(27,153,139,0.1); border: 1px solid rgba(27,153,139,0.25); border-radius: 4px; padding: 2px 7px; font-weight: 700; }\n.adpt-shadow-preview { width: 32px; height: 18px; background: #fff; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.18); border: 1px solid #e8e8ee; flex-shrink: 0; }\n.adpt-radius-preview { width: 18px; height: 18px; background: rgba(27,153,139,0.15); border: 1.5px solid rgba(27,153,139,0.4); border-radius: 8px; flex-shrink: 0; }\n.adpt-gap-preview { display: flex; gap: 3px; flex-shrink: 0; }\n.adpt-gap-block { width: 10px; height: 14px; background: rgba(27,153,139,0.18); border: 1px solid rgba(27,153,139,0.35); border-radius: 2px; }\n.adp-diff-card-featured::before { width: 360px; height: 360px; opacity: 1; top: -80px; right: -80px; background: radial-gradient(circle, rgba(27,153,139,0.12) 0%, transparent 65%); }\n.adp-diff-tag { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.13em; color: #8B5CF6; background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.25); border-radius: 4px; padding: 4px 10px; margin-bottom: 20px; }\n.adp-diff-icon { font-size: 32px; margin-bottom: 16px; display: block; line-height: 1; }\n.adp-diff-title { font-size: 22px; font-weight: 800; color: var(--white); margin-bottom: 12px; line-height: 1.2; }\n.adp-diff-card-featured .adp-diff-title { font-size: 26px; }\n.adp-diff-desc { font-size: 14px; color: var(--gray-light); line-height: 1.75; margin-bottom: 20px; }\n.adp-diff-card-featured .adp-diff-desc { font-size: 15px; margin-bottom: 28px; }\n.adp-diff-points { list-style: none; --theme-list-indent: 0; padding-inline-start: 0; margin-block-end: 0; display: flex; flex-direction: column; gap: 10px; }\n.adp-diff-points li { font-size: 13px; color: var(--gray-light); line-height: 1.55; padding-left: 20px; position: relative; }\n.adp-diff-points li::before { content: ''; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; background: var(--accent); -webkit-mask: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'\/><\/svg>\") no-repeat center \/ contain; mask: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'\/><\/svg>\") no-repeat center \/ contain; flex-shrink: 0; }\n.adp-diff-points li strong { color: var(--white); }\n.adp-diff-visual { margin-top: 32px; background: rgba(27,153,139,0.06); border: 1px solid rgba(27,153,139,0.2); border-radius: 12px; padding: 20px; }\n.adp-diff-visual-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(27,153,139,0.1); }\n.adp-diff-visual-row:last-child { border-bottom: none; padding-bottom: 0; }\n.adp-diff-pin { width: 26px; height: 26px; background: rgba(27,153,139,0.15); border: 1px solid rgba(27,153,139,0.4); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }\n.adp-diff-visual-label { font-size: 12px; color: var(--white); font-weight: 600; flex: 1; }\n.adp-diff-visual-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); background: rgba(27,153,139,0.12); padding: 3px 8px; border-radius: 4px; }\n.adp-diff-visual-badge-gray { color: var(--gray); background: rgba(255,255,255,0.04); }\n.adp-diff-url { margin-top: 24px; background: #08080f; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; font-family: ui-monospace, 'SF Mono', Monaco, Menlo, monospace; font-size: 12px; color: var(--gray-light); word-break: break-all; line-height: 1.6; }\n.adp-diff-url .adp-url-base { color: var(--gray); }\n.adp-diff-url .adp-url-param { color: var(--accent); font-weight: 700; }\n.adp-diff-design-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }\n.adp-diff-design-item { background: #08080f; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }\n.adp-diff-design-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray); margin-bottom: 4px; }\n.adp-diff-design-value { font-size: 12px; color: var(--gray-light); font-weight: 600; }\n\n\/* Features grid *\/\n.adp-features { padding: 88px 0; border-top: 1px solid var(--border); }\n.adp-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }\n.adp-feat-card { border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px; background: var(--bg-card); position: relative; transition: border-color 0.25s; }\n.adp-feat-card:hover { border-color: rgba(27,153,139,0.4); }\n.adp-feat-icon { width: 44px; height: 44px; background: rgba(27,153,139,0.1); border: 1px solid rgba(27,153,139,0.3); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }\n.adp-feat-icon svg { width: 22px; height: 22px; color: var(--accent); }\n.adp-feat-title { font-size: 17px; font-weight: 700; color: var(--white); margin-bottom: 8px; }\n.adp-feat-desc { font-size: 14px; color: var(--gray-light); line-height: 1.65; }\n\n\/* Code showcase *\/\n.adp-code-section { padding: 88px 0; border-top: 1px solid var(--border); }\n.adp-code-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }\n.adp-code-left h2 { font-size: clamp(26px, 3.5vw, 36px); font-weight: 800; color: var(--white); line-height: 1.2; margin-bottom: 20px; }\n.adp-code-left p { font-size: 15px; color: var(--gray-light); line-height: 1.75; margin-bottom: 16px; }\n.adp-code-features { list-style: none; --theme-list-indent: 0; padding-inline-start: 0; margin-block-end: 0; margin-top: 24px; }\n.adp-code-features li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; font-size: 14px; color: var(--gray-light); line-height: 1.6; }\n.adp-code-features li::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; background: var(--accent); -webkit-mask: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'\/><\/svg>\") no-repeat center; mask: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'\/><\/svg>\") no-repeat center; }\n.adp-code-block { background: #08080f; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }\n.adp-code-tab { display: flex; background: var(--bg-elevated); border-bottom: 1px solid var(--border); padding: 0; }\n.adp-code-tab span { padding: 12px 18px; font-size: 12px; font-weight: 600; color: var(--gray); border-right: 1px solid var(--border); font-family: ui-monospace, 'SF Mono', Monaco, Menlo, monospace; }\n.adp-code-tab span.active { color: var(--accent); background: #08080f; }\n.adp-code-body { padding: 24px; font-family: ui-monospace, 'SF Mono', Monaco, Menlo, monospace; font-size: 13px; line-height: 1.75; color: var(--gray-light); overflow-x: auto; }\n.adp-code-body .tag { color: var(--blue); }\n.adp-code-body .attr { color: var(--accent); }\n.adp-code-body .val { color: #f7c66e; }\n.adp-code-body .comm { color: var(--gray); }\n\n\/* How it works *\/\n.adp-how { padding: 88px 0; border-top: 1px solid var(--border); }\n.adp-how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; position: relative; }\n.adp-how-steps::before { content: ''; position: absolute; top: 38px; left: 12%; right: 12%; height: 1px; background: linear-gradient(to right, transparent 0%, var(--border) 20%, var(--border) 80%, transparent 100%); z-index: 0; }\n.adp-step { text-align: center; position: relative; z-index: 1; }\n.adp-step-num { width: 56px; height: 56px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 18px; font-weight: 800; color: var(--accent); }\n.adp-step-title { font-size: 17px; font-weight: 700; color: var(--white); margin-bottom: 10px; }\n.adp-step-desc { font-size: 14px; color: var(--gray-light); line-height: 1.65; max-width: 280px; margin: 0 auto; }\n\n\/* Pricing *\/\n.adp-pricing { padding: 88px 0; border-top: 1px solid var(--border); position: relative; }\n.adp-pricing::before { content: ''; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 700px; height: 400px; background: radial-gradient(ellipse, rgba(27,153,139,0.06) 0%, transparent 70%); pointer-events: none; }\n.adp-billing-toggle { display: inline-flex; padding: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; margin-top: 8px; }\n.adp-billing-btn { padding: 8px 18px; font-size: 13px; font-weight: 700; color: var(--gray); background: transparent; border: none; border-radius: 999px; cursor: pointer; font-family: var(--font); transition: color 0.2s, background 0.2s; }\n.adp-billing-btn.active { color: var(--white); background: #8B5CF6; }\n.adp-billing-save { font-size: 10px; color: var(--accent); margin-left: 6px; font-weight: 700; vertical-align: middle; }\n\n.adp-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; position: relative; z-index: 1; align-items: stretch; }\n.adp-free-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--border); border-radius: 12px; padding: 16px 24px; margin-top: 16px; background: transparent; flex-wrap: wrap; position: relative; z-index: 1; }\n.adp-free-strip-left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }\n.adp-free-strip-title { font-size: 14px; font-weight: 700; color: var(--gray-light); }\n.adp-free-strip-features { display: flex; gap: 16px; flex-wrap: wrap; }\n.adp-free-strip-feat { font-size: 12px; color: var(--gray); display: flex; align-items: center; gap: 5px; }\n.adp-free-strip-feat::before { content: ''; width: 12px; height: 12px; background: var(--gray-dark); -webkit-mask: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'\/><\/svg>\") no-repeat center \/ contain; mask: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'\/><\/svg>\") no-repeat center \/ contain; flex-shrink: 0; }\n.adp-free-strip-btn { flex-shrink: 0; padding: 9px 18px; font-size: 13px; font-weight: 700; color: var(--gray); border: 1px solid var(--border); border-radius: 8px; background: transparent; cursor: pointer; font-family: var(--font); text-decoration: none; transition: border-color 0.2s, color 0.2s; white-space: nowrap; }\n.adp-free-strip-btn:hover { border-color: var(--gray-light); color: var(--white); }\n.adp-plan { border: 1px solid var(--border); border-radius: 20px; padding: 32px 24px; background: var(--bg-card); display: flex; flex-direction: column; position: relative; transition: border-color 0.25s, transform 0.25s; }\n.adp-plan:hover { border-color: rgba(255,255,255,0.15); }\n.adp-plan-popular { border-color: #8B5CF6; background: linear-gradient(180deg, rgba(139,92,246,0.07) 0%, var(--bg-card) 50%); }\n.adp-plan-popular:hover { border-color: #8B5CF6; }\n.adp-plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #8B5CF6; color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 12px; border-radius: 4px; }\n.adp-plan-name { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gray); margin-bottom: 6px; }.adp-plan-tag { font-size: 13px; color: var(--gray-light); margin-bottom: 24px; min-height: 18px; }\n.adp-plan-price-block { margin-bottom: 28px; min-height: 80px; }\n.adp-plan-price { display: none; }\n.adp-plan-price.adp-active { display: block; }\n.adp-plan-price-amount { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }\n.adp-plan-price-currency { font-size: 18px; color: var(--gray-light); font-weight: 600; }\n.adp-plan-price-value { font-size: 40px; font-weight: 800; color: var(--white); line-height: 1; letter-spacing: -0.02em; }\n.adp-plan-price-period { font-size: 13px; color: var(--gray); font-weight: 500; }\n.adp-plan-price-note { font-size: 12px; color: var(--gray); }\n.adp-plan-cta { width: 100%; padding: 13px 18px; border-radius: 8px; font-size: 14px; font-weight: 700; font-family: var(--font); cursor: pointer; border: none; text-decoration: none; display: block; text-align: center; transition: filter 0.2s, background 0.2s, border-color 0.2s; margin-bottom: 28px; }\n.adp-plan-cta-primary { background: #8B5CF6; color: #fff; }\n.adp-plan-cta-primary:hover { filter: brightness(1.1); color: #fff; }\n.adp-plan-cta-secondary { background: var(--white); color: #000; }\n.adp-plan-cta-secondary:hover { filter: brightness(0.92); color: #000; }\n.adp-plan-cta-outline { background: transparent; color: var(--white); border: 1px solid var(--border); }\n.adp-plan-cta-outline:hover { border-color: var(--white); color: var(--white); }\n.adp-plan-licenses-wrap { margin-bottom: 16px; display: none; }\n.adp-plan-licenses-wrap.adp-show { display: block; }\n.adp-plan-licenses-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray); margin-bottom: 6px; }\n.adp-plan-licenses { width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--white); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; }\n.adp-plan-features { list-style: none; --theme-list-indent: 0; padding-inline-start: 0; margin-block-end: 0; flex: 1; }\n.adp-plan-features li { font-size: 13px; color: var(--gray-light); line-height: 1.5; padding: 7px 0 7px 20px; position: relative; }\n.adp-plan-features li::before { content: ''; position: absolute; left: 0; top: 12px; width: 12px; height: 12px; background: var(--accent); -webkit-mask: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'\/><\/svg>\") no-repeat center \/ contain; mask: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'\/><\/svg>\") no-repeat center \/ contain; }\n.adp-plan-features li strong { color: var(--white); font-weight: 700; }\n.adp-plan-fineprint { font-size: 11px; color: var(--gray); margin-top: 18px; text-align: center; }\n\n\/* Comparison *\/\n.adp-compare { padding: 88px 0; border-top: 1px solid var(--border); }\n.adp-compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; margin-top: 40px; }\n.adp-compare-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 700px; }\n.adp-compare-table thead th { background: var(--bg-elevated); padding: 16px 18px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray); border-bottom: 1px solid var(--border); }\n.adp-compare-table thead th:not(:first-child) { text-align: center; }\n.adp-compare-table thead th.adp-th-pop { color: #8B5CF6; }\n.adp-compare-table tbody td { padding: 14px 18px; border-bottom: 1px solid #1a1a28; color: var(--gray-light); vertical-align: middle; }\n.adp-compare-table tbody td:not(:first-child) { text-align: center; }\n.adp-compare-table tbody tr:last-child td { border-bottom: none; }\n.adp-compare-table tbody tr:hover td { background: var(--bg-elevated); }\n.adp-compare-name { font-weight: 600; color: var(--white); }\n.adp-check { color: var(--accent); font-size: 16px; font-weight: 700; }\n.adp-dash { color: var(--gray-dark); font-size: 16px; }\n.adp-compare-table tbody td.adp-td-pop { background: rgba(139,92,246,0.04); }\n\n\/* FAQ *\/\n.adp-faq { padding: 88px 0; border-top: 1px solid var(--border); }\n.adp-faq-list { margin-top: 40px; display: flex; flex-direction: column; gap: 8px; max-width: 820px; margin-left: auto; margin-right: auto; }\n.adp-faq-item { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); overflow: hidden; transition: border-color 0.2s; }\n.adp-faq-item.adp-faq-open { border-color: rgba(255,255,255,0.15); }\n.adp-faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: none; border: none; cursor: pointer; font-family: var(--font); text-align: left; }\n.adp-faq-q { font-size: 15px; font-weight: 700; color: var(--white); line-height: 1.4; }\n.adp-faq-chevron { flex-shrink: 0; width: 18px; height: 18px; color: var(--gray); transition: transform 0.25s ease; }\n.adp-faq-item.adp-faq-open .adp-faq-chevron { transform: rotate(180deg); color: var(--accent); }\n.adp-faq-body { display: none; padding: 0 24px 22px; }\n.adp-faq-a { font-size: 14px; color: var(--gray-light); line-height: 1.75; }\n.adp-faq-a code { background: var(--bg-elevated); padding: 2px 6px; border-radius: 4px; font-size: 12px; color: var(--accent); border: 1px solid var(--border); }\n\n\/* Complete feature list *\/\n.adp-allfeatures { padding: 88px 0; border-top: 1px solid var(--border); }\n.adp-af-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-top: 40px; }\n.adp-af-group { padding: 28px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }\n.adp-af-group:nth-child(3n) { border-right: none; }\n.adp-af-group:nth-last-child(-n+3) { border-bottom: none; }\n.adp-af-group-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: #8B5CF6; margin-bottom: 14px; }\n.adp-af-list { list-style: none; --theme-list-indent: 0; padding-inline-start: 0; margin-block-end: 0; display: flex; flex-direction: column; gap: 8px; }\n.adp-af-list li { font-size: 13px; color: var(--gray-light); line-height: 1.5; padding-left: 14px; position: relative; }\n.adp-af-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--gray-dark); }\n.adp-af-list code { background: var(--bg-elevated); padding: 1px 5px; border-radius: 3px; font-size: 11px; color: var(--accent); border: 1px solid var(--border); font-family: ui-monospace, 'SF Mono', Monaco, Menlo, monospace; }\n\n\/* Live demo *\/\n.adp-demo { padding: 88px 0; border-top: 1px solid var(--border); }\n.adp-demo-wrap { margin-top: 48px; border: 1px solid var(--border); border-radius: 20px; padding: 40px; background: var(--bg-card); overflow: hidden; }\n\n\/* Final CTA *\/\n.adp-final { padding: 88px 0 120px; border-top: 1px solid var(--border); }\n.adp-final-box { border: 1px solid var(--border); border-radius: 24px; padding: 72px 56px; background: var(--bg-card); position: relative; overflow: hidden; text-align: center; }\n.adp-final-box::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 350px; background: radial-gradient(ellipse, rgba(27,153,139,0.14) 0%, transparent 70%); pointer-events: none; }\n.adp-final-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; color: var(--accent); margin-bottom: 20px; display: block; position: relative; }\n.adp-final-title { font-size: clamp(28px, 4vw, 42px); font-weight: 800; color: var(--white); line-height: 1.15; margin-bottom: 18px; position: relative; }\n.adp-final-sub { font-size: 16px; color: var(--gray-light); line-height: 1.7; max-width: 520px; margin: 0 auto 36px; position: relative; }\n.adp-final-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }\n\n\/* Responsive *\/\n@media (max-width: 999.98px) {\n  .adp-container { padding: 0 24px; }\n  .adp-af-grid { grid-template-columns: repeat(2, 1fr); }\n  .adp-af-group:nth-child(3n) { border-right: 1px solid var(--border); }\n  .adp-af-group:nth-child(2n) { border-right: none; }\n  .adp-af-group:nth-last-child(-n+3) { border-bottom: 1px solid var(--border); }\n  .adp-af-group:nth-last-child(-n+2) { border-bottom: none; }\n  .adp-showcase-grid { grid-template-columns: 1fr; gap: 36px; }\n  .adp-story-grid { grid-template-columns: 1fr; gap: 36px; }\n  .adp-story-left { position: static; }\n  .adp-diff-bento { grid-template-columns: 1fr; }\n  .adp-features-grid { grid-template-columns: repeat(2, 1fr); }\n  .adp-code-grid { grid-template-columns: 1fr; gap: 36px; }\n  .adp-how-steps { grid-template-columns: 1fr; gap: 36px; }\n  .adp-how-steps::before { display: none; }\n  .adp-pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }\n  .adp-free-strip { flex-direction: column; align-items: flex-start; gap: 12px; }\n  .adp-trust-items { gap: 24px; }\n  .adp-demo-wrap { padding: 24px; }\n  .adp-hero-image-wrap { padding: 0; }\n}\n\n@media (max-width: 689.98px) {\n  .adp-container { padding: 0 16px; }\n  .adp-hero { padding: 48px 0 32px; }\n  .adp-section,\n  .adp-styles,\n  .adp-features,\n  .adp-how,\n  .adp-pricing,\n  .adp-compare,\n  .adp-faq,\n  .adp-code-section,\n  .adp-story,\n  .adp-diff,\n  .adp-allfeatures,\n  .adp-demo,\n  .adp-ajax-showcase { padding: 56px 0; }\n  .adp-final { padding: 56px 0 72px; }\n  .adp-af-grid { grid-template-columns: 1fr; }\n  .adp-af-group { border-right: none !important; border-bottom: 1px solid var(--border) !important; }\n  .adp-af-group:last-child { border-bottom: none !important; }\n  .adp-features-grid { grid-template-columns: 1fr; }\n  .adp-pricing-grid { grid-template-columns: 1fr; }\n  .adp-hero-btns { flex-direction: column; align-items: stretch; }\n  .adp-hero-btns a, .adp-hero-btns button { text-align: center; }\n  .adp-final-btns { flex-direction: column; align-items: stretch; }\n  .adp-final-box { padding: 40px 20px; }\n  .adp-final-btns a, .adp-final-btns button { text-align: center; }\n  .adp-section-head { margin-bottom: 36px; }\n  .adp-section-head h2 { font-size: clamp(22px, 6vw, 32px); }\n  .adp-diff-card { padding: 28px 22px; }\n  .adp-diff-card-featured { padding: 28px 22px; }\n  .adp-diff-title { font-size: 18px; }\n  .adp-diff-card-featured .adp-diff-title { font-size: 20px; }\n  .adp-story-right p { font-size: 15px; }\n  .adp-story-quote { font-size: 16px; }\n  .adp-demo-wrap { padding: 16px; border-radius: 12px; }\n  .adp-compare-wrap { border-radius: 12px; }\n  .adp-pricing-grid { gap: 12px; }\n  .adp-plan { padding: 28px 20px; }\n  .adp-plan-price-value { font-size: 32px; }\n  .adp-hero-image-wrap { padding: 0; }\n  .adp-feat-card { padding: 24px 20px; }\n  .adp-faq-trigger { padding: 16px 18px; }\n  .adp-faq-body { padding: 0 18px 18px; }\n  .adp-free-strip { padding: 16px; }\n  .adp-free-strip-features { gap: 8px; }\n  .adp-billing-toggle { flex-wrap: wrap; }\n  .adp-trust-items { flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 4px; }\n}\n\n@media (max-width: 560px) {\n  .adp-sticky { bottom: 12px; border-radius: 12px; }\n  .adp-sticky-inner { padding: 12px 16px; }\n  .adp-sticky-text { display: none; }\n  .adp-sticky-btn { flex: 1; text-align: center; }\n  .adp-hero h1 { font-size: clamp(26px, 8vw, 40px); }\n  .adp-hero-sub { font-size: 15px; }\n  .adp-diff-visual { padding: 14px; }\n  .adp-diff-visual-label { font-size: 11px; }\n  .adp-adpt-ajax-bar { gap: 4px; }\n  .adp-inspector-label { width: 64px; }\n\/* Entry animations \u2014 handled by AOS *\/\n<\/style>\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/aos\/2.3.4\/aos.css\" \/>\n\n<div class=\"adp-page\">\n\n  <!-- Sticky CTA -->\n  <div class=\"adp-sticky\" id=\"adpSticky\">\n    <div class=\"adp-sticky-inner\">\n      <p class=\"adp-sticky-text\"><strong>AD Pro Portfolio Grid<\/strong> &middot; Grilles portfolio professionnelles pour WordPress<\/p>\n      <a href=\"#pricing\" class=\"adp-sticky-btn\">Voir les tarifs<\/a>\n    <\/div>\n  <\/div>\n\n  <!-- Hero -->\n  <section class=\"adp-hero\">\n    <div class=\"adp-container\">\n      <div class=\"adp-hero-inner\" data-aos=\"fade-up\">\n        <img decoding=\"async\" src=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2026\/05\/ADPG-Logo.png\" alt=\"AD Pro Portfolio Grid\" style=\"height:100px; width:auto; margin-bottom:32px; pointer-events:none;\" title=\"\">\n        <h1>Le plugin de portfolio qui <span class=\"adp-grad\">met vos projets en valeur<\/span>.<\/h1>\n        <p class=\"adp-hero-sub\">Le plugin WordPress portfolio pour les cr\u00e9atifs qui refusent les compromis. Filtrage AJAX, projets \u00e9pingl\u00e9s, contr\u00f4le visuel total \u2014 sans toucher \u00e0 une ligne de code.<\/p>\n        <div class=\"adp-hero-btns\">\n          <a href=\"#pricing\" class=\"adp-btn-primary\">Voir les tarifs<\/a>\n          <a href=\"#pricing\" class=\"adp-btn-ghost\">Obtenir le plugin<\/a>\n        <\/div>\n      <\/div>\n      <div class=\"adp-hero-image-wrap\" data-aos=\"fade-up\" data-aos-delay=\"150\">\n        <div class=\"adp-hero-image\" style=\"background:none;\">\n          <img decoding=\"async\" src=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2026\/05\/portfolio-grid-hero-img.webp\" alt=\"AD Pro Portfolio Grid \u2014 admin interface preview\" style=\"width:100%;height:100%;object-fit:cover;display:block;border-radius:20px;\" title=\"\">\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Trust band -->\n  <section class=\"adp-trust\">\n    <div class=\"adp-container\">\n      <p class=\"adp-trust-label\">Con\u00e7u pour les vrais sites WordPress<\/p>\n      <div class=\"adp-trust-items\" data-aos=\"fade-up\">\n        <div class=\"adp-trust-item\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n          Tous les types de contenu\n        <\/div>\n        <div class=\"adp-trust-item\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n          Compatible Gutenberg\n        <\/div>\n        <div class=\"adp-trust-item\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n          Filtrage &amp; pagination AJAX\n        <\/div>\n        <div class=\"adp-trust-item\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n          Compatible plugins de cache\n        <\/div>\n        <div class=\"adp-trust-item\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n          Ind\u00e9pendant du th\u00e8me\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Story -->\n  <section class=\"adp-story\">\n    <div class=\"adp-container\">\n      <div class=\"adp-story-grid\">\n\n        <div class=\"adp-story-left\" data-aos=\"fade-up\">\n          <p class=\"adp-story-quote\">J&rsquo;avais besoin d&rsquo;un plugin WordPress portfolio qui fasse exactement ce que je voulais. Je n&rsquo;en ai pas trouv\u00e9. Alors je l&rsquo;ai construit.<\/p>\n          <div class=\"adp-story-author\">\n            <div class=\"adp-story-avatar\">\n              <img decoding=\"async\" src=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2025\/12\/Altay-avatar-round.webp\" alt=\"Altay Dagistan\" title=\"\">\n            <\/div>\n            <div>\n              <p class=\"adp-story-name\">Altay Dagistan<\/p>\n              <p class=\"adp-story-role\">Brand designer &amp; directeur artistique<br>freelance \u00b7 Paris<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"adp-story-right\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n          <p>Je suis <strong>brand designer et directeur artistique freelance<\/strong> depuis plus de 15 ans. Mon portfolio WordPress, c&rsquo;est ma vitrine principale. C&rsquo;est ce que les clients voient en premier, ce qui d\u00e9cide si on travaille ensemble ou pas.<\/p>\n\n          <p>Comme la plupart des designers qui utilisent WordPress, j&rsquo;ai test\u00e9 les solutions existantes. Soit elles \u00e9taient trop simples et ne donnaient aucun contr\u00f4le visuel, soit elles \u00e9taient des usines \u00e0 gaz d\u00e9pendantes d&rsquo;un page builder entier. Aucune ne permettait de <strong>choisir pr\u00e9cis\u00e9ment quels projets apparaissent en premier<\/strong>. Aucune ne synchronisait l&rsquo;\u00e9tat du filtre avec l&rsquo;URL. Aucune ne laissait configurer un rendu diff\u00e9rent selon le contexte, sans dupliquer tout le setup.<\/p>\n\n          <p>AD Pro Portfolio Grid est le plugin que j&rsquo;aurais voulu trouver. Il tourne sur mon propre site WordPress. Chaque fonctionnalit\u00e9 existe parce que j&rsquo;en avais besoin pour pr\u00e9senter mon travail correctement : le filtrage AJAX pour naviguer entre les cat\u00e9gories sans rechargement, l&rsquo;\u00e9pinglage de projets pour mettre les plus pertinents en t\u00eate de grille, les overrides par grille pour adapter le rendu \u00e0 chaque contexte sans repartir de z\u00e9ro.<\/p>\n\n          <p>Si vous \u00eates designer, d\u00e9veloppeur ou agence et que vous g\u00e9rez des portfolios WordPress, ce plugin a \u00e9t\u00e9 con\u00e7u avec vos contraintes r\u00e9elles en t\u00eate.<\/p>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Differentiators -->\n  <section class=\"adp-diff\">\n    <div class=\"adp-container\">\n      <div class=\"adp-section-head\" data-aos=\"fade-up\">\n        <p class=\"adp-section-eyebrow\">Ce qui le distingue<\/p>\n        <h2>Des fonctionnalit\u00e9s que la plupart des plugins portfolio n&rsquo;ont pas.<\/h2>\n        <p class=\"adp-section-sub\">Quatre fonctionnalit\u00e9s introuvables dans la plupart des plugins portfolio WordPress \u2014 ou disponibles uniquement dans des solutions bien plus complexes.<\/p>\n      <\/div>\n\n      <div class=\"adp-diff-bento\">\n\n        <div class=\"adp-diff-card adp-diff-card-featured\" data-aos=\"fade-up\">\n          <div class=\"adp-diff-thumb\">\n            <div class=\"adpt-search\">\n              <span class=\"adpt-search-icon\">\u2315<\/span>\n              <span class=\"adpt-search-text\">Identit\u00e9 visuelle Fintech&#8230;<\/span>\n              <span class=\"adpt-search-cursor\"><\/span>\n            <\/div>\n            <div class=\"adpt-dropdown\">\n              <div class=\"adpt-result adpt-result-selected\">\n                <div class=\"adpt-result-check\">\u2713<\/div>\n                Identit\u00e9 visuelle \u2014 Startup Fintech\n              <\/div>\n              <div class=\"adpt-result\">\n                <div class=\"adpt-result-dot\"><\/div>\n                Rapport annuel 2024\n              <\/div>\n              <div class=\"adpt-result\">\n                <div class=\"adpt-result-dot\"><\/div>\n                Refonte web \u2014 SaaS Platform\n              <\/div>\n            <\/div>\n            <div class=\"adpt-pin-list\">\n              <div class=\"adpt-pin-row adpt-pin-active\">\n                <div class=\"adpt-drag-handle\"><span><\/span><span><\/span><span><\/span><\/div>\n                <span class=\"adpt-pin-icon\">\ud83d\udccc<\/span>\n                <span class=\"adpt-pin-label\">Identit\u00e9 visuelle \u2014 Startup Fintech<\/span>\n                <span class=\"adpt-pin-badge\">\u00c9pingl\u00e9<\/span>\n              <\/div>\n              <div class=\"adpt-pin-row adpt-pin-active\">\n                <div class=\"adpt-drag-handle\"><span><\/span><span><\/span><span><\/span><\/div>\n                <span class=\"adpt-pin-icon\">\ud83d\udccc<\/span>\n                <span class=\"adpt-pin-label\">Rapport annuel \u2014 Groupe industriel<\/span>\n                <span class=\"adpt-pin-badge\">\u00c9pingl\u00e9<\/span>\n              <\/div>\n              <div class=\"adpt-pin-row adpt-pin-row-muted\">\n                <div class=\"adpt-drag-handle\"><span><\/span><span><\/span><span><\/span><\/div>\n                <span class=\"adpt-pin-label\" style=\"margin-left:18px;\">Refonte web \u2014 Plateforme SaaS<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n          <span class=\"adp-diff-tag\">Fonctionnalit\u00e9 premium majeure<\/span>\n          <h3 class=\"adp-diff-title\">\u00c9pinglage de projets mis en avant<\/h3>\n          <p class=\"adp-diff-desc\">Contr\u00f4lez exactement quels projets apparaissent en premier, ind\u00e9pendamment de la date de publication ou de l&rsquo;ordre de tri. Tapez dans le champ de recherche, s\u00e9lectionnez un projet en un clic, puis glissez-d\u00e9posez pour r\u00e9organiser. Vos meilleurs projets en haut de la grille, page 1.<\/p>\n          <ul class=\"adp-diff-points\">\n            <li><strong>Recherche par titre<\/strong> et s\u00e9lection en un clic. Pas d&rsquo;ID, pas de slug, pas de devinette.<\/li>\n            <li><strong>Glisser-d\u00e9poser<\/strong> pour r\u00e9organiser les projets \u00e9pingl\u00e9s dans l&rsquo;ordre voulu.<\/li>\n            <li><strong>Deux comportements d&rsquo;\u00e9pinglage :<\/strong> reste \u00e9pingl\u00e9 avec ou sans filtre actif.<\/li>\n            <li><strong>Exclu du comptage de pagination<\/strong> pour ne jamais perturber la num\u00e9rotation des pages.<\/li>\n            <li><strong>Contr\u00f4le par grille<\/strong> : des grilles diff\u00e9rentes \u00e9pinglent des projets diff\u00e9rents.<\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- AJAX Filtering + Pagination -->\n        <div class=\"adp-diff-card\" data-aos=\"fade-up\">\n          <div class=\"adp-diff-thumb\">\n            <div class=\"adpt-ajax-bar\">\n              <div class=\"adpt-pill adpt-pill-active\">Tous <span class=\"adpt-pill-count\">24<\/span><\/div>\n              <div class=\"adpt-pill\">Branding <span class=\"adpt-pill-count\">8<\/span><\/div>\n              <div class=\"adpt-pill\">Web <span class=\"adpt-pill-count\">7<\/span><\/div>\n              <div class=\"adpt-pill\">Print <span class=\"adpt-pill-count\">5<\/span><\/div>\n            <\/div>\n            <div class=\"adpt-grid-mini\">\n              <div class=\"adpt-card-mini adpt-card-mini-pin\">\n                <div class=\"adpt-card-mini-img\" style=\"background:linear-gradient(135deg,#1a2a1a,#253d25);\"><\/div>\n                <div class=\"adpt-card-mini-body\"><div class=\"adpt-card-mini-title\"><\/div><div class=\"adpt-card-mini-cat\"><\/div><\/div>\n              <\/div>\n              <div class=\"adpt-card-mini\">\n                <div class=\"adpt-card-mini-img\" style=\"background:linear-gradient(135deg,#1a1a2a,#222240);\"><\/div>\n                <div class=\"adpt-card-mini-body\"><div class=\"adpt-card-mini-title\"><\/div><div class=\"adpt-card-mini-cat\"><\/div><\/div>\n              <\/div>\n              <div class=\"adpt-card-mini\">\n                <div class=\"adpt-card-mini-img\" style=\"background:linear-gradient(135deg,#2a1a1a,#3a2020);\"><\/div>\n                <div class=\"adpt-card-mini-body\"><div class=\"adpt-card-mini-title\"><\/div><div class=\"adpt-card-mini-cat\"><\/div><\/div>\n              <\/div>\n            <\/div>\n            <div class=\"adpt-ajax-status\">\n              <div class=\"adpt-ajax-dot\"><\/div>\n              <span class=\"adpt-ajax-status-text\">Mis \u00e0 jour instantan\u00e9ment \u2014 sans rechargement de page<\/span>\n            <\/div>\n          <\/div>\n          <span class=\"adp-diff-tag\">Sans rechargement de page<\/span>\n          <span class=\"adp-diff-icon\">\u26a1<\/span>\n          <h3 class=\"adp-diff-title\">Filtrage et pagination AJAX<\/h3>\n          <p class=\"adp-diff-desc\">La plupart des plugins portfolio rechargent la page au filtrage ou au changement de page. AD Pro le fait en AJAX : instantan\u00e9, fluide, sans flash. La grille se met \u00e0 jour sur place, l&rsquo;URL reste synchronis\u00e9e, et l&rsquo;historique du navigateur fonctionne normalement.<\/p>\n          <ul class=\"adp-diff-points\">\n            <li><strong>Aucun rechargement<\/strong> au filtrage ou \u00e0 la pagination : la grille se met \u00e0 jour en place.<\/li>\n            <li><strong>Nombre de posts par terme<\/strong> affich\u00e9 dans le menu d\u00e9roulant.<\/li>\n            <li><strong>Six ordres de tri<\/strong> dont al\u00e9atoire \u00e0 chaque chargement.<\/li>\n            <li><strong>D\u00e9filement fluide<\/strong> vers la grille au changement de page.<\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- URL-Based Filtering -->\n        <div class=\"adp-diff-card\" data-aos=\"fade-up\">\n          <div class=\"adp-diff-thumb\">\n            <div class=\"adpt-browser\">\n              <div class=\"adpt-browser-bar\">\n                <div class=\"adpt-browser-dots\">\n                  <div class=\"adpt-browser-dot\" style=\"background:#ff5f57;\"><\/div>\n                  <div class=\"adpt-browser-dot\" style=\"background:#febc2e;\"><\/div>\n                  <div class=\"adpt-browser-dot\" style=\"background:#1b998b;\"><\/div>\n                <\/div>\n                <div class=\"adpt-url-bar\">\n                  <span style=\"color:var(--gray);\">votresite.com\/portfolio\/<\/span><span class=\"adpt-url-param-hl\">?ad_filter=branding<\/span>\n                <\/div>\n              <\/div>\n              <div class=\"adpt-browser-content\">\n                <div class=\"adpt-browser-filter-row\">\n                  <div class=\"adpt-pill adpt-pill-active\" style=\"font-size:10px; padding:3px 8px;\">Branding <span class=\"adpt-pill-count\">8<\/span><\/div>\n                  <div class=\"adpt-pill\" style=\"font-size:10px; padding:3px 8px;\">Web<\/div>\n                  <div class=\"adpt-pill\" style=\"font-size:10px; padding:3px 8px;\">Print<\/div>\n                <\/div>\n                <div class=\"adpt-browser-grid\">\n                  <div class=\"adpt-browser-card\" style=\"background:linear-gradient(135deg,#1a2a1a,#253d25);\"><\/div>\n                  <div class=\"adpt-browser-card\" style=\"background:linear-gradient(135deg,#1a1a2a,#222240);\"><\/div>\n                  <div class=\"adpt-browser-card\" style=\"background:linear-gradient(135deg,#2a2a1a,#3a3a20);\"><\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"adpt-share-row\">\n              <div class=\"adpt-share-box\">votresite.com\/portfolio\/?ad_filter=branding<\/div>\n              <div class=\"adpt-share-btn\">Partager<\/div>\n            <\/div>\n          <\/div>\n          <span class=\"adp-diff-tag\">Fonctionnalit\u00e9 premium<\/span>\n          <span class=\"adp-diff-icon\">\ud83d\udd17<\/span>\n          <h3 class=\"adp-diff-title\">Filtrage par URL<\/h3>\n          <p class=\"adp-diff-desc\">L&rsquo;\u00e9tat du filtre est dans l&rsquo;URL. Partagez une vue filtr\u00e9e, mettez-la en favori, ou envoyez un lien directement vers une cat\u00e9gorie de projets. La grille s&rsquo;ouvre avec le bon filtre d\u00e9j\u00e0 actif.<\/p>\n          <ul class=\"adp-diff-points\">\n            <li>Retour et avance du navigateur naviguent entre les \u00e9tats de filtre.<\/li>\n            <li>Envoyez un lien direct \u00e0 un client vers sa cat\u00e9gorie de projets.<\/li>\n            <li>Param\u00e8tre d&rsquo;URL lisible et propre.<\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- Design Controls -->\n        <div class=\"adp-diff-card\" data-aos=\"fade-up\">\n          <div class=\"adp-diff-thumb\">\n            <div class=\"adpt-inspector\">\n              <div class=\"adpt-inspector-row\">\n                <span class=\"adpt-inspector-label\">Couleur titre<\/span>\n                <div class=\"adpt-swatch\" style=\"background:#ffffff;\"><\/div>\n                <span class=\"adpt-inspector-value\">#FFFFFF<\/span>\n                <span class=\"adpt-inspector-tag\">18px \u00b7 700<\/span>\n              <\/div>\n              <div class=\"adpt-inspector-row\">\n                <span class=\"adpt-inspector-label\">Fond carte<\/span>\n                <div class=\"adpt-swatch\" style=\"background:#0e0e1a;\"><\/div>\n                <span class=\"adpt-inspector-value\">#0E0E1A<\/span>\n                <span class=\"adpt-inspector-tag\">Bordure 1px<\/span>\n              <\/div>\n              <div class=\"adpt-inspector-row\">\n                <span class=\"adpt-inspector-label\">Ombre port\u00e9e<\/span>\n                <div class=\"adpt-shadow-preview\"><\/div>\n                <span class=\"adpt-inspector-value\">0px 8px 32px<\/span>\n                <span class=\"adpt-inspector-tag\">20%<\/span>\n              <\/div>\n              <div class=\"adpt-inspector-row\">\n                <span class=\"adpt-inspector-label\">Rayon bord.<\/span>\n                <div class=\"adpt-radius-preview\"><\/div>\n                <span class=\"adpt-inspector-value\">12px<\/span>\n              <\/div>\n              <div class=\"adpt-inspector-row\">\n                <span class=\"adpt-inspector-label\">Gap colonnes<\/span>\n                <div class=\"adpt-gap-preview\">\n                  <div class=\"adpt-gap-block\"><\/div>\n                  <div class=\"adpt-gap-block\"><\/div>\n                  <div class=\"adpt-gap-block\"><\/div>\n                <\/div>\n                <span class=\"adpt-inspector-value\">24px<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n          <span class=\"adp-diff-tag\">Sans code<\/span>\n          <span class=\"adp-diff-icon\">\ud83c\udfa8<\/span>\n          <h3 class=\"adp-diff-title\">Contr\u00f4le visuel total<\/h3>\n          <p class=\"adp-diff-desc\">Couleurs, tailles, graisses, rayons, ombres et espacements configurables depuis l&rsquo;administration. Pas de CSS personnalis\u00e9, pas de th\u00e8me enfant. Les utilisateurs d&rsquo;Elementor et Bricks se sentent imm\u00e9diatement \u00e0 l&rsquo;aise.<\/p>\n          <ul class=\"adp-diff-points\">\n            <li>Typographie : couleur, taille, graisse par \u00e9l\u00e9ment.<\/li>\n            <li>Cartes : fond, bordure, ombre port\u00e9e (X, Y, flou, diffusion).<\/li>\n            <li>Boutons : texte, fond, couleur au survol, rayon de bordure.<\/li>\n          <\/ul>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Features -->\n  <section class=\"adp-features\">\n    <div class=\"adp-container\">\n      <div class=\"adp-section-head\" data-aos=\"fade-up\">\n        <p class=\"adp-section-eyebrow\">Fonctionnalit\u00e9s<\/p>\n        <h2>Con\u00e7u par un designer, pour les designers.<\/h2>\n        <p class=\"adp-section-sub\">Tout ce dont un designer a besoin pour pr\u00e9senter son travail sur WordPress, dans un seul plugin.<\/p>\n      <\/div>\n      <div class=\"adp-features-grid\">\n\n        <div class=\"adp-feat-card\" data-aos=\"fade-up\">\n          <div class=\"adp-feat-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>\n          <\/div>\n          <h3 class=\"adp-feat-title\">Overrides par grille<\/h3>\n          <p class=\"adp-feat-desc\">D\u00e9finissez les r\u00e9glages globaux une fois. Surchargez couleurs, typographie, espacement, mise en page et comportement ind\u00e9pendamment sur chaque grille. Un plugin, des rendus illimit\u00e9s. Sans CSS ni th\u00e8me enfant.<\/p>\n        <\/div>\n\n        <div class=\"adp-feat-card\" data-aos=\"fade-up\">\n          <div class=\"adp-feat-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/><\/svg>\n          <\/div>\n          <h3 class=\"adp-feat-title\">Interface admin claire<\/h3>\n          <p class=\"adp-feat-desc\">La plupart des plugins WordPress ressemblent \u00e0 des logiciels gouvernementaux abandonn\u00e9s. Le constructeur de grilles est structur\u00e9, \u00e9tiquet\u00e9 et responsive. Configurez une grille en quelques minutes.<\/p>\n        <\/div>\n\n        <div class=\"adp-feat-card\" data-aos=\"fade-up\">\n          <div class=\"adp-feat-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/><\/svg>\n          <\/div>\n          <h3 class=\"adp-feat-title\">Performances optimis\u00e9es<\/h3>\n          <p class=\"adp-feat-desc\">Lazy loading natif sur toutes les images. Intersection Observer pour la visibilit\u00e9 mobile. Cache-busting sur les requ\u00eates AJAX. Test\u00e9 avec WP Rocket, LiteSpeed, W3TC et CloudFlare. La grille ne ralentit pas votre site.<\/p>\n        <\/div>\n\n        <div class=\"adp-feat-card\" data-aos=\"fade-up\">\n          <div class=\"adp-feat-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg>\n          <\/div>\n          <h3 class=\"adp-feat-title\">Gutenberg + Shortcode<\/h3>\n          <p class=\"adp-feat-desc\">Ins\u00e9rez n&rsquo;importe quelle grille sauvegard\u00e9e depuis l&rsquo;\u00e9diteur de blocs via un menu d\u00e9roulant. Ou utilisez le shortcode partout : \u00e9diteur classique, page builders, widgets. Tous les r\u00e9glages disponibles en attribut inline.<\/p>\n        <\/div>\n\n        <div class=\"adp-feat-card\" data-aos=\"fade-up\">\n          <div class=\"adp-feat-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14\"\/><\/svg>\n          <\/div>\n          <h3 class=\"adp-feat-title\">Trois styles de grille<\/h3>\n          <p class=\"adp-feat-desc\">Card, Overlay et Simple. Trois mises en page distinctes qui couvrent la majorit\u00e9 des cas : agences, photographes, architectes, freelances. M\u00e9langez les styles entre les grilles du m\u00eame site.<\/p>\n        <\/div>\n\n        <div class=\"adp-feat-card\" data-aos=\"fade-up\">\n          <div class=\"adp-feat-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\n          <\/div>\n          <h3 class=\"adp-feat-title\">Ind\u00e9pendant du th\u00e8me<\/h3>\n          <p class=\"adp-feat-desc\">CSS scop\u00e9 qui n&rsquo;interf\u00e8re pas avec votre th\u00e8me. Fonctionne avec Blocksy, Astra, Kadence, GeneratePress, Hello, Bricks, Elementor et tout th\u00e8me de blocs.<\/p>\n        <\/div>\n\n  <\/section>\n\n  <!-- Live demo -->\n  <section class=\"adp-demo\">\n    <div class=\"adp-container\">\n      <div class=\"adp-section-head\" data-aos=\"fade-up\">\n        <p class=\"adp-section-eyebrow\">D\u00e9mo en direct<\/p>\n        <h2>Le plugin en action.<\/h2>\n        <p class=\"adp-section-sub\">La grille ci-dessous tourne sur ce site avec AD Pro Portfolio Grid. Filtrage, pagination et \u00e9pinglage de projets activ\u00e9s.<\/p>\n      <\/div>\n      <div class=\"adp-demo-wrap\" data-aos=\"fade-up\">\n        <!-- DEBUG: Grid Style = card -->\n<!-- DEBUG: Excerpt Length = 35 (from_args: NULL, from_global: 35) -->\n<div id=\"ad-pro-portfolio-grid-6a21c3e550fe1\" class=\"ad-pro-portfolio-grid-container grid-style-card\" \n    data-grid-id=\"grid_1767351884_3425\"\n    data-post-type=\"portfolio_page\"\n    data-paged=\"1\"\n        data-taxonomy=\"portfolio_category\"\n        >\n    <style>\n        #ad-pro-portfolio-grid-6a21c3e550fe1 {\n                    max-width: 100%;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-portfolio-grid {\n                    column-gap: 40px;\n                    row-gap: 40px;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-portfolio-pagination {\n                    margin-top: 40px;\n                    margin-bottom: 0px;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-portfolio-pagination .page-numbers {\n                    font-size: 14px;\n                    font-weight: normal;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-portfolio-item {\n                    background-color: #0a0a12 !important;\n                    border: 1px solid #282828 !important;\n                    border-radius: 8px !important;\n                    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15) !important;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-portfolio-item .item-title {\n                    color: #ffffff;\n                    font-size: 16px;\n                    font-weight: bold;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-portfolio-item .item-category {\n                    color: #4cb731;\n                    font-size: 14px;\n                    font-weight: normal;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-portfolio-item .item-excerpt {\n                    color: #d3d3d3;\n                    font-size: 14px;\n                    font-weight: normal;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-portfolio-item .item-image {\n                    position: relative;\n                    width: 100%;\n                    padding-top: 66.67%; \/* 3:2 aspect ratio *\/\n                    overflow: hidden;\n                    border-radius: 8px 8px 0 0;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-portfolio-item .item-image img {\n                    position: absolute;\n                    top: 0;\n                    left: 0;\n                    width: 100%;\n                    height: 100%;\n                    object-fit: cover;\n                    border-radius: 8px 8px 0 0;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-portfolio-item .ad-pro-portfolio-item-content {\n                    padding: 20px;\n                    position: relative;\n                    z-index: 5;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-portfolio-pagination .page-numbers {\n                    background-color: rgba(10, 10, 18, 1) !important;\n                    color: #ffffff !important;\n                    border-color: #545454 !important;\n                    border-radius: 5px !important;\n                    backdrop-filter: blur(0px) !important;\n                    -webkit-backdrop-filter: blur(0px) !important;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-portfolio-pagination .page-numbers.current {\n                    background-color: rgba(76, 183, 49, 1) !important;\n                    color:  !important;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-portfolio-pagination .page-numbers:hover {\n                    background-color: rgba(255, 255, 255, 1) !important;\n                    color: #000000 !important;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-filter-dropdown {\n                    background-color: rgba(10, 10, 18, 1) !important;\n                    color:  !important;\n                    border-color: #282828 !important;\n                    border-radius: 5px !important;\n                    font-size: 16px !important;\n                    backdrop-filter: blur(0px) !important;\n                    -webkit-backdrop-filter: blur(0px) !important;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-filter-dropdown:hover {\n                    background-color:  !important;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-filter-dropdown:focus {\n                    border-color:  !important;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-filter-dropdown option {\n                    background-color: rgba(255, 255, 255, 1) !important;\n                    color: #333333 !important;\n                }\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-filter-dropdown option:hover,\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-filter-dropdown option:focus,\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-filter-dropdown option:checked,\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-filter-dropdown option:selected {\n                    background-color: rgba(248, 249, 250, 1) !important;\n                    color: #333333 !important;\n                }\n                \/* Additional browser-specific selectors *\/\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-filter-dropdown option:active {\n                    background-color: rgba(248, 249, 250, 1) !important;\n                    color: #333333 !important;\n                }\n                \/* Webkit browsers *\/\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-filter-dropdown option::-webkit-scrollbar-thumb {\n                    background-color: rgba(248, 249, 250, 1) !important;\n                }\n                \/* Firefox *\/\n                #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-filter-dropdown option::-moz-selection {\n                    background-color: rgba(248, 249, 250, 1) !important;\n                    color: #333333 !important;\n                }\n\n                \/* Mobile Text Alignment *\/\n                @media (max-width: 768px) {\n                    #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-portfolio-item .item-title,\n                    #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-portfolio-item .item-category,\n                    #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-portfolio-item .item-excerpt,\n                    #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-portfolio-item .ad-pro-portfolio-item-button-wrapper {\n                        text-align: center !important;\n                    }\n                    #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-filter-dropdown,\n                    #ad-pro-portfolio-grid-6a21c3e550fe1 .ad-pro-filter-dropdown option {\n                        text-align: left !important;\n                    }\n                }    <\/style>\n    \n    \n        \n                    \n                    <div class=\"ad-pro-portfolio-filter\">\n                <select class=\"ad-pro-filter-dropdown\">\n                    <option value=\"0\" data-taxonomy=\"portfolio_category\" data-slug=\"\">Toutes les cat\u00e9gories<\/option>\n                                            <option value=\"185\"\n                            data-taxonomy=\"portfolio_category\"\n                            data-slug=\"art-illustration\"\n                            >\n                            Art &amp; Illustration (18)\n                        <\/option>\n                                            <option value=\"10\"\n                            data-taxonomy=\"portfolio_category\"\n                            data-slug=\"design-editorial\"\n                            >\n                            Design \u00e9ditorial (25)\n                        <\/option>\n                                            <option value=\"184\"\n                            data-taxonomy=\"portfolio_category\"\n                            data-slug=\"digital\"\n                            >\n                            Digital (12)\n                        <\/option>\n                                            <option value=\"106\"\n                            data-taxonomy=\"portfolio_category\"\n                            data-slug=\"direction-artistique\"\n                            >\n                            Direction artistique (9)\n                        <\/option>\n                                            <option value=\"3\"\n                            data-taxonomy=\"portfolio_category\"\n                            data-slug=\"identite-visuelle\"\n                            >\n                            Identit\u00e9 visuelle (17)\n                        <\/option>\n                                            <option value=\"137\"\n                            data-taxonomy=\"portfolio_category\"\n                            data-slug=\"print-design\"\n                            >\n                            Print design (68)\n                        <\/option>\n                                            <option value=\"186\"\n                            data-taxonomy=\"portfolio_category\"\n                            data-slug=\"stand-kakemono\"\n                            >\n                            Stand &amp; Kak\u00e9mono (14)\n                        <\/option>\n                                            <option value=\"187\"\n                            data-taxonomy=\"portfolio_category\"\n                            data-slug=\"video-motion\"\n                            >\n                            Vid\u00e9o &amp; Motion (4)\n                        <\/option>\n                                            <option value=\"98\"\n                            data-taxonomy=\"portfolio_category\"\n                            data-slug=\"web-design\"\n                            >\n                            Web design (14)\n                        <\/option>\n                                    <\/select>\n            <\/div>\n                \n    <div class=\"ad-pro-portfolio-grid\">\n                                    <div class=\"ad-pro-portfolio-item hover-zoom\">\n                    <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/roll-up-banner-ubi-solutions\/\" class=\"item-link\">\n                                                    <div class=\"item-image\">\n                                <img decoding=\"async\" width=\"600\" height=\"365\" src=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2021\/11\/ubi-solutions-roll-up-banner-design.jpg\" class=\"portfolio-grid-image wp-post-image\" alt=\"Kak\u00e9mono \u2013 UBI Solutions\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2021\/11\/ubi-solutions-roll-up-banner-design.jpg 600w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2021\/11\/ubi-solutions-roll-up-banner-design-18x12.jpg 18w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\">                            <\/div>\n                                                \n                        <div class=\"ad-pro-portfolio-item-content\">\n                                                            <h3 class=\"item-title\">Kak\u00e9mono \u2013 UBI Solutions<\/h3>\n                                                        \n                                                                                                    <div class=\"item-category\">Stand &amp; Kak\u00e9mono<\/div>\n                                                                                            \n                                                            <div class=\"item-excerpt\">Cr\u00e9ation graphique d\u2019un roll-up sur-mesure pour UBI Solutions, entreprise sp\u00e9cialis\u00e9e dans la tra\u00e7abilit\u00e9 par RFID. Ce support de communication grand format a \u00e9t\u00e9 con\u00e7u pour une utilisation lors de salons professionnels et \u00e9v\u00e9nements B2B. L\u2019objectif&hellip;<\/div>\n                                                    <\/div>\n                    <\/a>\n                    \n                                            <div class=\"ad-pro-portfolio-item-button-wrapper\">\n                            <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/roll-up-banner-ubi-solutions\/\" class=\"ad-pro-portfolio-item-button\" style=\"background-color: #ededed; color: #000000; --button-hover-color: #ffffff; font-size: 15px; font-weight: 500; border-radius: 4px;\">\n                                D\u00e9couvrir ce projet &gt;                            <\/a>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"ad-pro-portfolio-item hover-zoom\">\n                    <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/stand-design-cocolabs-tech-for-retail\/\" class=\"item-link\">\n                                                    <div class=\"item-image\">\n                                <img decoding=\"async\" width=\"593\" height=\"400\" src=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2023\/11\/1-01.jpg\" class=\"portfolio-grid-image wp-post-image\" alt=\"Habillage Stand Cocolabs &#8211; Tech for Retail\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2023\/11\/1-01.jpg 1600w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2023\/11\/1-01-768x518.jpg 768w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2023\/11\/1-01-1536x1037.jpg 1536w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2023\/11\/1-01-18x12.jpg 18w\" sizes=\"auto, (max-width: 593px) 100vw, 593px\">                            <\/div>\n                                                \n                        <div class=\"ad-pro-portfolio-item-content\">\n                                                            <h3 class=\"item-title\">Habillage Stand Cocolabs &#8211; Tech for Retail<\/h3>\n                                                        \n                                                                                                    <div class=\"item-category\">Stand &amp; Kak\u00e9mono<\/div>\n                                                                                            \n                                                            <div class=\"item-excerpt\">Habillage Stand pour Cocolabs \u00e0 L&rsquo;Expo \u00ab\u00a0Tech for Retail\u00a0\u00bb. Tech for Retail est le salon europ\u00e9en d\u00e9di\u00e9 aux innovations technologiques et \u00e9co-responsables dans le secteur du commerce de d\u00e9tail. Cocolabs est le leader dans la&hellip;<\/div>\n                                                    <\/div>\n                    <\/a>\n                    \n                                            <div class=\"ad-pro-portfolio-item-button-wrapper\">\n                            <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/stand-design-cocolabs-tech-for-retail\/\" class=\"ad-pro-portfolio-item-button\" style=\"background-color: #ededed; color: #000000; --button-hover-color: #ffffff; font-size: 15px; font-weight: 500; border-radius: 4px;\">\n                                D\u00e9couvrir ce projet &gt;                            <\/a>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"ad-pro-portfolio-item hover-zoom\">\n                    <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/ubi-solutions-sales-brochure\/\" class=\"item-link\">\n                                                    <div class=\"item-image\">\n                                <img decoding=\"async\" width=\"600\" height=\"400\" src=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2024\/02\/IMG_0274.jpg\" class=\"portfolio-grid-image wp-post-image\" alt=\"Plaquette Commerciale &#8211; RFID \/ BLE \/ GPS\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2024\/02\/IMG_0274.jpg 1440w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2024\/02\/IMG_0274-768x512.jpg 768w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2024\/02\/IMG_0274-18x12.jpg 18w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\">                            <\/div>\n                                                \n                        <div class=\"ad-pro-portfolio-item-content\">\n                                                            <h3 class=\"item-title\">Plaquette Commerciale &#8211; RFID \/ BLE \/ GPS<\/h3>\n                                                        \n                                                                                                    <div class=\"item-category\">Print design<\/div>\n                                                                                            \n                                                            <div class=\"item-excerpt\">Cr\u00e9ation d\u2019un d\u00e9pliant 3 volets pour Ubi Solutions, entreprise sp\u00e9cialis\u00e9e dans les solutions IoT et RFID. L\u2019objectif \u00e9tait de pr\u00e9senter de mani\u00e8re claire et impactante les services et cas d\u2019usage de la marque, dans un&hellip;<\/div>\n                                                    <\/div>\n                    <\/a>\n                    \n                                            <div class=\"ad-pro-portfolio-item-button-wrapper\">\n                            <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/ubi-solutions-sales-brochure\/\" class=\"ad-pro-portfolio-item-button\" style=\"background-color: #ededed; color: #000000; --button-hover-color: #ffffff; font-size: 15px; font-weight: 500; border-radius: 4px;\">\n                                D\u00e9couvrir ce projet &gt;                            <\/a>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"ad-pro-portfolio-item hover-zoom\">\n                    <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/catalog-services-acg-cybersecurity\/\" class=\"item-link\">\n                                                    <div class=\"item-image\">\n                                <img decoding=\"async\" width=\"533\" height=\"400\" src=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2022\/06\/25.jpg\" class=\"portfolio-grid-image wp-post-image\" alt=\"Catalogue de services ACG Cybersecurity\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2022\/06\/25.jpg 1440w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2022\/06\/25-800x600.jpg 800w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2022\/06\/25-768x576.jpg 768w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2022\/06\/25-1200x900.jpg 1200w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2022\/06\/25-16x12.jpg 16w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2022\/06\/25-700x525.jpg 700w\" sizes=\"auto, (max-width: 533px) 100vw, 533px\">                            <\/div>\n                                                \n                        <div class=\"ad-pro-portfolio-item-content\">\n                                                            <h3 class=\"item-title\">Catalogue de services ACG Cybersecurity<\/h3>\n                                                        \n                                                                                                    <div class=\"item-category\">Design \u00e9ditorial, Print design<\/div>\n                                                                                            \n                                                            <div class=\"item-excerpt\">Cr\u00e9ation d\u2019un catalogue print et digital pour ACG Cybersecurity, cabinet sp\u00e9cialis\u00e9 dans la cybers\u00e9curit\u00e9 des organisations publiques et priv\u00e9es. L\u2019objectif : structurer et pr\u00e9senter de mani\u00e8re claire l\u2019ensemble des offres de services, tout en affirmant&hellip;<\/div>\n                                                    <\/div>\n                    <\/a>\n                    \n                                            <div class=\"ad-pro-portfolio-item-button-wrapper\">\n                            <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/catalog-services-acg-cybersecurity\/\" class=\"ad-pro-portfolio-item-button\" style=\"background-color: #ededed; color: #000000; --button-hover-color: #ffffff; font-size: 15px; font-weight: 500; border-radius: 4px;\">\n                                D\u00e9couvrir ce projet &gt;                            <\/a>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"ad-pro-portfolio-item hover-zoom\">\n                    <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/design-two-cocolabs-kakemonos\/\" class=\"item-link\">\n                                                    <div class=\"item-image\">\n                                <img decoding=\"async\" width=\"600\" height=\"400\" src=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2026\/05\/cocolabs-2-kakemonos-stand-design-paris-600x400.jpg\" class=\"portfolio-grid-image wp-post-image\" alt=\"Graphisme \u00c9v\u00e9nementiel et Design de Kak\u00e9monos pour Cocolabs\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2026\/05\/cocolabs-2-kakemonos-stand-design-paris-600x400.jpg 600w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2026\/05\/cocolabs-2-kakemonos-stand-design-paris-18x12.jpg 18w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2026\/05\/cocolabs-2-kakemonos-stand-design-paris-400x267.jpg 400w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\">                            <\/div>\n                                                \n                        <div class=\"ad-pro-portfolio-item-content\">\n                                                            <h3 class=\"item-title\">Graphisme \u00c9v\u00e9nementiel et Design de Kak\u00e9monos pour Cocolabs<\/h3>\n                                                        \n                                                                                                    <div class=\"item-category\">Stand &amp; Kak\u00e9mono<\/div>\n                                                                                            \n                                                            <div class=\"item-excerpt\">Cr\u00e9ation graphique de deux kak\u00e9monos pour l&rsquo;agence digitale Cocolabs, sp\u00e9cialiste du d\u00e9veloppement de marketplaces de services et de produits (B2B, B2C, C2C). La conception de ces supports de communication print a \u00e9t\u00e9 structur\u00e9e pour valoriser&hellip;<\/div>\n                                                    <\/div>\n                    <\/a>\n                    \n                                            <div class=\"ad-pro-portfolio-item-button-wrapper\">\n                            <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/design-two-cocolabs-kakemonos\/\" class=\"ad-pro-portfolio-item-button\" style=\"background-color: #ededed; color: #000000; --button-hover-color: #ffffff; font-size: 15px; font-weight: 500; border-radius: 4px;\">\n                                D\u00e9couvrir ce projet &gt;                            <\/a>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"ad-pro-portfolio-item hover-zoom\">\n                    <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/gamerdeer-web-design-woocommerce\/\" class=\"item-link\">\n                                                    <div class=\"item-image\">\n                                <img decoding=\"async\" width=\"600\" height=\"400\" src=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2026\/04\/Gamer-Deer-Web-Design-1-600x400.jpg\" class=\"portfolio-grid-image wp-post-image\" alt=\"Gamerdeer : Web Design et D\u00e9veloppement WooCommerce\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2026\/04\/Gamer-Deer-Web-Design-1-600x400.jpg 600w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2026\/04\/Gamer-Deer-Web-Design-1-16x12.jpg 16w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2026\/04\/Gamer-Deer-Web-Design-1-400x267.jpg 400w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\">                            <\/div>\n                                                \n                        <div class=\"ad-pro-portfolio-item-content\">\n                                                            <h3 class=\"item-title\">Gamerdeer : Web Design et D\u00e9veloppement WooCommerce<\/h3>\n                                                        \n                                                                                                    <div class=\"item-category\">Web design<\/div>\n                                                                                            \n                                                            <div class=\"item-excerpt\">Conception de l&rsquo;identit\u00e9 visuelle, web design et d\u00e9veloppement technique complet du site Gamerdeer. La plateforme e-commerce est d\u00e9velopp\u00e9e sur mesure avec WordPress et WooCommerce. La structure de l&rsquo;interface est pens\u00e9e pour la gestion d&rsquo;un catalogue&hellip;<\/div>\n                                                    <\/div>\n                    <\/a>\n                    \n                                            <div class=\"ad-pro-portfolio-item-button-wrapper\">\n                            <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/gamerdeer-web-design-woocommerce\/\" class=\"ad-pro-portfolio-item-button\" style=\"background-color: #ededed; color: #000000; --button-hover-color: #ffffff; font-size: 15px; font-weight: 500; border-radius: 4px;\">\n                                D\u00e9couvrir ce projet &gt;                            <\/a>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"ad-pro-portfolio-item hover-zoom\">\n                    <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/kakemono-for-isaca-cybersecurity-training-courses\/\" class=\"item-link\">\n                                                    <div class=\"item-image\">\n                                <img decoding=\"async\" width=\"600\" height=\"400\" src=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2026\/03\/cybersecurite-isaca-kakemono-roll-up-desifn-600x400.jpg\" class=\"portfolio-grid-image wp-post-image\" alt=\"Kak\u00e9mono pour Formations ISACA en Cybers\u00e9curit\u00e9\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2026\/03\/cybersecurite-isaca-kakemono-roll-up-desifn-600x400.jpg 600w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2026\/03\/cybersecurite-isaca-kakemono-roll-up-desifn-18x12.jpg 18w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2026\/03\/cybersecurite-isaca-kakemono-roll-up-desifn-400x267.jpg 400w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\">                            <\/div>\n                                                \n                        <div class=\"ad-pro-portfolio-item-content\">\n                                                            <h3 class=\"item-title\">Kak\u00e9mono pour Formations ISACA en Cybers\u00e9curit\u00e9<\/h3>\n                                                        \n                                                                                                    <div class=\"item-category\">Stand &amp; Kak\u00e9mono<\/div>\n                                                                                            \n                                                            <div class=\"item-excerpt\">Cr\u00e9ation graphique d&rsquo;un kak\u00e9mono (roll-up) professionnel destin\u00e9 \u00e0 promouvoir des formations en cybers\u00e9curit\u00e9. Le design met en valeur l&rsquo;accr\u00e9ditation officielle en tant que partenaire ISACA et pr\u00e9sente de mani\u00e8re claire les diff\u00e9rentes certifications mondialement reconnues&hellip;<\/div>\n                                                    <\/div>\n                    <\/a>\n                    \n                                            <div class=\"ad-pro-portfolio-item-button-wrapper\">\n                            <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/kakemono-for-isaca-cybersecurity-training-courses\/\" class=\"ad-pro-portfolio-item-button\" style=\"background-color: #ededed; color: #000000; --button-hover-color: #ffffff; font-size: 15px; font-weight: 500; border-radius: 4px;\">\n                                D\u00e9couvrir ce projet &gt;                            <\/a>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"ad-pro-portfolio-item hover-zoom\">\n                    <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/tipoussin-e-commerce-design-and-development-shopify\/\" class=\"item-link\">\n                                                    <div class=\"item-image\">\n                                <img decoding=\"async\" width=\"509\" height=\"400\" src=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2025\/11\/tipoussin-website-01.webp\" class=\"portfolio-grid-image wp-post-image\" alt=\"TiPoussin \u2013 Conception et d\u00e9veloppement E-commerce Shopify\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2025\/11\/tipoussin-website-01.webp 1100w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2025\/11\/tipoussin-website-01-764x600.webp 764w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2025\/11\/tipoussin-website-01-768x603.webp 768w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2025\/11\/tipoussin-website-01-15x12.webp 15w\" sizes=\"auto, (max-width: 509px) 100vw, 509px\">                            <\/div>\n                                                \n                        <div class=\"ad-pro-portfolio-item-content\">\n                                                            <h3 class=\"item-title\">TiPoussin \u2013 Conception et d\u00e9veloppement E-commerce Shopify<\/h3>\n                                                        \n                                                                                                    <div class=\"item-category\">Web design<\/div>\n                                                                                            \n                                                            <div class=\"item-excerpt\">TiPoussin est une marque d\u00e9di\u00e9e \u00e0 l&rsquo;univers de la petite enfance et de la pu\u00e9riculture, proposant des produits \u00e9coresponsables de fabrication europ\u00e9enne. L&rsquo;objectif \u00e9tait de d\u00e9ployer une boutique en ligne capable de transmettre les valeurs&hellip;<\/div>\n                                                    <\/div>\n                    <\/a>\n                    \n                                            <div class=\"ad-pro-portfolio-item-button-wrapper\">\n                            <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/tipoussin-e-commerce-design-and-development-shopify\/\" class=\"ad-pro-portfolio-item-button\" style=\"background-color: #ededed; color: #000000; --button-hover-color: #ffffff; font-size: 15px; font-weight: 500; border-radius: 4px;\">\n                                D\u00e9couvrir ce projet &gt;                            <\/a>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"ad-pro-portfolio-item hover-zoom\">\n                    <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/website-of-painter-claude-tremeau\/\" class=\"item-link\">\n                                                    <div class=\"item-image\">\n                                <img decoding=\"async\" width=\"548\" height=\"400\" src=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2025\/10\/site-web-design-artiste-01.webp\" class=\"portfolio-grid-image wp-post-image\" alt=\"Site Web Portfolio Artiste Peintre Claude Tr\u00e9meau | Design &#038; UX\/UI\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/altaydagistan.com\/wp-content\/uploads\/2025\/10\/site-web-design-artiste-01.webp 1184w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2025\/10\/site-web-design-artiste-01-800x584.webp 800w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2025\/10\/site-web-design-artiste-01-768x560.webp 768w, https:\/\/altaydagistan.com\/wp-content\/uploads\/2025\/10\/site-web-design-artiste-01-16x12.webp 16w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\">                            <\/div>\n                                                \n                        <div class=\"ad-pro-portfolio-item-content\">\n                                                            <h3 class=\"item-title\">Site Web Portfolio Artiste Peintre Claude Tr\u00e9meau | Design &#038; UX\/UI<\/h3>\n                                                        \n                                                                                                    <div class=\"item-category\">Web design<\/div>\n                                                                                            \n                                                            <div class=\"item-excerpt\">\ud83d\udc49 https:\/\/claudetremeau.com Cr\u00e9ation d&rsquo;un site portfolio en ligne sur mesure, con\u00e7u pour pr\u00e9senter l&rsquo;\u0153uvre abstraite de l&rsquo;artiste peintre Claude Tremeau. L&rsquo;objectif principal \u00e9tait de d\u00e9velopper une plateforme \u00e9l\u00e9gante, performante et hautement personnalis\u00e9e, capable de refl\u00e9ter&hellip;<\/div>\n                                                    <\/div>\n                    <\/a>\n                    \n                                            <div class=\"ad-pro-portfolio-item-button-wrapper\">\n                            <a href=\"https:\/\/altaydagistan.com\/en\/portfolio\/website-of-painter-claude-tremeau\/\" class=\"ad-pro-portfolio-item-button\" style=\"background-color: #ededed; color: #000000; --button-hover-color: #ffffff; font-size: 15px; font-weight: 500; border-radius: 4px;\">\n                                D\u00e9couvrir ce projet &gt;                            <\/a>\n                        <\/div>\n                                    <\/div>\n                                    <\/div>\n    \n            <div class=\"ad-pro-portfolio-pagination\">\n            <span aria-current=\"page\" class=\"page-numbers current\">1<\/span>\n<a class=\"page-numbers\" href=\"https:\/\/altaydagistan.com\/en\/wp-json\/wp\/v2\/pages\/18793?paged=2\">2<\/a>\n<a class=\"page-numbers\" href=\"https:\/\/altaydagistan.com\/en\/wp-json\/wp\/v2\/pages\/18793?paged=3\">3<\/a>\n<span class=\"page-numbers dots\">&hellip;<\/span>\n<a class=\"page-numbers\" href=\"https:\/\/altaydagistan.com\/en\/wp-json\/wp\/v2\/pages\/18793?paged=14\">14<\/a>\n<a class=\"next page-numbers\" href=\"https:\/\/altaydagistan.com\/en\/wp-json\/wp\/v2\/pages\/18793?paged=2\">&raquo;<\/a>        <\/div>\n    <\/div>\n\n        \n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Complete feature list -->\n  <section class=\"adp-allfeatures\">\n    <div class=\"adp-container\">\n      <div class=\"adp-section-head\" data-aos=\"fade-up\">\n        <p class=\"adp-section-eyebrow\">Liste compl\u00e8te des fonctionnalit\u00e9s<\/p>\n        <h2>Tout ce que contient le plugin.<\/h2>\n        <p class=\"adp-section-sub\">Pas de surprises, pas de r\u00e9glages cach\u00e9s. Chaque fonctionnalit\u00e9 document\u00e9e.<\/p>\n      <\/div>\n      <div class=\"adp-af-grid\">\n\n        <div class=\"adp-af-group\">\n          <h4 class=\"adp-af-group-title\">Styles de grille<\/h4>\n          <ul class=\"adp-af-list\">\n            <li>Card : image en haut, contenu en dessous, fond et bordure personnalisables<\/li>\n            <li>Overlay : contenu superpos\u00e9 \u00e0 l&rsquo;image avec texte blanc<\/li>\n            <li>Simple : image au-dessus du texte, style minimal<\/li>\n            <li>Animation au survol : aucune, zoom ou scale<\/li>\n            <li>Bordure d&rsquo;image : activer\/d\u00e9sactiver, \u00e9paisseur, couleur (Overlay et Simple ind\u00e9pendamment)<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"adp-af-group\">\n          <h4 class=\"adp-af-group-title\">Filtrage<\/h4>\n          <ul class=\"adp-af-list\">\n            <li>Filtre par liste d\u00e9roulante bas\u00e9 sur la taxonomie<\/li>\n            <li>Nombre de posts par terme affich\u00e9 dans le menu<\/li>\n            <li>Filtre AJAX : aucun rechargement de page<\/li>\n            <li>Filtrage par URL avec <code>?ad_filter=slug<\/code><\/li>\n            <li>Support retour\/avance navigateur via pushState<\/li>\n            <li>Menu d\u00e9roulant de filtre enti\u00e8rement personnalisable<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"adp-af-group\">\n          <h4 class=\"adp-af-group-title\">Pagination<\/h4>\n          <ul class=\"adp-af-list\">\n            <li>Pages num\u00e9rot\u00e9es avec pr\u00e9c\u00e9dent\/suivant<\/li>\n            <li>AJAX : aucun rechargement de page<\/li>\n            <li>D\u00e9filement fluide vers la grille au changement de page<\/li>\n            <li>Projets \u00e9pingl\u00e9s exclus du comptage de pages<\/li>\n            <li>Pagination enti\u00e8rement personnalisable visuellement<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"adp-af-group\">\n          <h4 class=\"adp-af-group-title\">Projets mis en avant<\/h4>\n          <ul class=\"adp-af-list\">\n            <li>Recherche par titre pour s\u00e9lectionner les posts<\/li>\n            <li>Glisser-d\u00e9poser pour r\u00e9organiser les projets \u00e9pingl\u00e9s<\/li>\n            <li>\u00c9pingl\u00e9s en haut de la page 1<\/li>\n            <li>Comportement : uniquement sans filtre ou sensible au filtre actif<\/li>\n            <li>Par grille : des grilles diff\u00e9rentes \u00e9pinglent des projets diff\u00e9rents<\/li>\n            <li>Exclus du comptage de pagination<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"adp-af-group\">\n          <h4 class=\"adp-af-group-title\">Typographie<\/h4>\n          <ul class=\"adp-af-list\">\n            <li>Titre : couleur, taille, graisse<\/li>\n            <li>Cat\u00e9gorie : couleur, taille, graisse<\/li>\n            <li>Extrait : couleur, taille, graisse, nombre de mots<\/li>\n            <li>Alignement du texte sur mobile<\/li>\n            <li>Tout surchargeable par grille<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"adp-af-group\">\n          <h4 class=\"adp-af-group-title\">Style des cartes<\/h4>\n          <ul class=\"adp-af-list\">\n            <li>Couleur de fond<\/li>\n            <li>Bordure : couleur, \u00e9paisseur, rayon<\/li>\n            <li>Ombre port\u00e9e : couleur, transparence, d\u00e9calage X\/Y, flou, diffusion<\/li>\n            <li>Affichage du nombre de projets : afficher\/masquer, texte de suffixe personnalis\u00e9<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"adp-af-group\">\n          <h4 class=\"adp-af-group-title\">Bouton<\/h4>\n          <ul class=\"adp-af-list\">\n            <li>Texte personnalisable<\/li>\n            <li>Couleur de fond, de texte et au survol<\/li>\n            <li>Style : bouton ou lien texte<\/li>\n            <li>Taille, graisse, rayon de bordure<\/li>\n            <li>Activer\/d\u00e9sactiver par grille<\/li>\n            <li>Ouvrir les liens dans un nouvel onglet<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"adp-af-group\">\n          <h4 class=\"adp-af-group-title\">Mise en page de la grille<\/h4>\n          <ul class=\"adp-af-list\">\n            <li>Espacement colonnes et lignes<\/li>\n            <li>Type de largeur : pleine largeur ou encadr\u00e9e<\/li>\n            <li>Largeur maximale pour la mise en page encadr\u00e9e<\/li>\n            <li>Posts par page, plafond de posts maximum<\/li>\n            <li>Ordre de tri : date desc\/asc, titre asc\/desc, ordre du menu, al\u00e9atoire<\/li>\n            <li>\u00c9l\u00e9ments \u00e0 afficher : image, titre, cat\u00e9gorie, extrait<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"adp-af-group\">\n          <h4 class=\"adp-af-group-title\">Shortcode<\/h4>\n          <ul class=\"adp-af-list\">\n            <li><code>&#091;ad_pro_portfolio_grid id=\"1\"&#093;<\/code> : charger une grille sauvegard\u00e9e<\/li>\n            <li>Tous les r\u00e9glages disponibles en attribut inline<\/li>\n            <li>Fonctionne dans l&rsquo;\u00e9diteur classique, les page builders et les widgets<\/li>\n            <li>Copie du shortcode en un clic depuis le gestionnaire de grilles<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"adp-af-group\">\n          <h4 class=\"adp-af-group-title\">Bloc Gutenberg<\/h4>\n          <ul class=\"adp-af-list\">\n            <li>Bloc : <code>ad-pro-portfolio-grid\/portfolio-grid<\/code><\/li>\n            <li>Menu d\u00e9roulant avec toutes les grilles sauvegard\u00e9es<\/li>\n            <li>Rendu c\u00f4t\u00e9 serveur<\/li>\n            <li>Placeholder affich\u00e9 si aucune grille n&rsquo;existe<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"adp-af-group\">\n          <h4 class=\"adp-af-group-title\">Gestionnaire de grilles<\/h4>\n          <ul class=\"adp-af-list\">\n            <li>Liste toutes les grilles avec shortcode, \u00e9dition, duplication, suppression<\/li>\n            <li>Duplication de grille en un clic<\/li>\n            <li>R\u00e9glages globaux s\u00e9par\u00e9s de la configuration par grille<\/li>\n            <li>Chargement dynamique des taxonomies et des termes<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"adp-af-group\">\n          <h4 class=\"adp-af-group-title\">Performances et compatibilit\u00e9<\/h4>\n          <ul class=\"adp-af-list\">\n            <li>Lazy loading natif sur toutes les images<\/li>\n            <li>Intersection Observer pour la visibilit\u00e9 mobile<\/li>\n            <li>Compatible WP Rocket, LiteSpeed, W3TC, CloudFlare<\/li>\n            <li>Cache-busting sur toutes les requ\u00eates AJAX<\/li>\n            <li>V\u00e9rification de nonce sur tous les endpoints<\/li>\n            <li>Sanitisation des entr\u00e9es et \u00e9chappement des sorties sur toute la base de code<\/li>\n            <li>Protection CSRF via le syst\u00e8me de nonce WordPress<\/li>\n          <\/ul>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Pricing -->\n  <section class=\"adp-pricing\" id=\"pricing\">\n    <div class=\"adp-container\">\n      <div class=\"adp-section-head\" data-aos=\"fade-up\">\n        <p class=\"adp-section-eyebrow\">Tarifs<\/p>\n        <h2>Votre travail m\u00e9rite d&rsquo;\u00eatre bien pr\u00e9sent\u00e9. Le prix suit.<\/h2>\n        <p class=\"adp-section-sub\">D\u00e9marrez gratuitement. Payez une fois pour une licence \u00e0 vie, ou annuellement si vous pr\u00e9f\u00e9rez. Toutes les mises \u00e0 jour futures incluses.<\/p>\n        <div class=\"adp-billing-toggle\" role=\"tablist\">\n          <button class=\"adp-billing-btn active\" id=\"adp-bill-annual\" onclick=\"adpToggleBilling('annual')\">Annuel<\/button>\n          <button class=\"adp-billing-btn\" id=\"adp-bill-lifetime\" onclick=\"adpToggleBilling('lifetime')\">\u00c0 vie<span class=\"adp-billing-save\">\u00c9CONOMIE<\/span><\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"adp-pricing-grid\">\n\n        <!-- Essential -->\n        <div class=\"adp-plan\" data-aos=\"fade-up\" data-aos-delay=\"0\">\n          <p class=\"adp-plan-name\">Essential<\/p>\n          <p class=\"adp-plan-tag\">Pour un seul site en production<\/p>\n          <div class=\"adp-plan-price-block\">\n            <div class=\"adp-plan-price adp-active\" data-billing=\"annual\">\n              <div class=\"adp-plan-price-amount\">\n                <span class=\"adp-plan-price-currency\">$<\/span>\n                <span class=\"adp-plan-price-value\">29.99<\/span>\n                <span class=\"adp-plan-price-period\">\/an<\/span>\n              <\/div>\n              <span class=\"adp-plan-price-note\">1 site &middot; Toutes les mises \u00e0 jour futures<\/span>\n            <\/div>\n            <div class=\"adp-plan-price\" data-billing=\"lifetime\">\n              <div class=\"adp-plan-price-amount\">\n                <span class=\"adp-plan-price-currency\">$<\/span>\n                <span class=\"adp-plan-price-value\">119<\/span>\n              <\/div>\n              <span class=\"adp-plan-price-note\">1 site &middot; Paiement unique<\/span>\n            <\/div>\n          <\/div>\n          <button class=\"adp-plan-cta adp-plan-cta-secondary\" onclick=\"adpBuyEssential()\">Obtenir Essential<\/button>\n          <ul class=\"adp-plan-features\">\n            <li><strong>Tout le plan Gratuit<\/strong><\/li>\n            <li>Filtrage AJAX et par URL<\/li>\n            <li>Ouvrir dans un nouvel onglet<\/li>\n            <li>Personnalisation de la typographie<\/li>\n            <li>Personnalisation de la mise en page et des espacements<\/li>\n            <li>Style de pagination<\/li>\n            <li>Style du filtre<\/li>\n            <li>Support par e-mail<\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- Professional -->\n        <div class=\"adp-plan adp-plan-popular\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n          <span class=\"adp-plan-badge\">Le plus populaire<\/span>\n          <p class=\"adp-plan-name\">Professional<\/p>\n          <p class=\"adp-plan-tag\">Pour les freelances et petites agences<\/p>\n          <div class=\"adp-plan-price-block\">\n            <div class=\"adp-plan-price adp-active\" data-billing=\"annual\">\n              <div class=\"adp-plan-price-amount\">\n                <span class=\"adp-plan-price-currency\">$<\/span>\n                <span class=\"adp-plan-price-value\">59.99<\/span>\n                <span class=\"adp-plan-price-period\">\/an<\/span>\n              <\/div>\n              <span class=\"adp-plan-price-note\">Jusqu&rsquo;\u00e0 10 sites &middot; Toutes les mises \u00e0 jour futures<\/span>\n            <\/div>\n            <div class=\"adp-plan-price\" data-billing=\"lifetime\">\n              <div class=\"adp-plan-price-amount\">\n                <span class=\"adp-plan-price-currency\">$<\/span>\n                <span class=\"adp-plan-price-value\">229<\/span>\n              <\/div>\n              <span class=\"adp-plan-price-note\">Jusqu&rsquo;\u00e0 10 sites &middot; Paiement unique<\/span>\n            <\/div>\n          <\/div>\n          <button class=\"adp-plan-cta adp-plan-cta-primary\" onclick=\"adpBuyPro()\">Obtenir Professional<\/button>          <ul class=\"adp-plan-features\">\n            <li><strong>Tout le plan Essential<\/strong><\/li>\n            <li>Styles Card, Overlay et Simple<\/li>\n            <li>Tous les ordres de tri (dont al\u00e9atoire)<\/li>\n            <li>Projets mis en avant (2 comportements)<\/li>\n            <li>Overrides par grille<\/li>\n            <li>Longueur d&rsquo;extrait personnalis\u00e9e<\/li>\n            <li>Bloc Gutenberg<\/li>\n            <li>Support e-mail standard<\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- Agency -->\n        <div class=\"adp-plan\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n          <p class=\"adp-plan-tag\">Pour les studios g\u00e9rant des sites clients<\/p>\n          <div class=\"adp-plan-price-block\">\n            <div class=\"adp-plan-price adp-active\" data-billing=\"annual\">\n              <div class=\"adp-plan-price-amount\">\n                <span class=\"adp-plan-price-currency\">$<\/span>\n                <span class=\"adp-plan-price-value\">119.99<\/span>\n                <span class=\"adp-plan-price-period\">\/an<\/span>\n              <\/div>\n              <span class=\"adp-plan-price-note\">Jusqu&rsquo;\u00e0 100 sites &middot; Toutes les mises \u00e0 jour futures<\/span>\n            <\/div>\n            <div class=\"adp-plan-price\" data-billing=\"lifetime\">\n              <div class=\"adp-plan-price-amount\">\n                <span class=\"adp-plan-price-currency\">$<\/span>\n                <span class=\"adp-plan-price-value\">399<\/span>\n              <\/div>\n              <span class=\"adp-plan-price-note\">Jusqu&rsquo;\u00e0 100 sites &middot; Paiement unique<\/span>\n            <\/div>\n          <\/div>\n          <button class=\"adp-plan-cta adp-plan-cta-secondary\" onclick=\"adpBuyAgency()\">Obtenir Agency<\/button>\n          <ul class=\"adp-plan-features\">\n            <li><strong>Tout le plan Professional<\/strong><\/li>\n            <li>White label<\/li>\n            <li>Suppression du branding du plugin<\/li>\n            <li>Support e-mail prioritaire<\/li>\n          <\/ul>\n        <\/div>\n\n      <\/div>\n\n      <!-- Free strip -->\n      <div class=\"adp-free-strip\" data-aos=\"fade-up\">\n        <div class=\"adp-free-strip-left\">\n          <span class=\"adp-free-strip-title\">Version gratuite disponible sur WordPress.org<\/span>\n          <div class=\"adp-free-strip-features\">\n            <span class=\"adp-free-strip-feat\">Style Card<\/span>\n            <span class=\"adp-free-strip-feat\">Tous les types de contenu<\/span>\n            <span class=\"adp-free-strip-feat\">Pagination AJAX<\/span>\n            <span class=\"adp-free-strip-feat\">Grilles illimit\u00e9es<\/span>\n            <span class=\"adp-free-strip-feat\">Support communautaire<\/span>\n          <\/div>\n        <\/div>\n        <button class=\"adp-free-strip-btn\" onclick=\"adpBuyFree()\">T\u00e9l\u00e9charger gratuitement<\/button>\n      <\/div>\n\n      <p class=\"adp-plan-fineprint\" style=\"margin-top:20px; max-width:560px; margin-left:auto; margin-right:auto;\">Satisfait ou rembours\u00e9 7 jours sur tous les plans payants. Paiement s\u00e9curis\u00e9 via Freemius.<\/p>\n    <\/div>\n  <\/section>\n\n  <!-- Comparison table -->\n  <section class=\"adp-compare\">\n    <div class=\"adp-container\">\n      <div class=\"adp-section-head\" data-aos=\"fade-up\">\n        <p class=\"adp-section-eyebrow\">Comparaison compl\u00e8te<\/p>\n        <h2>Ce que contient chaque plan.<\/h2>\n      <\/div>\n      <div class=\"adp-compare-wrap\" data-aos=\"fade-up\">\n        <table class=\"adp-compare-table\">\n          <thead>\n            <tr>\n              <th>Fonctionnalit\u00e9<\/th>\n              <th>Gratuit<\/th>\n              <th>Essential<\/th>\n              <th class=\"adp-th-pop\">Professional<\/th>\n              <th>Agency<\/th>\n            <\/tr>\n          <\/thead>\n          <tbody>\n            <tr>\n              <td class=\"adp-compare-name\">Grilles illimit\u00e9es<\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td class=\"adp-td-pop\"><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n            <\/tr>\n            <tr>\n              <td class=\"adp-compare-name\">Tous les types de contenu (CPT)<\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td class=\"adp-td-pop\"><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n            <\/tr>\n            <tr>\n              <td class=\"adp-compare-name\">Pagination AJAX<\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td class=\"adp-td-pop\"><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n            <\/tr>\n            <tr>\n              <td class=\"adp-compare-name\">Filtrage AJAX et par URL<\/td>\n              <td><span class=\"adp-dash\">\u2014<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td class=\"adp-td-pop\"><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n            <\/tr>\n            <tr>\n              <td class=\"adp-compare-name\">Personnalisation typographie et mise en page<\/td>\n              <td><span class=\"adp-dash\">\u2014<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td class=\"adp-td-pop\"><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n            <\/tr>\n            <tr>\n              <td class=\"adp-compare-name\">Style pagination et filtre<\/td>\n              <td><span class=\"adp-dash\">\u2014<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td class=\"adp-td-pop\"><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n            <\/tr>\n            <tr>\n              <td class=\"adp-compare-name\">Styles Card, Overlay et Simple<\/td>\n              <td><span class=\"adp-dash\">\u2014<\/span><\/td>\n              <td><span class=\"adp-dash\">\u2014<\/span><\/td>\n              <td class=\"adp-td-pop\"><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n            <\/tr>\n            <tr>\n              <td class=\"adp-compare-name\">Tous les ordres de tri (dont al\u00e9atoire)<\/td>\n              <td><span class=\"adp-dash\">\u2014<\/span><\/td>\n              <td><span class=\"adp-dash\">\u2014<\/span><\/td>\n              <td class=\"adp-td-pop\"><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n            <\/tr>\n            <tr>\n              <td class=\"adp-compare-name\">Projets mis en avant (2 comportements)<\/td>\n              <td><span class=\"adp-dash\">\u2014<\/span><\/td>\n              <td><span class=\"adp-dash\">\u2014<\/span><\/td>\n              <td class=\"adp-td-pop\"><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n            <\/tr>\n            <tr>\n              <td class=\"adp-compare-name\">Overrides par grille<\/td>\n              <td><span class=\"adp-dash\">\u2014<\/span><\/td>\n              <td><span class=\"adp-dash\">\u2014<\/span><\/td>\n              <td class=\"adp-td-pop\"><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n            <\/tr>\n            <tr>\n              <td class=\"adp-compare-name\">Bloc Gutenberg<\/td>\n              <td><span class=\"adp-dash\">\u2014<\/span><\/td>\n              <td><span class=\"adp-dash\">\u2014<\/span><\/td>\n              <td class=\"adp-td-pop\"><span class=\"adp-check\">\u2713<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n            <\/tr>\n            <tr>\n              <td class=\"adp-compare-name\">White label<\/td>\n              <td><span class=\"adp-dash\">\u2014<\/span><\/td>\n              <td><span class=\"adp-dash\">\u2014<\/span><\/td>\n              <td class=\"adp-td-pop\"><span class=\"adp-dash\">\u2014<\/span><\/td>\n              <td><span class=\"adp-check\">\u2713<\/span><\/td>\n            <\/tr>\n            <tr>\n              <td class=\"adp-compare-name\">Support<\/td>\n              <td>Communautaire<\/td>\n              <td>E-mail<\/td>\n              <td class=\"adp-td-pop\">E-mail standard<\/td>\n              <td>Prioritaire<\/td>\n            <\/tr>\n            <tr>\n              <td class=\"adp-compare-name\">Sites inclus<\/td>\n              <td>Illimit\u00e9s<\/td>\n              <td>1<\/td>\n              <td class=\"adp-td-pop\">10<\/td>\n              <td>100<\/td>\n            <\/tr>\n          <\/tbody>\n        <\/table>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- FAQ -->\n  <section class=\"adp-faq\">\n    <div class=\"adp-container\">\n      <div class=\"adp-section-head\" data-aos=\"fade-up\">\n        <p class=\"adp-section-eyebrow\">FAQ<\/p>\n        <h2>Questions fr\u00e9quentes avant l&rsquo;achat.<\/h2>\n      <\/div>\n      <div class=\"adp-faq-list\">\n\n        <div class=\"adp-faq-item\" data-aos=\"fade-up\" id=\"adpFaq0\">\n          <button class=\"adp-faq-trigger\" onclick=\"adpToggleFaq(0)\">\n            <span class=\"adp-faq-q\">Est-ce compatible avec mon th\u00e8me ?<\/span>\n            <svg class=\"adp-faq-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\n          <\/button>\n          <div class=\"adp-faq-body\">\n            <p class=\"adp-faq-a\">Oui. Le plugin est ind\u00e9pendant du th\u00e8me et utilise un CSS scop\u00e9 qui n&rsquo;interf\u00e8re pas avec les styles de votre th\u00e8me. Test\u00e9 avec Blocksy, Astra, Kadence, GeneratePress, Hello, Twenty Twenty-Four et d&rsquo;autres.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"adp-faq-item\" data-aos=\"fade-up\" id=\"adpFaq1\">\n          <button class=\"adp-faq-trigger\" onclick=\"adpToggleFaq(1)\">\n            <span class=\"adp-faq-q\">Est-ce compatible avec les custom post types ?<\/span>\n            <svg class=\"adp-faq-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\n          <\/button>\n          <div class=\"adp-faq-body\">\n            <p class=\"adp-faq-a\">Oui, sur tous les plans y compris le gratuit. Tout type de contenu public enregistr\u00e9 fonctionne, avec sa taxonomie associ\u00e9e. Le plugin d\u00e9tecte automatiquement les taxonomies quand vous s\u00e9lectionnez un type de contenu dans l&rsquo;\u00e9diteur de grille.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"adp-faq-item\" data-aos=\"fade-up\" id=\"adpFaq2\">\n          <button class=\"adp-faq-trigger\" onclick=\"adpToggleFaq(2)\">\n            <span class=\"adp-faq-q\">Comment ins\u00e9rer une grille dans une page ?<\/span>\n            <svg class=\"adp-faq-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\n          <\/button>\n          <div class=\"adp-faq-body\">\n            <p class=\"adp-faq-a\">Deux fa\u00e7ons. Copiez le shortcode <code>&#091;ad_pro_portfolio_grid id=\"1\"&#093;<\/code> depuis le gestionnaire de grilles et collez-le n&rsquo;importe o\u00f9. Ou utilisez le bloc Gutenberg (plan Professional et sup\u00e9rieur) pour ins\u00e9rer une grille sauvegard\u00e9e depuis la biblioth\u00e8que de blocs.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"adp-faq-item\" data-aos=\"fade-up\" id=\"adpFaq3\">\n          <button class=\"adp-faq-trigger\" onclick=\"adpToggleFaq(3)\">\n            <span class=\"adp-faq-q\">Quelle est la diff\u00e9rence entre annuel et \u00e0 vie ?<\/span>\n            <svg class=\"adp-faq-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\n          <\/button>\n          <div class=\"adp-faq-body\">\n            <p class=\"adp-faq-a\">Les licences annuelles se renouvellent chaque ann\u00e9e et incluent le support et les mises \u00e0 jour. La licence \u00e0 vie est un paiement unique qui donne acc\u00e8s aux m\u00eames fonctionnalit\u00e9s et \u00e0 toutes les mises \u00e0 jour futures pour toujours. Elle s&rsquo;amortit en trois \u00e0 quatre ans.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"adp-faq-item\" data-aos=\"fade-up\" id=\"adpFaq4\">\n          <button class=\"adp-faq-trigger\" onclick=\"adpToggleFaq(4)\">\n            <span class=\"adp-faq-q\">Puis-je changer de plan plus tard ?<\/span>\n            <svg class=\"adp-faq-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\n          <\/button>\n          <div class=\"adp-faq-body\">\n            <p class=\"adp-faq-a\">Oui. Passez \u00e0 un plan sup\u00e9rieur \u00e0 tout moment en ne payant que la diff\u00e9rence. Vos grilles et r\u00e9glages sont conserv\u00e9s lors de la mise \u00e0 niveau.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"adp-faq-item\" data-aos=\"fade-up\" id=\"adpFaq5\">\n          <button class=\"adp-faq-trigger\" onclick=\"adpToggleFaq(5)\">\n            <span class=\"adp-faq-q\">Y a-t-il une politique de remboursement ?<\/span>\n            <svg class=\"adp-faq-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\n          <\/button>\n          <div class=\"adp-faq-body\">\n            <p class=\"adp-faq-a\">Satisfait ou rembours\u00e9 7 jours sur tous les plans payants. Si le plugin ne correspond pas \u00e0 vos besoins, demandez un remboursement via Freemius et vous r\u00e9cup\u00e9rez la totalit\u00e9 du montant.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"adp-faq-item\" data-aos=\"fade-up\" id=\"adpFaq6\">\n          <button class=\"adp-faq-trigger\" onclick=\"adpToggleFaq(6)\">\n            <span class=\"adp-faq-q\">Est-ce compatible avec les plugins de cache ?<\/span>\n            <svg class=\"adp-faq-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\n          <\/button>\n          <div class=\"adp-faq-body\">\n            <p class=\"adp-faq-a\">Oui. Le plugin envoie des en-t\u00eates no-cache sur les endpoints AJAX et utilise des timestamps de cache-busting. Test\u00e9 avec WP Rocket, LiteSpeed Cache, W3 Total Cache et CloudFlare.<\/p>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Final CTA -->\n  <section class=\"adp-final\">\n    <div class=\"adp-container\">\n      <div class=\"adp-final-box\" data-aos=\"zoom-out\">\n        <span class=\"adp-final-eyebrow\">Commencer<\/span>\n        <p class=\"adp-final-title\">Une meilleure grille portfolio d\u00e8s aujourd&rsquo;hui.<\/p>\n        <p class=\"adp-final-sub\">Installez la version gratuite sur WordPress.org, construisez votre premi\u00e8re grille en cinq minutes, passez au plan payant quand vous avez besoin du filtrage et de la bo\u00eete \u00e0 outils compl\u00e8te.<\/p>\n        <div class=\"adp-final-btns\">\n          <a href=\"#pricing\" class=\"adp-btn-primary\">Voir les tarifs<\/a>\n          <a href=\"#pricing\" class=\"adp-btn-ghost\">Obtenir le plugin<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<!-- FAQPage JSON-LD -->\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n    { \"@type\": \"Question\", \"name\": \"Does it work with my theme?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Yes. The plugin is theme-agnostic and uses scoped CSS so it doesn't interfere with your theme's styles. Tested with Blocksy, Astra, Kadence, GeneratePress, Hello, Twenty Twenty-Four, and others.\" } },\n    { \"@type\": \"Question\", \"name\": \"Does it support custom post types?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Yes, on every plan including Free. Any registered public post type works, with any associated taxonomy.\" } },\n    { \"@type\": \"Question\", \"name\": \"How do I insert a grid into a page?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Two ways. Copy the shortcode from the Grid Manager and paste it anywhere, or use the Gutenberg block to insert a saved grid from the block library.\" } },\n    { \"@type\": \"Question\", \"name\": \"What's the difference between annual and lifetime?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Annual licenses renew each year and include support and updates. Lifetime is a one-time payment that gives you the same features and all future updates forever.\" } },\n    { \"@type\": \"Question\", \"name\": \"Can I upgrade later?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Yes. Upgrade between plans at any time and you'll only pay the difference. Your grids and settings are preserved during the upgrade.\" } },\n    { \"@type\": \"Question\", \"name\": \"Is there a refund policy?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"7-day money-back guarantee on all paid plans. Request a refund through Freemius and you'll get the full amount back.\" } },\n    { \"@type\": \"Question\", \"name\": \"Does it work with cache plugins?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Yes. The plugin sends no-cache headers on AJAX endpoints and uses cache-busting timestamps. Tested with WP Rocket, LiteSpeed Cache, W3 Total Cache, and CloudFlare.\" } }\n  ]\n}\n<\/script>\n\n<!-- Freemius Checkout -->\n<script type=\"text\/javascript\" src=\"https:\/\/checkout.freemius.com\/js\/v1\/\"><\/script>\n<script type=\"text\/javascript\">\nvar ADP_PRODUCT_ID = '29432';\nvar ADP_PUBLIC_KEY = 'pk_99ee58f299335abe7ec913cc4c6e4';\n\nfunction adpMakeHandler(planId) {\n  return new FS.Checkout({\n    product_id: ADP_PRODUCT_ID,\n    plan_id: planId,\n    public_key: ADP_PUBLIC_KEY\n  });\n}\n\nvar adpHandlers = {\n  free: adpMakeHandler('48419'),\n  essential: adpMakeHandler('48420'),\n  pro: adpMakeHandler('48421'),\n  agency: adpMakeHandler('48422')\n};\n\nfunction adpCheckoutCallback(response) {\n  if (response && response.user) {\n    console.log('Purchase completed:', response);\n  }\n}\n\nfunction adpBuyFree() {\n  adpHandlers.free.open({\n    name: 'AD Pro Portfolio Grid',\n    purchaseCompleted: adpCheckoutCallback,\n    success: adpCheckoutCallback\n  });\n}\n\nfunction adpBuyEssential() {\n  adpHandlers.essential.open({\n    name: 'AD Pro Portfolio Grid',\n    licenses: 1,\n    purchaseCompleted: adpCheckoutCallback,\n    success: adpCheckoutCallback\n  });\n}\n\nfunction adpBuyPro() {\n  adpHandlers.pro.open({\n    name: 'AD Pro Portfolio Grid',\n    licenses: 10,\n    purchaseCompleted: adpCheckoutCallback,\n    success: adpCheckoutCallback\n  });\n}\n\nfunction adpBuyAgency() {\n  adpHandlers.agency.open({\n    name: 'AD Pro Portfolio Grid',\n    licenses: 100,\n    purchaseCompleted: adpCheckoutCallback,\n    success: adpCheckoutCallback\n  });\n}\n<\/script>\n\n<!-- Page interactions -->\n<script type=\"text\/javascript\">\n\/\/ Billing toggle\nfunction adpToggleBilling(period) {\n  var prices = document.querySelectorAll('.adp-plan-price');\n  for (var i = 0; i < prices.length; i++) {\n    if (prices[i].getAttribute('data-billing') === period) {\n      prices[i].classList.add('adp-active');\n    } else {\n      prices[i].classList.remove('adp-active');\n    }\n  }\n  var btns = document.querySelectorAll('.adp-billing-btn');\n  for (var j = 0; j < btns.length; j++) {\n    btns[j].classList.remove('active');\n  }\n  var target = document.getElementById('adp-bill-' + period);\n  if (target) { target.classList.add('active'); }\n}\n\n\/\/ FAQ accordion\nfunction adpToggleFaq(index) {\n  var total = 7;\n  for (var i = 0; i < total; i++) {\n    var item = document.getElementById('adpFaq' + i);\n    if (!item) { continue; }\n    var body = item.querySelector('.adp-faq-body');\n    if (i === index) {\n      var isOpen = item.classList.contains('adp-faq-open');\n      if (isOpen) {\n        item.classList.remove('adp-faq-open');\n        body.style.display = 'none';\n      } else {\n        item.classList.add('adp-faq-open');\n        body.style.display = 'block';\n      }\n    } else {\n      item.classList.remove('adp-faq-open');\n      body.style.display = 'none';\n    }\n  }\n}\n\n\/\/ Sticky CTA\nwindow.addEventListener('scroll', function() {\n  var sticky = document.getElementById('adpSticky');\n  if (!sticky) { return; }\n  if (window.scrollY > 600) {\n    sticky.classList.add('adp-visible');\n  } else {\n    sticky.classList.remove('adp-visible');\n  }\n}, { passive: true });\n\n\/\/ Entry animations via AOS\n(function() {\n  function rescue() { \/* AOS failed, elements still visible \u2014 no action needed *\/ }\n  function initAOS() {\n    if (typeof AOS !== 'undefined') {\n      AOS.init({ once: true, offset: 60, duration: 550, easing: 'ease-out' });\n    } else { rescue(); }\n  }\n  var s = document.createElement('script');\n  s.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/aos\/2.3.4\/aos.js';\n  s.onload = initAOS;\n  s.onerror = rescue;\n  document.body.appendChild(s);\n}());\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AD Pro Portfolio Grid &middot; Grilles portfolio professionnelles pour WordPress Voir les tarifs Le plugin de portfolio qui met vos projets en valeur. Le plugin WordPress portfolio pour les cr\u00e9atifs qui refusent les compromis. Filtrage AJAX, projets \u00e9pingl\u00e9s, contr\u00f4le visuel total \u2014 sans toucher \u00e0 une ligne de code. Voir les tarifs Obtenir le plugin [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":18888,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_gspb_post_css":"","footnotes":""},"class_list":["post-18793","page","type-page","status-publish","has-post-thumbnail","hentry"],"blocksy_meta":{"has_hero_section":"disabled","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/altaydagistan.com\/en\/wp-json\/wp\/v2\/pages\/18793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/altaydagistan.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/altaydagistan.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/altaydagistan.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/altaydagistan.com\/en\/wp-json\/wp\/v2\/comments?post=18793"}],"version-history":[{"count":57,"href":"https:\/\/altaydagistan.com\/en\/wp-json\/wp\/v2\/pages\/18793\/revisions"}],"predecessor-version":[{"id":18895,"href":"https:\/\/altaydagistan.com\/en\/wp-json\/wp\/v2\/pages\/18793\/revisions\/18895"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/altaydagistan.com\/en\/wp-json\/wp\/v2\/media\/18888"}],"wp:attachment":[{"href":"https:\/\/altaydagistan.com\/en\/wp-json\/wp\/v2\/media?parent=18793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}