/* ===== widget SEO / GEO : une recherche Google qui se tape, le client qui monte à la 1re place,
   puis la même question à une IA qui le cite. Composition dans une carte .wz, unités cqw. ===== */
.seo{position:absolute;inset:0;container-type:inline-size;font-family:Inter,"Figtree",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.seo *{box-sizing:border-box}.seo p{margin:0;font:inherit;color:inherit;letter-spacing:normal}
.seo-fen{position:absolute;border:.25cqw solid #221726;border-radius:2cqw;overflow:hidden;box-shadow:0 3cqw 6cqw -2cqw rgba(34,23,38,.45)}
.seo-barre{height:6cqw;display:flex;align-items:center;gap:1.2cqw;padding:0 2.4cqw;font-size:1.9cqw}
.seo-barre i{width:1.6cqw;height:1.6cqw;border-radius:50%}
.seo-barre span{margin-left:1.4cqw;flex:1;padding:.9cqw 1.8cqw;border-radius:99px;font-size:1.8cqw;white-space:nowrap;overflow:hidden}
/* fenêtre Google */
.seo-g{left:5cqw;top:6cqw;width:84cqw;height:66cqw;background:#fff;color:#202124}
.seo-g .seo-barre{background:#F1F3F4;color:#5F6368}.seo-g .seo-barre i{background:#DADCE0}.seo-g .seo-barre span{background:#fff}
.seo-tete{display:flex;align-items:center;gap:2.4cqw;padding:2.4cqw 3cqw 1.6cqw}
.seo-logo{font:600 3.6cqw/1 "Product Sans",Arial,sans-serif;letter-spacing:-.05em}
.seo-logo b:nth-child(1),.seo-logo b:nth-child(4){color:#4285F4}.seo-logo b:nth-child(2),.seo-logo b:nth-child(6){color:#EA4335}
.seo-logo b:nth-child(3){color:#FBBC05}.seo-logo b:nth-child(5){color:#34A853}.seo-logo b{font-weight:500}
.seo-q{flex:1;display:flex;align-items:center;gap:1.4cqw;height:5.6cqw;padding:0 2.4cqw;border-radius:99px;box-shadow:0 .2cqw .8cqw rgba(32,33,36,.28);font-size:2.2cqw;white-space:nowrap;overflow:hidden}
.seo-q svg{width:2.2cqw;height:2.2cqw;color:#9AA0A6;flex:none}
.seo-caret{display:inline-block;width:.25cqw;height:2.6cqw;background:#1A73E8;vertical-align:middle;animation:seoCl 1s steps(1) infinite}
@keyframes seoCl{50%{opacity:0}}
.seo-ongl{display:flex;gap:3cqw;padding:0 3cqw 0 13cqw;border-bottom:.15cqw solid #E8EAED;font-size:1.8cqw;color:#5F6368}
.seo-ongl span{padding:1cqw 0}.seo-ongl span.on{color:#1A73E8;box-shadow:inset 0 -.35cqw #1A73E8}
.seo-res{position:relative;margin:2cqw 3cqw 0 13cqw;height:40cqw}
.seo-r{position:absolute;left:0;right:0;height:9.6cqw;padding:1.1cqw 1.6cqw;border-radius:1.2cqw;transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .4s,background .4s;opacity:0}
.seo-r.vu{opacity:1}
.seo-r .src{display:flex;align-items:center;gap:1.2cqw;font-size:1.55cqw;color:#202124}
.seo-r .src i{width:2.8cqw;height:2.8cqw;border-radius:50%;background:var(--f,#E8EAED);display:grid;place-items:center;font:700 1.3cqw/1 system-ui;font-style:normal;color:#fff}
.seo-r .src small{display:block;color:#5F6368;font-size:1.35cqw}
.seo-r h4{margin:.8cqw 0 0;font:400 2.25cqw/1.2 Arial,sans-serif;color:#1A0DAB;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seo-r.moi{background:#F0FAF4}
.seo-r.moi.sel{box-shadow:inset 0 0 0 .25cqw #34A853}
.seo-rang{position:absolute;right:1.4cqw;top:1.2cqw;padding:.6cqw 1.2cqw;border-radius:99px;background:#9AA0A6;color:#fff;font:700 1.5cqw/1 system-ui;transition:background .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.seo-r.moi.haut .seo-rang{background:#34A853;transform:scale(1.12)}
/* fenêtre IA */
.seo-ia{left:30cqw;top:56cqw;width:64cqw;height:36cqw;background:#17161B;color:#E6E4EA}
.seo-ia .seo-barre{background:#201F25;color:#9C98A6}.seo-ia .seo-barre i{background:#3A3842}.seo-ia .seo-barre span{background:#2A2930;color:#BDB8C8}
.seo-fil{padding:2.4cqw 2.8cqw;display:flex;flex-direction:column;gap:1.8cqw;font-size:1.95cqw;line-height:1.4}
.seo-moi{align-self:flex-end;max-width:78%;padding:1.3cqw 1.9cqw;border-radius:1.8cqw 1.8cqw .4cqw 1.8cqw;background:#3A3842;color:#fff;opacity:0;transition:opacity .3s}
.seo-moi.on{opacity:1}
.seo-rep{display:flex;gap:1.4cqw;opacity:0;transition:opacity .3s}.seo-rep.on{opacity:1}
.seo-rep i{flex:none;width:3.2cqw;height:3.2cqw;border-radius:50%;background:conic-gradient(from 200deg,#B7A3FF,#8FD9FF,#9BE3A8,#B7A3FF);font-style:normal}
.seo-rep p b{color:#fff}
.seo-srcs{display:flex;gap:1cqw;margin-top:1.2cqw;opacity:0;transform:translateY(.8cqw);transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.seo-srcs.on{opacity:1;transform:none}
.seo-srcs span{display:flex;align-items:center;gap.8cqw;gap:.8cqw;padding:.7cqw 1.3cqw;border-radius:99px;background:#26252C;border:.15cqw solid #3A3842;font-size:1.5cqw;color:#CFCBD8}
.seo-srcs span i{width:1.9cqw;height:1.9cqw;border-radius:50%;background:#1E3A8A;flex:none}
.seo-srcs span.moi{border-color:#9BE3A8;color:#fff}

/* la fenêtre de l'IA n'arrive qu'au moment de la question */
.seo-ia{transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .5s}
.seo:not(.ia) .seo-ia{transform:translateY(12cqw);opacity:0}

/* lisibilité (Liham, 24/09) : textes ~25 % plus grands, colonnes Google moins décalées */
.seo-g{left:4cqw;top:5cqw;width:88cqw;height:78cqw}
.seo-barre{height:6.4cqw;font-size:2.1cqw}
.seo-tete{padding:2.4cqw 3cqw 1.8cqw;gap:2cqw}.seo-logo{font-size:4.2cqw}
.seo-q{height:6.6cqw;font-size:2.8cqw}.seo-q svg{width:2.6cqw;height:2.6cqw}.seo-caret{height:3.2cqw}
.seo-ongl{padding:0 3cqw;font-size:2.3cqw}
.seo-res{margin:2cqw 3cqw 0;height:52cqw}
.seo-r{height:12.2cqw;padding:1.3cqw 1.8cqw}
.seo-r .src{font-size:2.05cqw;gap:1.4cqw}.seo-r .src i{width:3.4cqw;height:3.4cqw;font-size:1.6cqw}.seo-r .src small{font-size:1.7cqw}
.seo-r h4{font-size:2.85cqw;margin-top:1cqw}
.seo-rang{font-size:1.95cqw;padding:.8cqw 1.5cqw;top:1.4cqw}
.seo-ia{left:22cqw;top:57cqw;width:74cqw;height:47cqw}
.seo-fil{font-size:2.55cqw;padding:2.6cqw 3cqw;gap:2cqw}
.seo-rep i{width:4cqw;height:4cqw}
.seo-srcs span{font-size:1.95cqw;padding:.9cqw 1.6cqw}.seo-srcs span i{width:2.3cqw;height:2.3cqw}

/* mise en scène différente de Développement : Google en grand à droite, l'IA sur un téléphone posé en bas à gauche */
.seo-g{left:12cqw;top:5cqw;width:84cqw;height:76cqw}
.seo-ia{left:4cqw;top:40cqw;width:44cqw;height:66cqw;border-radius:5.4cqw;border:.25cqw solid #221726;background:#17161B;
  box-shadow:0 0 0 1.1cqw #0E0D11,0 0 0 1.35cqw #221726,0 3cqw 6cqw -1cqw rgba(34,23,38,.55);transform:rotate(-4deg)}
.seo:not(.ia) .seo-ia{transform:translateY(16cqw) rotate(-4deg);opacity:0}
.seo.ia .seo-ia{transform:rotate(-4deg)}
.seo-ia .seo-barre{height:7.4cqw;justify-content:center;background:#17161B;padding:0 2cqw}
.seo-ia .seo-barre i{display:none}
.seo-ia .seo-barre span{flex:none;margin:0;padding:.9cqw 2.4cqw;background:#26252C;font-weight:600;color:#fff}
.seo-ia .seo-barre::before{content:"";position:absolute;left:50%;top:1.4cqw;width:9cqw;height:1.6cqw;margin-left:-4.5cqw;border-radius:99px;background:#000}
.seo-ia .seo-barre{position:relative;padding-top:2.4cqw;height:9cqw}
.seo-ia .seo-fil{font-size:2.35cqw;padding:2.2cqw 2.4cqw;gap:1.8cqw}
.seo-ia .seo-moi{max-width:88%}
.seo-ia .seo-srcs{flex-wrap:wrap}
.seo-ia .seo-srcs span{font-size:1.75cqw}

/* mouvement réduit : le curseur de saisie reste allumé, sans clignoter */
@media (prefers-reduced-motion:reduce){.seo-caret{animation:none}}
