/* ============================================================== ENGAGE STUDIO
   La meme direction qu'Atlas : le fond de couleur porte l'ecran, le contenu vit
   dans des cartes blanches qui flottent dessus, et l'objet du travail se pose
   DIRECTEMENT sur la couleur, sans carte. Dans Atlas c'etaient les chiffres du plan ;
   ici c'est le telephone. C'est le seul endroit ou l'on renonce a la carte, et c'est
   ce qui fait la signature.
   ---------------------------------------------------------------------------- */

:root{
  /* Trois jetons commandent l'encre posee sur le fond, et c'est ce qui permet d'avoir
     un fond CLAIR sans rien casser :
       --sur     l'encre posee SUR le fond ;
       --surv    la meme en composantes, pour les voiles translucides ;
       --sur-on  ce qu'on ecrit DANS un aplat de --sur.
     Les deux fonds sont sombres, l'encre est donc blanche. Les trois jetons restent :
     ils tiennent tout le studio, et un fond clair se poserait en les retournant. */
  --bleu:#5A63E8;
  --encre:#141633; --dim:#6C6F94; --faint:#9A9DBC;
  --sur:#FFFFFF; --surv:255 255 255; --sur-on:#2E3596;
  --acc:#5A63E8; --acc-dk:#3C44BE; --acc-soft:#EEF0FE; --acc-line:#C9CDF7;
  --card:#FFFFFF; --card-2:#F8F9FE; --line:#EDEEF8; --line-2:#E0E2F2;
  --neu:#F1F2FC;
  --ok:#1E6A40; --ok-bg:#E6F3EC; --warn:#8A5A22; --warn-bg:#FAEEDD;
  --halo:255 255 255;
}
body[data-fond="noir"]{--bleu:#0B0B0E; --sur-on:#0B0B0E}

*{box-sizing:border-box}
/* Le DOCUMENT ne defile pas : ce sont les zones de travail qui defilent, chacune
   dans son cadre. Sans cela l'en-tete descendait avec le contenu, alors qu'il porte
   le compte et le selecteur de campagne, qui doivent rester sous la main. */
html,body{margin:0;height:100%;overflow:hidden}
body{
  font:14px/1.5 Figtree,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bleu);
  background-image:
    radial-gradient(1100px 720px at 66% -8%,rgb(var(--halo)/var(--halo-h,.20)),transparent 62%),
    radial-gradient(820px 560px at 0% 104%,rgb(var(--halo)/var(--halo-b,.14)),transparent 60%);
  background-attachment:fixed;
  color:var(--sur);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
/* Un element masque doit l'etre quoi qu'en dise sa classe : .btn pose un display,
   et il gagnait sur l'attribut hidden. */
[hidden]{display:none!important}
.num{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------- ossature */
/* Le rail a été retiré : deux marques suffisent à la navigation, le logo du produit
   pour son accueil, le mot-symbole Tags pour sortir vers l'accueil de la maison. */
.app{height:100%;display:flex;flex-direction:column;
  min-height:0}

.topbar{flex:none;display:flex;align-items:center;gap:14px;padding:22px 30px 10px;
  position:relative;z-index:20}
/* La pilule de la crea : le logo de l'annonceur, son nom, celui de la crea. C'est le
   pendant exact du selecteur de campagne d'Atlas, en champs plutot qu'en liste. */
.tb-c{display:flex;align-items:center;gap:11px;background:rgb(var(--surv)/.16);
  border:1px solid rgb(var(--surv)/.30);border-radius:999px;padding:7px 18px 7px 7px}
.camp-lg{width:30px;height:30px;border-radius:50%;background:#fff;flex:none;
  display:grid;place-items:center;overflow:hidden}
.camp-lg img{width:100%;height:100%;object-fit:contain;display:block}
.camp-lg.vide{background:rgb(var(--surv)/.28)}
.camp-lg.vide img{display:none}
.tb-c input.camp-in{background:none;border:0;outline:none;color:var(--sur);
  font-weight:650;font-size:14px;width:132px;padding:0;border-radius:0}
.tb-c input.camp-in.creax{width:152px}
.tb-c input.camp-in:focus{border:0}
.tb-c input.camp-in::placeholder{color:rgb(var(--surv)/.5)}
.tb-c em{font-style:normal;color:rgb(var(--surv)/.5);font-size:14px}
/* Le selecteur de fond, repris d'Atlas : une pastille bicolore qui s'efface au
   survol pour laisser la place aux deux choix. */
.pal{position:relative;display:flex;align-items:center;height:34px;flex:none}
.pal-b{width:26px;height:26px;border-radius:50%;border:2px solid rgb(var(--surv)/.7);
  cursor:pointer;padding:0;flex:none;
  background:conic-gradient(#5A63E8 0 50%,#0B0B0E 50% 100%)}
.pal-l{position:absolute;left:-6px;top:-5px;display:flex;align-items:center;gap:5px;
  padding:5px 7px;border-radius:999px;background:rgba(8,32,36,.6);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.2);
  opacity:0;transform:scale(.82);transform-origin:left center;pointer-events:none;
  transition:opacity .16s ease,transform .18s cubic-bezier(.2,.9,.3,1.2)}
.pal:hover .pal-l,.pal:focus-within .pal-l{opacity:1;transform:scale(1);pointer-events:auto}
.pal:hover .pal-b,.pal:focus-within .pal-b{opacity:0}
.pal-c{width:22px;height:22px;border-radius:50%;border:2px solid transparent;padding:0;
  cursor:pointer;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  transition:transform .12s}
.pal-c:hover{transform:scale(1.18)}
.pal-c.on{border-color:#fff}
.tb-sp{flex:1}
/* Le mot-symbole Tags est partout, puisqu'il n'y a plus de rail pour le porter. */
.tb-mk{display:flex;align-items:center;flex:none;line-height:0;padding:2px 4px;
  text-decoration:none;border-radius:10px;transition:opacity .14s}
.tb-mk:hover{opacity:.72}
.tb-mk img{height:23px;width:auto;object-fit:contain;display:block}
/* Le selecteur de campagne ne parait que la ou une campagne est ouverte : la page
   des creations et celle de personnalisation. */
body:not([data-ecran="crea"]):not([data-ecran="campagne"]) .tb-c{display:none}
/* Le selecteur de campagne, repris d'Atlas : la miniature de l'annonceur, puis la
   liste des campagnes actives, groupees par marque. */
.tb-c{display:flex;align-items:center;gap:11px;background:rgb(var(--surv)/.16);
  border:1px solid rgb(var(--surv)/.30);border-radius:999px;padding:6px 8px 6px 6px;
  flex:none;max-width:340px}
.camp-lg{width:30px;height:30px;border-radius:50%;background:#fff;flex:none;
  display:grid;place-items:center;overflow:hidden}
.camp-lg img{width:100%;height:100%;object-fit:contain;display:block}
.camp-lg.vide{background:rgb(var(--surv)/.28)}
.camp-lg.vide img{display:none}
.camp-sel{background:none;border:0;color:var(--sur);font-weight:650;font-size:14px;
  padding:6px 28px 6px 2px;border-radius:0;cursor:pointer;max-width:270px;
  text-overflow:ellipsis;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.6l3 3 3-3' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;background-size:12px}
.camp-sel:focus{border:0}
.camp-sel option,.camp-sel optgroup{color:var(--encre)}

/* Le bouton d'action de l'en-tete, a gauche du compte. */
.tb-o{display:inline-flex;align-items:center;gap:7px;height:36px;box-sizing:border-box;
  border:1px solid rgb(var(--surv)/.24);background:rgb(var(--surv)/.16);
  color:var(--sur);border-radius:999px;padding:0 17px;font:inherit;
  font-size:12.5px;font-weight:620;cursor:pointer;flex:none;transition:.14s}
.tb-o:hover{background:rgb(var(--surv)/.28)}
.tb-o svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Les deux colonnes laterales ont la MEME largeur : c'est ce qui pose le telephone
   au centre exact de la fenetre, donc sous le logo de l'en-tete, qui lui est centre
   sur la fenetre et non sur la grille. */
.grid{flex:1;min-height:0;display:grid;gap:24px;padding:34px 30px 8px;
  grid-template-columns:360px minmax(0,1fr) 360px;align-items:start}
@media (max-width:1460px){.grid{grid-template-columns:336px minmax(0,1fr) 336px}}
@media (max-width:1240px){.grid{grid-template-columns:1fr}}
.colw{min-width:0}
/* Chaque colonne defile dans son propre cadre, sans barre : sur un fond de couleur,
   une barre grise coupe la colonne en deux et se lit comme un bord. overflow-x est
   explicitement masque : en « auto » sur les deux axes, un contenu un peu large
   faisait defiler la colonne de cote et la carte sortait de son espace. */
.grid>.colw{height:100%;padding-bottom:18px;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;-ms-overflow-style:none}
.grid>.colw::-webkit-scrollbar{width:0;height:0;display:none}
.grid>.colw>*{max-width:100%}

/* --------------------------------------------------------------------- cartes */
.card{background:#fff;color:var(--encre);border-radius:26px;padding:20px 22px;
  box-shadow:0 30px 70px -34px rgba(10,12,40,.5)}
.card+.card{margin-top:16px}
.card>h2{display:flex;align-items:center;gap:10px;margin:0 0 2px;
  font-size:17px;font-weight:700;letter-spacing:-.022em}
.card>h2 i{display:grid;place-items:center;width:22px;height:22px;border-radius:8px;
  background:var(--acc-soft);color:var(--acc-dk);font-style:normal;font-size:11px;
  font-weight:800;flex:none}
.card>h2 .droite{margin-left:auto}
.card>.sub{margin:0 0 14px;font-size:12.5px;color:var(--dim)}
/* Une precision sous un champ, dans une carte : l'encre de la carte, pas celle du
   fond, sinon elle disparait sur le blanc. */
.rang>.aide{margin:5px 0 0;font-size:11.5px;line-height:1.45;color:var(--faint)}
.card>h2+.in{margin-top:14px}

.lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin:0 0 7px}
.rang+.rang{margin-top:15px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

input[type=text],input[type=url],input[type=email],input[type=password],
input[type=number],select,textarea{
  width:100%;border:1.5px solid var(--line-2);border-radius:14px;background:#fff;
  color:var(--encre);font-size:14px;font-weight:600;padding:10px 13px;outline:none;
  transition:border-color .14s}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
textarea{font-weight:600;line-height:1.4;resize:vertical;min-height:66px}
input::placeholder,textarea::placeholder{color:var(--faint);font-weight:500}
select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.6l3 3 3-3' fill='none' stroke='%236C6F94' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;
  padding-right:32px}

/* les segments : le choix a deux ou trois branches */
.seg{display:flex;gap:4px;background:var(--neu);border-radius:13px;padding:4px}
.seg button{flex:1;border:0;border-radius:10px;background:none;color:#4C4F78;
  font-size:12.5px;font-weight:640;padding:7px 4px;cursor:pointer;white-space:nowrap}
.seg button.on{background:#fff;color:var(--encre);box-shadow:0 2px 8px -3px rgba(20,22,51,.3)}

/* les vignettes de style : le choix se fait a l'oeil, pas au mot */
.styles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.sty{border:1.5px solid var(--line-2);border-radius:16px;padding:8px 8px 9px;background:#fff;
  cursor:pointer;text-align:center;transition:border-color .14s,background .14s}
.sty:hover{border-color:var(--acc-line)}
.sty.on{border-color:var(--acc);background:var(--acc-soft)}
.sty svg{width:100%;height:auto;display:block;border-radius:9px;margin-bottom:6px}
.sty span{font-size:11.5px;font-weight:650;color:var(--encre)}

/* interrupteur */
.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.sw>span{font-size:13.5px;font-weight:600;color:var(--encre)}
.sw>span em{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--dim)}
.sw i{flex:none;width:40px;height:23px;border-radius:999px;background:var(--line-2);
  position:relative;transition:background .16s}
.sw i::after{content:'';position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);
  transition:transform .18s cubic-bezier(.2,.9,.25,1)}
.sw.on i{background:var(--acc)}
.sw.on i::after{transform:translateX(17px)}

/* curseur */
.cur{position:relative;display:block}
.cur input[type=range]{appearance:none;height:4px;border-radius:999px;
  background:var(--line-2);outline:none;padding:0}
.cur input[type=range]::-webkit-slider-thumb{appearance:none;width:17px;height:17px;
  border-radius:50%;background:var(--acc);cursor:pointer;
  box-shadow:0 2px 6px -1px rgba(60,68,190,.6)}
.cur input[type=range]::-moz-range-thumb{width:17px;height:17px;border:0;border-radius:50%;
  background:var(--acc);cursor:pointer}
.cur b{position:absolute;right:0;top:-21px;font-size:12.5px;font-weight:700;
  color:var(--dim);white-space:nowrap}
.cur input[type=range]{width:100%;display:block}

/* pastilles de couleur */
.cols{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
/* Serree dans une demi-rangee, la palette laisse tomber son champ hexadecimal :
   les pastilles et le selecteur suffisent, et la ligne reste tenue. */
.cols.petit .col-txt{display:none}
.cols.petit{gap:5px}
.cols.petit .col,.cols.petit .col-p{width:24px;height:24px;border-radius:8px}
.col{width:28px;height:28px;border-radius:9px;border:1.5px solid var(--line-2);
  cursor:pointer;padding:0;position:relative}
.col.on{border-color:var(--encre);box-shadow:0 0 0 2px #fff inset}
.col-p{position:relative;width:28px;height:28px;border-radius:9px;overflow:hidden;
  border:1.5px solid var(--line-2);
  background-image:linear-gradient(45deg,var(--line) 25%,transparent 25%,transparent 75%,
    var(--line) 75%),linear-gradient(45deg,var(--line) 25%,transparent 25%,transparent 75%,
    var(--line) 75%);background-size:10px 10px;background-position:0 0,5px 5px}
.col-p input{position:absolute;inset:-8px;width:140%;height:140%;border:0;padding:0;
  cursor:pointer;background:none}
.col-txt{width:88px;font-family:"JetBrains Mono",monospace;font-size:11.5px;
  text-transform:uppercase;padding:7px 9px;border-radius:10px}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1.5px solid var(--line-2);border-radius:999px;background:#fff;color:var(--encre);
  font-size:13px;font-weight:650;padding:9px 16px;cursor:pointer;transition:.14s}
.btn:hover:not(:disabled){border-color:var(--acc);color:var(--acc-dk)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.btn-go{border:0;background:var(--acc);color:#fff;width:100%;padding:12px 16px;
  font-size:14px;font-weight:700}
.btn-go:hover:not(:disabled){background:var(--acc-dk);color:#fff;
  box-shadow:0 8px 24px -8px rgba(60,68,190,.8)}
.btn-min{border:0;background:var(--neu);color:#4C4F78;padding:7px 12px;font-size:12px}
.btn-min:hover{background:var(--acc-soft);color:var(--acc-dk)}
.btn-min.on{background:var(--encre);color:#fff}

/* --------------------------------------------------------- import des visuels */
.depot{border:1.5px dashed var(--line-2);border-radius:18px;padding:22px 14px;
  text-align:center;cursor:pointer;transition:.14s;background:var(--card-2)}
.depot:hover,.depot.survol{border-color:var(--acc);background:var(--acc-soft)}
.depot svg{width:26px;height:26px;fill:none;stroke:var(--acc);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.depot b{display:block;font-size:13.5px;font-weight:680;color:var(--encre)}
.depot span{display:block;font-size:11.5px;color:var(--dim);margin-top:2px}

.vign{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.vg{position:relative;width:62px;height:62px;border-radius:12px;overflow:hidden;
  border:1.5px solid var(--line-2);background:var(--neu)}
.vg img{width:100%;height:100%;object-fit:cover;display:block}
.vg button{position:absolute;top:3px;right:3px;width:19px;height:19px;border:0;
  border-radius:50%;background:rgba(10,12,40,.72);color:#fff;font-size:12px;line-height:1;
  cursor:pointer;display:grid;place-items:center;padding:0}
.vg button:hover{background:#C0392B}
.vg .ord{position:absolute;bottom:3px;left:4px;font-size:9.5px;font-weight:700;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9)}
/* Le rapport de l'image, dans les mots de l'operateur : carre, 3/4, 16/9. C'est a ce
   mot-la qu'il decide s'il remplit ou s'il pose l'image entiere. */
.vg .rap{position:absolute;bottom:0;left:0;right:0;padding:2px 0 3px;text-align:center;
  font-size:9px;font-weight:700;letter-spacing:.03em;color:#fff;background:rgba(10,12,40,.66)}
.vg .ord{bottom:16px}

/* --------------------------------------------------------------- les reponses */
.rep{border:1.5px solid var(--line-2);border-radius:16px;padding:11px 12px;background:#fff}
.rep+.rep{margin-top:9px}
.rep.pixel{border-color:var(--acc-line);background:var(--acc-soft)}
.rep-h{display:flex;align-items:center;gap:8px}
.rep-h input{flex:1}
/* La part montree dans la maquette. Serree contre son signe pour qu'on lise « 58 % »
   et non deux champs distincts. */
.rep-h input.pcx{flex:none;width:56px;padding:10px 4px 10px 9px;text-align:right;
  border-right:0;border-radius:14px 0 0 14px;
  font-family:"JetBrains Mono",monospace;font-size:12px}
.rep-h input.pcx::-webkit-outer-spin-button,
.rep-h input.pcx::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rep-h .pcs{flex:none;align-self:stretch;display:flex;align-items:center;padding:0 9px 0 2px;
  border:1.5px solid var(--line-2);border-left:0;border-radius:0 14px 14px 0;
  background:#fff;font-style:normal;font-size:12px;font-weight:600;color:var(--dim)}
.rep-h .sup{flex:none;width:30px;height:30px;border-radius:9px;border:0;background:var(--neu);
  color:var(--dim);cursor:pointer;display:grid;place-items:center;padding:0}
.rep-h .sup:hover{background:#FAEAE8;color:#8C3A34}
.rep-px{margin-top:9px}
.rep-px .lbl{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.puce{display:inline-block;padding:2px 7px;border-radius:999px;background:var(--acc);
  color:#fff;font-size:9px;font-weight:800;letter-spacing:.06em}
.rep-px input{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;
  padding:8px 11px}
/* Les trois familles de pixels, chacune nommee : Meta, YouTube, programmatique.
   Le nom est DANS le champ, a gauche, pour ne pas ajouter trois lignes de libelle
   a une carte qui en compte deja beaucoup. */
.px-l{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line-2);
  border-radius:12px;background:#fff;padding-left:11px;transition:border-color .14s}
.px-l+.px-l{margin-top:6px}
.px-l:focus-within{border-color:var(--acc)}
.px-l>i{flex:none;width:98px;font-style:normal;font-size:9.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.px-l>input{border:0;border-radius:0;padding:8px 11px 8px 0;background:none;flex:1;
  min-width:0}
.px-l>input:focus{border:0}

/* ------------------------------------------------------------- le telephone
   Pose a nu sur la couleur : c'est l'objet du travail, il ne doit rien avoir autour.
   Les rendus fournis portent DEJA leur habillage iOS : barre d'etat, barre Safari et
   le trait gris qui les separe du contenu. Il n'y a qu'a poser la crea dans la zone
   de page, entre les deux.

   Les mesures sont celles relevees dans les fichiers, exprimees en part de leur
   LARGEUR : la boite garde ainsi son rapport quelle que soit la taille d'affichage,
   et une seule variable, --w, commande l'ensemble. Elles doublent les constantes de
   telephone.js, et les deux doivent bouger ensemble. */
/* Le telephone commence une centaine de pixels sous le premier bloc. Un calage
   calcule sur la hauteur des cartes voisines a ete essaye : il se rejouait a chaque
   repeinture et le telephone sautait d'un cran a chaque reglage. Une valeur fixe ne
   bouge jamais. */
.zn-tel{display:flex;flex-direction:column;align-items:center;gap:16px;
  padding-top:0;position:sticky;top:8px;width:100%}
.tel{--w:300px;width:var(--w);aspect-ratio:1038/2061;position:relative}
/* L'ombre vit sur le RENDU, pas sur son conteneur : un filtre CSS pose sur un ancetre
   d'iframe la fait tramer a part, et le bas de la crea restait non peint apres un
   changement de taille. Le fichier etant detoure, le resultat est le meme. */
.tel-ch{position:absolute;inset:0;width:100%;height:100%;display:block;
  -webkit-user-drag:none;user-select:none;pointer-events:none;z-index:1;
  filter:drop-shadow(0 34px 60px rgba(6,8,30,.42))}
/* La zone de page du navigateur. Elle passe PAR-DESSUS le rendu : l'ecran du fichier
   est un aplat blanc opaque, et la crea disparaitrait dessous. Comme la zone s'arrete
   pile entre le trait gris et la barre Safari, l'habillage du fichier reste entier. */
.tel-zo{position:absolute;z-index:2;overflow:hidden;background:#fff;
  left:calc(var(--w)*0.040462);top:calc(var(--w)*0.163776);
  width:calc(var(--w)*0.919075);height:calc(var(--w)*1.488439)}
.tel-page{position:absolute;inset:0;background:#fff}
.tel-page.flou{background:repeating-linear-gradient(#E9E9EF 0 12px,#fff 12px 30px)}
.tel-voile{position:absolute;inset:0;background:rgba(8,9,20,.42);display:none}
.tel[data-mode="encart"] .tel-voile{display:block}
/* L'iframe nait a sa taille par defaut, donc trop grande, et elle debordait sur la
   barre Safari le temps du premier calcul. Elle reste invisible jusqu'a ce que
   poseTelephone l'ait dimensionnee. */
/* L'iframe fait EXACTEMENT la taille de la zone : c'est la crea qui se met a
   l'echelle dedans. Une iframe transformee etait tramee a sa taille de mise en page,
   et le bas de la crea restait non peint jusqu'au premier geste. */
.tel-pub{position:absolute;left:0;top:0;width:100%;height:100%;border:0;
  background:transparent;opacity:0;transition:opacity .18s ease}
.tel.pose .tel-pub{opacity:1}


/* la barre au-dessus du telephone : retour a la campagne et suppression */
.tel-h{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  min-height:1px}
.tel-h:empty{display:none}
.tel-h button{display:inline-flex;align-items:center;gap:7px;height:32px;border:0;
  border-radius:999px;padding:0 15px;font:inherit;font-size:12px;font-weight:600;
  cursor:pointer;background:rgb(var(--surv)/.16);color:rgb(var(--surv)/.86);
  transition:.14s}
.tel-h button:hover{background:rgb(var(--surv)/.28);color:var(--sur)}
.tel-h button.sup:hover{background:#FAEAE8;color:#8C3A34}
.tel-h button.sup.arme{background:#D0342C;color:#fff}
.tel-h svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* la barre d'outils sous le telephone */
/* La barre passe a la ligne quand la colonne se resserre : elle porte cinq groupes,
   et une pilule d'un seul tenant sortait de la colonne. */
.outils{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;
  max-width:100%;background:rgb(var(--surv)/.14);
  border:1px solid rgb(var(--surv)/.24);border-radius:22px;padding:5px}
/* Le poids du tag, sous le telephone. Une regie refuse un encart trop lourd, et le
   chiffre n'apparaissait plus nulle part sous la crea. Une ligne suffit. */
.specs{font-size:11.5px;font-weight:600;color:rgb(var(--surv)/.62);text-align:center;
  margin-top:-6px}

/* Rejouer ne regle rien : il REJOUE. Le sortir de la barre des reglages evite de le
   confondre avec un mode d'affichage. */
.rejouer{display:inline-flex;align-items:center;gap:7px;height:32px;border:0;
  border-radius:999px;padding:0 16px;font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;background:none;color:rgb(var(--surv)/.7);transition:.14s}
.rejouer:hover{background:rgb(var(--surv)/.16);color:var(--sur)}
.rejouer svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.outils button{border:0;background:none;border-radius:999px;color:rgb(var(--surv)/.72);
  font-size:12.5px;font-weight:620;padding:7px 13px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px}
.outils button:hover{color:var(--sur);background:rgb(var(--surv)/.14)}
.outils button.on{background:var(--sur);color:var(--sur-on)}
.outils .sep{width:1px;height:18px;background:rgb(var(--surv)/.22);margin:0 3px}
.outils svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.outils button[data-ch]{padding:7px 9px}
.pt{display:block;width:15px;height:15px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.pt.gris{background:linear-gradient(135deg,#EFEFF1,#B9BAC0)}
.pt.bleu{background:linear-gradient(135deg,#8B93A6,#3A4356)}
.pt.orange{background:linear-gradient(135deg,#E9D6C2,#B6906B)}

.mesure{font-size:11.5px;color:rgb(var(--surv)/.62);text-align:center;letter-spacing:.01em}
.mesure b{color:rgb(var(--surv)/.9);font-weight:650}

/* --------------------------------------------------------------------- export */
.exp-l{display:flex;flex-direction:column;gap:9px}
.exp{display:flex;align-items:center;gap:12px;width:100%;border:1.5px solid var(--line-2);
  border-radius:16px;padding:12px 14px;background:#fff;cursor:pointer;text-align:left;
  transition:.14s}
.exp:hover{border-color:var(--acc);background:var(--acc-soft)}
.exp i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:var(--neu);font-style:normal}
.exp:hover i{background:#fff}
.exp svg{width:17px;height:17px;fill:none;stroke:var(--acc-dk);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.exp b{display:block;font-size:13.5px;font-weight:680;color:var(--encre)}
.exp span{display:block;font-size:11.5px;color:var(--dim);margin-top:1px}

.check{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.4;
  padding:9px 0}
.check+.check{border-top:1px solid var(--line)}
.check i{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  font-style:normal;font-size:10px;font-weight:800;margin-top:1px}
.check.ok i{background:var(--ok-bg);color:var(--ok)}
.check.warn i{background:var(--warn-bg);color:var(--warn)}
.check b{display:block;font-weight:650;color:var(--encre)}
.check span{color:var(--dim)}

/* ------------------------------------------------------------------ messages */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:90;
  background:var(--encre);color:#fff;border-radius:999px;padding:11px 20px;
  font-size:13px;font-weight:600;box-shadow:0 20px 50px -18px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transition:.28s cubic-bezier(.2,.9,.25,1)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ============================================================== L'EN-TÊTE
   Repris d'Atlas, à l'identique : le mot-symbole Tags à gauche, le logo du produit
   au centre, le compte à droite avec son menu. Seul le logo change. */

/* Le logo Engage est centré sur la FENÊTRE, pas sur la suite des pilules : il se pose
   donc en absolu, et disparaît quand l'en-tête devient trop serré pour lui. */
.topbar{position:relative}
/* Le logo du produit est le retour à son accueil : cliquable, sans en avoir l'aspect. */
.tb-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  margin-top:5px;border:0;background:none;padding:6px 10px;line-height:0;
  cursor:pointer;border-radius:12px;transition:background .14s}
.tb-logo:hover{background:rgb(var(--surv)/.12)}
.tb-logo:focus-visible{outline:2px solid var(--sur);outline-offset:2px}
.tb-logo img{height:22px;width:auto;display:block}
/* Les deux logos sont des PNG a glyphes BLANCS. Les deux fonds etant sombres, ils se
   posent tels quels : il n'y a plus de retournement d'encre a rattraper. */
@media (max-width:1180px){.tb-logo{display:none}}

.tb-r{position:relative;display:flex;align-items:center;gap:11px;
  padding:6px 10px 6px 14px;border-radius:999px;cursor:pointer;user-select:none;
  transition:background .14s}
.tb-r:hover{background:rgb(var(--surv)/.16)}
.tb-r.open{background:rgb(var(--surv)/.24)}
.who{text-align:right;line-height:1.25}
.who b{display:block;font-size:12.5px;font-weight:620;color:var(--sur)}
.who span{display:block;font-size:10.5px;color:rgb(var(--surv)/.7)}
.av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:12.5px;font-weight:660;overflow:hidden;position:relative;
  background:#fff;color:var(--acc-dk);
  box-shadow:0 0 0 2px #fff,0 0 0 3px rgb(var(--surv)/.3)}
.av img{width:100%;height:100%;object-fit:cover;display:block;grid-area:1/1}
.av span{display:none;grid-area:1/1}
.av.ini span{display:block}
.av.lg{width:40px;height:40px;font-size:14px}
.chev{width:14px;height:14px;stroke:rgb(var(--surv)/.7);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}
.tb-r.open .chev{transform:rotate(180deg)}

.menu{display:none;position:absolute;top:calc(100% + 9px);right:0;width:256px;
  background:#fff;color:var(--encre);border-radius:16px;padding:6px;z-index:70;
  cursor:default;box-shadow:0 30px 70px -28px rgba(10,12,40,.7)}
.tb-r.open .menu{display:block}
.mn-h{display:flex;align-items:center;gap:11px;padding:10px 11px 12px;margin-bottom:5px;
  border-bottom:1px solid var(--line)}
.mn-h .av{box-shadow:0 0 0 1px var(--line-2);background:var(--acc-soft)}
.mn-h b{display:block;font-size:13px;font-weight:620;color:var(--encre)}
.mn-h span{display:block;font-size:10.5px;color:var(--faint);margin-top:1px}
.mn-i{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
  font-size:12.5px;color:#4C4F78;cursor:pointer}
.mn-i:hover{background:var(--acc-soft);color:var(--acc-dk)}
.mn-i svg{width:15px;height:15px;flex:none;stroke:var(--faint);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.mn-i:hover svg{stroke:var(--acc)}
.mn-sep{height:1px;background:var(--line);margin:5px 4px}

/* =========================================================== ÉCRAN PARAMÈTRES
   Une page pleine, posée sur la couleur, avec les mêmes cartes blanches que le
   reste du studio. */
/* Tout ecran autre que la crea remplace la grille de travail : meme application,
   meme etat, autre ecran. */

/* La page des créations se centre en hauteur. Par des marges automatiques et non par
   justify-content : celui-ci rogne le haut du contenu dès qu'il dépasse, alors que
   les marges se rendent d'elles-mêmes. */
/* L'accueil ne defile jamais : un titre, une barre, un bouton. Laisser son debordement
   VISIBLE evite qu'un menu ouvert n'allonge la zone de defilement et ne fasse bouger
   la page sous le curseur. Son retrait est SYMETRIQUE, sans quoi le bloc se centrait
   dans une zone decalee et paraissait remonte. */
body[data-ecran="accueil"] .ecran{overflow:visible;justify-content:center;
  /* Le retrait bas compense la hauteur de l'en-tete : le bloc se centre alors sur la
     FENETRE et non sur la zone qui reste sous lui, ou il paraissait retombe. */
  padding:18px 30px calc(18px + 78px)}

body[data-ecran="campagne"] .ecran>*:first-child{margin-top:auto}
body[data-ecran="campagne"] .ecran>*:last-child{margin-bottom:auto}

body:not([data-ecran="crea"]) .grid{display:none}
body:not([data-ecran="crea"]) .ecran{display:flex}
body:not([data-ecran="crea"]) #b-neuf{display:none}
.ecran{display:none;flex:1;min-height:0;flex-direction:column;align-items:center;
  gap:24px;padding:18px 30px 60px;overflow-y:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.ecran::-webkit-scrollbar{width:0;height:0;display:none}

.ac-h{margin:0;text-align:center;font-size:clamp(24px,2.6vw,36px);font-weight:300;
  letter-spacing:-.015em;line-height:1.16;color:var(--sur)}
.ac-h b{font-weight:650}

/* les paramètres : des cartes blanches, comme le reste du studio */
.pf-w{width:min(720px,100%);display:flex;flex-direction:column;gap:16px}
.pf-av{display:flex;align-items:center;gap:16px}
.pf-av .av{width:56px;height:56px;font-size:18px}
.pf-av .btn{flex:none}
.pf-av p{margin:0;font-size:12px;color:var(--dim);line-height:1.5}
.pf-w .btn-go{background:#fff;color:var(--acc-dk);
  box-shadow:0 20px 44px -26px rgba(6,8,30,.8)}
.pf-w .btn-go:hover{background:#fff;color:var(--encre);
  box-shadow:0 24px 50px -24px rgba(6,8,30,.9)}

/* ==================================================== ÉCRANS DE PARAMÉTRAGE
   Agences, annonceurs, utilisateurs, campagnes et compte suivent le même modèle que
   dans Atlas, parce que ce sont les mêmes gestes : voir ce qui existe, en ajouter,
   en modifier un, en éteindre un. Les classes et les mesures viennent de là. */
.pf-w{width:min(760px,100%);box-sizing:border-box;display:flex;flex-direction:column;
  gap:20px}
.pf-msg{font-size:12px;color:var(--sur);line-height:1.55;text-align:center;
  max-width:520px;align-self:center}
.pf-msg:empty{display:none}
.pf-pu{font-size:11.5px;padding:5px 11px;border-radius:999px;background:#fff;
  color:#4C4F78}
.pf-pu.off{background:rgb(var(--surv)/.14);color:var(--sur)}

.pf-mqz{display:flex;justify-content:center}
.pf-mq{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font:inherit;
  font-size:12.5px;font-weight:520;color:rgb(var(--surv)/.78);line-height:1;
  padding:6px 6px 6px 2px;border-radius:999px;background:none;border:0;transition:.14s}
.pf-mq:hover{color:var(--sur)}
.pf-mq.on{color:var(--sur);font-weight:600}
.pf-mq .sw3{background:rgb(var(--surv)/.16);border-color:rgb(var(--surv)/.45);
  pointer-events:none}
.pf-mq.on .sw3{background:var(--sur);border-color:var(--sur)}
.pf-mq.on .sw3 i{background:var(--sur-on);box-shadow:none}

.pu-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pu-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pu-src{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;padding:0 12px;
  height:36px;border-radius:999px;background:rgb(var(--surv)/.14);
  border:1px solid rgb(var(--surv)/.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pu-src svg{width:15px;height:15px;flex:none;fill:none;stroke:rgb(var(--surv)/.6);
  stroke-width:2;stroke-linecap:round}
.pu-src input{flex:1;min-width:0;border:0;background:none;padding:0;font:inherit;
  font-size:12.5px;color:var(--sur);border-radius:0}
.pu-src input:focus{outline:none;border:0}
.pu-src input::placeholder{color:rgb(var(--surv)/.55)}
.pu-sel{height:36px;flex:none;max-width:200px;border-radius:999px;padding:0 30px 0 14px;
  font:inherit;font-size:12.5px;color:var(--sur);cursor:pointer;
  background:rgb(var(--surv)/.14);border:1px solid rgb(var(--surv)/.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px}
.pu-sel option{color:var(--encre)}
.pu-l{display:flex;flex-direction:column;gap:8px}
.pu{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:16px;
  background:#fff;box-shadow:0 22px 50px -34px rgba(8,10,34,.7);transition:.14s}
.pu.cliq{cursor:pointer}
.pu.cliq:hover{transform:translateY(-1px);box-shadow:0 26px 54px -30px rgba(8,10,34,.85)}
.pu-av{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--acc-soft);color:var(--acc-dk);font-size:10px;font-weight:700;
  overflow:hidden}
.pu-av.img{background:#fff}
.pu-av img{width:100%;height:100%;object-fit:contain;display:block}
.pu-n{font-size:13px;font-weight:600;color:var(--encre);white-space:nowrap}
.pu-m{flex:1;min-width:0;font-size:11.5px;color:var(--faint);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pu-r{font-size:10.5px;font-weight:600;color:var(--acc-dk);background:var(--acc-soft);
  border-radius:999px;padding:3px 10px;white-space:nowrap}
.pu-ed{width:26px;height:26px;flex:none;border:0;border-radius:8px;cursor:pointer;
  background:var(--card-2);display:grid;place-items:center;transition:.12s}
.pu-ed svg{width:14px;height:14px;fill:none;stroke:var(--faint);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.pu-ed:hover{background:var(--acc-soft)}
.pu-ed:hover svg{stroke:var(--acc)}
.pu.off{background:rgb(var(--surv)/.14);box-shadow:none}
.pu.off .pu-n{color:var(--sur)}
.pu.off .pu-m{color:rgb(var(--surv)/.6)}
.pu.off .pu-r{background:rgb(var(--surv)/.16);color:var(--sur)}
.pu.off .pu-av{background:rgb(var(--surv)/.18);color:var(--sur)}
.pu.off .pu-ed{background:rgb(var(--surv)/.16)}
.pu.off .pu-ed svg{stroke:rgb(var(--surv)/.7)}

.sw3{flex:0 0 auto;width:34px;height:19px;border-radius:11px;border:1px solid var(--line-2);
  background:var(--neu);position:relative;padding:0;cursor:pointer;
  transition:background .15s,border-color .15s}
.sw3 i{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(27,28,33,.25);transition:left .15s}
.sw3.on{background:var(--acc);border-color:var(--acc)}
.sw3.on i{left:17px}

.ac-plus{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:560;padding:10px 16px 10px 12px;
  border-radius:999px;background:rgb(var(--surv)/.16);color:var(--sur);
  align-self:flex-start;transition:.14s}
.ac-plus:hover{background:rgb(var(--surv)/.28);transform:translateY(-1px)}
/* Les deux entrees de l'accueil : creer, ou parcourir. Elles se ressemblent, donc il
   leur faut un vrai ecart, sinon elles se lisent comme un seul objet coupe en deux. */
.ac-act{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;align-self:center}
.ac-act .ac-plus{align-self:auto}
.ac-plus svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round}
.lien{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-size:11.5px;
  color:rgb(var(--surv)/.8);font-weight:600;text-decoration:underline;
  text-underline-offset:2px}
.lien:hover{color:var(--sur)}
.hint{font-size:11.5px;color:rgb(var(--surv)/.62);line-height:1.5;text-align:center}

/* le bloc unique de saisie : une carte blanche, des rangées, un bouton rond */
.pb-mono{background:#fff;border-radius:26px;padding:6px 8px 8px;
  box-shadow:0 22px 54px -34px rgba(10,12,40,.5)}
.pb-r{display:flex;align-items:center;padding:4px 0}
.pb-r+.pb-r{border-top:1px solid var(--line)}
.pb-sep{width:1px;height:34px;background:var(--line);flex:none}
.pb-f{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  padding:7px 14px 7px 16px}
.pb-f.lg{flex:1.6}
.pb-f>span{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.pb-f input,.pb-f select{width:100%;box-sizing:border-box;border:0;background:none;
  padding:0;font-size:14.5px;font-weight:520;color:var(--encre);border-radius:0;
  appearance:none;-webkit-appearance:none}
.pb-f input:focus,.pb-f select:focus{outline:none;border:0}
.pb-f input::placeholder{color:var(--faint);font-weight:400}
.pb-go{display:flex;align-items:center;justify-content:flex-end;padding:8px 8px 4px;
  border-top:1px solid var(--line);margin-top:4px}
.pb-go .sp{flex:1}
.pb-rap{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 16px;
  border-bottom:1px solid var(--line)}
.pb-rap>b{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-right:2px}
.pb-rap .nom{font-size:14.5px;font-weight:520;color:var(--encre)}
.pb-photo{display:flex;align-items:center;gap:14px;padding:12px 12px 12px 14px;
  border-bottom:1px solid var(--line)}
.pb-mk{width:44px;height:44px;flex:none;border-radius:50%;background:#fff;
  display:grid;place-items:center;overflow:hidden;
  box-shadow:0 0 0 1px var(--line-2)}
.pb-mk img{width:100%;height:100%;object-fit:contain;display:block}
.pb-mk.vide{background:var(--acc-soft);box-shadow:none;color:var(--acc-dk);
  font-size:14px;font-weight:700}
.pb-ph{flex:1;min-width:0}
.pb-ph b{display:block;font-size:12.5px;font-weight:620;color:var(--encre)}
.pb-ph span{display:block;font-size:11px;color:var(--faint)}
.pb-f input:disabled,.pb-f select:disabled{color:var(--faint);cursor:not-allowed;
  opacity:1}
.pb-rap .pf-pu{background:var(--neu);box-shadow:none}
.ac-go{width:38px;height:38px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:var(--bleu);color:var(--sur);display:grid;place-items:center;margin-left:6px;
  transition:filter .14s}
.ac-go:hover{filter:brightness(1.2)}
/* Tant que la barre n'est pas complete, le bouton se tient en retrait ; complete, il
   passe au vert et la barre annonce d'elle-meme qu'il n'y a plus qu'a ouvrir. */
.ac-go{opacity:.45}
.ac-go.pret{opacity:1;background:#0E9F6E;color:#fff;
  box-shadow:0 8px 20px -8px rgba(14,159,110,.7)}
.ac-go.pret:hover{background:#0A7F57}
.ac-go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.btn-sup{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;padding:8px 14px;border-radius:999px;
  background:var(--card-2);color:var(--dim);transition:.14s}
.btn-sup svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.btn-sup:hover{background:#FAEAE8;color:#8C3A34}
.btn-sup.arme,.btn-sup.arme:hover{background:#D0342C;color:#fff}

/* ================================================================== ACCUEIL
   La barre d'Atlas, a l'identique : trois champs dans une pilule blanche posee sur
   la couleur, et le bouton rond qui la ferme. */
.ac-bar{display:flex;align-items:center;padding:7px 7px 7px 5px;border-radius:999px;
  background:#fff;width:min(700px,100%);box-sizing:border-box;
  box-shadow:0 24px 60px -32px rgba(6,8,30,.9)}
.ac-f{flex:1;position:relative;min-width:0;padding:7px 0 8px}
.ac-f>span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);padding:0 0 2px 16px}
/* Le champ est un bouton, pas une liste native : c'est ce qui permet de montrer la
   miniature de la marque et son agence sous son nom, comme dans Atlas. */
.ac-f{padding:0}
.ac-t{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  box-sizing:border-box;border:0;background:none;cursor:pointer;text-align:left;
  padding:9px 30px 9px 15px;border-radius:999px;font:inherit;transition:background .14s}
.ac-t:hover,.ac-f.ouv .ac-t{background:var(--card-2)}
.ac-lbl{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.ac-val{font-size:14.5px;font-weight:520;color:var(--encre);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-val.vide{color:var(--faint);font-weight:400}
.ac-ch{position:absolute;right:12px;top:50%;margin-top:-7px;width:14px;height:14px;
  fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .16s;pointer-events:none}
.ac-f.ouv .ac-ch{transform:rotate(180deg)}

/* Le menu est plafonne et porte SA barre de defilement. Sans plafond, une longue
   liste allongeait la zone de defilement de l'ecran et l'accueil se recentrait sous
   le curseur : la barre se voit, donc on sait qu'il y a une suite. */
.ac-menu{position:absolute;top:calc(100% + 12px);left:6px;min-width:min(330px,92vw);
  z-index:40;border-radius:20px;padding:8px;max-height:min(44vh,296px);
  overflow-y:auto;overscroll-behavior:contain;
  background:color-mix(in srgb,var(--bleu) 72%,#08080C);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.1);
  display:flex;flex-direction:column;gap:2px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.ac-menu::-webkit-scrollbar{width:8px}
.ac-menu::-webkit-scrollbar-track{background:none}
.ac-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:99px;
  border:2px solid transparent;background-clip:content-box}
.ac-menu::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.45);
  background-clip:content-box}
.ac-o{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;
  background:none;border-radius:14px;padding:10px 14px 10px 10px;cursor:pointer;
  font:inherit;transition:background .12s}
.ac-o:hover{background:rgba(255,255,255,.1)}
.ac-o[aria-selected="true"]{background:rgba(255,255,255,.13)}
.ac-mk{width:26px;height:26px;flex:none;border-radius:50%;background:#fff;
  display:grid;place-items:center;overflow:hidden;color:#2E3596;
  font-size:10px;font-weight:700}
.ac-mk img{width:100%;height:100%;object-fit:contain;display:block}
/* Une seule ligne : le nom a gauche, ce qu'il pese a droite. Empiles, les deux textes
   doublaient la hauteur du menu sans rien dire de plus. */
.ac-ot{display:flex;align-items:baseline;gap:14px;min-width:0;flex:1}
.ac-ot b{font-size:14px;font-weight:500;color:rgba(255,255,255,.96);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-ot i{font-style:normal;font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.35;
  margin-left:auto;white-space:nowrap;flex:none}
.ac-sep{width:1px;height:38px;background:var(--line);flex:none}
.acc{display:flex;flex-direction:column;align-items:center;gap:28px;
  flex:1;justify-content:center;width:100%}

/* La rangee d'actions de la page des creations. Le geste principal est plein, le
   retour est un fantome : on les distingue sans lire. */
.cp-act{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.btn-plein,.btn-fant{display:inline-flex;align-items:center;gap:8px;height:38px;
  border-radius:999px;padding:0 20px;font:inherit;font-size:13px;font-weight:620;
  cursor:pointer;transition:.14s;border:1px solid transparent}
.btn-plein{background:var(--sur);color:var(--sur-on);border-color:var(--sur)}
.btn-plein:hover{filter:brightness(.94)}
.btn-fant{background:none;color:rgb(var(--surv)/.86);border-color:rgb(var(--surv)/.34)}
.btn-fant:hover{background:rgb(var(--surv)/.16);color:var(--sur);
  border-color:rgb(var(--surv)/.5)}
.btn-plein svg,.btn-fant svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================ PAGE CAMPAGNE
   Les créas s'alignent en pleine hauteur d'iPhone, centrées sur la page. Au delà de
   ce que la largeur porte, deux flèches font défiler la bande. */
.cp-w{width:min(1280px,100%);display:flex;flex-direction:column;gap:20px;align-items:center}
.cp-bande{position:relative;width:100%;display:flex;align-items:center;gap:10px}
.cp-piste{flex:1;min-width:0;display:flex;gap:22px;overflow-x:auto;padding:6px 2px 10px;
  scroll-behavior:smooth;scrollbar-width:none;justify-content:center}
.cp-piste::-webkit-scrollbar{display:none}
.cp-piste.plein{justify-content:flex-start}
.cp-fl{width:38px;height:38px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:rgb(var(--surv)/.18);color:var(--sur);display:grid;place-items:center;
  transition:.14s}
.cp-fl:hover{background:rgb(var(--surv)/.32)}
.cp-fl svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.cp-c{flex:none;width:196px;display:flex;flex-direction:column;align-items:center;gap:9px;
  border:0;background:none;padding:0;cursor:pointer;color:inherit;font:inherit}
.cp-c img,.cp-c canvas{width:100%;height:auto;display:block;border-radius:14px;
  transition:transform .16s}
.cp-c:hover img,.cp-c:hover canvas{transform:translateY(-3px)}
.cp-c b{font-size:12.5px;font-weight:620;color:var(--sur)}
.cp-c span{font-size:11px;color:rgb(var(--surv)/.62);margin-top:-6px}
.cp-x{display:inline-flex;align-items:center;gap:6px;height:28px;border:0;
  border-radius:999px;padding:0 13px;font:inherit;font-size:11.5px;font-weight:600;
  cursor:pointer;background:rgb(var(--surv)/.16);color:rgb(var(--surv)/.8);
  transition:.14s}
.cp-x:hover{background:rgb(var(--surv)/.28);color:var(--sur)}
.cp-x.arme{background:#D0342C;color:#fff}
.cp-x.arme:hover{background:#B82B24}
.cp-x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.cp-i{display:flex;flex-direction:column;align-items:center;gap:8px}
/* Le comptage sous la creation. Pas d'ecran de statistiques a part : le chiffre se
   lit la ou vit la creation qui l'a produit. */
/* Le comptage sous la creation : une fiche, avec une barre par reponse. Trois lignes
   de texte nu ne disaient pas la repartition, qui est pourtant tout l'interet. */
.cp-st{width:86%;border-radius:16px;padding:10px 12px 9px;
  background:rgb(var(--surv)/.12);border:1px solid rgb(var(--surv)/.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cp-r+.cp-r{margin-top:9px}
.cp-rh{display:flex;align-items:baseline;gap:8px;font-size:11.5px;line-height:1.3}
.cp-rh b{flex:1;min-width:0;font-weight:600;color:var(--sur);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cp-rh span{color:rgb(var(--surv)/.62);font-variant-numeric:tabular-nums}
.cp-rh em{font-style:normal;font-weight:650;color:var(--sur);
  font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.cp-bar{height:4px;margin-top:5px;border-radius:999px;background:rgb(var(--surv)/.18);
  overflow:hidden}
.cp-bar i{display:block;height:100%;border-radius:999px;background:var(--sur)}
/* Le total, seul visible au repos. Il ne porte plus de trait au-dessus : il n'a plus
   rien avant lui, et le trait separe maintenant le detail qu'on deplie. */
.cp-tot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:rgb(var(--surv)/.6);font-weight:700}
.cp-tot b{font-size:15px;letter-spacing:-.01em;text-transform:none;color:var(--sur);
  font-weight:700;font-variant-numeric:tabular-nums}
.cp-att{font-size:11.5px;color:rgb(var(--surv)/.5);text-align:center;display:block;
  padding:3px 0}
/* La fleche du detail. Sept indicateurs sous chaque vignette faisaient une page de
   tableau : on ne montre que les repondants, le reste se deplie. */
.cp-plus{flex:none;width:22px;height:22px;margin:-4px -4px -4px 0;padding:0;border:0;
  border-radius:999px;background:none;color:rgb(var(--surv)/.6);cursor:pointer;
  display:grid;place-items:center;transition:background .14s,color .14s,transform .18s}
.cp-plus:hover{background:rgb(var(--surv)/.16);color:var(--sur)}
.cp-plus svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.cp-st.ouvert .cp-plus{transform:rotate(180deg)}
.cp-det{display:none;margin-top:9px;padding-top:9px;
  border-top:1px solid rgb(var(--surv)/.16)}
.cp-st.ouvert .cp-det{display:block}
.cp-l{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:11.5px;line-height:1.6}
.cp-l+.cp-l{margin-top:1px}
.cp-l span{color:rgb(var(--surv)/.62);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cp-l b{flex:none;font-weight:650;color:var(--sur);font-variant-numeric:tabular-nums}
/* Les chiffres du bilan. Sous une creation, la carte est etroite : trois nombres cote
   a cote s'y chevauchaient, ils se rangent donc en lignes, libelle a gauche et valeur
   a droite. Dans le bandeau de campagne, large, les memes se remettent en ligne. */
.cp-kpi{display:flex;flex-direction:column;gap:2px;padding-bottom:8px;margin-bottom:9px;
  border-bottom:1px solid rgb(var(--surv)/.16)}
.cp-kpi div{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.cp-kpi b{order:2;font-size:12px;font-weight:700;color:var(--sur);
  font-variant-numeric:tabular-nums;line-height:1.3}
.cp-kpi em{order:1;font-size:9.5px;font-style:normal;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:rgb(var(--surv)/.55)}
/* Le total de la campagne, quand la remontee ne se ventile pas par creation. */
.cp-glob{width:min(560px,100%);margin:0 auto;border-radius:18px;padding:14px 16px 10px;
  background:rgb(var(--surv)/.12);border:1px solid rgb(var(--surv)/.16)}
.cp-glob .cp-kpi{flex-direction:row;gap:10px;border-bottom:0;padding-bottom:4px;
  margin-bottom:4px}
.cp-glob .cp-kpi div{display:block;flex:1;min-width:0;text-align:center}
.cp-glob .cp-kpi b{display:block;font-size:15px;line-height:1.25}
.cp-glob .cp-kpi em{display:block;font-size:9px;margin-top:1px}
.cp-glob .hint{text-align:center;margin:0}
.cp-vide{width:100%;text-align:center;padding:28px 0 8px}