/* Vitrine « Embarquer nos modules », refonte (chantier EMBED-REFONTE-2609, lane Opus-embed-tv). Trois fenêtres sur le monde :
   chaque module se montre VIVANT dans son cadre (un écran pour la télé, un bureau pour la carte postale, une fenêtre de
   navigateur pour la recherche), un seul bouton compte (« Copier le code »), les options arrivent au survol, au toucher ou
   au clavier. Jetons = ceux de la V2 (--bg, --surface, --ink, --muted, --line, --accent, --soft) ; chaque règle est
   préfixée par .emb2 pour primer sur .native-page (interligne 1,75, marges des titres, couleur des liens, bord des iframes). */
.native-page .emb2{--emb-tv:#2456c6;--emb-carte:#c8362b;--emb-rch:#6a4bd6;--emb-ok:#1e7a4c;--emb-sur:#ffffff;--emb-ombre:rgba(20,33,61,.22);
 display:grid;gap:clamp(64px,9vw,112px);margin:6px 0 24px;line-height:1.5;font-size:16px}
html[data-theme=dark] .native-page .emb2{--emb-tv:#9bbcff;--emb-carte:#ff9384;--emb-rch:#bba9ff;--emb-ok:#7fe0a8;--emb-sur:#0b1220;--emb-ombre:rgba(0,0,0,.55)}
.emb2 [data-module=tv]{--emb-c:var(--emb-tv)}
.emb2 [data-module=carte]{--emb-c:var(--emb-carte)}
.emb2 [data-module=recherche]{--emb-c:var(--emb-rch)}
.emb2 svg.emb2-ic{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.emb2 .emb2-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.emb2 button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.emb2 :focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── l'accueil ── */
.emb2 .emb2-accueil{display:grid;gap:clamp(24px,4vw,40px);align-items:center}
@media (min-width:900px){.emb2 .emb2-accueil{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.emb2 .emb2-surtitre{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.native-page .emb2 h1{margin:0 0 16px;font-size:clamp(36px,5.6vw,60px);line-height:1.02;letter-spacing:-.04em;max-width:13ch;text-wrap:balance}
.emb2 .emb2-chapo{margin:0 0 24px;max-width:50ch;font-size:clamp(16.5px,1.8vw,19px);line-height:1.55;color:var(--muted)}
.native-page .emb2 nav.emb2-sauts{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0}
.native-page .emb2 .emb2-saut{display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 8px;border:1px solid var(--line);border-radius:999px;
 background:var(--surface);color:var(--ink);font-size:14.5px;font-weight:680;text-decoration:none;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.native-page .emb2 .emb2-saut:hover{transform:translateY(-2px);border-color:var(--emb-c);box-shadow:0 12px 24px -16px var(--emb-c)}
.emb2 .emb2-saut .emb2-pastille{width:30px;height:30px;border-radius:50%}

/* la petite scène : un écran, une carte, une recherche qui se tape toute seule */
.emb2 .emb2-scene{position:relative;height:clamp(240px,32vw,390px);max-width:520px;width:100%;justify-self:center}
.emb2 .emb2-o{position:absolute;animation:emb2-flotte 7s ease-in-out infinite}
.emb2 .emb2-o-tv{left:2%;top:4%;width:64%;aspect-ratio:16/10;padding:8px;border-radius:20px;background:#0b1220;rotate:-4deg;
 box-shadow:0 34px 60px -30px rgba(11,18,32,.65),inset 0 0 0 1px rgba(255,255,255,.07)}
.emb2 .emb2-o-tv::after{content:"";position:absolute;left:39%;bottom:-13px;width:22%;height:13px;border-radius:0 0 10px 10px;background:#0b1220}
.emb2 .emb2-o-ecran{position:relative;height:100%;border-radius:13px;overflow:hidden;
 background:radial-gradient(120% 90% at 20% 10%,#3b6fd6 0%,#2a2f7a 42%,#0d1330 80%)}
.emb2 .emb2-o-ecran::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 45%,transparent 60%);
 animation:emb2-reflet 5.5s ease-in-out infinite}
.emb2 .emb2-o-direct{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 7px;border-radius:999px;
 background:#e5483d;color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.6}
.emb2 .emb2-o-direct i{width:6px;height:6px;border-radius:50%;background:#fff;animation:emb2-clignote 1.6s ease-in-out infinite}
.emb2 .emb2-o-lire{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.92)}
.emb2 .emb2-o-lire::after{content:"";position:absolute;left:18px;top:14px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #1d2f66}
.emb2 .emb2-o-carte{right:0;top:30%;width:47%;aspect-ratio:148/105;border-radius:6px;background:#fffdf6;rotate:7deg;animation-delay:-2.3s;
 box-shadow:0 26px 48px -26px rgba(20,33,61,.55),0 0 0 1px rgba(20,33,61,.06)}
.emb2 .emb2-o-timbre{position:absolute;right:9%;top:11%;width:20%;aspect-ratio:4/5;border-radius:2px;background:#c8362b;
 box-shadow:0 0 0 3px #fffdf6,0 0 0 4px rgba(20,33,61,.12)}
.emb2 .emb2-o-timbre::after{content:"";position:absolute;inset:22% 22%;border-radius:1px;background:#fffdf6;opacity:.9}
.emb2 .emb2-o-cachet{position:absolute;right:23%;top:16%;width:24%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(200,54,43,.7);rotate:-12deg}
.emb2 .emb2-o-ligne{position:absolute;left:9%;height:6px;border-radius:3px;background:#d8dce7}
.emb2 .emb2-o-ligne.l1{top:22%;width:44%;background:#2c3a5a;height:8px}
.emb2 .emb2-o-ligne.l2{top:38%;width:38%;background:#2c3a5a;height:8px}
.emb2 .emb2-o-ligne.l3{top:56%;width:26%}
.emb2 .emb2-o-recherche{left:8%;bottom:3%;width:66%;display:flex;align-items:center;gap:10px;height:54px;padding:0 7px 0 16px;border-radius:999px;
 border:1.5px solid var(--line);background:var(--surface);color:var(--muted);font-size:15px;animation-delay:-4.1s;
 box-shadow:0 22px 40px -24px var(--emb-ombre)}
.emb2 .emb2-frappe{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden}
.emb2 .emb2-o-curseur{width:2px;height:20px;margin-left:-8px;background:var(--emb-rch);animation:emb2-clignote 1s steps(2,start) infinite}
.emb2 .emb2-o-go{display:grid;place-items:center;width:40px;height:40px;margin-left:auto;border-radius:50%;background:var(--accent);color:var(--bg)}
@keyframes emb2-flotte{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes emb2-reflet{0%,55%{transform:translateX(-70%)}100%{transform:translateX(70%)}}
@keyframes emb2-clignote{50%{opacity:.3}}

/* ── un module : le texte, et l'aperçu vivant ── */
.emb2 .emb2-module{display:grid;gap:26px clamp(32px,5vw,64px);align-items:center;scroll-margin-top:96px}
@media (min-width:900px){
 .emb2 .emb2-module:not([data-module=tv]){grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
 .emb2 .emb2-module[data-module=carte]{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
 .emb2 .emb2-module[data-module=carte] .emb2-apercu{order:-1}
}
.emb2 .emb2-etiquette{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;color:var(--emb-c);font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.emb2 .emb2-pastille{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:12px;background:color-mix(in srgb,var(--emb-c) 15%,var(--surface));color:var(--emb-c)}
.native-page .emb2 .emb2-module h2{margin:0 0 14px;font-size:clamp(26px,3.3vw,38px);line-height:1.1;letter-spacing:-.028em;max-width:20ch;text-wrap:balance}
.native-page .emb2 .emb2-desc{margin:0;max-width:52ch;font-size:17px;line-height:1.6;color:var(--muted)}
.emb2 .emb2-module[data-module=tv] .emb2-texte{display:grid;gap:0 48px}
@media (min-width:900px){
 .emb2 .emb2-module[data-module=tv] .emb2-texte{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end}
 .emb2 .emb2-module[data-module=tv] .emb2-texte>.emb2-atouts,.emb2 .emb2-module[data-module=tv] .emb2-texte>.emb2-actions,
 .emb2 .emb2-module[data-module=tv] .emb2-texte>.emb2-etat,.emb2 .emb2-module[data-module=tv] .emb2-texte>.emb2-code{grid-column:2}
 .emb2 .emb2-module[data-module=tv] .emb2-texte>.emb2-entete{grid-column:1;grid-row:1 / span 4;align-self:start}
}
.native-page .emb2 .emb2-atouts{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.native-page .emb2 .emb2-atouts li{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:15.5px;line-height:1.45;color:var(--ink)}
.emb2 .emb2-atouts svg.emb2-ic{margin-top:2px;color:var(--emb-c)}
.emb2 .emb2-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:24px}
.emb2 .emb2-copier{position:relative;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px 0 18px;border:0;border-radius:999px;
 background:var(--emb-c);color:var(--emb-sur);font-size:16px;font-weight:760;box-shadow:0 16px 30px -16px var(--emb-c);transition:transform .15s ease,background .2s ease}
.emb2 .emb2-copier:hover{transform:translateY(-2px)}
.emb2 .emb2-copier .emb2-ok{display:none}
.emb2 .emb2-copier[data-copie]{background:var(--emb-ok)}
.emb2 .emb2-copier[data-copie] .emb2-ok{display:block}
.emb2 .emb2-copier[data-copie] .emb2-copie{display:none}
.emb2 .emb2-copier.emb2-pulse{animation:emb2-pouls .5s ease}
@keyframes emb2-pouls{40%{transform:scale(1.05)}}
.emb2 .emb2-voir{padding:6px 2px;border:0;background:none;color:var(--ink);font-size:15px;font-weight:650;text-decoration:underline;text-decoration-color:var(--line);
 text-decoration-thickness:2px;text-underline-offset:5px}
.emb2 .emb2-voir:hover{text-decoration-color:var(--emb-c)}
.native-page .emb2 .emb2-etat{min-height:1.5em;margin:10px 0 0;font-size:14px;color:var(--muted)}
.emb2 .emb2-code{margin-top:6px}
.emb2 .emb2-code pre{margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg);overflow-x:auto;
 white-space:pre-wrap;word-break:break-all;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}

/* l'aperçu : le vrai module, dans son cadre */
.emb2 .emb2-apercu{position:relative;min-width:0;padding-bottom:26px}
.emb2 .emb2-cadre{position:relative}
.native-page .emb2 .emb2-cadre iframe{display:block;width:100%;max-width:100%;border:0;border-radius:14px;background:transparent;transition:height .3s ease}
.emb2 .emb2-cadre[data-cadre=tv]{padding:10px;border-radius:24px;background:#0b1220;box-shadow:0 44px 80px -44px rgba(11,18,32,.7),inset 0 0 0 1px rgba(255,255,255,.07)}
.emb2 .emb2-cadre[data-cadre=tv]::after{content:"";display:block;width:18%;height:12px;margin:9px auto -2px;border-radius:0 0 12px 12px;background:#0b1220;opacity:.92}
/* color-scheme:light sur l'iframe de la carte : sa page est transparente et se dessine toujours en schéma CLAIR ; un navigateur
   peint un fond OPAQUE (blanc) sous une iframe dont le schéma diffère de celui de son cadre (vitrine de nuit). « normal » ne
   suffit pas : il hérite du schéma que la page déclare par sa balise meta (mesuré au banc le 26/09, partenaire sombre). */
.native-page .emb2 .emb2-cadre[data-cadre=carte] iframe{color-scheme:light}
.emb2 .emb2-cadre[data-cadre=carte]{padding:clamp(8px,2.5vw,26px);border-radius:26px;
 background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 13%,transparent) 1px,transparent 1.5px) 0 0/18px 18px,var(--soft)}
.emb2 .emb2-cadre[data-cadre=recherche]{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 30px 60px -38px var(--emb-ombre)}
.native-page .emb2 .emb2-cadre[data-cadre=recherche] iframe{border-radius:0}
.emb2 .emb2-navigateur{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg)}
.emb2 .emb2-navigateur i{width:10px;height:10px;border-radius:50%;background:#ff6159}
.emb2 .emb2-navigateur i:nth-child(2){background:#ffbd2e}.emb2 .emb2-navigateur i:nth-child(3){background:#28c941}
.emb2 .emb2-navigateur span{margin-left:10px;padding:3px 12px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* les options : au survol, au clavier, ou d'un appui sur « Personnaliser » */
.emb2 .emb2-reglages{position:absolute;left:50%;bottom:26px;z-index:4;transform:translate(-50%,50%);display:flex;justify-content:center}
.emb2 .emb2-perso{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 13px;border:1px solid var(--line);border-radius:999px;background:var(--surface);
 color:var(--ink);font-size:14px;font-weight:680;box-shadow:0 12px 26px -16px var(--emb-ombre);transition:opacity .18s ease,transform .18s ease}
.emb2 .emb2-options{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:6px;padding:6px;border:1px solid var(--line);border-radius:999px;background:var(--surface);
 box-shadow:0 20px 44px -20px var(--emb-ombre);white-space:nowrap;opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.94);
 transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
@media (hover:hover){
 .emb2 .emb2-apercu:hover .emb2-options{opacity:1;visibility:visible;transform:translate(-50%,-50%);transition:opacity .2s ease,transform .2s ease}
 .emb2 .emb2-apercu:hover .emb2-perso{opacity:0;transform:scale(.9)}
}
.emb2 .emb2-apercu:focus-within .emb2-options,.emb2 .emb2-apercu[data-ouvert] .emb2-options,.emb2 .emb2-apercu[data-pop] .emb2-options{
 opacity:1;visibility:visible;transform:translate(-50%,-50%);transition:opacity .2s ease,transform .2s ease}
.emb2 .emb2-apercu:focus-within .emb2-perso,.emb2 .emb2-apercu[data-ouvert] .emb2-perso,.emb2 .emb2-apercu[data-pop] .emb2-perso{opacity:0;transform:scale(.9)}
.emb2 .emb2-apercu[data-pop] .emb2-reglages{z-index:20}
.emb2 .emb2-groupe{display:flex;gap:2px;padding:2px;border-radius:999px;background:var(--bg)}
.emb2 .emb2-choix{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:34px;height:32px;padding:0 10px;border:0;border-radius:999px;
 background:transparent;color:var(--muted);font-size:13px;font-weight:700}
.emb2 .emb2-choix:hover{color:var(--ink)}
.emb2 .emb2-choix[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px var(--emb-ombre)}
.emb2 .emb2-choix svg.emb2-ic{width:16px;height:16px}
.emb2 .emb2-sep{width:1px;height:22px;background:var(--line)}
.emb2 .emb2-plus-conteneur{position:relative}
.emb2 .emb2-plus{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 10px 0 12px;border:0;border-radius:999px;background:transparent;color:var(--ink);
 font-size:13px;font-weight:700}
.emb2 .emb2-plus:hover,.emb2 .emb2-plus[aria-expanded=true]{background:var(--bg)}
.emb2 .emb2-plus svg.emb2-ic{width:15px;height:15px;transition:transform .2s ease}
.emb2 .emb2-plus[aria-expanded=true] svg.emb2-ic{transform:rotate(180deg)}
.emb2 .emb2-pop{position:absolute;left:0;top:calc(100% + 10px);z-index:30;width:min(320px,calc(100vw - 32px));display:grid;gap:12px;padding:14px;border:1px solid var(--line);
 border-radius:18px;background:var(--surface);box-shadow:0 24px 50px -22px var(--emb-ombre);white-space:normal;text-align:left}
.emb2 .emb2-pop-tete{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* six choix pour le lecteur TV : deux colonnes (les menus à gauche, les boutons à droite), pour que le panneau tienne sous
   son bouton sans faire défiler la page */
.emb2 .emb2-pop[data-colonnes="2"]{width:min(600px,calc(100vw - 32px));grid-template-columns:1fr 1fr;grid-auto-flow:row dense;gap:14px 18px;align-items:start}
.emb2 .emb2-pop[data-colonnes="2"] .emb2-pop-tete{grid-column:1 / -1}
.emb2 .emb2-pop[data-colonnes="2"]>.emb2-champ:nth-child(-n+4){grid-column:1}
.emb2 .emb2-pop[data-colonnes="2"]>.emb2-champ:nth-child(n+5){grid-column:2}
.emb2 .emb2-pop[data-colonnes="2"] .emb2-champ .emb2-groupe{flex-wrap:nowrap}.emb2 .emb2-pop[data-colonnes="2"] .emb2-champ .emb2-choix{padding:0 8px}
.emb2 .emb2-pop-tete b{font-size:14px}
.emb2 .emb2-pop-fermer{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:var(--bg);color:var(--ink)}
.emb2 .emb2-champ{display:grid;gap:6px;align-content:start}
.emb2 .emb2-champ>span{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.native-page .emb2 .emb2-champ select{width:100%;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-size:14px}
.emb2 .emb2-champ .emb2-groupe{flex-wrap:wrap;border-radius:14px}
.emb2 .emb2-champ .emb2-choix{flex:1 1 auto}
@media (max-width:760px){
 .emb2 .emb2-apercu{padding-bottom:0;display:flex;flex-direction:column}
 .emb2 .emb2-apercu>.emb2-reglages{order:1}
 .emb2 .emb2-pop[data-colonnes="2"]{grid-template-columns:1fr}.emb2 .emb2-pop[data-colonnes="2"]>.emb2-champ{grid-column:auto!important}
 .emb2 .emb2-reglages{position:static;transform:none;display:grid;justify-items:center;gap:10px;margin-top:14px}
 .emb2 .emb2-options{position:relative;left:auto;top:auto;flex-wrap:wrap;justify-content:center;border-radius:20px;white-space:normal;transform:none;display:none}
 .emb2 .emb2-apercu:focus-within .emb2-options,.emb2 .emb2-apercu[data-ouvert] .emb2-options,.emb2 .emb2-apercu[data-pop] .emb2-options{display:flex;transform:none}
 .emb2 .emb2-apercu:focus-within .emb2-perso,.emb2 .emb2-apercu[data-ouvert] .emb2-perso,.emb2 .emb2-apercu[data-pop] .emb2-perso{opacity:1;transform:none}
 .emb2 .emb2-sep{display:none}
 /* au doigt : 44 px pour chaque geste de la barre et du panneau */
 .emb2 .emb2-perso,.emb2 .emb2-choix,.emb2 .emb2-plus{height:44px}.emb2 .emb2-choix{min-width:44px}
 .emb2 .emb2-pop-fermer{width:44px;height:44px}.native-page .emb2 .emb2-champ select{height:44px}
}

/* ── la fin : trois gestes, trois promesses ── */
.emb2 .emb2-fin{display:grid;gap:26px;padding:clamp(24px,4vw,42px);border:1px solid var(--line);border-radius:28px;background:var(--surface)}
.native-page .emb2 .emb2-fin h2{margin:0;font-size:clamp(24px,3vw,32px);letter-spacing:-.025em;line-height:1.15}
.native-page .emb2 .emb2-etapes{list-style:none;counter-reset:emb2;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.native-page .emb2 .emb2-etapes li{counter-increment:emb2;display:grid;gap:6px;margin:0;align-content:start}
.emb2 .emb2-etapes li::before{content:counter(emb2);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--bg);font-weight:800}
.emb2 .emb2-etapes b{font-size:17px}
.emb2 .emb2-etapes span{color:var(--muted);font-size:15px;line-height:1.5}
.native-page .emb2 .emb2-promesses{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.native-page .emb2 .emb2-promesses li{display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 15px 8px 11px;border-radius:999px;background:var(--soft);
 color:var(--ink);font-size:14.5px;font-weight:650}
.emb2 .emb2-promesses svg.emb2-ic{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.emb2 *,.emb2 *::before,.emb2 *::after{animation:none!important;transition:none!important}}