a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");
:root {--color-jaune:#F8C800;--color-bleu:#1F2A4E;--color-bleu-ciel:#40B4B0}

/*GENERAL*/
body{min-height:100vh;font-family:"Quicksand";color:var(--color-bleu)}
h1, h2, h3, h4 {font-family: 'Baloo 2', cursive}
p {font-size: 1rem;line-height: 1.6}
h2.title {position: relative; font-family: 'Baloo 2', cursive;font-size: 2rem;font-weight: 600;margin-bottom: 1em;padding-top: 4rem; display: flex;align-items: center;justify-content: center;gap: 20px}
.grid {display:grid;padding:5rem 5rem 0;grid-template-columns:repeat(12,1fr);z-index:1;position:relative;gap:1rem;max-width:1600px;margin:0 auto}

/*NAV*/
nav {display: flex;flex-direction: column;position: absolute;left: 0;right: 0}
nav > .menu {display: flex; justify-content: space-between;align-items: center; z-index: 1999;background: transparent;max-width: 100vw;padding: 2rem 2.5rem}
nav #logo {width: 200px}
nav #navigation {width: 60%;display: flex;justify-content: center}
nav #register {width: 22%;display: flex;justify-content: flex-end;align-items: center}
nav #register a {text-decoration: none;font-weight: 600}
a.cta {border: 1px solid #1F2A4E;border-radius: 30px;color: white;background: #1F2A4E;padding: 10px 20px;margin-left: 1rem;display: inline-block;text-decoration: none}
nav a img {max-width: 200px}
nav ul {display: flex;list-style-type: none;align-items: center}
nav ul li a{color:#fff;text-decoration:none;margin:0 1rem;font-size:1rem;text-transform:uppercase;position:relative;color:var(--color-bleu);font-weight: 600}

/*HERO SECTION*/
#hero {min-height: 700px;display: grid;-webkit-box-pack: center;justify-content: center;-webkit-box-align: center;align-items: center;z-index: 2;background-image: url(/photos/bg-header.png);background-repeat: no-repeat;background-size: cover}
#hero svg {position: absolute;top: -3rem;right: 0;z-index: 2}
#hero .grid {padding-top: 10rem}
#hero .content-left {grid-column: 1 / 9;padding-bottom: 25rem}
#hero .grid .image-wrapper {position: absolute;width: 100%;max-width: 1100px;left: calc(50% - 550px);bottom: -5rem; z-index: 999999999;box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);border-bottom-left-radius: 30px;border-bottom-right-radius: 30px}
#hero .grid .image-wrapper::before {content: '';width: 110px;height: 130px;background: url("/photos/vector-arrow-bleu.png");background-repeat: no-repeat;background-size: contain;position: absolute;top:-10rem;right: 0rem; z-index: 999999}
#hero .grid .image-wrapper::after {content: '';width: 200px;height: 300px;background: url("photos/fusee-mykorank.png");background-repeat: no-repeat;background-size: contain;position: absolute;top: -25rem;right: -4rem;z-index: 999999}
#hero .grid .image-wrapper img {max-width: 1100px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px}
#hero .image-blur {position: absolute;bottom: 0;left: 0;width: 100%;height: 35%; /* plus tu augmentes, plus le flou est étendu */pointer-events: none;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;background: linear-gradient(to bottom,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 100%);backdrop-filter: blur(1px)}
#hero h1 {font-family: 'Baloo 2', cursive;color:var(--color-bleu);font-size: 2.75rem;font-weight: 600;margin-bottom: 2rem;line-height: 60px}
#hero h1 em {color: var(--color-jaune);position: relative}
#hero h1 em.courbe-jaune::before {content: ''; position: absolute;background: url("/photos/courbe-jaune.png");width: 190px;height: 15px; display: block;background-size: cover;left: 0;bottom: 0}
#hero h2 {margin-bottom: 2rem;font-size: 24px;}
#hero ul.features-list {list-style-type: none;display: flex;flex-wrap: wrap;padding-left: 0;margin-bottom: 2rem}
#hero ul.features-list li {margin: 1rem 1.5rem 1rem 0;font-weight: 600;font-size: 1rem}
#hero ul.features-list li::before {content: '✓';margin-right: 10px;color: var(--color-jaune)}
a.cta-test {background-color: #f8c800;color: #1f2a4e;border: none;padding: 8px 16px;border-radius: 20px;font-size: 18px;font-weight: 600;cursor: pointer;transition: background-color .3s;font-family: 'Baloo 2', cursive;text-decoration: none;width: 220px;display: flex;justify-content: center;align-items: center}
.pricing-card > a.cta-test {margin: auto}
a.cta-test i, footer .why i {font-size: 1.5rem;padding-left: .5rem}
#hero .cta-hero > a:hover {background-color: #e6b400}
#hero em.essai {display: block;font-style: italic;font-size: .9rem;margin-top: 1rem} 


/*COMMENT CA MARCHE*/
#comment {padding-top: 5rem}
#comment .title {color: white}
#comment .grid .container {display: flex;justify-content: center;grid-column: 1 /13;flex-wrap: wrap}
#comment .box {margin: 1rem;border-radius:20px;box-shadow: 0px 0px 10px -4px #000000;padding: 2rem;position: relative;background: white;flex: 1 1 300px;max-width: 300px}
#comment .box::before {content: '';display: flex;width: 200px;height: 30px;position: absolute;top: -15px;right: 0;border-radius: 20px;align-items: center;justify-content: center;font-weight: 900}
#comment .box span {font-weight: 600;border: 2px solid #F8C800;font-size: 30px;padding: 3px 11px 21px 13px;width: 20px;height: 20px;display: block;border-radius: 100%}
#comment .box h3 {font-weight: 600;font-size: 1.5rem;margin: 1rem 0}
#comment .box.un span {padding: 3px 9px 21px 15px}
/*un deux trois*/
#comment .box.un::before {content: 'S';background: #F8C800}
#comment .box.deux::before {content: 'E';background: #40B4B0}
#comment .box.trois span, #comment .box.un span {color: #F8C800;border-color:#F8C800}
#comment .box.deux span {color: #40B4B0;border-color:#40B4B0}
#comment .box.trois::before {content: 'O';background: #F8C800}
#comment a.cta_form {display: inline-block;color: #1F2A4E;font-weight: 600;text-decoration: none;position: relative;padding-bottom: .25rem}
#comment a.cta_form:hover {text-decoration: underline}


/*VIDEO*/
#video {background-image: url(/photos/bg-header.png);background-repeat: no-repeat;background-size: cover;position: relative;overflow: hidden}
#video h2 {margin-bottom: .25rem}
#video h3, #benefit-trois .box-header h3 {text-align: center;color: #40B4B0;font-size: 1.5rem}
#video .container {grid-column: 3 / 11}
#video-thumbnail {position: relative;cursor: pointer}
#video-thumbnail img {border-radius:20px;width: 100%;vertical-align: middle}
.play-button {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background-color:#4e73df;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 10px rgba(78,115,223,.2);transition:.3s;z-index:10}
play-button:hover {transform: translate(-50%, -50%) scale(1.1)}
.duration-badge{position:absolute;bottom:16px;left:16px;background-color:rgba(0,0,0,.7);color:#fff;padding:5px 10px;border-radius:4px;font-size:.85rem;z-index:5}
.views-badge{position:absolute;bottom:16px;right:16px;background-color:#fff;padding:8px 16px;border-radius:50px;font-weight:500;box-shadow:0 2px 10px rgba(0,0,0,.1);z-index:5}
svg:not(:host).svg-inline--fa, svg:not(:root).svg-inline--fa {overflow: visible;box-sizing: content-box}
.svg-inline--fa {display: var(--fa-display, inline-block);height: 1em;overflow: visible;vertical-align: -.125em;margin-right: .25rem}
.me-2 {margin-right: .5rem}
#youtube-player-container {width: 100%;height: 0;padding-bottom: 56.25%;position: relative}
.d-none {display: none}

/*CONFIANCE*/
#confiance .grid {padding-top: 0;padding-bottom: 4rem}
#confiance .container {grid-column: 2 / 12;display: flex;justify-content: center}
#confiance .container img {max-width: 100px;margin: 0 1rem}


/*BENEFICE 1*/
#benefit-un {padding-top: 5rem}
#benefit-un .left {display: flex;justify-content: center;align-items: center;grid-column: 1/5}
#benefit-un svg {position: absolute; width: 40%;height: 450px}
#benefit-un .grid {padding:0 0 5rem 0}
#benefit-un .right {grid-column: 7 / 12;display: flex;flex-direction: column}
#benefit-un ul {list-style-type: none;padding-left: 5rem}
#benefit-un ul li {margin-bottom: 3rem;position: relative}
#benefit-un ul li::before {position: absolute;content: '1';background: #F8C800;height: 50px;width: 50px;border-radius: 100%;left: -5rem;top: .5rem;font-size: 24px;font-weight: 600;display: flex;justify-content: center;align-items: center}
#benefit-un ul li:nth-child(1)::before {content: '1'}
#benefit-un ul li:nth-child(2)::before {content: '2'}
#benefit-un ul li:nth-child(3)::before {content: '3'}
#benefit-un .left img {max-width: 400px}
#benefit-un h2, #benefit-trois h2 {padding-top: 0;justify-content: start}

/*BENEFICE 2*/
#benefit-deux .grid {padding: 0 5rem 0}
#benefit-deux .container, #tarifs .container {display: flex;justify-content: center;grid-column:1/13;flex-wrap: wrap}
#benefit-deux .box {color: white;padding: 3rem 0;margin: 0 2rem;position: relative;text-align: center}
#benefit-deux .box h3 {font-size: 26px;color: #F8C800;font-weight: 600}
#benefit-deux i {font-size: 3rem;color: #F8C800;left: -4rem}


/*BENEFICE 3*/
#benefit-trois .grid {padding-bottom: 5rem}
#benefit-trois .left {grid-column: 1/10}
#benefit-trois .benefits-container {display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
#benefit-trois .box {padding:1rem;position:relative;flex: 1 1 280px;max-width: 360px}
#benefit-trois .box::after {content:"";display:block;position:absolute;top:32px;right:0;width:2px;height:calc(100% - 64px);background-color:#F8C800;opacity: .2}
#benefit-trois .box::before {content: "";display: block;position: absolute;bottom: -.5rem;left: 32px;width: calc(100% - 64px);height: 2px;background-color: #F8C800;opacity: .2}
#benefit-trois .box-header {display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
#benefit-trois .box-header i {font-size:1.5rem;color:#1F2A4E}
#benefit-trois .right {grid-column: 11/12;display: flex;justify-content: center;align-items: center}
#benefit-trois .right img {max-width: 300px}


/*TARIFS*/
#tarifs,#comment,#benefit-deux{background:linear-gradient(90deg,var(--color-bleu) 0,var(--color-bleu-ciel) 100%)}
#tarifs h2{color:#fff}
#comment .grid{padding-top:2rem;padding-bottom:0}
#tarifs .grid{padding:5rem 2rem 2rem}
#tarifs .container {display: flex;flex-wrap: wrap;justify-content: center;align-items: stretch}
#tarifs .keywords-input{background:rgba(255,255,255,.1);border:2px solid #fff;border-radius:8px;padding:12px 16px;color:#fff;font-size:2rem;font-weight:700;width:120px;text-align:center;backdrop-filter:blur(10px)}
#tarifs .keywords-input:focus{outline:0;border-color:#40B4B0;box-shadow:0 0 20px rgba(125,211,252,.3)}
#tarifs .keywords-text{color:var(--color-bleu-ciel);font-weight:600}
.switch-container{display:flex;justify-content:center;align-items:center;gap:20px}
.switch-label{font-size:1.2rem;color:#fff}
.switch{position:relative;display:inline-block;width:120px;height:50px}
.toggle,.toggle:before{position:absolute;transition:.3s}
.switch input{opacity:0;width:0;height:0}
.toggle{cursor:pointer;top:0;left:0;right:0;bottom:0;border-radius:25px;border:2px solid rgba(255,255,255,.3)}
.toggle:before{content:"";height:38px;width:38px;left:4px;bottom:4px;background:#fff;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.2)}
input:checked+.toggle{background:#40B4B0;border-color:#40B4B0}
input:checked+.toggle:before{transform:translateX(70px)}
.switch-label.active{color:#40B4B0;font-weight:700}
.pricing-card{margin:1rem;background:rgba(255,255,255,.1);border-radius:20px;padding:2rem 1rem;text-align:center;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);transition:transform .3s,box-shadow .3s;flex: 1}
.pricing-card .none{display:none}
.pricing-card em.promo{display:inline-block;position:relative;top:0;right:0;background:#F8C800;padding:.5rem 1rem;border-radius:20px;font-weight:500;font-size:.75rem}
.pricing-card .frequence{background:#40B4B0;padding:.5rem 1rem;border-radius:20px;display:inline-block;font-weight:700}
.pricing-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,.2)}
.pricing-card ul{list-style-type:none;max-width:100%;margin:1rem auto 3rem;display:block;padding:0;text-align:center}
.pricing-card ul li{color:white;margin:.8rem auto;padding-left:0;position:relative;font-size:.9rem;text-align:center}
.pricing-card ul li::before{content:'✓';color:#40B4B0;position:relative;display:inline-block;height:16px;width:16px;font-size:.5rem;font-weight:bold;margin-right:.5rem;line-height:14px;text-align:center}
.price{font-size:4rem;font-weight:600;color:#7dd3fc;margin:0 auto 1rem}
.price.custom-quote{font-size:1.5rem;color:#F8C800}
.price-period{font-size:2rem;color:#fff;margin-bottom:2rem}
.divider{height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);margin:2rem 0}
#tarifs button.cta{position:relative;top:inherit;right:inherit;margin-top:1rem}
#tarifs em.framer{display:block;font-size:.75rem;font-style:italic;margin-top:1rem;color:#F8C800}
.pricing-explanation{text-align:center;color:#fff;margin:2rem auto;max-width:800px}
.pricing-explanation p{font-size:1.2rem;margin:.5rem 0}
.pricing-explanation .small-text{font-size:.9rem;color:rgba(255,255,255,.8);font-style:italic}
.badge{display:inline-block;background:#F8C800;color:#001F54;padding:.3rem .8rem;border-radius:15px;font-weight:700;font-size:.9rem;margin-bottom:.5rem}
.popular-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:#40B4B0;color:#fff;padding:.5rem;border-radius:20px;font-weight:700;font-size:.85rem;box-shadow:0 4px 15px rgba(64,180,176,.4)}
.pricing-card.popular{border:2px solid #40B4B0;box-shadow:0 10px 40px rgba(64,180,176,.3);transform:scale(1.05)}
.keyword-info{color:#7dd3fc;font-size:.9rem;margin:.5rem 0 1rem;font-weight:500}
.pricing-note{text-align:center;color:#fff;margin:3rem auto 0;max-width:800px;padding:2rem;background:rgba(255,255,255,.1);border-radius:15px;backdrop-filter:blur(10px)}
.pricing-note p{margin:.5rem 0;font-size:1rem}
.pricing-explanation strong,.pricing-note strong{color:#F8C800}
.pricing-note .custom-pricing{margin-top:1rem;font-size:.95rem}
.pricing-note a{text-decoration:underline;font-weight:600;color:#fff}
.pricing-note a:hover{color:#7dd3fc}
@media (max-width:767px){.pricing-card{min-width:100%;max-width:100%;margin:1rem 0}.pricing-card.popular{transform:scale(1)}.pricing-card ul li{font-size:.85rem}}


/*FAQ*/
#faq {position: relative;overflow: hidden}
#faq > svg {position: absolute;top: 0;right: 5rem}
#faq > svg.bleu-ciel {top: 5rem}
#faq > svg.bleu {top: 15rem; right: 0}
#faq > svg.jaune {top: 25rem; right: -5rem}
#faq .grid {padding-top: 0;padding-bottom: 4rem}
#faq h2 {grid-column: 1 / 8;justify-content: flex-start}
#faq .faq-container {grid-column: 1 / 10;background: white;border-radius: 15px;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);overflow: hidden}
.faq-title{text-align:center;color:#fff;font-size:2.5rem;margin-bottom:40px;font-weight:300}
.faq-item{border-bottom:1px solid #e0e0e0}
.faq-item:last-child{border-bottom:none}
.faq-question{display:none}
.faq-label{font-family: 'Baloo 2', cursive;display:block;padding:25px 70px 25px 30px;background:#fff;cursor:pointer;font-size:1.25rem;font-weight:600;color:#1F2A4E;position:relative;transition:.3s;user-select:none}
.faq-label:hover{background:#f8f9fa;color:#40B4B0}
.faq-label::after{content:'+';position:absolute;right:30px;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:700;color:#40B4B0;transition:transform .3s}
.faq-answer{max-height:0;overflow:hidden;background:#f8f9fa;transition:max-height .4s,padding .4s}
.faq-answer-content{padding:0 30px;color:#1F2A4E;line-height:1.6;font-size:1rem}
.faq-question:checked+.faq-label{background:#40B4B0;color:#fff}
.faq-question:checked+.faq-label::after{content:'−';transform:translateY(-50%) rotate(180deg);color:#fff}
.faq-question:checked~.faq-answer{max-height:300px;padding:25px 0}
.faq-answer.long{transition:max-height .6s,padding .6s}
.faq-question:checked~.faq-answer.long{max-height:500px}


/*AVIS*/
#avis {margin-bottom: 5rem}
#avis .grid {padding-top: 0;padding-bottom: 0}
#avis .grid .container {display: flex;grid-column: 1 /13;flex-wrap: wrap;justify-content: center}
#avis .box {margin: .5rem;border-radius: 20px;box-shadow: 0px 0px 10px -4px #000000;padding: 2rem;position: relative;width: 290px;transform: rotate(2deg)}
#avis .box.gris {box-shadow: none;background-color: #F2F2F2;transform: rotate(-2deg)}
#avis img {border-radius:100%;width: 80px;height: 80px}
#avis .englobe {display: flex;margin-bottom: 2rem;gap:1rem}
#avis .englobe .perso {padding-left: 1rem;display: flex;flex-direction: column;justify-content: center}
#avis .englobe h3 {font-size: 18px;font-weight: 500}
#avis .englobe h4 {font-size: 16px;font-style: italic}


/*MENTIONS LEGALES + CGV */
.legales #hero {min-height: 400px;}
.legales #hero .content-left {grid-column: 1/13;padding: 0}
.legales #hero .content-left h1 {text-align: center}
.legales #content .container {grid-column: 1/13;margin-bottom: 5rem}
.legales h2 {color:#1F2A4E;margin-top:30px;margin-bottom:15px;font-size:1.4em;border-left:4px solid #40B4B0;padding-left:15px}
.legales h3{color:#40B4B0;margin-top:20px;margin-bottom:10px;font-size:1.2em}
.legales h4 {margin: 1rem 0}
.legales .contact-info {background: #ecf0f1;padding: 20px;border-radius: 5px;margin: 20px 0}
.legales .update-info {text-align: center;font-style: italic;margin-top: 40px;padding-top: 20px}
.legales ul {margin: 15px 0;padding-left: 20px}
.legales li {margin-bottom: 5px;}



/*FOOTER*/
footer {min-height: 600px; background: url("/photos/bg-jaune-vector.png");background-repeat:no-repeat;background-size: cover;position: relative;display: flex;flex-direction: column;padding: 0 2rem;justify-content: flex-end}
footer::before {content: '';width: 150px;height: 220px;background: url("photos/fusee-mykorank.png");background-repeat: no-repeat;background-size: contain;position: absolute;bottom: 10rem;right: 12rem;z-index: 999999}
.remi, .newsletter, .subfooter {text-align: center;font-weight: 500;max-width: 600px;margin:2rem auto}
.remi {max-width: 600px}
.remi img {max-width: 150px;border-radius:100%;margin-bottom: 1rem}
.remi p {font-style: italic}
footer .why i {position: absolute}
/*newsletter*/
.newsletter span {display: block;text-align: center;font-family: 'Baloo 2', cursive;font-weight: 600;font-size: 2rem}
.newsletter .resume {margin: 0 0 1rem}
.form-container{position:relative;display:inline-block;width:75%;max-width:75%}
input[type=email]{width:100%;padding:10px 145px 10px 20px;border:1px solid #ddd;border-radius:25px;font-size:18px;outline:0;box-sizing:border-box;background-color:#fff;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family: 'Baloo 2', cursive}
input[type=email]:focus {border-color:#1F2A4E}
button {position:absolute;right:.3rem;top:50%;transform:translateY(-50%);background-color:#f8c800;color:#1f2a4e;border:none;padding:8px 16px;border-radius:20px;font-size:18px;font-weight:600;cursor:pointer;transition:background-color .3s;font-family: 'Baloo 2', cursive}
button:hover{background-color:#e6b400}
.success-message{background-color:#d4edda;color:#155724;padding:15px;border-radius:5px;border:1px solid #c3e6cb;margin-top:20px;font-size:14px;opacity:0;transform:translateY(-10px);transition:.3s;display: none}
footer .success-message.show{opacity:1;transform:translateY(0);display: block}
.form-container.submitted{opacity:.5;pointer-events:none}
/*mention legales*/
.subfooter img {max-width: 300px}
footer .legales {display: flex;justify-content: center;padding: 0 20px;margin: 1rem 0}
footer .legales a {color:#1F2A4E; text-decoration:none;font-size: 12px;margin: 0 1rem}


@media (max-width: 1200px) {
	/*general*/
	.grid {padding: 5rem 2.5rem}
	/*NAV*/
	nav #navigation {display: none}
	nav > .menu {flex-direction: column}
	nav #register {width: auto}
	#hero svg {top: -10rem}
	/*HERO*/
	#hero .grid {padding-top: 12rem}
	#hero em.courbe-jaune {display: block;width: max-content;margin: auto}
	#hero .content-left {grid-column: 1/13;text-align: center;padding-bottom: 0}
	#hero ul.features-list {justify-content: center}
	.cta-hero {display: flex;justify-content: center;flex-direction: column;align-items: center}
	#hero .grid .image-wrapper::after {width: 100px;height: 140px;top: -13rem;left: 50%}
	#hero .grid .image-wrapper {grid-column: 1 / 13;margin-top: 0rem;position: relative;left: inherit}
	#hero .grid .image-wrapper img {max-width: 100%}
	#hero .grid .image-wrapper::before {display: none}
	#hero .grid .image-wrapper::after {right: 0;top: -10rem;left: inherit} 
	/*comment*/
	#comment {margin-top: -5em}
	/*benefit trois*/
	#benefit-trois .left {grid-column: 1/13;text-align: center}
	#benefit-un h2, #benefit-trois h2, #benefit-trois .benefits-container {justify-content: center}
	/*faq*/
	#faq h2 {grid-column: 1/13;justify-content: center;text-align: center}
	#faq .faq-container {grid-column: 1/13}
	/*footer*/
	footer::before {left: inherit;bottom: 10rem;right: 1rem;width: 100px;height: 140px}

@media (max-width:768px) {
	#hero .grid .image-wrapper::after, footer::before {width: 80px;height: 115px}
	#hero .grid .image-wrapper::after {right: 0}
	/*tarifs*/
	h2.title {flex-direction: column;align-items: center;gap: 10px}
	.input-group {display: flex;align-items: center;gap: 10px}
	/*footer*/
	.form-container {width: 100%;max-width: 100%}
	footer .legales {flex-direction: column;align-items: center}
	footer .legales a {margin:.5rem 1rem}
}