/* ============================================================== FORMAT ENGAGE
Le format publicitaire lui-meme, et rien d'autre. Aucune dependance : ni jQuery,
ni slick, ni police distante. C'est cette feuille qui part dans le tag livre a la
plateforme d'achat, et c'est elle que l'apercu du studio charge dans son iPhone.
Une seule source, donc aucun ecart possible entre ce que le trader voit et ce que
l'internaute verra.
Tout ce qui se regle depuis le studio passe par une variable CSS posee sur .eg :
la feuille ne connait ni la marque, ni les couleurs, ni le fondu.
------------------------------------------------------------------------------ */
.eg *,.eg *::before,.eg *::after{box-sizing:border-box;margin:0;padding:0}
.eg{
/* jetons par defaut. Le studio les remplace un par un. */
--eg-police:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--eg-acc:#5A63E8; /* couleur de la marque */
--eg-acc-encre:#FFFFFF; /* ce qu'on ecrit DANS un aplat d'accent */
--eg-fond:#0B0B0E; /* le fond derriere l'image */
--eg-carte:rgba(255,255,255,.90);
--eg-encre:#111318;
--eg-encre-2:#5B5F6E;
--eg-piste:rgba(17,19,24,.075);
--eg-rep-encre:#111318;
--eg-rayon:20px;
--eg-scrim:255 255 255; /* la couleur du fondu, en composantes */
/* Les deux seules images du format : la coche de la reponse retenue et la fleche du
bouton. En masque SVG, donc elles prennent la couleur du texte et ne pesent rien. */
--eg-coche:url('data:image/svg+xml;utf8,');
--eg-fleche:url('data:image/svg+xml;utf8,');
/* La hauteur est une variable : 480 en diffusion, et la hauteur de l'ecran quand la
maquette pose la crea en plein ecran. Tout est ancre en bas, donc rien ne casse. */
position:relative;width:320px;height:var(--eg-h,480px);overflow:hidden;
/* Les coins hauts n'existent que dans la maquette : l'encart diffuse remplit un
emplacement rectangulaire, et --eg-coins y vaut zero. */
border-radius:var(--eg-coins,0px) var(--eg-coins,0px) 0 0;
background:var(--eg-fond);
font-family:var(--eg-police);
color:var(--eg-encre);
-webkit-tap-highlight-color:transparent;
-webkit-font-smoothing:antialiased;
user-select:none;cursor:pointer;
isolation:isolate;
}
.eg[data-theme="sombre"]{
--eg-carte:rgba(16,17,22,.72);
--eg-encre:#FFFFFF;
--eg-encre-2:rgba(255,255,255,.62);
--eg-piste:rgba(255,255,255,.13);
--eg-rep-encre:#FFFFFF;
}
/* ------------------------------------------------------------------- le visuel
Plusieurs images se superposent et se croisent en fondu. Le leger zoom continu
suffit a faire vivre une image fixe : c'est ce qui manquait le plus au format. */
/* --eg-decal remonte le visuel, et RIEN D'AUTRE : le cadre garde sa hauteur et se
deplace. La bande qui se decouvre en bas prend la couleur du fondu, qui la recouvre.
--eg-zoom, lui, agrandit sans deplacer. Les deux reglages sont separes parce qu'ils
repondent a deux besoins : degager un sujet, ou le rapprocher. */
.eg-media{position:absolute;left:0;right:0;
top:calc(-1 * var(--eg-decal,0px));
bottom:var(--eg-decal,0px);
overflow:hidden}
.eg-media figure{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;
transform:scale(var(--eg-zoom,1))}
.eg-media figure.on{opacity:1}
.eg-media img,.eg-media video{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:var(--eg-cadrage,center);display:block}
.eg[data-cadrage="entier"] .eg-media img,
.eg[data-cadrage="entier"] .eg-media video{object-fit:contain}
.eg[data-anim="oui"] .eg-media figure.on img{animation:eg-zoom 16s ease-in-out infinite alternate}
@keyframes eg-zoom{from{transform:scale(1.005)}to{transform:scale(1.10)}}
/* Le fondu du bas. Construit en JS avec sept paliers : deux ou trois suffiraient a
l'oeil mais laissent une bande visible sur les aplats clairs. */
.eg-fondu{position:absolute;inset:0;pointer-events:none;z-index:1}
/* Le fondu du haut se pose PAR-DESSUS celui du bas et sous le logo : c'est un voile
qui rend le logo lisible sur un visuel clair, pas un deuxieme cadre. */
.eg-fondu-haut{position:absolute;inset:0;pointer-events:none;z-index:1}
/* ----------------------------------------------------------------- le logo
Centre en haut, comme une signature de marque posee sur le visuel. Il sert quand
le logo n'est pas deja dans l'image, ce qui est le cas le plus frequent : on evite
ainsi de repasser par un montage. Sa largeur est un pourcentage de l'encart, donc
elle suit la mise a l'echelle de la maquette. */
/* Le centrage passe par les marges automatiques et non par une translation :
l'animation d'ouverture pose « transform:none » a son terme, et elle effacait
la translation qui centrait le logo. */
.eg-logo{position:absolute;top:var(--eg-logo-y,26px);left:0;right:0;margin:0 auto;
z-index:3;width:var(--eg-logo-l,42%);
animation:eg-entre .5s cubic-bezier(.2,.9,.25,1) .12s both}
.eg-logo img{width:100%;height:auto;display:block}
/* Les points du carrousel, en haut a droite. */
.eg-points{position:absolute;top:20px;right:14px;z-index:3;display:flex;gap:4px}
.eg-points i{display:block;width:5px;height:5px;border-radius:999px;
background:rgba(255,255,255,.45);transition:width .35s,background .35s}
.eg-points i.on{width:16px;background:#fff}
/* --------------------------------------------------------------------- la carte
Elle monte a l'ouverture, avec un eclat qui la traverse une fois. Deux details
qui coutent zero octet et font toute la difference de fraicheur. */
/* --eg-bas remonte le widget au-dessus du bord : c'est la seule facon de degager un
element du visuel qui vit tout en bas de l'image. */
.eg-bas{position:absolute;left:0;right:0;bottom:0;z-index:2;isolation:isolate;
padding:14px 14px calc(14px + var(--eg-bas,0px))}
/* La taille du widget se regle ici, et non sur la carte : celle-ci porte deja son
animation d'ouverture, et les deux transformations se seraient ecrasees. */
.eg-ech{transform:scale(var(--eg-ech,1));transform-origin:bottom center}
.eg-carte{position:relative;border-radius:var(--eg-rayon);padding:16px 16px 14px;
background:var(--eg-carte);
-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
box-shadow:0 20px 44px -22px rgba(0,0,0,.55);
overflow:hidden;
animation:eg-monte .66s cubic-bezier(.2,.9,.25,1) .3s both}
.eg-carte::after{content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.4) 46%,transparent 62%);
transform:translateX(-130%);
animation:eg-eclat 1.2s cubic-bezier(.4,0,.2,1) 1.05s both}
/* Le bandeau : meme carte, collee au bord, arrondie en haut seulement. Tres « appli ». */
.eg[data-style="bandeau"] .eg-bas{padding:0 0 var(--eg-bas,0px)}
.eg[data-style="bandeau"] .eg-carte{border-radius:var(--eg-rayon) var(--eg-rayon) 0 0;
padding:18px 18px 20px}
/* Le duo : pas de carte du tout. La question se pose sur l'image, les deux reponses
se rangent cote a cote. C'est la version la plus directe, et la plus rapide a lire. */
.eg[data-style="duo"] .eg-carte{background:none;backdrop-filter:none;
-webkit-backdrop-filter:none;box-shadow:none;padding:0 4px 6px}
.eg[data-style="duo"] .eg-carte::after{display:none}
/* Sans carte, la question se pose sur l'image : il lui faut son propre voile, sinon
elle devient illisible des que le bas du visuel est charge. Ce voile reprend la
couleur du fondu, donc il suit le theme sans reglage supplementaire. */
.eg[data-style="duo"] .eg-bas::before{content:'';position:absolute;z-index:-1;
left:0;right:0;bottom:0;height:calc(100% + 54px);pointer-events:none;
background:linear-gradient(180deg,rgb(var(--eg-scrim)/0) 0%,
rgb(var(--eg-scrim)/.42) 34%,rgb(var(--eg-scrim)/.78) 66%,rgb(var(--eg-scrim)/.94) 100%)}
.eg-question{font-family:var(--eg-q-police,inherit);
font-size:16.5px;line-height:1.28;font-weight:700;letter-spacing:-.021em;
padding:2px 2px 14px;color:var(--eg-q-couleur,var(--eg-encre));
text-align:var(--eg-q-align,left);text-wrap:balance}
.eg[data-style="duo"] .eg-question{font-size:19px;padding:0 2px 16px;
text-shadow:0 1px 16px rgb(var(--eg-scrim)/.9)}
/* ------------------------------------------------------------------ les reponses
Chaque reponse est faite de DEUX couches superposees et identiques : la piste, puis
la barre, rognee a gauche par clip-path. La barre couvre donc le libelle avec sa
propre encre, sans melange de modes ni calcul de largeur, et la couleur du widget
devient enfin visible : c'est elle qui remplit la barre. */
.eg-reps{display:flex;flex-direction:column;gap:8px}
.eg[data-style="duo"] .eg-reps{flex-direction:row}
.eg-rep{position:relative;height:46px;
border-radius:calc(var(--eg-rayon) - 6px);overflow:hidden;cursor:pointer;
background:var(--eg-piste);
transform:translateY(10px);opacity:0;
animation:eg-entre .5s cubic-bezier(.2,.9,.25,1) calc(.52s + var(--i,0)*.08s) both;
transition:transform .16s cubic-bezier(.2,.9,.25,1)}
.eg-rep:active{transform:scale(.975)}
.eg[data-style="duo"] .eg-rep{flex:1;height:54px}
/* Sans carte, ce sont les boutons qui portent le fond du widget : ils reprennent
donc sa couleur et son opacite, comme la carte des deux autres ossatures. Le
filet interieur n'est pas un ornement : pose sur le voile clair, un bouton blanc
sans bord se confond avec le fond et cesse de se lire comme un bouton. */
.eg[data-style="duo"] .eg-rep{background:var(--eg-carte);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
box-shadow:0 10px 26px -14px rgba(0,0,0,.45),inset 0 0 0 1px rgba(17,19,24,.09)}
.eg[data-theme="sombre"][data-style="duo"] .eg-rep{
box-shadow:0 10px 26px -14px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.14)}
.eg-cch{position:absolute;inset:0;display:flex;align-items:center;
color:var(--eg-rep-encre)}
.eg-cch.bar{background:var(--eg-acc);color:var(--eg-acc-encre);
clip-path:inset(0 100% 0 0);
transition:clip-path 1.15s cubic-bezier(.16,1,.3,1) .12s}
.eg-rep b{padding-left:16px;font-size:14.5px;font-weight:640;letter-spacing:-.008em;
white-space:nowrap}
/* Le libelle prend toute la largeur et se centre dans le duo : sans cela le
pourcentage, cale a droite par sa marge automatique, poussait le mot contre le
bord gauche. */
.eg[data-style="duo"] .eg-rep b{flex:1;padding:0;text-align:center}
.eg-pc{margin-left:auto;padding-right:14px;font-size:13px;font-weight:700;
font-variant-numeric:tabular-nums;opacity:0;transform:translateY(5px);
transition:opacity .45s .5s,transform .45s cubic-bezier(.2,.9,.25,1) .5s}
.eg[data-style="duo"] .eg-pc{position:absolute;right:12px;margin:0}
/* L'appel au clic : un halo qui respire sur la premiere reponse, celle qui porte le
pixel. Il s'arrete des que l'internaute a repondu. */
.eg-rep.appel{animation:eg-entre .5s cubic-bezier(.2,.9,.25,1) .52s both,
eg-souffle 2.8s ease-in-out 2.2s infinite}
@keyframes eg-souffle{
0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
38%{box-shadow:0 0 0 5px color-mix(in srgb,var(--eg-acc) 22%,transparent)}
70%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
/* Etat repondu : la carte se fige, les barres se remplissent a leur part et les
pourcentages arrivent. */
.eg[data-etat="repondu"] .eg-rep{cursor:default;animation:none;transform:none;opacity:1}
.eg[data-etat="repondu"] .eg-rep:active{transform:none}
.eg[data-etat="repondu"] .eg-pc{opacity:1;transform:none}
.eg[data-stats="non"] .eg-pc{display:none}
.eg[data-stats="non"] .eg-cch.bar{clip-path:inset(0 100% 0 0)!important}
.eg-rep.choisi b::before{content:'';display:inline-block;width:15px;height:15px;
margin:0 8px 1px -2px;vertical-align:middle;border-radius:999px;
background:currentColor;
-webkit-mask:var(--eg-coche) center/9px no-repeat;mask:var(--eg-coche) center/9px no-repeat;
animation:eg-coche .4s cubic-bezier(.2,1.5,.4,1) .1s both}
.eg-rep.choisi b{padding-left:12px}
.eg[data-style="duo"] .eg-rep.choisi b{padding-left:0}
/* --------------------------------------------------------------- remerciement + CTA
L'ancien format s'arretait sur les pourcentages. Celui-ci enchaine sur un mot de
remerciement et un bouton : le clic sur la reponse ne mange plus le clic sur la
marque, il l'amorce. */
.eg-apres{display:grid;grid-template-rows:0fr;opacity:0;
transition:grid-template-rows .5s cubic-bezier(.2,.9,.25,1) .35s,opacity .4s .45s}
.eg-apres>div{overflow:hidden}
.eg[data-etat="repondu"] .eg-apres{grid-template-rows:1fr;opacity:1}
.eg-merci{padding:12px 2px 0;font-size:12.5px;font-weight:600;color:var(--eg-encre-2)}
.eg-cta{display:flex;align-items:center;justify-content:center;gap:7px;
width:100%;height:44px;margin-top:10px;border:0;border-radius:calc(var(--eg-rayon) - 6px);
background:var(--eg-acc);color:var(--eg-acc-encre);
font-family:inherit;font-size:14px;font-weight:700;letter-spacing:-.008em;cursor:pointer;
transition:transform .16s cubic-bezier(.2,.9,.25,1),filter .2s}
.eg-cta:active{transform:scale(.98)}
.eg-cta:hover{filter:brightness(1.08)}
.eg-cta::after{content:'';width:13px;height:13px;background:currentColor;
-webkit-mask:var(--eg-fleche) center/13px no-repeat;mask:var(--eg-fleche) center/13px no-repeat}
/* ------------------------------------------------------------------- mentions
Bande fine tout en bas, sous la carte, la ou elle ne mange pas le visuel. */
/* Une seule ligne, et elle DEFILE quand le texte deborde : une mention legale qu'on
coupe ne remplit pas son office, et l'empiler sur trois lignes mangeait le visuel. */
.eg-mentions{position:absolute;left:0;right:0;bottom:0;z-index:4;height:16px;
display:flex;align-items:center;justify-content:center;overflow:hidden;
padding:0 8px;font-size:8px;letter-spacing:.005em;
background:var(--eg-mentions-fond,rgba(0,0,0,.72));
color:var(--eg-mentions-encre,#fff)}
.eg-mentions span{display:inline-block;white-space:nowrap}
.eg-mentions.defile{justify-content:flex-start}
.eg-mentions.defile span{
animation:eg-defile var(--eg-m-t,14s) cubic-bezier(.4,0,.6,1) infinite alternate}
@keyframes eg-defile{
0%,7%{transform:translateX(0)}
93%,100%{transform:translateX(calc(-1 * var(--eg-m-d,0px)))}}
.eg[data-mentions="oui"]:not([data-style="bandeau"]) .eg-bas{
padding-bottom:calc(24px + var(--eg-bas,0px))}
.eg[data-mentions="oui"][data-style="bandeau"] .eg-carte{padding-bottom:22px}
/* ------------------------------------------------------------------ mouvements */
@keyframes eg-entre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes eg-monte{from{opacity:0;transform:translateY(26px) scale(.985)}
to{opacity:1;transform:none}}
@keyframes eg-eclat{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@keyframes eg-coche{from{transform:scale(0)}to{transform:scale(1)}}
/* Un internaute qui a demande moins d'animation en obtient moins. La regle vaut
aussi pour une publicite, et le format reste entierement lisible sans elle. */
@media (prefers-reduced-motion:reduce){
.eg *,.eg *::before,.eg *::after{animation-duration:.01ms!important;
animation-iteration-count:1!important;transition-duration:.01ms!important}
}