/* ==================================================================
   STUDIO — le nouveau parcours de creation (14/08), ecran 1.
   Palette autonome fidele aux maquettes (sombre violet), independante
   du theme du site : le studio a SA lumiere.
   ================================================================== */
.st{--stbg:#0b0b15;--stp:#131322;--stp2:#181829;--stl:#252540;--stl2:#32325a;
  --stv:#7c3aed;--stv2:#a78bfa;--stt:#ececf6;--stm:#9494b0;--str:14px;
  min-height:100vh;background:var(--stbg);color:var(--stt);
  font-size:.95rem;line-height:1.5}
/* Nos display: explicites ecraseraient l'attribut hidden — jamais ici. */
.st [hidden]{display:none!important}
.st a{color:var(--stv2)}
/* ---- barre haute : logo, 6 etapes, enregistrer ---- */
.st-haut{display:flex;align-items:center;gap:1.2rem;padding:.65rem 1.2rem;
  border-bottom:1px solid var(--stl);background:var(--stbg);position:sticky;top:0;z-index:20}
.st-logo{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.05rem;
  color:var(--stt);text-decoration:none}
.st-etapes{display:flex;gap:1.1rem;margin:0 auto;overflow-x:auto;scrollbar-width:none}
/* Pastilles SEULES dans la barre (17/08) : le rail gauche porte deja les
   intitules complets — les repeter ici doublonnait. font-size:0 efface le
   libelle, la pastille garde le sien. */
.st-etape{display:flex;align-items:center;gap:0;white-space:nowrap;
  font-size:0;color:var(--stm);padding:.35rem 0;border-bottom:2px solid transparent}
.st-etape i{font-style:normal;display:grid;place-items:center;width:24px;height:24px;
  border-radius:50%;background:var(--stp2);border:1px solid var(--stl);font-size:.76rem}
.st-etape.on{color:var(--stt);border-bottom-color:var(--stv)}
.st-etape.on i{background:var(--stv);border:0;color:#fff;font-weight:700}
/* Un indicateur discret, pas un bouton : sans bordure ni fond, il ne
   reclame aucun clic — la coche verte dit que c'est deja fait. */
.st-enr{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--stm);
  white-space:nowrap;cursor:default}
.st-enr svg{color:#34d399;flex:0 0 auto}
.theme-clair .st-enr svg{color:#059669}
/* La progression compacte : n'existe qu'en mobile (voir le bloc 560px). */
.st-prog{display:none}
/* La bascule clair / sombre, re-habillee aux couleurs du studio (la regle
   d'app.css utilise les variables du site, absentes ici). */
.st .bascule-theme{display:inline-grid;place-items:center;width:36px;height:36px;
  flex:0 0 auto;border-radius:10px;border:1px solid var(--stl);background:var(--stp2);
  color:var(--stm);transition:.14s ease}
.st .bascule-theme:hover{color:var(--stv2);border-color:var(--stv);background:var(--stp2)}
/* ---- trois colonnes ---- */
.st-corps{display:grid;grid-template-columns:250px minmax(0,1fr) 300px;gap:1.4rem;
  max-width:1520px;margin:0 auto;padding:1.4rem 1.2rem 3rem}
.st-gauche,.st-droite{align-self:start;position:sticky;top:64px}
/* ---- colonne gauche ---- */
.st-g-titre{display:flex;gap:.45rem;align-items:center;margin:0 0 .5rem;
  font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--stv2)}
.st-g-sous{margin:0 0 1.1rem;font-size:.85rem;color:var(--stm)}
/* Aeree pour EQUILIBRER les deux rails : ~500 px comme la colonne de
   droite (Resume + IA) depuis le retrait de la note securite (17/08). */
.st-g-etapes{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.st-g-etapes li{display:flex;gap:.65rem;align-items:flex-start;padding:.9rem .8rem;
  border-radius:14px;color:var(--stm)}
.st-g-etapes li i{font-style:normal;flex:0 0 auto;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;background:var(--stp2);
  border:1px solid var(--stl);font-size:.78rem;margin-top:.1rem}
.st-g-etapes li b{display:block;color:var(--stt);font-size:.9rem}
.st-g-etapes li span span{display:block;font-size:.78rem;line-height:1.35}
/* L'etape en cours : la carte des maquettes — surface posee, coins ronds,
   pastille pleine violette. Le degrade rose a quitte les pastilles. */
.st-g-etapes li.on{background:var(--stp2);outline:1px solid var(--stl2);
  box-shadow:0 4px 16px rgba(0,0,0,.18)}
.st-g-etapes li.on i{background:var(--stv);border:0;color:#fff;font-weight:700}
.st-g-etapes li.on span span{color:var(--stm)}
.st-g-aide{margin-top:1.2rem;border:1px solid var(--stl);border-radius:var(--str);
  background:var(--stp);padding:.85rem .9rem;font-size:.85rem;color:var(--stm)}
.st-g-aide b{color:var(--stt)}
.st-g-aide .st-btn{margin-top:.6rem}
/* ---- boutons ---- */
.st-btn{display:inline-flex;align-items:center;gap:.45rem;border-radius:11px;
  padding:.55rem .95rem;font-size:.88rem;font-weight:650;cursor:pointer;
  border:1px solid var(--stl);background:var(--stp2);color:var(--stt);transition:.14s ease}
.st-btn:hover{border-color:var(--stl2)}
.st-btn-ghost{background:transparent}
/* « Valider avec l'IA » : plein et lisible — c'est LE geste de l'ecran.
   Pilule degradee des maquettes, l'etincelle apres le libelle. */
.st-btn-ia{border-color:transparent;border-radius:999px;padding:.6rem 1.25rem;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;font-weight:700;
  box-shadow:0 4px 14px rgba(124,58,237,.35)}
.st-btn-ia:hover{border-color:transparent;filter:brightness(1.1)}
/* Une phrase est ecrite et pas encore validee : le bouton respire pour
   appeler le clic. L'animation s'eteint des que l'analyse est faite. */
@keyframes st-appel{
  0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.65)}
  55%{box-shadow:0 0 0 11px rgba(139,92,246,0)}
}
.st-btn-ia.attire{animation:st-appel 1.5s ease-out infinite}
@media (prefers-reduced-motion: reduce){ .st-btn-ia.attire{animation:none} }
.st-btn-avance{background:var(--stv);border-color:var(--stv);color:#fff;
  padding:.7rem 1.5rem;font-size:.95rem}
.st-btn-avance:hover{background:#8b5cf6}
.st-btn[disabled]{opacity:.55;cursor:wait}
/* Le « Valider avec l'IA » du haut, eteint pendant les precisions : clair
   et inerte, comme « Etape suivante » — un seul geste actif a la fois. */
.st-btn-ia[disabled]{background:var(--stp2);border-color:var(--stl);
  color:var(--stm);opacity:1;cursor:not-allowed;animation:none;
  box-shadow:none;filter:none}
/* « Etape suivante » inactif : clair, eteint, pas cliquable — le chemin
   passe d'abord par « Valider avec l'IA » et les confirmations. */
.st-btn-avance[disabled]{background:var(--stp2);border-color:var(--stl);
  color:var(--stm);opacity:1;cursor:not-allowed}
.st-btn-avance[disabled]:hover{background:var(--stp2)}
/* ---- centre ---- */
.st-titre{display:flex;gap:.9rem;align-items:flex-start;margin:0 0 1.1rem}
.st-titre-ico{flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;
  border-radius:50%;background:rgba(124,58,237,.18);color:var(--stv2)}
.st-titre h1{margin:0 0 .2rem;font-size:1.55rem;letter-spacing:-.01em}
.st-titre p{margin:0;color:var(--stm)}
.st-saisie{position:relative;border:1.5px solid var(--stl2);border-radius:var(--str);
  background:var(--stp);padding:1rem 1rem 2rem 2.7rem;transition:.14s ease}
.st-saisie:focus-within{border-color:var(--stv)}
.st-saisie-ico{position:absolute;top:1.05rem;left:.95rem;color:var(--stv2)}
/* Le champ grandit TOUT SEUL (ajusterZone) : ni barre de défilement — sous
   Windows elle s'installe à demeure dès que l'aperçu 4 lignes tronque —
   ni poignée de redimensionnement qui se bat avec le script (18/08). */
.st-saisie textarea{width:100%;border:0;background:transparent;color:var(--stt);
  font:inherit;font-size:1.02rem;line-height:1.6;resize:none;overflow-y:hidden;
  min-height:120px;outline:none;transition:min-height .18s ease}
/* Apres l'analyse, la zone se compacte — elle a fait son travail. Le focus
   la ré-agrandit pour retravailler la phrase confortablement. min-height ne
   suffit pas : l'attribut rows=5 impose sa hauteur, il faut piloter height. */
.st-saisie.compacte textarea{height:64px;min-height:64px}
.st-saisie.compacte:focus-within textarea{height:130px;min-height:130px}
.st-saisie textarea::placeholder{color:var(--stm)}
.st-compte{position:absolute;right:.9rem;bottom:.6rem;font-size:.78rem;color:var(--stm)}
/* L'exemple sous le champ — un placeholder externe, qui ne fait jamais
   defiler le champ vide. Un cran plus clair que les autres textes gris
   (demande du 17/08) ; le theme clair garde son gris fonce, l'eclaircir
   sur blanc le rendrait illisible. */
.st-exemple{margin:.5rem .2rem 0;font-size:.82rem;color:#bdbdd6;font-style:italic}
.theme-clair .st-exemple{color:var(--stm)}
.st-ligne-aide{display:flex;gap:.8rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin:.8rem 0 1.2rem}
.st-conseil{display:flex;gap:.5rem;align-items:center;margin:0;font-size:.84rem;
  color:var(--stm);border:1px solid var(--stl);border-radius:11px;
  background:var(--stp);padding:.55rem .8rem}
/* ---- ce que l'IA a compris ---- */
.st-compris{position:relative;border:1px solid var(--stl2);border-radius:var(--str);
  background:var(--stp);padding:.9rem 1rem;margin:0 0 1.2rem}
/* « Revalidez vos reponses » : le geste du second tour, pose sur la carte
   repliee qui le concerne, et qui pulse comme tout geste attendu. */
.st-revalider{position:absolute;top:.55rem;right:2.4rem;padding:.4rem .85rem;
  font-size:.82rem;animation:st-appel 1.5s ease-out infinite}
@media (prefers-reduced-motion: reduce){ .st-revalider{animation:none} }
@media(max-width:560px){ .st-revalider{position:static;margin:.5rem 0 0} }
/* Tete depliable partagee (compris + inspiration) : tout confirme, le bloc
   se replie et rend la place aux cartes et aux boutons du bas. */
.st-compris-tete{display:flex;align-items:center;justify-content:space-between;
  gap:.8rem;width:100%;border:0;background:none;color:inherit;cursor:pointer;
  padding:0;text-align:left;font:inherit}
.st-compris-tete .st-sec-titre{margin:0}
/* Le chevron de pli / depli : une vraie pastille ronde bien visible (17/08),
   partagee par tous les blocs depliables du studio. */
.st-chevron{font-style:normal;color:var(--stm);transition:transform .15s ease;
  display:inline-grid;place-items:center;flex:0 0 auto;width:30px;height:30px;
  font-size:1.05rem;border:1px solid var(--stl);border-radius:50%;background:var(--stp2)}
.st-compris-tete:hover .st-chevron{color:var(--stt);border-color:var(--stv2)}
/* La pastille qui montre OU replier : posee sur le chevron du bloc quand le
   message central en parle — elle pulse le temps du message. */
.st-chevron.signal{background:var(--stv);border-color:var(--stv);color:#fff;
  animation:st-appel 1.5s ease-out infinite}
@media (prefers-reduced-motion: reduce){ .st-chevron.signal{animation:none} }
.plie .st-chevron{transform:rotate(-90deg)}
.st-compris .st-compris-corps{margin-top:.6rem}
.plie > .st-compris-corps,.st-compris.plie .st-compris-corps{display:none}
.st-compris.plie{border-color:#1d4d3a;background:rgba(16,185,129,.06)}
.st-compris.plie .st-sec-note{color:#34d399}
.st-sec-titre{margin:0 0 .6rem;font-size:.82rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--stv2)}
.st-sec-titre b{color:inherit}
.st-sec-note{font-weight:500;letter-spacing:0;text-transform:none;color:var(--stm)}
/* UN champ a la fois (15/08) : l'actif en pleine largeur sous un cadre
   anime — « c'est cette information qu'il faut renseigner maintenant » —,
   les valides en lignes compactes, le reste attend son tour. Pense pour
   les seniors et le mobile : grand, net, une seule question. */
.st-compris-l{display:grid;grid-template-columns:1fr;gap:.5rem}
.st-champ{display:none;font-size:.88rem}
.st-champ input[type=text]{width:100%;border:1px solid var(--stl);border-radius:10px;
  background:var(--stp2);color:var(--stt);font:inherit;font-size:.95rem;padding:.55rem .7rem}
.st-champ input[type=text]:focus{border-color:var(--stv);outline:none}
/* L'actif : pleine largeur, question au-dessus, boutons dessous, cadre
   violet qui respire. */
.st-champ.actif{display:grid;gap:.55rem;padding:.9rem 1rem;border-radius:12px;
  border:2px solid var(--stv);background:rgba(124,58,237,.07);
  animation:st-cadre 1.6s ease-out infinite}
@keyframes st-cadre{
  0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.5)}
  55%{box-shadow:0 0 0 8px rgba(139,92,246,0)}
}
@media (prefers-reduced-motion: reduce){ .st-champ.actif{animation:none} }
.st-champ.actif label{color:var(--stt);font-weight:700;font-size:.95rem}
.st-champ.actif input[type=text]{font-size:1.05rem;padding:.65rem .8rem}
.st-champ.actif .st-statut{justify-content:flex-end}
.st-champ.actif .st-ok-deduit{background:var(--stv);border-color:var(--stv);color:#fff;
  font-size:.85rem;padding:.45rem .95rem}
.st-champ.actif .st-ok-deduit:hover{background:#8b5cf6}
.st-champ.actif .st-corrige{font-size:.85rem;padding:.45rem .95rem}
/* Les valides se FONDENT dans la ligne-bilan : la liste detaillee ne
   s'affiche qu'a la demande (« Voir / modifier »). */
.st-faits-resume{display:flex;align-items:center;justify-content:space-between;
  gap:.8rem;width:100%;margin:0 0 .55rem;padding:.55rem .8rem;cursor:pointer;
  border:1px solid #1d4d3a;border-radius:10px;background:rgba(16,185,129,.07);
  color:#34d399;font:inherit;font-size:.85rem;font-weight:700;text-align:left}
.st-faits-resume i{font-style:normal;color:var(--stm);font-weight:600;font-size:.8rem;
  white-space:nowrap}
.st-faits-resume:hover i{color:var(--stt)}
.st-champ.fait{display:none}
.st-compris.voirfaits .st-champ.fait{display:grid;grid-template-columns:110px minmax(0,1fr) auto;
  gap:.6rem;align-items:center}
.st-champ.fait label{color:var(--stm);font-size:.82rem}
.st-champ.fait input[type=text]{border-color:transparent;background:transparent;
  padding:.2rem .3rem;font-size:.88rem}
.st-champ.fait input[type=text]:focus{border-color:var(--stv);background:var(--stp2)}
@media(max-width:560px){ .st-champ.fait{grid-template-columns:1fr;gap:.15rem} }
.st-statut{font-size:.72rem;font-weight:700;white-space:nowrap;display:inline-flex;
  align-items:center;gap:.35rem}
.st-statut-confirme{color:#34d399}
.st-statut-deduit{color:#fbbf24}
.st-ok-deduit{border:1px solid var(--stl2);background:transparent;color:var(--stv2);
  border-radius:8px;padding:.15rem .5rem;font-size:.72rem;font-weight:700;cursor:pointer}
.st-ok-deduit:hover{background:rgba(124,58,237,.2)}
/* « ← Retour » : rouvrir la question precedente sans rien perdre — on se
   rend compte d'une erreur souvent une question trop tard. Pose a GAUCHE
   des gestes d'avancee, dans le cadre actif seulement. */
.st-retour{border:1px solid var(--stl);background:transparent;color:var(--stm);
  border-radius:9px;padding:.45rem .95rem;font-size:.85rem;font-weight:700;
  cursor:pointer;margin-right:auto;transition:.13s ease}
.st-retour:hover{border-color:var(--stl2);color:var(--stt)}
/* La confirmation de « Recommencez » : une bulle DANS la page, ancree au
   bouton — jamais la fenetre native du navigateur. */
.st-reinit{position:relative}
.st-reinit-conf{position:absolute;bottom:calc(100% + 10px);left:0;z-index:30;
  width:min(300px,calc(100vw - 2.4rem));border:1px solid var(--stl2);
  border-radius:12px;background:var(--stp);padding:.85rem .95rem;
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
.st-reinit-conf p{margin:0 0 .65rem;font-size:.92rem;font-weight:700;color:var(--stt)}
.st-reinit-conf p span{font-weight:500;color:var(--stm);font-size:.84rem}
.st-reinit-conf > div{display:flex;gap:.5rem;flex-wrap:wrap}
/* « Corriger » : le second choix de chaque ligne — il mene au champ. */
.st-corrige{border:1px solid var(--stl);background:transparent;color:var(--stm);
  border-radius:8px;padding:.15rem .5rem;font-size:.72rem;font-weight:700;cursor:pointer}
.st-corrige:hover{border-color:var(--stl2);color:var(--stt)}
.st-statut-confirme .st-corrige{border:0;padding:.05rem .3rem;font-size:.8rem}
/* ---- la carte « Quelques precisions » ----
   Meme principe que « compris » : UNE question a la fois dans le cadre
   anime, les traitees fondues dans la ligne-bilan, hauteur constante. */
.st-precisions #stPrecL{display:grid;gap:.5rem;margin-top:.6rem}
.st-prec{display:none;gap:.55rem;font-size:.88rem}
.st-prec.actif{display:grid;padding:.9rem 1rem;border-radius:12px;
  border:2px solid var(--stv);background:rgba(124,58,237,.07);
  animation:st-cadre 1.6s ease-out infinite}
@media (prefers-reduced-motion: reduce){ .st-prec.actif{animation:none} }
.st-prec.actif label,.st-prec.actif .st-prec-q{font-weight:700;font-size:.95rem}
.st-prec-actions{display:flex;gap:.45rem;justify-content:flex-end}
.st-prec.actif .st-prec-ok{background:var(--stv);border-color:var(--stv);color:#fff;
  font-size:.85rem;padding:.45rem .95rem}
.st-prec.actif .st-prec-ok:hover{background:#8b5cf6}
.st-prec.actif .st-prec-passer,.st-prec.actif .st-passer{font-size:.85rem;padding:.45rem .95rem}
/* Le detail deplie : lignes traitees compactes, avec leur « Modifier ». */
.st-precisions.voirfaits .st-prec.fait{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;gap:.6rem}
.st-precisions.voirfaits .st-prec.fait label,
.st-precisions.voirfaits .st-prec.fait .st-prec-q{font-size:.82rem;color:var(--stm)}
.st-precisions.voirfaits .st-prec.fait input[type=text]{grid-column:1/-1;
  border-color:transparent;background:transparent;padding:.15rem .3rem;font-size:.86rem}
.st-prec-mod{display:none}
.st-precisions.voirfaits .st-prec.fait .st-prec-mod{display:inline-block}
.st-prec.fait .st-prec-actions,.st-prec.fait .st-prec-passer{display:none}
.st-prec.fait .st-ouinon .st-on{pointer-events:none;opacity:.55}
.st-prec.fait .st-ouinon .st-on.on{opacity:1}
/* Tout traite : le bouton final pulse — c'est LE geste. */
#stPrecValider.attire{animation:st-appel 1.5s ease-out infinite}
.st-prec label,.st-prec-q{color:var(--stt)}
.st-prec input[type=text]{width:100%;border:1px solid var(--stl);border-radius:9px;
  background:var(--stp2);color:var(--stt);font:inherit;font-size:.88rem;padding:.45rem .65rem}
.st-prec input[type=text]:focus{border-color:var(--stv);outline:none}
.st-prec[data-type=on]{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.8rem}
.st-ouinon{display:inline-flex;gap:.35rem}
.st-on{border:1px solid var(--stl2);background:transparent;color:var(--stm);
  border-radius:9px;padding:.3rem .8rem;font-size:.82rem;font-weight:700;cursor:pointer;
  transition:.13s ease}
.st-on:hover{color:var(--stt);border-color:var(--stv2)}
.st-on.on{background:var(--stv);border-color:var(--stv);color:#fff}
.st-prec-pied{display:flex;justify-content:flex-end;margin-top:.85rem;
  border-top:1px solid var(--stl);padding-top:.8rem}
/* Le champ de lieu intelligent : la liste de suggestions sous le champ. */
.st-lieu{position:relative}
.st-lieu-l{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;
  margin:0;padding:.3rem;list-style:none;border:1px solid var(--stl2);
  border-radius:11px;background:var(--stp2);box-shadow:0 10px 30px rgba(0,0,0,.5);
  max-height:240px;overflow-y:auto}
.st-lieu-l li{display:flex;align-items:baseline;justify-content:space-between;
  gap:.8rem;padding:.45rem .6rem;border-radius:8px;cursor:pointer;font-size:.87rem}
.st-lieu-l li b{color:var(--stt);font-weight:650}
.st-lieu-l li span{color:var(--stm);font-size:.76rem;white-space:nowrap}
.st-lieu-l li:hover,.st-lieu-l li.on{background:rgba(124,58,237,.22)}
@media(max-width:560px){ .st-prec[data-type=on]{grid-template-columns:1fr} }
/* ---- ECRAN 2 : « Public & objectifs » ---- */
/* Le rappel de l'offre comprise, en tete d'ecran. */
.st2-offre{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin:0 0 1rem;padding:.6rem .9rem;border:1px solid var(--stl);border-radius:11px;
  background:var(--stp);font-size:.88rem;color:var(--stm)}
.st2-offre b{color:var(--stt)}
.st2-offre a{white-space:nowrap;font-size:.82rem}
.st2-attente{margin:.4rem 0;color:var(--stm)}
.st2-attente p{margin:0 0 .8rem;font-size:.9rem;font-weight:650;color:var(--stv2)}
/* Le squelette d'attente : trois silhouettes de publics qui respirent —
   le bloc VIT dès la première milliseconde, la generation arrive ensuite. */
.st2-squelette{position:relative;overflow:hidden;border:1px solid var(--stl);
  border-radius:12px;padding:.8rem .9rem;margin:0 0 .6rem;display:grid;gap:.45rem}
.st2-squelette b{display:block;height:.85rem;width:38%;border-radius:6px;
  background:var(--stl)}
.st2-squelette span{display:block;height:.6rem;border-radius:5px;
  background:var(--stl);opacity:.55}
.st2-squelette span:last-child{width:72%}
.st2-squelette::after{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(167,139,250,.16) 50%,transparent 70%);
  background-size:220% 100%;animation:st4-brille 1.6s linear infinite}
@media (prefers-reduced-motion: reduce){ .st2-squelette::after{animation:none} }
#st2Liste{display:grid;gap:.5rem;margin-top:.6rem}
/* Le « pourquoi » sous chaque public propose. */
.st-prec .st2-pourquoi{display:block;font-style:normal;font-weight:500;
  color:var(--stm);font-size:.84rem;margin-top:.2rem;line-height:1.4}
.st2-badge{font-size:.74rem;font-weight:800;color:#34d399;margin-left:.5rem;white-space:nowrap}
.theme-clair .st2-badge{color:#059669}
.st-prec-actions{flex-wrap:wrap}
/* Les objectifs : une grille de choix, un clic suffit. */
.st2-objs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:.55rem;margin-top:.6rem}
.st2-obj{display:grid;gap:.15rem;text-align:left;border:1px solid var(--stl);
  border-radius:12px;background:var(--stp2);padding:.7rem .8rem;cursor:pointer;
  color:var(--stm);font:inherit;transition:.13s ease}
.st2-obj b{color:var(--stt);font-size:.9rem}
.st2-obj span{font-size:.78rem;line-height:1.35}
.st2-obj:hover{border-color:var(--stv2)}
.st2-obj.on{border:2px solid var(--stv);background:rgba(124,58,237,.07);
  padding:calc(.7rem - 1px) calc(.8rem - 1px)}
.theme-clair .st2-obj.on{background:rgba(124,58,237,.05)}
/* ---- ECRAN 3 : « Canaux » ---- */
.st3-l{display:grid;gap:.6rem;margin:0 0 1rem}
.st3-canal{display:flex;align-items:center;gap:.8rem;padding:.85rem .95rem;
  border:1px solid var(--stl);border-radius:14px;background:var(--stp);
  cursor:pointer;transition:.13s ease}
.st3-canal:hover{border-color:var(--stl2)}
.st3-canal.on{border-color:var(--stv);background:rgba(124,58,237,.05)}
.st3-coche{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;
  border:2px solid var(--stl2);border-radius:8px;background:transparent;
  color:transparent;cursor:pointer;transition:.13s ease}
.st3-canal.on .st3-coche{background:var(--stv);border-color:var(--stv);color:#fff}
.st3-logo{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;
  border-radius:12px;background:#fff;overflow:hidden}
.st3-logo svg,.st3-logo img{width:26px;height:26px}
.st3-txt{flex:1 1 auto;min-width:0}
.st3-txt b{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  color:var(--stt);font-size:.95rem}
.st3-txt > span{display:block;margin-top:.15rem;font-size:.84rem;
  color:var(--stm);line-height:1.4}
.st3-reco{font-style:normal;font-size:.66rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--stv2);background:rgba(124,58,237,.14);
  border:1px solid rgba(124,58,237,.35);border-radius:99px;padding:.18rem .55rem}
.st3-aide{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;
  border:1px solid var(--stl2);border-radius:10px;background:transparent;
  color:var(--stv2);font-weight:800;font-size:.95rem;cursor:pointer;transition:.13s ease}
.st3-aide:hover,.st3-aide[aria-expanded=true]{border-color:var(--stv);
  background:rgba(124,58,237,.12)}
.st3-bulle{margin:-.2rem 0 .2rem;padding:.85rem 1rem;border:1px solid var(--stl2);
  border-radius:12px;background:var(--stp2);font-size:.86rem;line-height:1.5;
  color:var(--stm);display:grid;gap:.5rem}
.st3-bulle p{margin:0}
.st3-bulle b{color:var(--stt)}
.st3-bulle-reco{color:#34d399;font-weight:700;font-size:.8rem}
.theme-clair .st3-bulle-reco{color:#047857}
@media(max-width:560px){ .st3-canal{flex-wrap:wrap} }
/* ---- « A quoi ca ressemble ? » : les mini-maquettes de formats ----
   Rendu « capture d'ecran » : couleurs FIXES (fond blanc, texte noir),
   identiques dans les deux themes — c'est une reproduction, pas l'interface. */
.st3-demo-t{font-weight:800;color:var(--stt);font-size:.74rem;
  text-transform:uppercase;letter-spacing:.07em;margin-top:.2rem!important}
/* La maquette et son encart d'avertissement, cote a cote. */
.st3-demo-rangee{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
/* flex 0 1 auto, pas 0 0 : sans retrecissement, la maquette de 340 px
   debordait a 320 px (constate le 17/08). */
.st3-demo-rangee .st3-demo{flex:0 1 auto;min-width:0;max-width:min(340px,100%)}
/* L'encart violet, avec son accroche (fleche) tournee vers la maquette. */
.st3-demo-encart{--enc:#201640;position:relative;flex:1 1 220px;max-width:300px;
  border:1.5px solid var(--stv);border-radius:14px;background:var(--enc);
  padding:1rem 1.15rem;color:var(--stt);font-size:.88rem;line-height:1.55;
  font-weight:650}
.theme-clair .st3-demo-encart{--enc:#f4effd}
.st3-demo-encart::before{content:'';position:absolute;left:-8.5px;top:50%;
  width:15px;height:15px;transform:translateY(-50%) rotate(45deg);
  background:var(--enc);border-left:1.5px solid var(--stv);
  border-bottom:1.5px solid var(--stv)}
.st3-demo-encart p{margin:0}
.st3-demo-encart p + p{margin-top:.55rem;font-weight:500;color:var(--stm);
  font-size:.82rem}
/* Etroit : l'encart passe SOUS la maquette, l'accroche pointe vers le haut. */
@media(max-width:760px){
  .st3-demo-encart{max-width:340px}
  .st3-demo-encart::before{left:26px;top:-8.5px;transform:rotate(135deg)}
}
.st3-demo{max-width:340px;border:1px solid #e3e5ee;border-radius:12px;
  background:#fff;color:#111;font-size:.78rem;line-height:1.35;overflow:hidden}
.st3-demo p{margin:0}
.st3-demo .d-tete{display:flex;gap:.5rem;align-items:center;padding:.5rem .6rem}
.st3-demo .d-av{width:26px;height:26px;border-radius:50%;color:#fff;flex:0 0 auto;
  display:grid;place-items:center;font-weight:800;font-size:.78rem}
.st3-demo .d-tete b{display:block;font-size:.76rem;color:#050505}
.st3-demo .d-tete i{font-style:normal;color:#65676b;font-size:.68rem}
.st3-demo .d-txt{padding:0 .6rem .45rem;color:#050505}
/* CARRÉ comme une vraie création Facebook / Instagram : le visuel
   publicitaire compose (genere) s'y affiche entier, sans recadrage. */
.st3-demo .d-img{aspect-ratio:1/1;height:auto;display:grid;place-items:center;
  font-weight:700;background:linear-gradient(135deg,#c7d2fe,#e9d5ff) center/cover;
  color:#6d28d9;background-size:cover;background-position:center}
.st3-demo .d-cta{display:flex;justify-content:space-between;align-items:center;
  background:#f0f2f5;padding:.45rem .6rem;font-size:.7rem;color:#65676b}
.st3-demo .d-cta b{border:1px solid #ced0d4;background:#e4e6eb;border-radius:6px;
  padding:.3rem .6rem;color:#050505;white-space:nowrap}
.st3-demo .d-actions{display:flex;justify-content:space-around;gap:.4rem;
  border-top:1px solid #e4e6eb;padding:.4rem;color:#65676b;font-size:.7rem}
/* Instagram */
.st3-demo-ig .d-av{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7)}
.st3-demo-ig .d-esp{display:flex;justify-content:space-between;align-items:center;
  background:#2e7ca8;color:#fff;padding:.45rem .6rem;font-size:.74rem;font-weight:700}
.st3-demo-ig .d-esp span{font-size:.9rem;line-height:1}
.st3-demo-ig .d-ic{display:flex;justify-content:space-between;align-items:center;
  padding:.4rem .6rem .2rem;font-size:.88rem;color:#050505}
.st3-demo-ig .d-points{color:#b3b9c2;font-size:.55rem;letter-spacing:.15em}
.st3-demo-ig .d-cap{padding:0 .6rem .25rem;font-size:.72rem;color:#050505}
.st3-demo-ig .d-cap b{font-size:.72rem}
.st3-demo-ig .d-tags{color:#3b6db4;padding-bottom:.5rem}
/* Google */
.st3-demo-go{padding:.6rem .75rem}
.st3-demo-go .d-sp{font-weight:800;font-size:.68rem;color:#202124}
.st3-demo-go .d-url{color:#202124;font-size:.7rem;margin:.15rem 0!important}
.st3-demo-go .d-titre{color:#1a0dab;font-size:.9rem;font-weight:500;
  margin-bottom:.15rem!important}
.st3-demo-go .d-desc{color:#4d5156}
/* TikTok — un vrai cadre VERTICAL 9:16, comme le telephone. */
.st3-demo-tk{position:relative;aspect-ratio:9/16;height:auto;width:min(230px,100%);
  border:0;background:#000;color:#fff}
.st3-demo-tk .d-fond{position:absolute;inset:0;
  background:linear-gradient(160deg,#3b0764,#0b0b15);opacity:.95;
  background-size:cover;background-position:center}
/* Nos verticales sont en 2:3, le cadre TikTok en 9:16 : « cover » rognait
   les bords — et les titres peints avec (« LIBERTÉ EN ME… », constat du
   19/08). « contain » sur fond noir, comme TikTok affiche les vidéos hors
   ratio — même correction que le grand aperçu de l'écran 4. Le dégradé
   d'attente (pas d'image, donc pas d'attribut style) garde son plein cadre. */
.st3-demo-tk .d-fond[style]{background-size:contain;background-repeat:no-repeat;
  background-color:#000}
/* Avec une photo, un voile assombrit le bas : le texte blanc reste lisible. */
.st3-demo-tk .d-fond[style]::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.7))}
.st3-demo-tk .d-cote{position:absolute;right:.45rem;bottom:3.6rem;display:grid;
  gap:.55rem;text-align:center;font-size:.66rem;line-height:1.15}
.st3-demo-tk .d-avtk{display:grid;place-items:center;width:30px;height:30px;
  margin:0 auto .1rem;border-radius:50%;background:#fff;color:#000;
  font-weight:800;border:1.5px solid #fff}
.st3-demo-tk .d-disque{display:grid;place-items:center;width:26px;height:26px;
  margin:0 auto;border-radius:50%;background:#1c1c1c;font-size:.72rem}
.st3-demo-tk .d-bas{position:absolute;left:.55rem;right:2.8rem;bottom:.55rem;
  font-size:.66rem;line-height:1.4}
.st3-demo-tk .d-bas b{display:block;font-size:.72rem}
.st3-demo-tk .d-bas b i{font-style:normal;background:rgba(255,255,255,.24);
  border-radius:3px;padding:.02rem .3rem;font-weight:600;font-size:.58rem;
  margin-left:.3rem}
.st3-demo-tk .d-tags{display:block;font-weight:700}
.st3-demo-tk .d-son{display:block;margin-top:.15rem;opacity:.85}
/* Taboola */
.st3-demo-tb{padding:.6rem .75rem}
.st3-demo-tb .d-sp{color:#90949c;font-size:.66rem;margin-bottom:.4rem!important}
.st3-demo-tb .d-carte{display:flex;gap:.6rem;align-items:center}
.st3-demo-tb .d-mini{width:86px;height:60px;border-radius:8px;flex:0 0 auto;
  display:grid;place-items:center;font-size:.6rem;font-weight:700;text-align:center;
  background:linear-gradient(135deg,#c7d2fe,#e9d5ff);color:#6d28d9;
  background-size:cover;background-position:center}
.st3-demo-tb .d-titre2{font-weight:700;font-size:.78rem;color:#111}
.st3-demo-tb .d-site{color:#90949c;font-size:.66rem;margin-top:.15rem!important}
/* L'etat de generation + le bouton « nouveau visuel » : la main a l'utilisateur. */
.st3-etatgen{font-size:.82rem;color:var(--stv2);font-weight:600}
/* Le voile d'attente SUR le visuel d'exemple (écran 3) : anneau + texte,
   impossible à manquer — le petit texte de bulle passait inaperçu (18/08). */
.st3-demo .d-img,.st3-demo .d-mini{position:relative;overflow:hidden}
.st3-patiente{position:absolute;inset:0;z-index:2;display:grid;
  place-content:center;justify-items:center;gap:.4rem;text-align:center;
  padding:.6rem;background:rgba(12,10,28,.52)}
.st3-patiente b{font-size:.88rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.st3-patiente>span{font-size:.7rem;line-height:1.4;color:#fff;max-width:170px;
  text-shadow:0 1px 6px rgba(0,0,0,.6)}
.d-mini .st3-patiente b,.d-mini .st3-patiente>span{display:none}
.d-mini .st3-patiente .st4-anneau{width:20px;height:20px;border-width:3px}
.theme-clair .st3-patiente{background:rgba(255,255,255,.6)}
.theme-clair .st3-patiente b,.theme-clair .st3-patiente>span{color:#241a52;
  text-shadow:0 1px 6px rgba(255,255,255,.8)}
/* Le flash à l'arrivée de la nouvelle image : l'échange se voit. */
.st3-neuf{animation:st3-flash 1.3s ease}
@keyframes st3-flash{0%{box-shadow:inset 0 0 0 4px #a78bfa;filter:brightness(1.18)}
  100%{box-shadow:inset 0 0 0 0 rgba(167,139,250,0);filter:none}}
@media (prefers-reduced-motion: reduce){ .st3-neuf{animation:none} }
.st3-regen{justify-self:start;border:1px solid var(--stl2);background:transparent;
  color:var(--stv2);border-radius:9px;padding:.4rem .8rem;font-size:.8rem;
  font-weight:700;cursor:pointer;transition:.13s ease}
.st3-regen:hover{border-color:var(--stv);background:rgba(124,58,237,.12)}
/* ---- ECRAN 4 : « Vos concepts de visuel » ---- */
.st4-canaux{display:block;font-style:normal;font-size:.78rem;color:var(--stm);
  margin-top:.15rem}
.st4-etat{margin:0 0 .9rem;font-size:.88rem;font-weight:650;color:var(--stv2)}
.st4-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:1rem;margin:0 0 1.1rem}
.st4-carte{border:1.5px solid var(--stl);border-radius:16px;background:var(--stp);
  overflow:hidden;cursor:pointer;transition:.15s ease}
.st4-carte:hover{border-color:var(--stl2);transform:translateY(-2px)}
.st4-carte.on{border-color:var(--stv);background:rgba(124,58,237,.06);
  box-shadow:0 10px 30px rgba(124,58,237,.22)}
.st4-carte.attente{cursor:default}
.st4-carte.attente:hover{transform:none;border-color:var(--stl)}
/* CARRE comme les visuels generes : un cadre 4:5 en cover COUPAIT les
   bords des publicites (« Des vacances ~e~n famille » — constat 17/08).
   Le visuel s'affiche ENTIER, jamais recadre. */
.st4-visuel{position:relative;aspect-ratio:1/1;background:linear-gradient(160deg,var(--stp2),var(--stl));
  background-size:cover;background-position:center}
.st4-coche{position:absolute;top:.6rem;right:.6rem;display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.75);
  background:rgba(10,10,20,.35);color:transparent;transition:.15s ease}
.st4-carte.on .st4-coche{background:var(--stv);border-color:var(--stv);color:#fff}
/* Le chargeur : un voile qui respire tant que le visuel se genere. */
.st4-chargeur{position:absolute;inset:0;display:block;
  background:linear-gradient(110deg,transparent 30%,rgba(167,139,250,.18) 50%,transparent 70%);
  background-size:220% 100%;animation:st4-brille 1.6s linear infinite}
@keyframes st4-brille{from{background-position:200% 0}to{background-position:-20% 0}}
@media (prefers-reduced-motion: reduce){ .st4-chargeur{animation:none} }
/* L'attente TRÈS VISIBLE : anneau qui tourne + message en toutes lettres,
   au centre de la carte — le scintillement seul échappait aux moins
   habitués (demande du 18/08, publics seniors). */
.st4-patiente{position:absolute;inset:0;display:grid;place-content:center;
  justify-items:center;gap:.45rem;text-align:center;padding:1rem;
  background:rgba(12,10,28,.42)}
.st4-patiente b{font-size:.98rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.st4-patiente>span{font-size:.78rem;line-height:1.45;color:#fff;max-width:190px;
  text-shadow:0 1px 6px rgba(0,0,0,.6)}
.st4-anneau{width:38px;height:38px;border-radius:50%;
  border:4px solid rgba(255,255,255,.35);border-top-color:#a78bfa;
  animation:st4-tourne 1s linear infinite}
@keyframes st4-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .st4-anneau{animation:none} }
.theme-clair .st4-patiente{background:rgba(255,255,255,.55)}
.theme-clair .st4-patiente b,.theme-clair .st4-patiente>span{color:#241a52;
  text-shadow:0 1px 6px rgba(255,255,255,.8)}
.st4-infos{display:grid;gap:.25rem;padding:.75rem .85rem .85rem}
.st4-nom{font-size:.95rem;color:var(--stt)}
.st4-desc{font-size:.8rem;line-height:1.4;color:var(--stm)}
/* Les badges de canaux du concept. */
.st4-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.2rem}
.st4-tags i{font-style:normal;font-size:.68rem;font-weight:700;color:var(--stv2);
  border:1px solid var(--stl2);border-radius:99px;padding:.12rem .5rem}
/* Les onglets par canal, logos officiels inclus — maquette du 18/08. */
.st4-filtres{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.st4-filtre{display:inline-flex;align-items:center;gap:.45rem;
  border:1.5px solid var(--stl);background:var(--stp);color:var(--stm);
  border-radius:99px;padding:.42rem .9rem;font:inherit;font-size:.82rem;
  font-weight:700;cursor:pointer;transition:.13s ease}
.st4-filtre:hover{border-color:var(--stl2);color:var(--stt)}
.st4-filtre.on{border-color:var(--stv);color:#fff;
  background:linear-gradient(135deg,var(--stv),#6366f1)}
.st4-filtre-ico{display:inline-flex;align-items:center;gap:.2rem}
.st4-filtre-ico img,.st4-filtre-ico svg{width:18px;height:18px;display:block;
  border-radius:5px}
/* La carte verticale (TikTok). L'image est en 2:3 : « contain » sur fond
   sombre garantit qu'AUCUN pixel n'est recadré par nous — le seul rognage
   possible reste celui du modèle, que la relecture traque. */
.st4-carte.verticale .st4-visuel{aspect-ratio:2/3;background-size:contain;
  background-repeat:no-repeat;background-color:#0b0a18}
.theme-clair .st4-carte.verticale .st4-visuel{background-color:#e8e6f2}
/* La loupe : voir le visuel en grand. */
.st4-loupe{position:absolute;top:.6rem;left:.6rem;display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.75);
  background:rgba(10,10,20,.35);color:#fff;cursor:pointer;transition:.15s ease}
.st4-loupe:hover{background:var(--stv);border-color:var(--stv)}
/* La vue agrandie : le visuel et tout ce qui l'entoure. */
.st4-zoom{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  padding:1rem}
.st4-zoom-fond{position:absolute;inset:0;background:rgba(5,5,15,.72);
  backdrop-filter:blur(4px)}
.st4-zoom-panneau{position:relative;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(240px,1fr);gap:0;
  width:min(880px,100%);max-height:min(92vh,720px);overflow:auto;
  border:1px solid var(--stl2);border-radius:18px;background:var(--stp);
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.st4-zoom-visuel{background:var(--stp2)}
.st4-zoom-visuel img{display:block;width:100%;height:100%;object-fit:contain}
.st4-zoom-infos{display:grid;align-content:start;gap:.6rem;padding:1.2rem 1.2rem 1.3rem}
.st4-zoom-infos>b{font-size:1.08rem;color:var(--stt);padding-right:1.6rem}
.st4-zoom-infos>p{margin:0;font-size:.85rem;line-height:1.5;color:var(--stm)}
.st4-zoom-infos dl{display:grid;gap:.55rem;margin:.3rem 0 0}
.st4-zoom-infos dt{font-size:.7rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--stv2)}
.st4-zoom-infos dd{margin:.1rem 0 0;font-size:.86rem;color:var(--stt)}
.st4-zoom-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.st4-zoom-fermer{position:absolute;top:.7rem;right:.7rem;z-index:2;
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--stl2);background:var(--stp);color:var(--stm);
  font-size:.95rem;cursor:pointer}
.st4-zoom-fermer:hover{color:var(--stt);border-color:var(--stv)}
@media(max-width:700px){
  .st4-zoom{padding:.6rem}
  .st4-zoom-panneau{grid-template-columns:minmax(0,1fr);max-height:94vh}
  .st4-zoom-visuel img{max-height:52vh}
  .st4-zoom-actions .st-btn{width:100%;justify-content:center;
    min-height:44px}
  .st4-zoom-fermer{width:40px;height:40px}
  .st4-filtre{min-height:40px}
  .st4-loupe,.st4-coche{width:34px;height:34px}
}
/* Le GRAND affichage du visuel sélectionné, sur la page même. */
.st4-grand{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(250px,1fr);
  gap:1.2rem;border:1.5px solid var(--stv);border-radius:18px;background:var(--stp);
  padding:1.1rem;margin:0 0 1.1rem;box-shadow:0 12px 40px rgba(124,58,237,.14)}
.st4-grand-visuel{display:grid;justify-items:center;align-content:start}
.st4-grand-visuel img{display:block;width:100%;height:auto;border-radius:12px}
/* Le cadre de canal autour du visuel agrandi (fil, Sponsorisé, J'aime…). */
.st4-cadre{width:100%;max-width:360px}
.st4-cadre .st3-demo{width:100%;max-width:none;flex:none}
.st4-cadre .st3-demo-tk{width:min(280px,100%);margin:0 auto}
.st4-slot{background-size:cover;background-position:center}
/* Le cadre TikTok est en 9:16, nos verticales en 2:3 (la seule taille du
   modèle) : « cover » COUPAIT haut et bas — « contain » sur fond noir,
   comme TikTok affiche les vidéos qui n'ont pas son ratio (18/08). */
.st4-cadre .st3-demo-tk .d-fond{background-size:contain;
  background-repeat:no-repeat;background-color:#000}
.st4-grand-infos{display:grid;align-content:start;gap:.55rem;min-width:0}
.st4-grand-infos>b{font-size:1.1rem;color:var(--stt)}
.st4-grand-infos>p{margin:0;font-size:.86rem;line-height:1.5;color:var(--stm)}
.st4-grand-canaux{font-weight:650;color:var(--stv2)!important}
/* La note étoiles — enregistrée en base, classement dans l'admin. */
.st4-note{border:1px solid var(--stl);border-radius:12px;padding:.75rem .9rem;
  display:grid;gap:.35rem}
.st4-note-t{font-size:.85rem;font-weight:700;color:var(--stt)}
.st4-etoiles{display:flex;gap:.15rem}
.st4-etoile{border:0;background:transparent;font-size:1.7rem;line-height:1;
  color:var(--stl2);cursor:pointer;padding:.1rem .15rem;transition:.12s ease}
.st4-etoile:hover{transform:scale(1.15)}
.st4-etoile.on{color:#f59e0b}
.st4-note-merci{font-size:.8rem;font-weight:650;color:#34d399}
.theme-clair .st4-note-merci{color:#047857}
/* Le coin retouche du visuel choisi (dans le grand affichage). */
.st4-retouche{border:1px solid var(--stl2);border-radius:14px;background:var(--stp);
  padding:.9rem 1rem;margin:0 0 1.1rem}
.st4-grand .st4-retouche{margin:0}
.st4-retouche label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.5rem;
  color:var(--stt)}
.st4-retouche-l{display:flex;gap:.6rem;flex-wrap:wrap}
.st4-retouche-l input{flex:1 1 240px;min-width:0;border:1px solid var(--stl);
  border-radius:10px;background:var(--stp2);color:var(--stt);font:inherit;
  font-size:.9rem;padding:.55rem .7rem}
.st4-retouche-l input:focus{border-color:var(--stv);outline:none}
@media(max-width:700px){
  .st4-grand{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .st4-galerie{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.7rem}
  .st4-retouche-l input{font-size:1rem}
  .st4-retouche-l .st-btn{width:100%;justify-content:center}
  .st4-etoile{font-size:2rem;padding:.15rem .25rem}
  .st4-patiente b{font-size:.9rem}
  .st4-patiente>span{font-size:.72rem}
}
/* ---- ECRAN 5 : « Vos textes publicitaires » ---- */
.st5-bloc{border:1.5px solid var(--stl);border-radius:16px;background:var(--stp);
  padding:1.1rem 1.2rem;margin:0 0 1.2rem}
.st5-t{margin:0 0 .9rem;font-size:1.02rem;color:var(--stt)}
.st5-t span{display:block;font-size:.8rem;font-weight:500;color:var(--stm);
  margin-top:.2rem}
.st5-visuel-edition{display:grid;grid-template-columns:minmax(200px,300px) minmax(0,1fr);
  gap:1.2rem;align-items:start}
.st5-apercu{position:relative;border-radius:12px;overflow:hidden;
  background:var(--stp2)}
.st5-img{aspect-ratio:1/1;background-size:contain;background-position:center;
  background-repeat:no-repeat}
.st5-apercu.verticale .st5-img{aspect-ratio:2/3}
.st5-champs{display:grid;gap:.65rem}
.st5-champs label{display:grid;gap:.3rem;font-size:.8rem;font-weight:700;
  color:var(--stm)}
.st5-champs input{border:1px solid var(--stl);border-radius:10px;
  background:var(--stp2);color:var(--stt);font:inherit;font-size:.92rem;
  padding:.5rem .65rem}
.st5-champs input:focus{border-color:var(--stv);outline:none}
.st5-icones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.st5-appliquer{display:grid;gap:.5rem;justify-items:start;margin-top:.2rem}
.st5-groupes{display:grid;gap:1rem;margin:0 0 .9rem}
.st5-groupe{border:1px solid var(--stl);border-radius:14px;padding:.9rem 1rem;
  background:var(--stp2)}
.st5-groupe-t{display:flex;align-items:center;gap:.5rem;margin:0 0 .7rem;
  font-weight:800;color:var(--stt)}
.st5-groupe-champs{display:grid;gap:.6rem}
.st5-groupe-champs label{display:grid;gap:.3rem;font-size:.78rem;font-weight:700;
  color:var(--stm)}
.st5-groupe-champs input,.st5-groupe-champs textarea{border:1px solid var(--stl);
  border-radius:10px;background:var(--stp);color:var(--stt);font:inherit;
  font-size:.92rem;padding:.5rem .65rem;resize:vertical}
.st5-groupe-champs input:focus,.st5-groupe-champs textarea:focus{
  border-color:var(--stv);outline:none}
.st5-squelette{margin:0}
@media(max-width:700px){
  .st5-visuel-edition{grid-template-columns:minmax(0,1fr)}
  .st5-apercu{max-width:320px;margin:0 auto}
  .st5-icones{grid-template-columns:minmax(0,1fr)}
  .st5-champs input,.st5-groupe-champs input,.st5-groupe-champs textarea{
    font-size:1rem}
  .st5-appliquer .st-btn{width:100%;justify-content:center}
}
/* Les etapes deja franchies : pastille verte cochee (barre + rail). */
.st-etape.fait i,.st-g-etapes li.fait i{background:rgba(16,185,129,.18);
  border-color:#1d4d3a;color:#34d399;font-weight:800}
.theme-clair .st-etape.fait i,.theme-clair .st-g-etapes li.fait i{
  background:rgba(16,185,129,.1);border-color:#a7dfc5;color:#047857}
/* ---- Autres suggestions : trois variantes en PLEINE LARGEUR ---- */
.st-inspi{margin:0 0 1.4rem}
.st-inspi .st-compris-corps{margin-top:.6rem}
.st-inspi-l{display:grid;grid-template-columns:1fr;gap:.55rem}
.st-ex{display:flex;align-items:center;gap:1rem;border:1px solid var(--stl);
  border-radius:12px;background:var(--stp2);padding:.7rem .9rem;font-size:.88rem;
  color:var(--stt);text-align:left}
.st-ex p{margin:0;flex:1 1 auto;line-height:1.5}
.st-ex button{flex:0 0 auto;border:1px solid var(--stl2);background:transparent;
  color:var(--stv2);border-radius:9px;padding:.4rem .8rem;font-size:.82rem;
  font-weight:700;cursor:pointer;transition:.13s ease;white-space:nowrap}
.st-ex button:hover{background:rgba(124,58,237,.2);border-color:var(--stv)}
@media(max-width:560px){ .st-ex{flex-direction:column;align-items:flex-start;gap:.5rem} }
/* ---- pied ---- */
/* Colle en bas de l'ecran : « Etape suivante » reste visible meme quand les
   questions et suggestions allongent la page. Fond opaque, sinon le contenu
   defile en transparence dessous. */
.st-pied{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  border-top:1px solid var(--stl);padding:1rem 0 .9rem;
  position:sticky;bottom:0;background:var(--stbg);z-index:10}
/* « Recommencez » : discret — filet et texte violet clair (17/08, l'ancien
   rose etait juge agressif). Le ROUGE vit dans la bulle de confirmation :
   c'est « Oui, tout effacer » qui porte le danger, pas l'ouverture. */
.st-btn-reprise{border-color:rgba(167,139,250,.45);color:var(--stv2)}
.st-btn-reprise:hover{border-color:var(--stv2);background:rgba(124,58,237,.12);color:var(--stv2)}
.st-btn-danger{border-color:rgba(244,63,94,.55);color:#fb7185}
.st-btn-danger:hover{border-color:#f43f5e;background:rgba(244,63,94,.1);color:#fda4af}
/* ---- colonne droite ---- */
.st-carte{border:1px solid var(--stl);border-radius:var(--str);background:var(--stp);
  padding:.9rem 1rem;margin-bottom:1rem}
.st-carte-t{display:flex;gap:.5rem;align-items:center;margin:0 0 .7rem;
  font-weight:800;font-size:.95rem}
/* L'icone des titres de cartes en violet — le presse-papiers du Resume
   comme l'etincelle de « Leadsoon vous guide ». */
.st-carte-t svg{color:var(--stv2);flex:0 0 auto}
/* Lignes aerees (+~10 px au total) : cale le bas de la colonne droite sur
   le rail des etapes, ajuste a la demande du 17/08. */
.st-resume{margin:0;display:grid;gap:.65rem}
/* +10 px de hauteur sur la carte Resume (2e ajustement du 17/08). */
.st-droite .st-carte:first-child{padding-top:1.2rem;padding-bottom:1.2rem}
.st-resume > div{display:grid;grid-template-columns:105px minmax(0,1fr);gap:.6rem;
  font-size:.86rem;align-items:baseline}
.st-resume dt{color:var(--stm)}
.st-resume dd{margin:0;color:var(--stt);font-weight:600;overflow-wrap:break-word}
.st-coches{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.85rem;color:var(--stm)}
.st-coches li{display:flex;gap:.5rem;align-items:flex-start}
.st-coches li::before{content:'\2713';flex:0 0 auto;display:grid;place-items:center;
  width:17px;height:17px;border-radius:50%;background:rgba(124,58,237,.3);
  color:var(--stv2);font-size:.7rem;font-weight:800;margin-top:.1rem}
/* La note securite des maquettes : cadenas centre a gauche, carte posee. */
.st-secu{display:flex;gap:.7rem;align-items:center;margin:0;font-size:.8rem;
  color:var(--stm);border:1px solid var(--stl);border-radius:var(--str);
  background:var(--stp);padding:.85rem 1rem}
.st-secu svg{flex:0 0 auto}
/* « L'IA VOUS ACCOMPAGNE » : capitales espacees, etincelle violette. */
.st-carte-ia{text-transform:uppercase;letter-spacing:.07em;font-size:.83rem}
.st-carte-ia svg{color:var(--stv2);flex:0 0 auto}
/* Le message doux — remplace les alert() natifs. Au CENTRE de l'ecran
   (17/08) : en bas de page il passait inapercu et bloquait le parcours. */
.st-message{position:fixed;left:50%;top:40%;z-index:60;
  transform:translate(-50%,-50%) scale(.96);
  /* Largeur EXPLICITE : en shrink-to-fit, un element fixe a left:50% ne
     dispose que de la moitie droite de l'ecran — 188 px a 375 px (17/08). */
  width:min(480px,calc(100vw - 2rem));padding:1.05rem 1.25rem;border-radius:14px;
  border:2px solid var(--stv2);background:var(--stp2);color:var(--stt);
  font-size:.97rem;font-weight:600;line-height:1.5;text-align:center;
  box-shadow:0 18px 60px rgba(0,0,0,.65),0 0 0 5px rgba(124,58,237,.16);
  opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease}
.st-message.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.theme-clair .st-message{background:#fff;
  box-shadow:0 18px 60px rgba(38,32,84,.3),0 0 0 5px rgba(124,58,237,.1)}
/* ---- le chat d'assistance ---- */
.st-g-aide-btn{width:100%;display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;
  text-align:left;font:inherit;color:var(--stm);transition:.14s ease}
.st-g-aide-btn:hover{border-color:var(--stv);color:var(--stt)}
.st-g-aide-btn .st-chat-ico{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:rgba(124,58,237,.2);color:var(--stv2)}
.st-chat-bulle{position:fixed;right:1.1rem;bottom:1.1rem;z-index:40;width:52px;height:52px;
  border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#f43f5e,var(--stv));
  box-shadow:0 6px 24px rgba(124,58,237,.45);transition:.15s ease}
.st-chat-bulle:hover{transform:scale(1.06)}
.st-chat{position:fixed;right:1.1rem;bottom:1.1rem;z-index:41;width:min(360px,calc(100vw - 2rem));
  height:min(520px,calc(100vh - 4rem));display:flex;flex-direction:column;
  border:1px solid var(--stl2);border-radius:16px;background:var(--stp);color:var(--stt);
  box-shadow:0 12px 44px rgba(0,0,0,.55);overflow:hidden}
.st-chat-tete{display:flex;align-items:center;gap:.55rem;padding:.7rem .9rem;
  border-bottom:1px solid var(--stl);background:var(--stp2)}
.st-chat-tete .st-chat-ico{display:grid;place-items:center;width:28px;height:28px;
  border-radius:50%;background:linear-gradient(135deg,#f43f5e,var(--stv));color:#fff}
.st-chat-fermer{margin-left:auto;border:0;background:none;color:var(--stm);cursor:pointer;
  font-size:1rem;font-weight:800;padding:.2rem .5rem;border-radius:8px}
.st-chat-fermer:hover{background:var(--stl);color:var(--stt)}
.st-chat-fil{flex:1 1 auto;overflow-y:auto;padding:.9rem;display:flex;flex-direction:column;
  gap:.55rem;font-size:.88rem;line-height:1.5}
.st-chat-msg{max-width:86%;padding:.55rem .75rem;border-radius:13px;white-space:pre-wrap;
  overflow-wrap:break-word}
.st-chat-msg.ia{align-self:flex-start;background:var(--stp2);border:1px solid var(--stl);
  border-bottom-left-radius:5px}
.st-chat-msg.moi{align-self:flex-end;background:var(--stv);color:#fff;
  border-bottom-right-radius:5px}
.st-chat-msg.attend{color:var(--stm);font-style:italic}
.st-chat-saisie{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid var(--stl);
  background:var(--stp2)}
.st-chat-saisie input{flex:1 1 auto;min-width:0;border:1px solid var(--stl);border-radius:10px;
  background:var(--stp);color:var(--stt);font:inherit;font-size:.9rem;padding:.55rem .7rem}
.st-chat-saisie input:focus{border-color:var(--stv);outline:none}
.st-chat-saisie .st-btn-avance{padding:.55rem .8rem}

/* ==================================================================
   THEME CLAIR (16/08) — surcouche par variables, activee par la classe
   theme-clair que layout.php pose sur <body> (cookie ls_theme).
   Les deux violets : --stv pour REMPLIR (inchange), --stv2 pour ECRIRE
   (assombri, sinon illisible sur blanc). Les verts/ambres en dur du
   sombre sont repris un a un — ils disparaitraient sur fond clair.
   ================================================================== */
.theme-clair .st{--stbg:#f4f5fb;--stp:#ffffff;--stp2:#eef0f8;
  --stl:#e0e3f0;--stl2:#c9cee6;--stv:#7c3aed;--stv2:#6d28d9;
  --stt:#1a1c30;--stm:#5d6078}
.theme-clair .st-g-etapes li.on{box-shadow:0 4px 14px rgba(38,32,84,.10)}
.theme-clair .st-compris.plie{border-color:#a7dfc5;background:rgba(16,185,129,.08)}
.theme-clair .st-compris.plie .st-sec-note{color:#047857}
.theme-clair .st-faits-resume{border-color:#a7dfc5;background:rgba(16,185,129,.08);
  color:#047857}
.theme-clair .st-statut-confirme{color:#059669}
.theme-clair .st-statut-deduit{color:#b45309}
.theme-clair .st-titre-ico{background:rgba(124,58,237,.10)}
.theme-clair .st-champ.actif,.theme-clair .st-prec.actif{background:rgba(124,58,237,.05)}
.theme-clair .st-ok-deduit:hover{background:rgba(124,58,237,.12)}
.theme-clair .st-lieu-l{box-shadow:0 10px 30px rgba(38,32,84,.16)}
.theme-clair .st-lieu-l li:hover,.theme-clair .st-lieu-l li.on{background:rgba(124,58,237,.12)}
.theme-clair .st-coches li::before{background:rgba(124,58,237,.14)}
.theme-clair .st-chat{box-shadow:0 12px 44px rgba(38,32,84,.22)}
.theme-clair .st-chat-bulle{box-shadow:0 6px 24px rgba(124,58,237,.35)}
.theme-clair .st-ex button:hover{background:rgba(124,58,237,.12)}
.theme-clair .st-reinit-conf{box-shadow:0 10px 30px rgba(38,32,84,.18)}
.theme-clair .st-btn-reprise{border-color:#d8c8f7;color:var(--stv2)}
.theme-clair .st-btn-reprise:hover{border-color:var(--stv2);background:rgba(124,58,237,.07)}
/* #be123c et non #e11d48 : sur blanc, ce dernier plafonne a 4,3:1 —
   sous le seuil de 4,5 mesure le 17/08. */
.theme-clair .st-btn-danger{border-color:#f3aebc;color:#be123c}
.theme-clair .st-btn-danger:hover{border-color:#f43f5e;background:rgba(244,63,94,.07);color:#9f1239}

/* ---- responsive : les rails se replient ---- */
/* Sur mobile, toute saisie passe a 16 px : en dessous, iOS zoome la page
   au focus et l'utilisateur se retrouve a la re-dezoomer a chaque champ. */
@media(max-width:560px){
  .st-prec input[type=text],.st-champ input[type=text],
  .st-champ.fait input[type=text],
  .st-precisions.voirfaits .st-prec.fait input[type=text],
  .st-chat-saisie input{font-size:1rem}
  /* Les gestes s'empilent en colonne, pleine largeur : a 320 px, le pied
     colle (sticky) recouvrait « Valider avec l'IA » et ses deux boutons se
     genaient. Static : le pied reprend sa place dans le flux, rien ne se
     chevauche — on scrolle naturellement vers « Etape suivante ». */
  .st-ligne-aide{flex-direction:column;align-items:stretch}
  .st-ligne-aide .st-btn-ia{justify-content:center}
  .st-pied{position:static;flex-direction:column;align-items:stretch;gap:.65rem}
  .st-pied .st-btn{justify-content:center;width:100%}
  .st-reinit{display:block}
  .st-reinit-conf{left:0;right:0;width:auto}
  /* Dans les details deplies (« Voir / modifier »), les petits gestes
     passent au gabarit tactile : 19 px de haut ne se touche pas au doigt. */
  .st-statut-confirme .st-corrige{padding:.3rem .6rem;font-size:.95rem}
  /* Le lien « Modifier » du rappel d'offre (ecran 2) : zone tactile
     elargie sans bouger la mise en page. */
  .st2-offre a{padding:.45rem .5rem;margin:-.45rem -.5rem}
  .st-precisions.voirfaits .st-prec.fait .st-prec-mod{justify-self:start;
    padding:.35rem .8rem}
  /* La fin de page defile AU-DESSUS de la pastille d'assistance : sans cet
     espace reserve, elle recouvrait « Etape suivante » a 320 px. */
  .st-corps{padding-bottom:6rem}
  /* Le haut se resserre : icone discrete, titre en deux lignes, et le champ
     recupere toute la largeur (l'etincelle decorative se retire). */
  .st-titre{gap:.6rem;margin-bottom:.8rem}
  .st-titre-ico{width:38px;height:38px}
  .st-titre-ico svg{width:17px;height:17px}
  .st-titre h1{font-size:1.22rem}
  .st-saisie{padding-left:1rem}
  .st-saisie-ico{display:none}
  /* Les 6 pastilles d'etapes n'ont plus la place dans la barre : la mention
     compacte + barre de progression prennent le relais. La barre entiere se
     resserre — « Enregistrer » en icone seule, sinon elle deborde a 320 px. */
  .st-etapes{display:none}
  .st-haut{gap:.6rem;padding:.6rem .8rem}
  .st-enr{font-size:0;gap:0}
  .st-enr svg{width:16px;height:16px}
  .st-prog{display:flex;flex-direction:column;gap:.3rem;margin:0 auto;
    font-size:.78rem;font-weight:700;color:var(--stt);white-space:nowrap}
  .st-prog i{display:block;width:76px;height:4px;border-radius:99px;
    background:var(--stl);font-style:normal;overflow:hidden}
  .st-prog i b{display:block;width:calc(100% / 6);height:100%;background:var(--stv)}
}
@media(max-width:1180px){
  .st-corps{grid-template-columns:minmax(0,1fr) 280px}
  .st-gauche{display:none}
}
@media(max-width:860px){
  /* minmax(0,1fr), pas 1fr : le minimum automatique de 1fr laisse un
     enfant a forte largeur minimale pousser la colonne hors de l'ecran
     (10 px de defilement lateral constates a 375 px). */
  .st-corps{grid-template-columns:minmax(0,1fr)}
  .st-droite{display:none}
  .st-etape{font-size:0;gap:0}
  .st-etape i{font-size:.74rem}
}

/* ---- Le bouton qui travaille : une attente impossible à rater ----
   Le libellé change (« Leadsoon analyse votre demande… ») mais rien ne
   bougeait. Version 2 (la pulsation seule passait inaperçue sur fond
   sombre) : un anneau qui tourne devant le texte, un balayage lumineux
   qui traverse le bouton, et le halo qui pulse. Trois signes de vie. */
/* Trois familles de boutons : .st-btn (studio), .btn (site), .st3-regen
   (« Générer un nouveau visuel »). Toutes couvertes. */
.st-btn.st-travail,.st-btn.st-travail:disabled,
.st3-regen.st-travail,.st3-regen.st-travail:disabled,
.btn.st-travail,.btn.st-travail:disabled{opacity:1;cursor:progress}
.st-btn.st-travail,.st3-regen.st-travail,.btn.st-travail{
  border-color:var(--brand-2,#a78bfa);
  background-image:linear-gradient(100deg,transparent 25%,rgba(167,139,250,.38) 50%,transparent 75%);
  background-size:250% 100%;
  animation:st-balaie 1.2s linear infinite,st-respire 1.4s ease-in-out infinite;
}
@keyframes st-balaie{0%{background-position:130% 0}100%{background-position:-130% 0}}
@keyframes st-respire{
  0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.55)}
  55%{box-shadow:0 0 0 10px rgba(139,92,246,0)}
}
.st-btn.st-travail::before,.st3-regen.st-travail::before,.btn.st-travail::before{
  content:'';display:inline-block;width:.9em;height:.9em;margin-right:.55em;
  vertical-align:-.12em;border-radius:50%;flex:none;
  border:2.5px solid rgba(167,139,250,.3);border-top-color:var(--brand-2,#a78bfa);
  animation:st-tourne .8s linear infinite;
}
@keyframes st-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn.st-travail,.st-btn.st-travail::before,.st3-regen.st-travail::before,.btn.st-travail::before{animation:none}
}

/* ---- La boîte de relecture des textes édités (écran 5, 19/08) ----
   Rien ne se corrige en silence : les propositions s'affichent, deux
   boutons, l'utilisateur tranche. */
.st5-controle{margin:.9rem 0;padding:1rem 1.1rem;border:1.5px solid var(--stv,#7c3aed);
  border-radius:14px;background:rgba(124,58,237,.08)}
.st5-controle-t{margin:0 0 .6rem;font-weight:700}
.st5-controle ul{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.55rem}
.st5-controle li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;font-size:.92rem}
.st5-controle li b{flex-basis:100%;font-size:.8rem;opacity:.75}
.st5-controle .avant{text-decoration:line-through;opacity:.6}
.st5-controle .fleche{opacity:.6}
.st5-controle .apres{font-weight:700;color:var(--stv2,#a78bfa)}
.st5-controle-btns{display:flex;gap:.6rem;flex-wrap:wrap}

/* ==== Écran 4 en « bande de vignettes » (19/08) ====
   La galerie pleine hauteur + le grand aperçu empilés imposaient un
   aller-retour de défilement à chaque exploration de design. Les cartes
   deviennent une bande de vignettes compactes ; le grand aperçu, toujours
   visible dessous, devient l'objet principal — le motif « fiche produit »,
   familier de tous. Aucun changement de structure : du style seulement. */
.st4-galerie{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.6rem}
.st4-carte{width:150px;flex:none;border-radius:12px}
.st4-carte.verticale{width:116px}
.st4-carte .st4-desc,.st4-carte .st4-tags{display:none}
.st4-carte .st4-infos{padding:.4rem .55rem .5rem;gap:0}
.st4-carte .st4-nom{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* L'attente au format vignette : l'anneau et « Un instant… » suffisent —
   la phrase complète vit dans le message d'état au-dessus de la bande. */
.st4-carte .st4-patiente b{font-size:.72rem}
.st4-carte .st4-patiente>span{display:none}
.st4-carte .st4-anneau{width:26px;height:26px}
.st4-carte .st4-loupe svg{width:12px;height:12px}
/* Sur petit écran : la bande défile horizontalement, d'un pouce. */
@media (max-width:700px){
  .st4-galerie{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.4rem;
    scroll-snap-type:x proximity}
  .st4-carte{width:124px;scroll-snap-align:start}
  .st4-carte.verticale{width:100px}
}

/* ==== ONGLET GOOGLE : les formats dans leur environnement réel (19/08) ====
   Les chromes reproduisent les surfaces de diffusion — fond BLANC voulu,
   quel que soit le thème de l'application : une page Google est blanche. */
.st4-google{display:grid;gap:.9rem;margin-top:.2rem}
.st4g-note{margin:0;font-size:.9rem;color:var(--stm)}
.st4g-cats{display:flex;flex-wrap:wrap;gap:.45rem}
.st4g-cat{font:inherit;font-size:.86rem;font-weight:650;padding:.42rem .85rem;
  border-radius:999px;border:1.5px solid var(--stl);background:var(--stp);
  color:var(--stm);cursor:pointer}
.st4g-cat.on{border-color:var(--stv);color:#fff;background:var(--stv)}
.st4g-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
  gap:.9rem;align-items:start}
.st4g-carte{border:1.5px solid var(--stl);border-radius:16px;background:var(--stp);
  overflow:hidden;display:grid}
.st4g-carte.inel{opacity:.55}
.st4g-pied{display:grid;gap:.2rem;padding:.7rem .85rem .8rem;border-top:1px solid var(--stl)}
.st4g-pied b{font-size:.92rem;color:var(--stt)}
.st4g-pied span{font-size:.8rem;line-height:1.45;color:var(--stm)}
.st4g-mention{font-style:normal;font-size:.76rem;color:var(--stv2);margin-top:.15rem}
/* ---- socle commun des chromes ---- */
.gap{position:relative;background:#fff;color:#1f1f1f;min-height:120px;
  font-size:.8rem;line-height:1.4}
.gap img{display:block;width:100%;height:auto}
.gap-vide{display:grid;place-content:center;min-height:110px;color:#8a8a8a;
  font-size:.8rem;padding:.6rem;text-align:center}
.gap-tag-annonce{position:absolute;top:.45rem;left:.45rem;font-style:normal;
  font-size:.66rem;font-weight:700;padding:.12rem .4rem;border-radius:4px;
  background:rgba(0,0,0,.62);color:#fff}
.gap-tag-annonce.shorts{left:auto;right:.45rem;background:#ff0033}
/* ---- Recherche Google ---- */
.gap-search{padding:.8rem .9rem 1rem}
.gap-glogo{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.45rem}
.gap-glogo b{color:#4285f4}.gap-glogo i{color:#ea4335;font-style:normal}
.gap-glogo u{color:#fbbc05;text-decoration:none}.gap-glogo s{color:#34a853;text-decoration:none}
.gap-gbar{display:flex;justify-content:space-between;gap:.5rem;align-items:center;
  border:1px solid #dfe1e5;border-radius:999px;padding:.35rem .8rem;margin-bottom:.6rem;
  color:#333;box-shadow:0 1px 4px rgba(32,33,36,.12)}
.gap-gbar em{font-style:normal;color:#9aa0a6;font-size:.72rem;white-space:nowrap}
.gap-gsp{font-size:.72rem;font-weight:700;color:#1f1f1f;margin-bottom:.1rem}
.gap-gurl{font-size:.74rem;color:#202124}
.gap-gtitre{display:block;color:#1a0dab;font-size:.95rem;line-height:1.3;margin:.1rem 0 .15rem}
.gap-gdesc{margin:0;color:#4d5156;font-size:.78rem}
.gap-gliens{display:flex;gap:.9rem;margin-top:.4rem;flex-wrap:wrap}
.gap-gliens span{color:#1a0dab;font-size:.76rem}
/* ---- site avec bannière (Display) ---- */
.gap-site{padding:.7rem .8rem .8rem;background:#fafafa}
.gap-site-t{height:14px;width:45%;border-radius:4px;background:#dcdcdc;margin-bottom:.5rem}
.gap-site-l{height:8px;border-radius:4px;background:#e7e7e7;margin:.35rem 0}
.gap-site-l.c{width:72%}
.gap-banniere{position:relative;margin:.5rem 0;border-radius:6px;overflow:hidden;
  aspect-ratio:1.91/1;background:#eee}
.gap-banniere img{height:100%;object-fit:cover}
/* ---- carte de flux (carré / carrousel) ---- */
.gap-feedcard img{aspect-ratio:1/1;object-fit:cover}
.gap-feed-pied{display:grid;gap:.1rem;padding:.5rem .7rem .6rem}
.gap-feed-pied b{font-size:.84rem}
.gap-feed-pied span{font-size:.72rem;color:#70757a}
.gap-carr-piste{display:flex;gap:.45rem;overflow-x:auto;padding:.5rem;
  scroll-snap-type:x mandatory;background:#f1f3f4}
.gap-carr-carte{flex:0 0 78%;scroll-snap-align:center;border-radius:8px;overflow:hidden}
.gap-carr-carte img{aspect-ratio:1/1;object-fit:cover}
.gap-carr-points{display:flex;gap:.3rem;justify-content:center;padding:.35rem 0 0}
.gap-carr-points i{width:6px;height:6px;border-radius:50%;background:#c3c6ca}
.gap-carr-points i:first-child{background:#5f6368}
/* ---- Discover ---- */
.gap-disc-tete{padding:.5rem .7rem;font-weight:700;font-size:.78rem;color:#5f6368;
  border-bottom:1px solid #eee}
.gap-discover img{aspect-ratio:16/9;object-fit:cover}
.gap-disc-corps{padding:.55rem .7rem .7rem;display:grid;gap:.25rem}
.gap-disc-corps b{font-size:.88rem;line-height:1.3}
.gap-disc-corps p{margin:0;font-size:.74rem;color:#5f6368}
.gap-disc-marque{display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:#5f6368}
.gap-disc-marque i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:#7c3aed;color:#fff;font-style:normal;font-size:.62rem;font-weight:700}
/* ---- Gmail ---- */
.gap-gm-onglets{display:flex;gap:1rem;padding:.5rem .8rem;border-bottom:1px solid #eee;
  font-size:.76rem;color:#5f6368}
.gap-gm-onglets .on{color:#0b57d0;font-weight:700;border-bottom:2px solid #0b57d0;padding-bottom:.3rem}
.gap-gm-onglets i{font-style:normal;background:#0b57d0;color:#fff;border-radius:8px;
  font-size:.6rem;padding:0 .3rem;margin-left:.2rem}
.gap-gm-ligne{display:flex;gap:.55rem;align-items:center;padding:.55rem .7rem .65rem;background:#f2f6fc}
.gap-gm-av{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
  background:#7c3aed;color:#fff;font-style:normal;font-weight:700;font-size:.76rem}
.gap-gm-txt{display:grid;gap:.05rem;min-width:0;flex:1}
.gap-gm-txt b{font-size:.78rem}
.gap-gm-txt b u{text-decoration:none;font-weight:600;font-size:.62rem;color:#188038;
  border:1px solid #188038;border-radius:3px;padding:0 .25rem;margin-left:.25rem}
.gap-gm-txt span{font-size:.72rem;color:#5f6368;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gap-gm-mini{width:44px!important;height:44px;object-fit:cover;border-radius:8px;flex:none}
/* ---- YouTube flux ---- */
.gap-yt-tete{display:flex;align-items:center;gap:.35rem;padding:.5rem .7rem;font-weight:800;
  font-size:.8rem}
.gap-yt-tete i{font-style:normal;background:#ff0033;color:#fff;border-radius:4px;
  padding:.02rem .3rem;font-size:.66rem}
.gap-yt-vig{position:relative}
.gap-yt-vig img{aspect-ratio:16/9;object-fit:cover}
.gap-yt-corps{display:grid;gap:.25rem;padding:.55rem .7rem .7rem}
.gap-yt-corps b{font-size:.84rem;line-height:1.3}
.gap-yt-corps span{font-size:.72rem;color:#5f6368}
.gap-yt-cta{justify-self:start;font:inherit;font-size:.74rem;font-weight:700;cursor:default;
  border:0;border-radius:999px;padding:.32rem .8rem;background:#0b57d0;color:#fff}
/* ---- téléphone vertical (Shorts / 9:16) ---- */
.gap-tel{aspect-ratio:9/16;max-height:330px;justify-self:center;width:auto;
  background:#000;overflow:hidden;border-radius:10px;margin:.6rem auto;color:#fff}
.gap-tel img{height:100%;object-fit:contain;background:#000}
.gap-tel img.plein{object-fit:cover}
.gap-tel-bas{position:absolute;left:.55rem;right:.5rem;bottom:.5rem;display:grid;gap:.15rem;
  font-size:.7rem;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.gap-tel-bas u{text-decoration:none;font-size:.6rem;background:rgba(255,255,255,.25);
  border-radius:3px;padding:0 .25rem;justify-self:start}
/* ---- lecteur vidéo (InStream / Bumper) ---- */
.gap-player{background:#000;color:#fff}
.gap-player img{aspect-ratio:16/9;object-fit:cover;opacity:.85}
.gap-player-voile{position:absolute;inset:0;display:grid;place-content:center}
.gap-player-voile i{font-style:normal;font-size:1.6rem;background:rgba(0,0,0,.55);
  border-radius:50%;width:48px;height:48px;display:grid;place-items:center}
.gap-player-barre{position:absolute;left:0;right:0;top:calc(56.25% - 3px);height:3px;background:rgba(255,255,255,.3)}
.gap-player-barre b{display:block;width:22%;height:100%;background:#ff0033}
.gap-player-ignorer{position:absolute;right:0;top:calc(56.25% - 2.4rem);font-size:.7rem;
  background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.5);padding:.3rem .6rem}
.gap-video-note{position:relative;background:#fff;color:#5f6368;font-size:.74rem;
  padding:.55rem .7rem;line-height:1.45}
/* ---- Masthead ---- */
.gap-mast-ban{position:relative}
.gap-mast-ban img{aspect-ratio:2.6/1;object-fit:cover}
/* ---- Maps ---- */
.gap-maps-fond{position:relative;height:110px;
  background:linear-gradient(#e8eaed 1px,transparent 1px),linear-gradient(90deg,#e8eaed 1px,transparent 1px),
  linear-gradient(35deg,transparent 46%,#c5e1c5 46% 54%,transparent 54%),#f1f3f4;
  background-size:22px 22px,22px 22px,auto,auto}
.gap-maps-pin{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:1.5rem}
.gap-maps-carte{display:grid;gap:.25rem;padding:.55rem .7rem .65rem;border-top:1px solid #eee}
.gap-maps-carte b{font-size:.82rem}
.gap-maps-carte>span{font-size:.72rem;color:#5f6368}
.gap-maps-btns{display:flex;gap:.4rem;margin-top:.2rem;flex-wrap:wrap}
.gap-maps-btns i{font-style:normal;font-size:.7rem;font-weight:650;color:#0b57d0;
  border:1px solid #dadce0;border-radius:999px;padding:.22rem .55rem}
/* ---- Shopping ---- */
.gap-shop{display:grid;gap:.15rem;padding:0 0 .6rem}
.gap-shop-vig img{aspect-ratio:1/1;object-fit:cover}
.gap-shop b{font-size:.8rem;padding:.45rem .7rem 0}
.gap-shop em{font-style:normal;font-weight:800;font-size:.92rem;padding:0 .7rem}
.gap-shop>span{font-size:.72rem;color:#5f6368;padding:0 .7rem}
/* ---- Performance Max ---- */
.gap-pmax{display:grid;gap:.6rem;padding:.85rem .9rem 1rem;background:#f8f9ff}
.gap-pmax p{margin:0;font-size:.8rem;color:#3c4043;line-height:1.5}
.gap-pmax-surfaces{display:flex;flex-wrap:wrap;gap:.35rem}
.gap-pmax-surfaces i{font-style:normal;font-size:.72rem;font-weight:650;color:#0b57d0;
  background:#e8f0fe;border-radius:999px;padding:.22rem .55rem}

/* ==== Phase 2 (19/08) : bannières déclinées, Facebook, Instagram, crayons ==== */
/* ---- déclinaisons de bannière Display ---- */
.gap-ban-chips{display:flex;flex-wrap:wrap;gap:.3rem;padding:.55rem .6rem .1rem}
.gap-ban-chips i{font-style:normal;font-size:.68rem;font-weight:700;cursor:pointer;
  color:#5f6368;border:1px solid #dadce0;border-radius:999px;padding:.18rem .5rem;background:#fff}
.gap-ban-chips i.on{background:#0b57d0;border-color:#0b57d0;color:#fff}
.gap-ban-dim{display:block;font-size:.66rem;color:#9aa0a6;padding:0 .8rem .1rem;text-align:center}
.gap-banniere.ban-c{aspect-ratio:6/5;width:62%;margin-left:auto;margin-right:auto}
.gap-banniere.ban-v{aspect-ratio:4/15;width:34%;margin-left:auto;margin-right:auto;max-height:230px}
.gap-banniere.ban-m{aspect-ratio:32/5}
/* ---- socle social (Facebook / Instagram) ---- */
.gap-soc-tete{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem}
.gap-soc-tete>div{display:grid;line-height:1.25;min-width:0;flex:1}
.gap-soc-tete b{font-size:.8rem}
.gap-soc-tete span{font-size:.68rem;color:#65676b}
.gap-soc-tete em{font-style:normal;color:#65676b}
.gap-soc-av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;
  color:#fff;font-style:normal;font-weight:700;font-size:.8rem}
.gap-soc-av.fb{background:#1877f2}
.gap-soc-av.ig{background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7)}
.gap-soc-txt{margin:0;padding:0 .7rem .5rem;font-size:.76rem;color:#1f1f1f}
.gap-fb img.st4g-img,.gap-ig img.st4g-img{aspect-ratio:1/1;object-fit:cover}
/* ---- Facebook fil ---- */
.gap-fb-cta{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.5rem .7rem;background:#f0f2f5}
.gap-fb-cta div{display:grid;line-height:1.3;min-width:0}
.gap-fb-cta span{font-size:.64rem;color:#65676b;text-transform:uppercase}
.gap-fb-cta b{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gap-fb-cta u{text-decoration:none;flex:none;font-size:.72rem;font-weight:700;
  background:#e4e6eb;border-radius:6px;padding:.35rem .7rem;color:#050505}
.gap-fb-actions{display:flex;justify-content:space-around;padding:.45rem .5rem;
  border-top:1px solid #e4e6eb;font-size:.7rem;color:#65676b}
/* ---- Instagram fil ---- */
.gap-ig-cta{display:flex;justify-content:space-between;padding:.5rem .7rem;
  font-size:.76rem;font-weight:700;color:#0095f6;border-bottom:1px solid #efefef}
.gap-ig-actions{display:flex;gap:.7rem;padding:.45rem .7rem .1rem;font-size:.95rem}
.gap-ig-actions em{font-style:normal;margin-left:auto}
.gap-ig .gap-soc-txt{padding-top:.25rem}
/* ---- story (Facebook / Instagram) ---- */
.gap-tel.story .gap-story-tete{position:absolute;top:.45rem;left:.5rem;right:.5rem;
  display:flex;gap:.25rem}
.gap-tel.story .gap-story-tete i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.4)}
.gap-tel.story .gap-story-tete i.on{background:#fff}
.gap-story-qui{position:absolute;top:.9rem;left:.5rem;display:flex;align-items:center;gap:.4rem;
  font-size:.7rem;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.gap-story-qui .gap-soc-av{width:22px;height:22px;font-size:.66rem}
.gap-story-cta{position:absolute;left:50%;bottom:.55rem;transform:translateX(-50%);
  font-size:.72rem;font-weight:700;background:#fff;color:#000;border-radius:999px;
  padding:.3rem .8rem;white-space:nowrap}
/* ---- les étapes validées : cliquables, crayon visible ---- */
.st-g-etapes li.fait{padding:0}
.st-g-lien{display:flex;gap:.65rem;align-items:flex-start;padding:.9rem .8rem;flex:1;
  min-width:0;border-radius:14px;color:inherit;text-decoration:none}
.st-g-lien:hover{background:var(--stp2);text-decoration:none}
.st-g-crayon{flex:none;margin-left:auto;margin-top:.2rem;color:var(--stm);opacity:.65}
.st-g-lien:hover .st-g-crayon{color:var(--stv2);opacity:1}

/* ==== Phase 3 (19/08) : sélection par format, annonce Recherche, App ==== */
/* ---- « Retenir ce format » ---- */
.st4g-retenir{display:inline-flex;align-items:center;gap:.4rem;justify-self:start;
  margin-top:.45rem;font:inherit;font-size:.8rem;font-weight:650;cursor:pointer;
  padding:.35rem .7rem;border-radius:999px;border:1.5px solid var(--stl);
  background:var(--stp2);color:var(--stm)}
.st4g-retenir i{font-style:normal;display:grid;place-items:center;width:16px;height:16px;
  border-radius:50%;border:1.5px solid var(--stl);font-size:.62rem;color:transparent}
.st4g-retenir:hover{border-color:var(--stv)}
.st4g-retenir.on{border-color:var(--stv);background:rgba(124,58,237,.14);color:var(--stv2)}
.st4g-retenir.on i{background:var(--stv);border-color:var(--stv);color:#fff}
.st4-formats-n{margin-left:auto;margin-right:.8rem;align-self:center;font-size:.84rem;
  font-weight:650;color:var(--stv2);border:1.5px solid var(--stv);border-radius:999px;
  padding:.35rem .8rem;background:rgba(124,58,237,.1)}
/* ---- annonce Recherche Google (écran 5) ---- */
.st5-search-champs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:.7rem .9rem}
.st5-search-champs label{display:grid;gap:.3rem;font-size:.86rem;color:var(--stm)}
.st5-search-champs input{border:1px solid var(--stl);border-radius:10px;background:var(--stp2);
  color:var(--stt);font:inherit;font-size:.95rem;padding:.55rem .7rem}
.st5-search-champs input:focus{border-color:var(--stv);outline:none}
.st5-cpt{font-style:normal;font-size:.72rem;color:var(--stm);opacity:.8;margin-left:.3rem}
.st5-cpt.bas{color:#fbbf24;opacity:1}
/* ---- campagne App (fiche Play Store) ---- */
.gap-app-ligne{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem}
.gap-app-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;flex:none;
  background:linear-gradient(135deg,#7c3aed,#f472b6);color:#fff;font-size:1rem}
.gap-app-ligne>div{display:grid;line-height:1.3;min-width:0;flex:1}
.gap-app-ligne>div b{font-size:.82rem}
.gap-app-ligne>div span{font-size:.7rem;color:#5f6368;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gap-app-ligne>div .gap-app-note{color:#01875f;font-weight:650}
.gap-app-ligne u{text-decoration:none;flex:none;font-size:.74rem;font-weight:700;
  background:#01875f;color:#fff;border-radius:999px;padding:.35rem .8rem}
.gap-app-captures{display:flex;gap:.4rem;padding:0 .7rem .7rem}
.gap-app-captures img{width:calc(50% - .2rem);aspect-ratio:1/1;object-fit:cover;border-radius:8px}

/* ==== ÉCRAN 6 : Finalisation (phase 4, 19/08) ==== */
.st6-visuel{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:flex-start}
.st6-img{width:min(300px,100%);aspect-ratio:1/1;border-radius:14px;
  border:1.5px solid var(--stl);background-color:var(--stp2);
  background-size:cover;background-position:center}
.st6-img.verticale{aspect-ratio:2/3;width:min(220px,100%);background-size:contain;
  background-repeat:no-repeat;background-color:#000}
.st6-telech{display:grid;gap:.55rem;align-content:start;flex:1;min-width:230px}
.st6-telech p{margin:0;font-size:.92rem;color:var(--stm)}
.st6-telech .st-btn{justify-self:start}
.st6-note{font-size:.8rem;color:var(--stm);opacity:.85}
.st6-resume div{display:grid;gap:.15rem}
.st6-formats{display:flex;flex-wrap:wrap;gap:.45rem}
.st6-formats i{font-style:normal;font-size:.84rem;font-weight:650;color:var(--stv2);
  border:1.5px solid var(--stv);border-radius:999px;padding:.32rem .75rem;
  background:rgba(124,58,237,.1)}
.st6-textes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.9rem}
.st6-texte{border:1px solid var(--stl);border-radius:14px;background:var(--stp2);
  padding:.8rem .95rem;display:grid;gap:.35rem}
.st6-texte b{font-size:.95rem;color:var(--stt)}
.st6-texte p{margin:0;font-size:.86rem;line-height:1.5;color:var(--stm)}
.st6-texte>span{font-size:.78rem;color:var(--stm);opacity:.8}
.st6-search p{margin:.25rem 0;font-size:.9rem;line-height:1.55;color:var(--stm)}
.st6-search b{color:var(--stt)}

/* ==== Un visuel PEINT ne se recadre JAMAIS (19/08 soir) ====
   Dans un gabarit d'un autre ratio, l'image s'affiche ENTIÈRE sur fond
   sombre — comme TikTok affiche les vidéos hors format. Le recadrage
   « cover » coupait les titres des vignettes Google. */
.gap-banniere img,.gap-discover img,.gap-yt-vig img,
.gap-mast-ban img,.gap-player img{object-fit:contain;background:#101322}
.gap-tel img.plein{object-fit:contain}
.gap-fb img.st4g-img,.gap-ig img.st4g-img,
.gap-feedcard img,.gap-carr-carte img,.gap-shop-vig img{object-fit:contain;background:#101322}

/* ---- écran 5 : validation par bloc (20/08) ------------------------------ */
.st5-champ-ligne { display: flex; gap: 8px; align-items: center; }
.st5-champ-ligne .st5-btx { flex: 1; min-width: 0; }
.st5-btx-ok {
  flex: 0 0 auto; border: 1px solid rgba(124, 92, 255, .55);
  background: rgba(124, 92, 255, .14); color: inherit;
  border-radius: 9px; padding: 7px 11px; font-size: .82rem;
  cursor: pointer; white-space: nowrap; transition: background .15s ease;
}
.st5-btx-ok:hover { background: rgba(124, 92, 255, .26); }
.st5-btx-ok.fait {
  border-color: rgba(61, 199, 137, .6); background: rgba(61, 199, 137, .16);
}
#st5Groupes textarea[name$="[desc]"] { resize: vertical; min-height: 3.2em; }

/* ---- écran 5 : blocs sur 2 lignes + note sur place (20/08) -------------- */
.st5-champ-ligne .st5-btx { resize: vertical; min-height: 3.1em; line-height: 1.45; }
.st5-btx-note {
  display: block; margin-top: 5px; font-size: .8rem; font-style: normal;
  color: #3dc789;
}
.st5-btx-note.erreur { color: #e2606c; }

/* ---- écran 5 : validation par champ des annonces (20/08) ---------------- */
.st5-annonce-ok { margin-top: 6px; display: inline-block; }

/* ---- écran 5 : second bouton de regénération sous le visuel (20/08) ----- */
.st5-regen-haut { display: block; width: 100%; margin-top: 10px; }

/* ---- écran 5 : la loupe et la vue agrandie (20/08) ---------------------- */
.st5-apercu { position: relative; }
.st5-apercu .st5-img { cursor: zoom-in; }
.st5-loupe { z-index: 3; }
.st5-zoom { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; }
.st5-zoom[hidden] { display: none; }
.st5-zoom-fond { position: absolute; inset: 0; background: rgba(6, 8, 18, .88); cursor: zoom-out; }
.st5-zoom img {
  position: relative; max-width: 94vw; max-height: 92vh;
  border-radius: 14px; box-shadow: 0 22px 70px rgba(0, 0, 0, .55);
}
.st5-zoom .st4-zoom-fermer { position: absolute; top: 16px; right: 18px; z-index: 2; }