html {   color: #091633;   font-size: 1em;    font-size: 14px;   line-height: 1.4; } ::-moz-selection {   background: #b3d4fc;   text-shadow: none; } ::selection {   background: #b3d4fc;   text-shadow: none; }  hr {   display: block;   height: 1px;   border: 0;   border-top: 1px solid #ccc;   margin: 1em 0;   padding: 0; }  audio, canvas, iframe, img, svg, video {   vertical-align: middle; }  fieldset {   border: 0;   margin: 0;   padding: 0; }  textarea {   resize: vertical; }  /* ==========================================================================    Browser Upgrade Prompt    ========================================================================== */  .browserupgrade {   margin: 0.2em 0;   background: #ccc;   color: #000;   padding: 0.2em 0; }  /* ==========================================================================    Fonts    ========================================================================== */  @font-face {   font-family: 'Utopisy';   font-style: normal;   font-weight: 50 500;   font-display: swap;   src: url('./fonts/Utopisy-v10GX.woff2') format('woff2'),  url('./fonts/Utopisy-v10GX.woff') format('woff'), url('./fonts/Utopisy-v10GX.ttf') format('truetype'); } @font-face{   font-family:"Helvetica Neue LT W05 35 Thin";   src:url("./fonts/5664081/7d63ccf8-e0ae-4dee-ad4d-bbc798aa5803.woff2") format("woff2"),url("./fonts/5664081/b2c1327f-ab3d-4230-93d7-eee8596e1498.woff") format("woff"); } @font-face{   font-family:"Helvetica Neue LT W05_36 Th It";   src:url("./fonts/5664067/2a7e8f89-c0b2-4334-9c34-7a2078d2b959.woff2") format("woff2"),url("./fonts/5664067/32aad9d8-5fec-4b9d-ad53-4cf7a5b53698.woff") format("woff"); } @font-face{   font-family:"Helvetica Neue LT W05 46 Lt It";   src:url("./fonts/5664089/5e4f385b-17ff-4d27-a63a-9ee28546c9a8.woff2") format("woff2"),url("./fonts/5664089/116cde47-4a07-44a5-9fac-cbdcc1f14f79.woff") format("woff"); } @font-face{   font-family:"Helvetica Neue LT W01_75 Bold";   src:url("./fonts/5664149/1f4274cd-2674-481e-9023-69e33ffca161.woff2") format("woff2"),url("./fonts/5664149/5e8d493c-be01-44b9-962e-504a5cf10dd8.woff") format("woff"); } @font-face{   font-family:"Helvetica Neue LT W05 65 Medium";   src:url("./fonts/5664103/240c57a0-fdce-440d-9ce3-85e0cb56f470.woff2") format("woff2"),url("./fonts/5664103/7802e576-2ffa-4f22-a409-534355fbea79.woff") format("woff"); } @font-face{   font-family:"Helvetica Neue LT W05 45 Light";   src:url("./fonts/5664085/f9c5199e-a996-4c08-9042-1eb845bb7495.woff2") format("woff2"),url("./fonts/5664085/2a34f1f8-d701-4949-b12d-133c1c2636eb.woff") format("woff"); }  html{ font-size: 100%; } body {   margin: 0;   padding: 0;   color: #000;   font-family: 'Helvetica Neue LT W05 35 Thin',Arial,sans-serif;   font-weight: 300;   font-stretch: normal;   font-style: normal;   line-height: normal;   font-size:1.05rem;   letter-spacing:0.4px; } i { font-family: 'Helvetica Neue LT W05_36 Th It',Arial,sans-serif; font-style: normal; } b { font-family:"Helvetica Neue LT W01_75 Bold",Arial,sans-serif; font-weight: bold; } .hn-light { font-family:"Helvetica Neue LT W05 45 Light",Arial,sans-serif; font-weight: normal; } .hn-thin { font-family:"Helvetica Neue LT W05 35 Thin",Arial,sans-serif; font-weight: normal; }  a{ color: #000; text-decoration: none; transition: width 0.3s ease 0s; position: relative; z-index: 902; } a:hover, a:visited{ color: #000000; text-decoration: none; } a.underline:before {   content: "";   display: block;   position: absolute;   bottom: 0;   left: 0;   width: 0px;   height: 1px;   background: #000000;   opacity: 1;   transition: width 0.3s ease 0s; } a.underline:hover:before {   width: 100%; } a.underline-always:before {   content: "";   display: block;   position: absolute;   bottom: -3px;   left: 0;   width: 100%;   height: 1px;   background: #000000;   opacity: 1; } a.underline-always:hover:before {   animation: underlineA 1s infinite ease; } @-webkit-keyframes underlineA { 0% { width: 100%; } 30% { width: 0%; left:100% } 100% { width: 100%; }} @-moz-keyframes underlineA { 0% { width: 100%; } 50% { width: 0%; left:100% } 100% { width: 100%; }} @keyframes underlineA { 0% { width: 100%; } 50% { width: 0%; left:100% } 51% { width: 0%; left:0 } 100% { width: 100%;left:0 }}   h2{ font-size: 1.5em; padding: 0; margin: 0; } h3{ font-size: 1.5em; padding: 0; margin: 0; } h4{ font-family:"Helvetica Neue LT W01_75 Bold",Arial,sans-serif; font-weight: bold; font-size: 0.9em; }  /* FONT --- */ .muted{ color: #A0A6AC; } .utopisy{ font-family: 'Utopisy'; font-weight: normal; font-variation-settings: 'wght' 500; } .utopisy b{ font-family: 'Utopisy'; font-weight: normal; font-variation-settings: 'wght' 500; } .utopisy.light{ font-weight: 50; font-variation-settings: 'wght' 50; letter-spacing: .05rem; } .uppercase{ text-transform: uppercase; } .lowercase{ text-transform: lowercase; } u{text-decoration: none; } u{border-bottom: 2px solid currentColor; display: inline-block; line-height: 1.5; } .light u{ border-bottom: 1px solid currentColor; display: inline-block; line-height: 1.5; } .text-right{ text-align: right; } .text-left{ text-align: left; } .text-center{ text-align: center; }  .lettering{ letter-spacing: 0.1rem; } .light.lettering{ letter-spacing: 0.1rem; } .lettering-small{ letter-spacing: 0.05rem; } .lettering-medium{ letter-spacing: 0.07rem; }  /* GLOBAL ---*/ .bg-gradient-full{   background: -webkit-linear-gradient(45deg, rgba(25,35,239,1), rgba(102,206,234,1) 100%);   background-size: 200% auto;   background-position: left;   animation: AnimationGradient 4s linear infinite; } .bg-gradient{   background: -webkit-linear-gradient(45deg, var(--background-color1), var(--background-color2));   background-size: 200% auto;   background-position: left;   animation: AnimationGradient 4s linear infinite; } .bg-gradient-over:hover{   background: -webkit-linear-gradient(45deg, var(--background-color1), var(--background-color2));   background-size: 100% auto;   background-position: left; } .text-gradient{   background: -webkit-linear-gradient(45deg, var(--background-color1), var(--background-color2));   background-clip: text;   box-decoration-break: clone;   -webkit-background-clip: text;   -webkit-text-fill-color: transparent;   -webkit-box-decoration-break: clone;   color: transparent; } .text-gradient *:hover{ animation-play-state: paused; } .text-gradient *::selection{ color: #000000; -webkit-text-fill-color: #000; } .gradient-animate{   background-size: 200% auto;   background-position: left;   animation: AnimationGradient 4s linear infinite; } .text-big{ font-size: 4em; } .bg-video{   position: absolute;   right: 0;   bottom: 0;   min-width: 100%;   min-height: 100%; }  .nav{ margin:0; padding: 0; display: flex; list-style-type: none; align-items: center; justify-content: center;  } .nav::-webkit-scrollbar { display: none; } .nav {   -ms-overflow-style: none;  /* IE and Edge */   scrollbar-width: none;  /* Firefox */ } .nav .title{ text-transform: uppercase; }  .nav a{   border: 1px solid transparent; padding: 0.4rem 1.4rem 0.4rem 1.4rem;   font-size: 0.9rem; line-height: 1.2rem; } .nav a:hover{ border: 1px solid #3E3E3E; padding: 0.4rem 1.4rem 0.4rem 1.4rem; border-radius: 1rem; } .menu{ position: fixed; z-index: 998; width: 100%; height: 100%; margin: 0; padding: 0; background: #fff; display: none; list-style-type: none; flex-direction: column; align-items: center; justify-content: center; } .menu li{ margin-top:0.5rem; margin-bottom:0.5rem; font-size:1.8rem; } .menu li:first-child{ margin-bottom: 1.5rem; font-size:1.2rem;} .menu li:last-child{ width: 100%; padding-right:2rem; padding-left:2rem; position: absolute; bottom: 2rem; } /*.menu li:last-child a{ cursor: pointer; border: 1px solid #3E3E3E; background: #FFF; text-align:center; padding: 0.8rem 0rem 0.8rem 0rem; border-radius: 1.5rem; display: inline-block; width: 100%; padding-right:1rem; padding-left:1rem; }*/  .minus{ font-size: 0.8rem; }  /* CARD --- */ .card{ height: 23rem; } .card.withpicture{ height: 40rem; } .card{ margin-bottom: 3rem;} .card .card-body{ cursor: pointer; } .card .card-body .title{ height: 6.85rem; max-height: 6.85rem; overflow: hidden; font-size: 2.15rem; line-height: 2.15rem; font-variation-settings: 'wght' 50; } .card .card-body .title .utopisy{ font-variation-settings: 'wght' 300; } .card .card-body .card-line{ line-height: 2.95rem; border-bottom:1px solid #3E3E3E; font-family:"Helvetica Neue LT W05 65 Medium"; letter-spacing: 0.33px; } .card .card-body .card-line .card-line-explain{ letter-spacing: 0.084px; } .card .card-body .card-line .card-line-explain .hn-thin{ letter-spacing: 0.33px; } .card .card-body .card-line b.level{ color:#fff; -webkit-text-stroke: 1px var(--color1); } .card .card-body .card-line b.level, .card .card-body .card-line b.level-b{ margin-right:7px; font-size: 1.2rem; } .card .card-body .text{ padding-top:1.1rem; font-size: 1.1rem; line-height:1.58rem; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .card .btn-whishlist{ width: 1.8rem; height: 2.8rem; padding-top:0.55rem; } .card .card-body .title a{   background: -webkit-linear-gradient(45deg, var(--background-color1), var(--background-color2));   background-clip: text;   box-decoration-break: clone;   -webkit-background-clip: text;   -webkit-text-fill-color: transparent;   -webkit-box-decoration-break: clone; } .card .card-body .card-line b.level-b, .card .card-body .card-line b.minutes{   color: var(--color1); } .card .card-body .title a::selection, .card .card-body .card-line b.level-b::selection, .card .card-body .card-line b.minutes::selection{ color: #000000; -webkit-text-fill-color: #000; } .card .card-body .title a{   background-size: 200% auto;   background-position: left;   animation: AnimationGradient 4s linear infinite; } .card .card-body .title a:hover{ animation-play-state: paused; } .card .card-body .card-read svg{ width: 35px; } .card-read svg .arrow-1{ fill: var(--color1); opacity:1; transition: opacity 100ms ease-in-out; } .card-read svg .arrow-2{ fill: var(--color1); opacity:0; transition: opacity 100ms ease-in-out; } .card:hover .card-read svg .arrow-1{ opacity:0; } .card:hover .card-read svg .arrow-2{ opacity:1; }  @-webkit-keyframes AnimationGradient {   0% { background-position: left; }   50% { background-position: right; }   100% { background-position: left; } } @-moz-keyframes AnimationGradient {   0% { background-position: left; }   50% { background-position: right; }   100% { background-position: left; } } @keyframes AnimationGradient {   0% { background-position: left; }   50% { background-position: right; }   100% { background-position: left; } }  h1.article{   width: 100%;   text-align: center;   font-size: 3rem; line-height: 3rem; } h1.article.text-big{   font-size: 4rem; line-height: 4rem; } h1.no-hyphens{   -webkit-hyphens:none;   -ms-hyphens: none;   hyphens: none; } /* PADDINGS --- */ .p-05{ padding: 0.5rem; } .pl-05, .plr-05{ padding-left: 0.5rem; } .pr-05, .plr-05{ padding-right: 0.5rem; } .pt-05, .ptb-05{ padding-top: 0.5rem; } .pb-05, .ptb-05{ padding-bottom: 0.5rem; } .p-1{ padding: 1rem; } .pl-1, .plr-1{ padding-left: 1rem; } .pr-1, .plr-1{ padding-right: 1rem; } .pt-1, .ptb-1{ padding-top: 1rem; } .pb-1, .ptb-1{ padding-bottom: 1rem; } .p-15{ padding: 1.5rem; } .pl-15, .plr-15{ padding-left: 1.5rem; } .pr-15, .plr-15{ padding-right: 1.5rem; } .pt-15, .ptb-15{ padding-top: 1.5rem; } .pb-15, .ptb-15{ padding-bottom: 1.5rem; } .p-2{ padding: 2rem; } .pl-2, .plr-2{ padding-left: 2rem; } .pr-2, .plr-2{ padding-right: 2rem; } .pt-2, .ptb-2{ padding-top: 2rem; } .pb-2, .ptb-2{ padding-bottom: 2rem; } .p-3{ padding: 3rem; } .pl-3, .plr-3{ padding-left: 3rem; } .pr-3, .plr-3{ padding-right: 3rem; } .pt-3, .ptb-3{ padding-top: 3rem; } .pb-3, .ptb-3{ padding-bottom: 3rem; } .p-4{ padding: 4rem; } .pl-4, .plr-4{ padding-left: 4rem; } .pr-4, .plr-4{ padding-right: 4rem; } .pt-4, .ptb-4{ padding-top: 4rem; } .pb-4, .ptb-4{ padding-bottom: 4rem; } .p-5{ padding: 5rem; } .pl-5, .plr-5{ padding-left: 5rem; } .pr-5, .plr-5{ padding-right: 5rem; } .pt-5, .ptb-5{ padding-top: 5rem; } .pb-5, .ptb-5{ padding-bottom: 5rem; } .p-7{ padding: 7rem; } .m-3{ margin: 3rem; } .ml-3, .mlr-3{ margin-left: 3rem; } .mr-3, .mlr-3{ margin-right: 3rem; } .mt-3, .mtb-3{ margin-top: 3rem; } .mb-3, .mtb-3{ margin-bottom: 3rem; } .m-2{ margin: 2rem; } .ml-2, .mlr-2{ margin-left: 2rem; } .mr-2, .mlr-2{ margin-right: 2rem; } .mt-2, .mtb-2{ margin-top: 2rem; } .mb-2, .mtb-2{ margin-bottom: 2rem; } .m-15{ margin: 1.5rem; } .ml-15, .mlr-15{ margin-left: 1.5rem; } .mr-15, .mlr-15{ margin-right: 1.5rem; } .mt-15, .mtb-15{ margin-top: 1.5rem; } .mb-15, .mtb-15{ margin-bottom: 1.5rem; } .m-1{ margin: 1rem; } .ml-1, .mlr-1{ margin-left: 1rem; } .mr-1, .mlr-1{ margin-right: 1rem; } .mt-1, .mtb-1{ margin-top: 1rem; } .mb-1, .mtb-1{ margin-bottom: 1rem; } .m-5{ margin: 5rem; } .ml-5, .mlr-5{ margin-left: 5rem; } .mr-5, .mlr-5{ margin-right: 5rem; } .mt-5, .mtb-5{ margin-top: 5rem; } .mb-5, .mtb-5{ margin-bottom: 5rem; }  .p-relative{position: relative;} .max-width{ max-width: 1140px; } .max-width-bis{ max-width: 1240px; }  .border-top{ border-top: 1px solid #3E3E3E; }  /* FORM --- */ .form-group input{   border:none;   border-radius: 0;   background-image:none;   background-color:transparent;   -webkit-box-shadow: none;   -moz-box-shadow: none;   box-shadow: none;   position: relative;   width: 100%;   font-size: 0.9rem;   z-index: 902;   border-bottom: 0.1rem solid #000; } .form-group input:focus{ outline: none; } .form-group input::placeholder {   color: #CCC;   font-family:"Helvetica Neue LT W05_36 Th It";   font-style: normal;   font-size: 0.9rem;   letter-spacing: 0.05rem; }  .form-input-group{   display: flex;   align-items: center;   border: 1px solid #000;   padding-left: 7px;   padding-right: 7px;   border-radius: 15px;   font-size: 0.8rem;   line-height: 25px; } .form-input-group input{   border:none;   border-radius: 0;   background-image:none;   background-color:transparent;   -webkit-box-shadow: none;   -moz-box-shadow: none;   box-shadow: none;   position: relative;   width: 100%;   z-index: 902;   padding-left: 5px;   font-family:"Helvetica Neue LT W05 35 Thin";   font-size: 0.8rem; } .form-input-group input:focus{ outline: none; }  .breadcrumb{ height: 40px;/* display: flex; align-items: normal;*/ padding-top: 3rem; padding-bottom:3rem; font-size:0.9rem;color:#3E3E3E } .breadcrumb a{ color:#3E3E3E } .breadcrumb a.underline:before,.breadcrumb a.underline-always:before { background:#3E3E3E;} #showmore{margin-top:2rem;} .btn-more{ cursor: pointer; border: 1px solid #3E3E3E; padding: 0.8rem 0rem 0.8rem 0rem; border-radius: 1.5rem; display: inline-block; font-size: 0.8rem; width: 10rem; } .btn-more.utopisy{ font-variation-settings: 'wdth' 50; animation-name: utopisy-thiner; font-weight: 50;  } .btn-more.utopisy:hover{   animation-name: utopisy-wider;   animation-duration: 0.5s;   animation-fill-mode: forwards;   -webkit-animation-name: utopisy-wider;   -webkit-animation-duration: 0.5s;   -webkit-animation-fill-mode: forwards; }  .search-container{   border-bottom: 0px; text-align: center;   background:url('../img/pictos/search.svg') center center no-repeat;   width: 1.8rem;   height: 1.8rem;   display: flex; } .wishlist-container, .wishlist-container-master{   position: absolute;   border-bottom: 0px; text-align: center;   background:url('../img/pictos/bookmark.svg') no-repeat;   width: 1.8rem;   height: 2.8rem;   display: flex;   justify-content: center;   padding-top: 0.3rem; } .col .wishlist-container, .col .wishlist-container-master{ width: 1.6rem; height: 2.6rem; padding-top: 0.2rem; }  .wishlist-container .wishlist.utopisy{   font-style: normal;   font-variation-settings: 'wght' 50; } .wishlist-container.active .wishlist.utopisy{   font-style: normal;   font-variation-settings: 'wght' 500; } .wishlist-container-master .wishlist.utopisy{   font-variation-settings: 'wght' 50; } .wishlist-container-master.active .wishlist.utopisy{   font-variation-settings: 'wght' 500; } .wishlist-container-master.active.animateBoldToBold .wishlist.utopisy{   animation-name: utopisy-bolder-lighter-bolder;   animation-duration: 0.8s;   animation-fill-mode: forwards;   -webkit-animation-name: utopisy-bolder-lighter-bolder;   -webkit-animation-duration: 0.8s;   -webkit-animation-fill-mode: forwards; } .wishlist-container-master.animateBoldToBold .wishlist.utopisy{   animation-name: utopisy-lighter-bolder;   animation-duration: 0.8s;   animation-fill-mode: forwards;   -webkit-animation-name: utopisy-lighter-bolder;   -webkit-animation-duration: 0.8s;   -webkit-animation-fill-mode: forwards; } .wishlist.utopisy.animateBold{   animation-name: utopisy-bolder;   animation-duration: 0.4s;   animation-fill-mode: forwards;   -webkit-animation-name: utopisy-bolder;   -webkit-animation-duration: 0.4s;   -webkit-animation-fill-mode: forwards; } .wishlist.utopisy.animateLight{   animation-name: utopisy-lighter;   animation-duration: 0.4s;   animation-fill-mode: forwards;   -webkit-animation-name: utopisy-lighter;   -webkit-animation-duration: 0.4s;   -webkit-animation-fill-mode: forwards; }   .utopisy.tobolder:not( :hover ){   font-variation-settings: 'wght' 50; animation-name: utopisy-lighter;   animation-duration: 0.4s;   animation-fill-mode: forwards;   -webkit-animation-name: utopisy-lighter;   -webkit-animation-duration: 0.4s;   -webkit-animation-fill-mode: forwards; } .utopisy.tobolder:hover{   animation-name: utopisy-bolder;   animation-duration: 0.4s;   animation-fill-mode: forwards;   -webkit-animation-name: utopisy-bolder;   -webkit-animation-duration: 0.4s;   -webkit-animation-fill-mode: forwards; } .utopisy.tobolder-light:not( :hover ){   font-variation-settings: 'wght' 50; animation-name: utopisy-lighter-light;   animation-duration: 0.4s;   animation-fill-mode: forwards;   -webkit-animation-name: utopisy-lighter-light;   -webkit-animation-duration: 0.4s;   -webkit-animation-fill-mode: forwards; } .utopisy.tobolder-light:hover{   animation-name: utopisy-bolder-light;   animation-duration: 0.6;   animation-fill-mode: forwards;   -webkit-animation-name: utopisy-bolder-light;   -webkit-animation-duration: 0.4s;   -webkit-animation-fill-mode: forwards; } @keyframes utopisy-bolder { 0% { font-variation-settings: 'wght' 50; } 100% { font-variation-settings: 'wght' 500; }} @keyframes utopisy-bolder-lighter { 0% { font-variation-settings: 'wght' 50; } 50% { font-variation-settings: 'wght' 500; } 100% { font-variation-settings: 'wght' 50; }} @keyframes utopisy-lighter-bolder { 0% { font-variation-settings: 'wght' 50; } 50% { font-variation-settings: 'wght' 500; } 100% { font-variation-settings: 'wght' 50; }} @keyframes utopisy-bolder-lighter-bolder { 0% { font-variation-settings: 'wght' 500; } 50% { font-variation-settings: 'wght' 50; } 100% { font-variation-settings: 'wght' 500; }} @keyframes utopisy-lighter { 100% { font-variation-settings: 'wght' 50; } 0% { font-variation-settings: 'wght' 500; }} @keyframes utopisy-bolder-light { 0% { font-variation-settings: 'wght' 50; } 100% { font-variation-settings: 'wght' 250; }} @keyframes utopisy-lighter-light { 100% { font-variation-settings: 'wght' 50; } 0% { font-variation-settings: 'wght' 250; }} @keyframes utopisy-wider { 0% { font-variation-settings: 'wdth' 50; } 100% { font-variation-settings: 'wdth' 200; }} @keyframes utopisy-thiner { 100% { font-variation-settings: 'wdth' 50; } 0% { font-variation-settings: 'wdth' 200; }}  header{ background: transparent; position: absolute; width: 100%; z-index: 999; transition: all 200ms ease-in-out; top: 15px; } header.fixed{ position: fixed; background: #FFFFFF; top: 0px; } header.fixed .nav{ margin-bottom:1rem;} header.fixed.withColision{  background: #FFFFFF; } header .logo{ font-size: 2rem; line-height: 3rem; font-style: normal; font-variation-settings: 'wdth' 50, 'wght' 500; } header .logo .bolder{ font-variation-settings: 'wdth' 50, 'wght' 50;  } header .search{ display: flex; align-items: center; justify-content: flex-end; align-items: stretch; } header .search .c-0{ display: flex; align-items: center; } header .search .c-1{ display: flex; align-items: center; } header .search .c-2{ display: flex; align-items: flex-end; } header .search .c-2 .wishlist-container-master{ position: relative; height: 2.9rem; margin-left: 2rem; } header .search .c-0 a{ font-size: 1rem; padding-right: 2rem; } header .search .c-1 form{ width: 100%; min-width: 15rem; } header .menu-burger{ display:inline-block; width: 100%; text-align:right; } header .menu-burger img{ max-width: 2.5rem; margin-top:0.5rem; margin-right:3rem; } header .menu-burger svg{margin-right:2rem; } header.mobile{display: none;} header.desktop{display: block;}  footer{ font-size: 0.9em; } footer .logo-footer{ width: 85%; max-width: 220px; margin-top:1.33em; cursor:pointer; } footer .logo-footer #logo-path{ fill:#000000; } footer .logo-footer:hover #logo-path{ fill:url(#gradient_logo_footer); } footer .nomarge{ margin-bottom:0.2rem; } footer h4{ margin-top:1.7rem; } footer input::placeholder {   padding-left:0.1rem;   font-size: 0.8em;   color: #a3a3a3; } footer ul{ list-style-type: none; padding: 0; margin: 0; margin-top: auto; bottom:0; }  footer .apps{ margin-top: auto; margin-top:-1.2rem; display: flex; } footer .apps span svg{ width: 100%; cursor:pointer; } footer .apps span:first-child{ margin-right: 0.8em; } footer .apps span:last-child{ margin-left: 0.8em; } footer .apps span .apple-footer #logo-path{ fill:#000000; } footer .apps span:hover .apple-footer #logo-path{ fill:url(#gradient_apple_footer); } footer .apps span .google-footer #logo-path{ fill:#000000; } footer .apps span .google-footer:hover #logo-path{ fill:url(#gradient_google_footer); }  .colision-scroll{ transition: top 0.3s ease; } .colision-scroll.fixed{ position: fixed; } .colision-scroll.absolute{ position: absolute; top:auto; bottom:3rem; }  .slides{ width: 100%; overflow: hidden; position: relative; display: flex; align-items: center; } .slide-container{ width: 100%; position: relative; display: flex; align-items: center; flex-direction: row; left: 0; transition: left 1s ease 0s; } .slide{ width: 100%; text-align: center; display: block; }  .slide .container{ align-items: center; justify-content: center; display: flex; flex-direction: column; } .slide .slide-over{ margin-bottom: 2rem;} .slide .slide-title{ flex: 1; display: flex; align-items: flex-start; justify-content: end; text-align: center; flex-direction: column; } .slide .slide-title h1{ font-size: 3.5rem; line-height: 3.7rem; padding-bottom: 2rem; margin-top: 0; margin-bottom: 0; font-variation-settings: 'wght' 500; } .slide .slide-text{ flex: 1; font-size: 1.1rem; display: flex; align-items: center; justify-content: end; width: 100%; text-align: center; flex-direction: column; } .slide .slide-over{ font-size: 1.1rem; line-height: 1.1rem; } .slide .slide-link{ font-size: 1rem; line-height: 1rem; }  .slide-title-string { margin-top: 2rem; margin-bottom: 2rem; } .slide-title-string h1{ padding-bottom: 2rem; margin-top: 0; margin-bottom: 0; }  .slide.withPicture .container.toshow{ display: none; } .slide.withPicture .slide-title h1{  font-size: 3.2rem; line-height: 3.5rem; } .slide.withPicture .container{ align-items: center; justify-content: center; display: flex; flex-direction: column; } .slide.withPicture .slide-title{ text-align: left; } .slide.withPicture .slide-text{ text-align: left; align-items: start; }  .slide-blog{ display: inline-block; width: 100%; text-align:center; font-size: 3rem; height: 5rem; display: flex; justify-content: center; position: absolute; bottom:0; z-index:996; overflow: hidden; } .slide-blog div{ position: absolute; display: block; width: 1px; height: 100%; top: 0; background: #000000; animation: scroll-line 1.5s ease-in-out infinite; } .slide-blog.down div{ display:none; }  .slide-number{ position: absolute; z-index:997; left: 3rem; bottom: 3rem; display: flex; align-items: center; justify-content: center; flex-direction: row; cursor: pointer; } .slide-number .number.border{ padding-right: 0.5rem; border-right: 1px solid #000; } .slide-number .number{ height: 100%;   font-size: 1.6rem; letter-spacing: .05rem; font-variation-settings: 'wght' 100, 'wdth' 100; padding-left: 0.5rem; padding-right: 0.5rem; text-align: center; width: 45px;   animation-name: numbers-out;   animation-duration: 1s;   animation-fill-mode: forwards;   -webkit-animation-name: numbers-out;   -webkit-animation-duration: 1s;   -webkit-animation-fill-mode: forwards; } .slide-number .number.active{   animation-name: numbers;   animation-duration: 1s;   animation-fill-mode: forwards;   -webkit-animation-name: numbers;   -webkit-animation-duration: 1s;   -webkit-animation-fill-mode: forwards; } @keyframes numbers { 0% { font-variation-settings: 'wght' 100, 'wdth' 100; } 100% { font-variation-settings: 'wght' 450, 'wdth' 100; } } @keyframes numbers-out { 100% { font-variation-settings: 'wght' 100, 'wdth' 100; } 0% { font-variation-settings: 'wght' 450, 'wdth' 100; } } @keyframes blog { 0% { margin-top: 0.6rem; } 50% { margin-top: 0rem; } 100% { margin-top: 0.6rem; } } @keyframes blog-expand { 0% { height: 100%; } 100% { height: 200%; } } @keyframes scroll-line { 0% { height: 0%; top: 0; } 50%{ height: 100%; top: 0; } 100% { height: 0%; top: 100%; } }  .social{ display: flex; align-items: center; justify-content: center; } .social i{ font-size: 1.2em; border: 1px solid #000; width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; }  #headcontent .category-mobile{ display: none; } #headcontent{ height: 35vh } #headcontent{display: flex; align-items: center; justify-content: center; flex-direction: column} #headcontent div{ width: 100%; }  .relatedarticle{ width: 100%; display: block; padding: 15px; font-weight: bold; border: 1px solid #3E3E3E; border-radius: 1rem; text-align: center;} .relatedarticle:hover{background-size: 200% auto; background-position: left; animation: AnimationGradient 4s linear infinite; } .readingTime{ position:absolute; transition: width 0.3s ease 0s; background: #000; height: 3px; margin-top: 1rem; width: 0%; } .readingTimeB{ position:absolute; transition: width 0.3s ease 0s; background: #000; height: 3px; margin-top: 1rem; width: 0%; }  .white-line{ background: #fff; position:absolute; width: calc(100% - 30px); height:10px; margin-top:-4.5rem; } .toAppearSlowly{opacity: 0; }  .form-group{  } .form-group .div-100{ flex: 1; } .form-group .div-100:last-child{ max-width: 180px; } .input-mail{   border:none;   border-radius: 0;   background-image:none;   background-color:transparent;   -webkit-box-shadow: none;   -moz-box-shadow: none;   box-shadow: none;   font-family:"Helvetica Neue LT W05 45 Light"; font-size: 1rem; line-height: 1.4rem;   z-index: 999;   border-bottom: 0.1em solid #000;   width: calc(100% - 1rem);   height: calc(100% - 1px);   padding:0; } .input-mail:focus{ outline: none; } .input-mail::placeholder{ font-family:"Helvetica Neue LT W05 45 Light"; font-size: 1rem; line-height: 1.4rem; color:#757575; }  .error{height:100%; position: relative; } .error::after{   content: "Oups, il semble que ce n'est pas une adresse valide";   position: absolute;   font-family:"Helvetica Neue LT W05 45 Light"; font-size: 0.8rem; line-height: 1.4rem; color:#fd5f5f;   left:0;   width:100%;   height: calc(100% - 1px);   z-index: 1;   opacity: 0; } .error.show::after{ opacity: 1; display:block; }  /* EFFECTS --- */ .fadeIn{opacity: 0}  /* ==========================================================================    Helper classes    ========================================================================== */  /*  * Hide visually and from screen readers  */   .hidden {   display: none !important; } .hidden-desktop {   display: none !important; }  /* * Hide only visually, but have it available for screen readers: * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility * * 1. For long content, line feeds are not interpreted as spaces and small width *    causes content to wrap 1 word per line: *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */  .sr-only {   border: 0;   clip: rect(0, 0, 0, 0);   height: 1px;   margin: -1px;   overflow: hidden;   padding: 0;   position: absolute;   white-space: nowrap;   width: 1px;   /* 1 */ }  /* * Extends the .sr-only class to allow the element * to be focusable when navigated to via the keyboard: * https://www.drupal.org/node/897638 */  .sr-only.focusable:active, .sr-only.focusable:focus {   clip: auto;   height: auto;   margin: 0;   overflow: visible;   position: static;   white-space: inherit;   width: auto; }  /* * Hide visually and from screen readers, but maintain layout */  .invisible {   visibility: hidden; }  /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the *    `contenteditable` attribute is included anywhere else in the document. *    Otherwise it causes space to appear at the top and bottom of elements *    that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using *    `:before` to contain the top-margins of child elements. */  .clearfix:before, .clearfix:after {   content: " ";   /* 1 */   display: table;   /* 2 */ }  .clearfix:after {   clear: both; }  /* ==========================================================================    EXAMPLE Media Queries for Responsive Design.    These examples override the primary ('mobile first') styles.    Modify as content requires.    ========================================================================== */  @media only screen and (min-width: 35em) {   /* Style adjustments for viewports that meet the condition */ }  @media print,   (-webkit-min-device-pixel-ratio: 1.25),   (min-resolution: 1.25dppx),   (min-resolution: 120dpi) {   /* Style adjustments for high resolution devices */ }  /* ==========================================================================    Print styles.    Inlined to avoid the additional HTTP request:    https://www.phpied.com/delay-loading-your-print-css/    ========================================================================== */  @media print {   *,   *:before,   *:after {     background: transparent !important;     color: #000 !important;     /* Black prints faster */     -webkit-box-shadow: none !important;     box-shadow: none !important;     text-shadow: none !important;   }   a,   a:visited {     text-decoration: underline;   }   a[href]:after {     content: " (" attr(href) ")";   }   abbr[title]:after {     content: " (" attr(title) ")";   }   /*      * Don't show links that are fragment identifiers,      * or use the `javascript:` pseudo protocol      */   a[href^="#"]:after,   a[href^="javascript:"]:after {     content: "";   }   pre {     white-space: pre-wrap !important;   }   pre,   blockquote {     border: 1px solid #999;     page-break-inside: avoid;   }   /*      * Printing Tables:      * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables      */   thead {     display: table-header-group;   }   tr,   img {     page-break-inside: avoid;   }   p,   h2,   h3 {     orphans: 3;     widows: 3;   }   h2,   h3 {     page-break-after: avoid;   } }  /* SCREENS --- */ @media screen and (max-width: 1200px) {   .p-3{ padding: 2rem; }   .nav{ justify-content: flex-start; padding-left: 0rem; padding-right: 0rem; }   .nav.mtb-3{ margin-top:0rem; margin-bottom:0rem; padding-top:1rem; padding-bottom:1rem; }   .nav li{ margin-left: 0rem; }   .nav{ overflow-x:scroll; overflow-y: visible; }    footer .p-3{ padding-left: 2em; padding-right: 2em; } } @media screen and (max-width: 992px) {    header.mobile{display: block;}   header.desktop{display: none;}   header .container-logo{ padding-left: 0rem; padding-right: 0rem; text-align:center; }   header .col-md .search{ padding-right: 1rem; }   header .search .c-0{ text-align:center; }   header .wishlist-container-master{ left:3rem; transform: translate(0%, -50%); top: 0.5rem; }   header .menu-burger svg{margin-right:3rem; }   header .menu-burger img{ max-width: 2.5rem; margin-top:0.5rem; margin-right:3rem; }    .slide .slide-title h1{ font-size: 2.5rem; line-height: 2.7rem; }   .slide.withPicture .slide-title h1{  font-size: 2.5rem; line-height: 2.7rem; }   .slide .slide-text div{ font-size: 1.1rem; line-height: 1.2rem; }   .slide .container{ max-width:none;}   .slide-blog{ display:none;}   .slide-number{ left:50%; transform: translate(-50%, -50%); }    .col-12{ padding: 0; overflow: hidden; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}   h1.no-hyphens{     -webkit-hyphens:none;     -ms-hyphens: none;     hyphens: none;   }   .row.plr-3{ padding-left: 2rem; padding-right: 2rem;}   .text-big{ font-size: 3rem;}   h1.article.text-big{     font-size: 3rem; line-height: 3rem;   }    .card.border{ border-top:0; padding-top: 0;}   .card{ margin-bottom: 0rem; padding-bottom: 2.8rem; height: auto;}   .card.withpicture{ height: auto; }   .card .card-body .title{ height: auto; max-height: none; font-size:2rem; line-height:2rem; }   .card .card-body .text{ height: auto; max-height: none; overflow: hidden; }   .card .btn-whishlist{     padding-top:0.4rem;   }    #articles .col-lg-5:last-child .p-1 .card{ border-bottom:0px; margin-bottom: 0rem;}   #articles .p-1{ padding:0; }    .nav{ justify-content: flex-start; padding-top:3rem; padding-bottom:3rem; }   .nav.mtb-3{ padding-top:3rem; padding-bottom:3rem; }   .nav a{     margin-left: 1rem; margin-right: 1rem;     background: -webkit-linear-gradient(45deg, var(--background-color1), var(--background-color2));     background-size: 200% auto;     background-position: left;     animation: AnimationGradient 4s linear infinite;     border: 1px solid #3E3E3E; padding: 0.4rem 1.4rem 0.4rem 1.4rem; border-radius: 1rem;   }    .article.p-7.plr-1{ padding:2rem; padding-left:1rem; padding-right:1rem;}   h1.article{ font-size: 2.5rem; line-height: 2.7rem; }    .plr-3{ padding-left: 2rem; padding-right: 2rem;}   .pt-3{ padding-top: 2rem;}    .colision-scroll .ml-1{padding-left: 0rem; margin-left: 2rem; margin-right:2rem; padding-bottom: 2rem;}    .colision-scroll.fixed{ position: static; top:auto; bottom:auto; }   .colision-scroll.absolute{ position: static; top:auto; bottom:auto; }    footer{ padding-bottom: 6rem; }    footer .p-3{ padding-top: 1em; padding-bottom: 0em; padding-left: 0em; padding-right: 0em; }   footer .pt-3{ padding-top: 2em; }   footer .pb-3{ padding-bottom: 0em; }   footer .pb-2{ padding-bottom: 1em; }   footer .pl-1{ padding-left: 0em; }   footer .pl-3{ padding-left: 0em; }   footer .pr-3{ padding-right: 0em; }   footer .break{ display: none; }   footer .apps{ padding-top: 1em; justify-content: space-between; }   footer .apps span svg{ width:80%;  }    .container-fluid{ padding-left: 5rem; padding-right: 5rem; }   header .container-fluid{ padding-left: 0rem; padding-right: 0rem; }   .container-fluid.max-width-bis{ padding-left: 0rem; padding-right: 0rem; }    .white-line{ width: calc(100% - 10rem); margin-top:-3.5rem; } } @media screen and (max-width: 768px) {    header .container-logo{ text-align: center; }   header .search .c-0{ flex: 0.4; }   header .search .c-1{ flex: 1; }   header .search .c-2{ flex: 0.4; justify-content: center; }   header .search .c-2 .wishlist-container-master{ margin-top:1rem; }   header .wishlist-container-master{ left:2rem; }   header .menu-burger svg{ margin-right:2rem; }    .slide .content-with-image{ padding-left:0rem; padding-right:0rem;}   .slide.withPicture .tohide{ display: none; }   .slide.withPicture .slide-over,.slide.withPicture .slide-title,.slide.withPicture .slide-text{ width: 100%; text-align:center; align-items: center; }    .category-description{ font-size: 0.8rem; }    #headcontent.container-fluid{padding-left: 2rem; padding-right: 2rem; }   #headcontent .category-mobile{ display: flex; }   #headcontent .category{ display: none; }   #headcontent .col-4{ flex:50%; }   #headcontent .dates{ padding-left:0; padding-right:0; padding-top:1.4rem; text-align:center; }   #headcontent .dates .text-right{ text-align:center; }     .breadcrumb{ display: block; margin-top: 0; padding-left:3rem; padding-right:3rem;}    .container-fluid.article-part{ padding: 0rem; margin:0; width: 100%; }   .article-content{ padding-right: 0; padding-left: 0; padding-bottom:0;}   .article-content .paddings{ padding-left: 3rem; padding-right:3rem;}   .essentialb{ border-radius: 0; border-left: 0; border-right: 0; padding-left: 3rem; padding-right:3rem;}    .col-lg-4 .ml-1{ margin:0; padding-left: 3rem; padding-right: 3rem; padding-bottom: 2rem; } } @media screen and (max-width: 576px) {   header .search .c-1 form{ width: 100%; min-width: 10rem; }   header .search .c-0 a{ font-size: 0.7rem; }    .slide .row{ margin-right:1px; margin-left: 1px;}   .slide .col-sm-auto{ padding:0;}   header .wishlist-container-master{ left:1rem; }   header .menu-burger svg{ margin-right:1rem; }    .text-big{ font-size: 1.8rem;}   h1.article.text-big{     font-size: 1.8rem; line-height: 1.8rem;   }    .hidden-desktop {     display: block !important;   }   .hidden-mobile {     display: none !important;   }   footer .apps{ display:inline; }   footer .apps span svg{ width:calc(50% - 1em);  }   .article-content .paddings{ padding-left: 2rem; padding-right:2rem;}   .container{padding-right:2rem; padding-left:2rem;}   .container-fluid{ padding-left: 2rem; padding-right: 2rem; }   #headcontent.container-fluid{padding-left: 2rem; padding-right: 2rem; }   #headcontent .container{padding-left: 0rem; padding-right: 0rem;}   .breadcrumb{ padding-left:2rem; padding-right:2rem;}   .white-line{ width: calc(100% - 4rem); margin-top:-3.5rem; }    .nav.mtb-3{ padding-top:1.2rem; padding-bottom:1.2rem; } } @media screen and (max-width: 375px) {   header .logo{ font-size:1.8rem;}   header .search .c-1 form{ width: 100%; min-width: 10rem; }   header .search .c-0 a{ font-size: 0.7rem; }    .slide .row{ margin-right:1px; margin-left: 1px;}   .slide .col-sm-auto{ padding:0;}   header .wishlist-container-master{ left:1rem; }   header .menu-burger{ text-align:center; }   header .menu-burger svg{ margin-right:0rem; }    .text-big{ font-size: 1.8rem;}   h1.article.text-big{     font-size: 1.8rem; line-height: 1.8rem;   }   .container{padding-right:2rem; padding-left:2rem;}   .container-fluid{ padding-left: 2rem; padding-right: 2rem; }   #headcontent.container-fluid{padding-left: 2rem; padding-right: 2rem; }   .breadcrumb{ padding-left:2rem; padding-right:2rem;}    .card .card-body .card-line .card-line-title{ min-width:145px; }   .card .card-body .card-line .card-line-explain .text-right{ text-align:left; } }  @media screen and (max-height: 667px) {   .slides .slide-over, .slides .slide-title h1{ padding-bottom: 1rem; }   .slides .slide-link.pt-2{ padding-top: 1rem; }   .slide-number{ bottom: 1rem;}    .slide .slide-title h1{ font-size: 2.5rem; line-height: 2.7rem;padding-bottom: 1rem; }    .menu li{ margin-top:0.2rem; margin-bottom:0.2rem; font-size:1.5rem; }   .menu li:first-child{ margin-bottom: 1rem; font-size:1rem;}   .menu li:last-child{ bottom: 4rem; } }  @media screen and (max-height: 667px) {   .menu { min-height: 400px; }   .menu li:last-child{ bottom: 0rem; } }