/* ============================================================
   GENSHI — SEO & GEO : modules graphiques
   (en plus de genshi-v3.css + genshi-v4.css ; thème clair)
   ============================================================ */

/* ===== Mock de résultats de recherche (SERP) ===== */
.serp{ border:1px solid var(--line); border-radius:18px; background:var(--bg-2); overflow:hidden; box-shadow:0 34px 64px -38px rgba(20,20,20,.45); }
.serp-bar{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); }
.serp-bar .lens{ width:16px; height:16px; border:2px solid var(--dim-2); border-radius:50%; position:relative; flex:none; }
.serp-bar .lens::after{ content:""; position:absolute; right:-4px; bottom:-3px; width:7px; height:2px; background:var(--dim-2); transform:rotate(45deg); border-radius:2px; }
.serp-bar .q{ flex:1; font-family:var(--f-mono); font-size:12.5px; color:var(--dim); }
.serp-bar .q b{ color:var(--fg); font-weight:500; }
.serp-list{ padding:8px 16px 16px; display:flex; flex-direction:column; }
.serp-item{ padding:12px 0; border-top:1px solid var(--line-2); }
.serp-item:first-child{ border-top:0; }
.serp-item .u{ font-family:var(--f-mono); font-size:11px; color:var(--dim-2); }
.serp-item .ti{ font-size:14.5px; color:var(--dim); margin-top:4px; }
.serp-item .ln{ height:6px; background:var(--bg-3); border-radius:100px; margin-top:8px; }
.serp-item.you{ background:color-mix(in srgb,var(--accent) 8%, transparent); border-radius:12px; margin:4px -8px 0; padding:13px 12px; border-top:0; }
.serp-item.you .ti{ color:var(--accent); font-weight:600; font-family:var(--f-display); margin-top:2px; }
.serp-item.you .rank{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent); border-radius:100px; padding:3px 9px; }
.serp-foot{ padding:13px 16px; border-top:1px solid var(--line); display:flex; align-items:center; gap:9px; font-family:var(--f-mono); font-size:12px; color:var(--dim); background:color-mix(in srgb,var(--accent) 5%, transparent); }
.serp-foot svg{ width:15px; height:15px; color:var(--accent); }
.serp-foot b{ color:var(--accent); }

/* ===== Deux moteurs ===== */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:clamp(30px,4vw,46px); }
@media (max-width:760px){ .duo{ grid-template-columns:1fr; } }
.duo-card{ border:1px solid var(--line); border-radius:18px; background:var(--bg-2); padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; gap:13px; }
.duo-card .dic{ width:46px; height:46px; border-radius:12px; background:color-mix(in srgb,var(--accent) 12%, transparent); color:var(--accent); display:grid; place-items:center; }
.duo-card .dic svg{ width:24px; height:24px; }
.duo-card .dk{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.duo-card h3{ font-family:var(--f-display); font-weight:600; font-size:clamp(20px,2.2vw,26px); }
.duo-card p{ color:var(--dim); font-size:14.5px; line-height:1.55; }
.duo-card .dl{ margin-top:auto; padding-top:6px; font-family:var(--f-mono); font-size:12.5px; color:var(--dim); }
.duo-card .dl b{ color:var(--fg); font-weight:500; }
.tag-geo{ font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent); border-radius:100px; padding:3px 8px; }
.price-note{ font-family:var(--f-mono); font-size:11.5px; color:var(--dim-2); margin-top:16px; }
.amt .star{ color:var(--accent); }