/* Domaine de Rechrival — mise en page du site et livre à pages tournées.
   Référence : migration-wordpress/prototype/livre.html (maquette validée par Olivier le 30/09/2026).
   Les images de décor (--papier, --decor, --accueil) sont injectées par rech.php depuis la médiathèque. */
/* Montserrat hébergée par le thème enfant (fonts/), police variable 300 à 700 — plus aucun appel à Google Fonts.
   Fichiers repris de Google Fonts (licence SIL Open Font License), sous-ensembles latin et latin étendu. */
@font-face{font-family:Montserrat;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/montserrat-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --fond:#323232; --entete:#0d0d0d; --pied:#171717; --rouge:#7a1704; --titre:#fff; --texte-livre:#777;
  --duree:.9s; --barre:0px;
  --corps:1.45;   /* taille du texte du livre, en centièmes de la largeur du livre */
}
body.admin-bar{--barre:32px}

/* ---- Pleine page : en-tête, contenu centré sur le décor, pied ---- */
body{margin:0;background:var(--fond);color:#252525;font:300 16px/1.5 Montserrat,sans-serif;
  min-height:calc(100vh - var(--barre));min-height:calc(100dvh - var(--barre));display:flex;flex-direction:column}
/* overflow:clip — la feuille qui tourne déborde du livre en 3D ; sans cela la page s'allonge et un ascenseur apparaît le temps de la rotation */
#brx-content{flex:1;display:flex;flex-direction:column;justify-content:center;overflow:hidden;overflow:clip;
  background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.72)),var(--fond) var(--decor) 50% 50%/cover no-repeat}
body.home #brx-content{background:#000}
#brx-content a{color:var(--rouge)}

body .btn{display:inline-block;background:var(--rouge);color:#fff !important;border:1px solid transparent;border-radius:4px;padding:8px 12px;
  font:400 16px/20px Montserrat,sans-serif;letter-spacing:0;text-decoration:none;cursor:pointer;transition:background .3s}
body .btn:hover{background:#000}
body .btn.inactif{opacity:.35;cursor:default;background:var(--rouge)}

/* ---- En-tête : blason + menu, centrés ; le blason est à 40 px de « Accueil », comme les entrées entre elles ---- */
#brx-header{position:sticky;top:var(--barre);z-index:50;background:var(--entete)}
.entete{height:60px;display:flex;justify-content:center;align-items:center;flex-direction:row;width:100%}
.entete .logo{display:flex;align-items:center;height:60px;padding:0 20px}
.entete .logo img{height:48px;width:auto;display:block}
.entete .bricks-nav-menu{display:flex;gap:0;margin:0;padding:0}
.entete .bricks-nav-menu > li{margin:0}
.entete .bricks-nav-menu > li > a{display:block;color:#fff;text-transform:uppercase;font:500 16px/60px Montserrat,sans-serif;padding:0 20px}
.entete .bricks-nav-menu > li > a:hover,.entete .bricks-nav-menu > li.current-menu-item > a{color:var(--rouge)}
.entete .bricks-mobile-menu-toggle{color:#fff;margin:0 20px}
/* Sélecteur de langues GTranslate : liste déroulante avec drapeaux, à droite du menu */
.entete .langues{width:auto;flex:none;display:flex;align-items:center;height:60px;padding:0 20px 0 24px;position:relative}
.entete .langues .gt_selector,.entete .langues .gt_switcher{font-family:Montserrat,sans-serif}
.entete .langues .gt_switcher-popup,.entete .langues a.glink{font:500 13px/1.2 Montserrat,sans-serif !important;letter-spacing:.03em;text-decoration:none}
.entete .langues img{border-radius:2px}
/* la liste s'ouvre vers le bas, par-dessus la page, sans décaler le bouton (il est sinon recentré dans la barre) */
.entete .langues .gtranslate_wrapper{position:relative;width:175px;height:34px}
.entete .langues .gt_switcher{position:absolute !important;top:0;left:0;z-index:60}
/* Menu mobile plein écran : blason centré au-dessus, entrées grandes et centrées */
.entete .bricks-mobile-menu-wrapper{width:100% !important;max-width:none !important;left:0 !important;right:0 !important;height:100% !important;
  background:rgba(13,13,13,.97) !important;display:flex !important;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.entete .bricks-mobile-menu-wrapper::before{content:"";display:block;position:static !important;flex:none;width:130px;height:89px;margin:0 auto 36px;background:var(--logo) center/contain no-repeat;transform:none}   /* Bricks positionne déjà ce pseudo-élément : on le remet dans le flux, au-dessus des entrées */
.entete .bricks-mobile-menu{width:100%;height:auto !important;flex:0 0 auto;margin:0;padding:0;text-align:center}   /* hauteur propre : le blason reste juste au-dessus */
.entete .bricks-mobile-menu > li{text-align:center}
.entete .bricks-mobile-menu > li > a{display:block;text-transform:uppercase;font:500 24px/1.2 Montserrat,sans-serif;letter-spacing:.04em;padding:14px 20px;color:#fff}
.entete .bricks-mobile-menu > li.current-menu-item > a{color:var(--rouge)}
.entete .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-toggle{position:fixed;top:calc(18px + var(--barre));right:20px;left:auto;margin:0;z-index:1000;color:#fff}

/* ---- Accueil ---- */
.dr-accueil{flex:1;min-height:400px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  background:#000 var(--accueil) 50% 50%/contain no-repeat}
.dr-accueil img{max-width:min(530px,80vw);height:auto}

/* ---- Scène et cadre ---- */
.dr-scene{width:100%;padding:16px 15px 20px;display:block}
/* Cadre = largeur du livre. 212 px = barre de menu + ligne de titre + marges + pied : tout tient dans la fenêtre.
   136 px réservés sur les côtés pour les deux flèches. Plancher de 860 px de large pour rester lisible ;
   dans une fenêtre de moins de ~810 px de haut, la page défile. */
.cadre{margin:0 auto;container-type:inline-size;width:min(1200px,calc(100% - 136px),max(860px,calc((100dvh - var(--barre) - 212px) * 950 / 664)))}
/* Ligne de titre : titre et folio */
.tete{display:flex;flex-direction:row;justify-content:center;align-items:center;min-height:38px;margin-bottom:14px}
.tete .centre{display:flex;flex-direction:row;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:0 12px;text-align:center;width:auto}

/* Flèches de part et d'autre du livre : cercle rouge, chevron blanc. Le libellé reste dans le bouton pour les lecteurs d'écran. */
.zone{position:relative;display:block}
body .fleche{position:absolute;top:50%;z-index:6;width:48px;height:48px;min-width:0;margin-top:-24px;padding:0;border:0;border-radius:50%;
  background:var(--rouge);color:transparent;font-size:0;line-height:0;letter-spacing:0;cursor:pointer;transition:background .3s,opacity .3s}
body .fleche::before{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border:solid #fff;border-width:0 0 3px 3px}
body .fleche-g{left:-68px}
body .fleche-d{right:-68px}
.fleche-g::before{transform:translate(-30%,-50%) rotate(45deg)}
.fleche-d::before{transform:translate(-70%,-50%) rotate(-135deg)}
body .fleche:hover{background:#000}
body .fleche:focus-visible{outline:2px solid #fff;outline-offset:3px}
body .fleche.inactif{opacity:.3;cursor:default;background:var(--rouge)}
.tete h1,.dr-titre{margin:0;color:var(--titre);font:500 clamp(16px,2.1cqw,24px)/1.1 Montserrat,sans-serif;text-transform:uppercase}
#folio{color:#bbb;font-size:13px;white-space:nowrap}

/* ---- Le livre ---- */
.livre{position:relative;margin:0 auto;container-type:inline-size;perspective:2600px;width:100%;aspect-ratio:950/664;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.planche{display:contents}
.pg{position:absolute;top:0;width:50%;height:100%;display:none;background:var(--papier) no-repeat;background-size:200% 100%;
  color:var(--texte-livre);font-size:clamp(10px,calc(var(--corps) * 1cqw),20px);line-height:1.2}
.pg-g{left:0;background-position:0 0}
.pg-d{left:50%;background-position:100% 0}
.pg.visible,.livre.fixe .pg{display:block}
/* Contenu centré dans la hauteur de la page ; « safe » : s'il dépasse, il repart du haut au lieu d'être coupé */
.pc{height:100%;padding:4.2% 9% 5%;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:safe center;scrollbar-width:thin}
.pc > *{flex:0 0 auto;width:100%}
.pc .brxe-image{display:block;width:auto;max-width:100%;min-height:30%;flex:0 1 auto;margin:0 0 1em}
.pc > .brxe-image:last-child{margin-bottom:0}
.pc img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;margin:0 auto}
.pc > a.brxe-image,.pc > figure.brxe-image{display:flex;justify-content:center}
.pc a.bricks-lightbox{cursor:zoom-in}
.pc p{margin:0 0 1.15em}
.pc .tb > p:last-child,.pc > .centre-btn:last-child{margin-bottom:0}
.pc table{margin:0 auto;font-size:inherit}
.tb{text-align:center;font-size:inherit;line-height:inherit;color:inherit}
.centre-btn{text-align:center;margin:0 0 1.15em}
.tb + .centre-btn{margin-top:1.8em}   /* respiration entre un texte et le bouton qui le suit (PDF de la Présentation) */
.deux{display:flex;flex-direction:row;gap:4%;height:100%;min-height:0}
.deux > div{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.deux .brxe-image{margin-bottom:1em}
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5%;align-content:center;height:100%}
.galerie .brxe-image{margin:0;max-width:none;width:100%}
.galerie img{width:100%;max-height:none;aspect-ratio:1;object-fit:cover}
.caro{position:relative;flex:1 1 auto !important;min-height:0;height:100%;--n:4}
.caro[data-n="2"]{--n:2}.caro[data-n="3"]{--n:3}.caro[data-n="5"]{--n:5}.caro[data-n="6"]{--n:6}
.caro > *{position:absolute;inset:0;margin:0 !important;min-height:0 !important;opacity:0;visibility:hidden;animation:dr-caro calc(var(--n) * 4.5s) infinite}
.caro > :nth-child(2){animation-delay:4.5s}.caro > :nth-child(3){animation-delay:9s}.caro > :nth-child(4){animation-delay:13.5s}
.caro > :nth-child(5){animation-delay:18s}.caro > :nth-child(6){animation-delay:22.5s}
/* chaque image occupe toute la hauteur du carrousel et y est centrée (Bricks donne sinon au lien la hauteur de l'image, calée en haut) */
.caro > *{top:0;bottom:0;height:100% !important;display:flex !important;align-items:center;justify-content:center}
.caro img{width:100%;height:100%;max-height:100%;object-fit:contain}
/* visibility : seule l'image affichée reçoit le clic (visionneuse) */
@keyframes dr-caro{0%,22%{opacity:1;visibility:visible}28%,100%{opacity:0;visibility:hidden}}

/* Feuille en cours de rotation : porte une page au recto et une au verso */
.feuille{position:absolute;top:0;width:50%;height:100%;z-index:5;transform-style:preserve-3d;transition:transform var(--duree) cubic-bezier(.45,.05,.3,1)}
.feuille.avant{left:50%;transform-origin:left center}
.feuille.arriere{left:0;transform-origin:right center}
.feuille.avant.tourne{transform:rotateY(-180deg)}
.feuille.arriere.tourne{transform:rotateY(180deg)}
.feuille > .pg{display:block;left:0;width:100%;backface-visibility:hidden;animation:dr-ombre var(--duree) ease-in-out}
.feuille > .pg.verso{transform:rotateY(180deg)}
@keyframes dr-ombre{50%{filter:brightness(.78)}}

/* Sans JavaScript, dans l'éditeur Bricks, ou sur petit écran : les pages s'empilent */
.livre:not(.actif):not(.fixe){aspect-ratio:auto;box-shadow:none}
.livre:not(.actif):not(.fixe) .pg{position:static;display:block;width:100%;height:auto;min-height:200px;margin-bottom:20px}
.livre:not(.actif):not(.fixe) .pc{overflow:visible}
@media (max-width:860px){
  /* Téléphone : une seule page à la fois (livre.js), sur un papier continu porté par le livre lui-même ;
     les deux flèches sous la page. À propos / Table des matières : leurs deux pages à la suite, sans couture. */
  #brx-content{justify-content:flex-start}   /* contenu en haut de l'écran, pas centré dans la hauteur */
  .cadre{width:100%}
  .zone{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:14px}
  .livre,.livre.fixe{order:1;flex:0 0 100%;aspect-ratio:auto;background:#f1f1f1 var(--papier) 0 0/200% auto repeat-y;box-shadow:0 10px 30px rgba(0,0,0,.5)}
  .livre.fixe .pg-d .pc{padding-top:0}
  body .fleche{position:relative;top:auto;left:auto;right:auto;order:2;margin:0}   /* relative : le chevron (::before) reste dans le cercle */
  .pc .brxe-image{min-height:0}
  .tete h1,.dr-titre{font-size:20px}
  .pg{position:static;width:100%;height:auto;min-height:0;margin:0;background:none;font-size:15px;line-height:1.35}
  .pg.visible{animation:dr-fondu .35s}
  .pc{padding:30px 22px;overflow:visible}
  .pc .brxe-image,.caro{flex:none !important}
  .caro{aspect-ratio:3/4;height:auto}
  .galerie,.deux{height:auto}
}
@keyframes dr-fondu{from{opacity:0}}
@media (prefers-reduced-motion:reduce){:root{--duree:.01s}}

/* ---- Contact et pages légales ---- */
.dr-titre{text-align:center;margin:6px 0 20px;font-size:24px}
.bloc{max-width:1110px;margin:0 auto;background:#eee;padding:30px;text-align:center}
.bloc.legal{text-align:left;font-size:15px;color:#252525}
.bloc.legal ul,.bloc.legal ol{margin:0 0 1em 1.4em;padding:0}
.bloc.legal h2,.bloc.legal h3{font:500 20px/1.3 Montserrat,sans-serif;margin:1.2em 0 .5em}
.bloc .brxe-form{margin-top:20px;text-align:left}
.bloc .brxe-form input,.bloc .brxe-form textarea{background:#fff;border:1px solid #ccc;border-radius:4px;padding:8px 12px;font:inherit}
.bloc .brxe-form .bricks-button{background:var(--rouge);color:#fff;border-radius:4px;padding:8px 24px;width:auto;font:400 16px/20px Montserrat,sans-serif}
.bloc .brxe-form .submit-button-wrapper{display:flex;justify-content:center;width:100%}

/* ---- Formulaire de contact Gravity Forms (thème de base « gravity-theme », classe dr-gf ; préfixe .gform_wrapper.gravity-theme.dr-gf_wrapper (4 classes) pour passer devant les styles de GF) ---- */
.bloc .intro h2{font:500 28px/1.2 Montserrat,sans-serif;margin:0 0 4px}
.bloc .intro h3{font:500 20px/1.2 Montserrat,sans-serif;margin:0 0 18px}
.bloc .intro .coord{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;max-width:720px;margin:0 auto}
.bloc .intro .coord p{margin:0 0 6px;font:300 15px/1.5 Montserrat,sans-serif}
.bloc .intro .coord > div:first-child{text-align:right}
.bloc .intro .coord > div:last-child{text-align:left}
@media (max-width:600px){.bloc .intro .coord{grid-template-columns:1fr}.bloc .intro .coord > div{text-align:center !important;margin-bottom:10px}}
.bloc .formulaire{margin-top:18px;text-align:left}
.gform_wrapper.gravity-theme.dr-gf_wrapper .gform_fields{row-gap:16px;column-gap:16px}
.gform_wrapper.gravity-theme.dr-gf_wrapper input[type=text],.gform_wrapper.gravity-theme.dr-gf_wrapper input[type=email],.gform_wrapper.gravity-theme.dr-gf_wrapper textarea{width:100%;box-sizing:border-box;background:#fff;border:1px solid #ccc;border-radius:4px;
  padding:10px 12px;font:300 15px/1.4 Montserrat,sans-serif;color:#252525;transition:border-color .2s,box-shadow .2s}
.gform_wrapper.gravity-theme.dr-gf_wrapper textarea{min-height:150px;resize:vertical}
.gform_wrapper.gravity-theme.dr-gf_wrapper input::placeholder,.gform_wrapper.gravity-theme.dr-gf_wrapper textarea::placeholder{color:#8a8a8a;opacity:1}
.gform_wrapper.gravity-theme.dr-gf_wrapper input:focus,.gform_wrapper.gravity-theme.dr-gf_wrapper textarea:focus{outline:none;border-color:var(--rouge);box-shadow:0 0 0 3px rgba(122,23,4,.15)}
.gform_wrapper.gravity-theme.dr-gf_wrapper .gform_footer{display:flex;justify-content:center;margin:20px 0 0;padding:0}
.gform_wrapper.gravity-theme.dr-gf_wrapper .gform_footer .gform_button,.gform_wrapper.gravity-theme.dr-gf_wrapper .gform_footer input[type=submit]{background:var(--rouge);color:#fff;border:1px solid transparent;border-radius:4px;
  padding:9px 28px;font:400 16px/20px Montserrat,sans-serif;letter-spacing:0;cursor:pointer;transition:background .3s}
.gform_wrapper.gravity-theme.dr-gf_wrapper .gform_footer .gform_button:hover{background:#000}
.gform_wrapper.gravity-theme.dr-gf_wrapper .gfield_error input,.gform_wrapper.gravity-theme.dr-gf_wrapper .gfield_error textarea{border-color:#b3261e}
.gform_wrapper.gravity-theme.dr-gf_wrapper .gfield_validation_message,.gform_wrapper.gravity-theme.dr-gf_wrapper .validation_message{background:none;border:0;padding:4px 0 0;margin:0;color:#b3261e;font:400 13px/1.4 Montserrat,sans-serif}
.gform_wrapper.gravity-theme.dr-gf_wrapper .ginput_container_consent{display:flex;align-items:flex-start;gap:10px}
.gform_wrapper.gravity-theme.dr-gf_wrapper .ginput_container_consent input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--rouge);cursor:pointer}
.gform_wrapper.gravity-theme.dr-gf_wrapper .gfield_required{display:none !important}   /* « (Nécessaire) » : toutes les cases sont obligatoires, l'erreur le dit si besoin */
.gform_wrapper.gravity-theme.dr-gf_wrapper .gfield_consent_label{font:300 14px/1.5 Montserrat,sans-serif;color:#252525;cursor:pointer}
.gform_wrapper.gravity-theme.dr-gf_wrapper .dr-gf-rgpd{margin:-6px 0 0 28px;font:300 13px/1.5 Montserrat,sans-serif;color:#555}
.gform_wrapper.gravity-theme.dr-gf_wrapper .dr-gf-rgpd a{color:var(--rouge);text-decoration:underline}
.gform_confirmation_message{font:400 16px/1.6 Montserrat,sans-serif;color:#252525;text-align:center;padding:10px 0}
.gform_ajax_spinner{margin-left:10px}
/* message d'erreur général : une ligne sobre, sans encadré ni liste (les messages sont déjà sous chaque champ) */
.gform_wrapper.gravity-theme.dr-gf_wrapper .gform_validation_errors{border:0;background:none;box-shadow:none;padding:0;margin:0 0 14px}
.gform_wrapper.gravity-theme.dr-gf_wrapper .gform_validation_errors > h2{font:500 14px/1.4 Montserrat,sans-serif;color:#b3261e;text-align:center;margin:0}
.gform_wrapper.gravity-theme.dr-gf_wrapper .gform_validation_errors > h2 .gform-icon,.gform_wrapper.gravity-theme.dr-gf_wrapper .gform_validation_errors ol{display:none}
.gform_wrapper.gravity-theme.dr-gf_wrapper .gform_required_legend{display:none}   /* pas d'astérisque affiché : la légende n'a pas lieu d'être */
.gform_wrapper.gravity-theme.dr-gf_wrapper .gfield_error{background:none;border:0;padding:0}

/* ---- Politique de cookies (document généré par Complianz) ---- */
.bloc.legal #cmplz-document{max-width:100%;font:300 15px/1.6 Montserrat,sans-serif;color:#252525}
.bloc.legal #cmplz-document h2,.bloc.legal #cmplz-document h3{font:500 20px/1.3 Montserrat,sans-serif}
.bloc.legal #cmplz-document a{color:var(--rouge)}

/* ---- Bannière Complianz : sur téléphone elle débordait de l'écran (430 px pour 375) ---- */
@media (max-width:600px){
  #cmplz-cookiebanner-container .cmplz-cookiebanner{width:calc(100vw - 24px) !important;max-width:calc(100vw - 24px) !important;box-sizing:border-box}
}

/* ---- Page 404 ---- */
.error404 .bloc .tb{font-size:16px;line-height:1.6;color:#252525}
.error404 .bloc .centre-btn{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:1.5em}

/* ---- Pied : même ligne de copyright que s-law.be, cœur qui bat dans le rouge du site ---- */
#brx-footer{background:var(--pied)}
.pied{width:100%;box-sizing:border-box;padding:20px 30px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 14px}
.pied,.pied a{font:400 13px/19.5px Montserrat,sans-serif;color:#696a6c}
.pied > *{white-space:nowrap;width:auto}
.pied .cp-sep{color:#696a6c}
.pied a{text-decoration:none;transition:color .3s ease}
.pied button.cp-lien{background:none;border:0;padding:0;margin:0;cursor:pointer;font:400 13px/19.5px Montserrat,sans-serif;color:#8d8e90;letter-spacing:0;transition:color .3s ease}
.pied button.cp-lien:hover{color:#fff}
.pied a:hover{color:#fff}
.cp-credit{display:flex;flex-direction:row;align-items:center;gap:5px;width:auto}
/* cœur dessiné par masque : garde la couleur voulue (le caractère ♥ devient un émoji sur certains téléphones) */
.cp-coeur{display:inline-block;width:13px;height:13px;font-size:0;color:transparent;background:var(--rouge);
  -webkit-mask:var(--coeur) center/contain no-repeat;mask:var(--coeur) center/contain no-repeat;
  --coeur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.780-3.400 6.860-8.550 11.540L12 21.35z'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:no-preference){.cp-coeur{animation:dr-coeur 1.5s ease-in-out infinite;transform-origin:center}}
@keyframes dr-coeur{0%{transform:scale(1)}10%{transform:scale(1.28)}20%{transform:scale(1)}30%{transform:scale(1.22)}42%{transform:scale(1)}100%{transform:scale(1)}}