.actu.home {background:none;margin-top:10vw;}
.actu.home h2 {color:#000;line-height:1em;margin:auto;width:80%;}
@media(max-width:768px){
.actu.home h2 {padding-bottom:24px;}
.actu.home h2 br {display:none;}
}
.actu.home h2 span {opacity:0.65;font-family:Agbalumo;}
.actu.home h2 .emoji {opacity:1}
.actu.home .actu_list {background:none;}
.actu.home .block_radius_bottom, .actu.home .hide_pc_tablet {display:none;opacity:0}
.actu.home .actu_list_item {margin:0 0 5vw 0;box-shadow:0 10px 10px 0 rgba(0,0,0,0.05)}

iframe {border-radius:20px}
.c-white {color:#fff}

#tools_home_cs{position:fixed;top:50%;right:36px;transform:translateY(-50%);display:flex;flex-direction:column;gap:15px;z-index:101;transition: all 0.5s;}
#tools_home_cs .hover,#tools_home_cs>div{display:flex;align-items:center;position:relative;cursor:pointer!important}
#tools_home_cs .call_to_action_icon,#tools_home_cs .call_to_action_icon a{display:flex;align-items:center;justify-content:center;width:52px;height:52px;background:#fff;border-radius:120px;border:0!important;box-shadow:0 6px 20px rgba(0,0,0,0.08)}
#tools_home_cs .call_to_action_icon img{width:48px;height:48px;display:block;border:0!important;cursor:pointer!important;padding:0}
#tools_home_cs .icon-text{background:rgba(0,0,0,0.5);color:#fff;font-size:14px;padding:8px 12px;border-radius:50px;white-space:nowrap;position:absolute;right:62px;opacity:0;transform:translateX(10px);transition:all .3s ease;pointer-events:none}
#tools_home_cs .hover:hover .icon-text,#tools_home_cs>div:hover .icon-text{opacity:1;transform:translateX(0);pointer-events:auto}
#tools_home_cs #icon-comment {background:#00e4df;}
@media(max-width:768px){
#tools_home_cs{gap:0;position:fixed;top:auto;right:auto;bottom:5vw;left:50%;transform:translateX(-50%) translateY(12px);display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;width:90vw;height:64px;padding:10px!important;background:#fff;border:1px solid #ddd;border-radius:9999px;box-shadow:0 6px 20px rgba(0,0,0,0.08);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s;will-change:opacity,transform;z-index:101}
#tools_home_cs.is-visible{opacity:1;transform:translateX(-50%) translateY(0);visibility:visible;pointer-events:auto;transition:opacity .28s ease,transform .28s ease,visibility 0s}
#tools_home_cs .hover,#tools_home_cs>div{flex-direction:column;align-items:center;justify-content:center;position:static;}
#tools_home_cs .call_to_action_icon,#tools_home_cs .call_to_action_icon a{width:36px;height:36px;background:transparent;border-radius:120px;border:0!important;position:relative;/*! top:-3px; */box-shadow:0 0 0}
#tools_home_cs .hover{width:20%;min-width:20%;}
#tools_home_cs .call_to_action_icon img{width:32px;height:32px;position:relative;top:-4px}
#tools_home_cs .icon-text{position:static;background:none;color:#333;font-size:9px;padding:0;border-radius:0;opacity:1;transform:none;pointer-events:auto;margin-top:-8px!important}
#tools_home_cs #icon-comment {background:none;}
}

#logo_bottom_footer {position:absolute;bottom:16px;text-align:center;width:100%}
#logo_bottom_footer img {width:160px;text-align:center;;display:inline}

.init {background:#37dfdf;width:100vw;height:100dvh;position:absolute;top:0;left:0;z-index:1}

#animation_05 .line-back{position:absolute;width:100vw;height:100dvh;top:0;left:0;background-image:url(https://centreservicesdev.fr/assets/img/services/line-back-fr.png);background-size:100%;background-position:right top;background-repeat:no-repeat}
#white_background:after{content:'';position:absolute;width:300vw;height:200vh;background:#f5f5f5;border-radius:0;bottom:0;left:-100vw;opacity:1!important;display:block!important}
#white_background{position:relative;min-height:0!important;gap:0!important;padding:0;padding-bottom:5vw;margin:0 0 5vw 0;z-index:0}
@media(max-width:768px){#white_background{display:none}}
#facture_divisee_2{background-color:#fff;background-image:url(https://centreservicesdev.fr/assets/img/famille_heureuse.jpg);background-repeat:no-repeat;background-position:center left;background-size:cover;color:#fff}
#ouvrir_agence{background-color:#fff;background-image:url(https://franchise.centreservices.fr/assets/img/flotaison-01.jpeg);background-repeat:no-repeat;background-position:center;background-size:cover;color:#fff}
#reservation_en_ligne{background-color:#fff;background-image:url(https://centreservicesdev.fr/assets/img/reservation.jpg);background-repeat:no-repeat;background-position:top center;background-size:cover;color:#fff}
#visite_evaluation{--aniDur:12s;--aniSIze:70%;--aniEase:cubic-bezier(.65,.05,.36,1);padding:0;overflow:hidden;display:flex;justify-content:center;align-items:center;background-color:#00e4df}
#visite_evaluation .background{pointer-events:none!important;position:absolute;bottom:0;left:0;width:100%;height:100%;opacity:1;background-color:#00e4df;background-image:url(https://centreservicesdev.fr/assets/img/decor-01.png);background-repeat:no-repeat;background-position:bottom left;background-size:auto var(--aniSIze);animation:bg-lg var(--aniDur) var(--aniEase) infinite;will-change:background-position,opacity}
#visite_evaluation .caption{position:absolute;left:0;right:0;bottom:100px;width:100%;height:100%;z-index:3;color:#000;text-align:center;
animation:caption-lg var(--aniDur) var(--aniEase) infinite;will-change:opacity;display:flex;justify-content:center;align-items:center}
#visite_evaluation .caption .btn{color:#000;background:#fff;position:relative;cursor:pointer}
#visite_evaluation .car{pointer-events:none;position:absolute;bottom:0;left:0;width:100%;height:100%;opacity:1;background:url(https://centreservicesdev.fr/assets/img/voiture.png) no-repeat bottom center/auto var(--aniSIze);animation:car-lg var(--aniDur) var(--aniEase) infinite;will-change:left,opacity}

@keyframes bg-lg {
  0%   {opacity:1;background-position:bottom left}
  10%   {opacity:1;background-position:bottom left}
  60%  {opacity:1;bbackground-position:bottom right}
  90%  {opacity:1;background-position:bottom right}
  95%  {opacity:0;background-position:bottom right}
  96%  {opacity:0;background-position:bottom left}
  98%  {opacity:1;background-position:bottom left}
  100% {opacity:1;background-position:bottom left}
}

@keyframes car-lg {
  0%   {opacity:1; left:0}
  10%  {opacity:1; left:0}
  40%  {opacity:1; left:-70px}
  60%  {opacity:1; left:-35px}
  90%  {opacity:1; left:0}
  95%  {opacity:0; left:0}
  98%  {opacity:1; left:0}
  100% {opacity:1; left:0;}
}

@keyframes caption-sm {
0%   {bottom:100px}
50%  {bottom:100px}
60%  {bottom:100px}
70%  {bottom:100px}
80%  {bottom:0}
100% {bottom:0}
}


@media (max-width:768px) {
  
  	#visite_evaluation {--aniSIze:60%;}
	#visite_evaluation .caption {opacity:1!important;bottom:90px;line-height:1em;}
	#visite_evaluation .caption a {line-height:1em;border:2px solid #fff!important;}
	#visite_evaluation .caption    {animation-name:caption-sm;}
	#visite_evaluation .caption .title {font-family:Agbalumo!important;color:#fff;}
	#visite_evaluation .car        {animation-name:car-sm; left:20%;}
	#visite_evaluation .background {animation-name:bg-sm;}

	@keyframes bg-sm {
		0%   {opacity:1; background-position:bottom left}
		60%  {opacity:1; background-position:bottom right}
		90%  {opacity:1; background-position:bottom right}
		95%  {opacity:0; background-position:bottom right}
		96%  {opacity:0; background-position:bottom left}
		98%  {opacity:1; background-position:bottom left}
		100% {opacity:1; background-position:bottom left}
	}

	@keyframes car-sm {
		0%   {bottom:0;opacity:1;left:20%}
		10%  {bottom:0;opacity:1;left:20%}
		40%  {bottom:0;opacity:1;left:-25%}
		60%  {bottom:0;opacity:1;left:-20%}
		90%  {bottom:0;opacity:1;left:-20%}
		95%  {bottom:0;opacity:0;left:-20%}
		96%  {bottom:0;opacity:0;left:20%}
		98%  {bottom:0;opacity:1;left:20%}
		100% {bottom:0;opacity:1;left:20%}
	}
 
	@keyframes caption-sm {
		0%   {bottom:100px}
		50%  {bottom:100px}
		60%  {bottom:100px}
		70%  {bottom:100px}
		80%  {bottom:100px}
		100% {bottom:100px}
	}
	
}

@media (prefers-reduced-motion:reduce) {
  #visite_evaluation .background,
  #visite_evaluation .caption,
  #visite_evaluation .car {animation:none!important;}
  #visite_evaluation .caption {opacity:1;}
}


#animation_05 {z-index:100;height:110dvh;padding:0 5vw;position:relative;}
#animation_05 sup {font-size:0.5em}
#animation_05 h2 {;line-height:1em;margin-bottom:10px;color:#243da7}
#animation_05 p {width:80%;margin:auto;color:#555}
#animation_05 a.plus {color:#00c2ff}
#links {margin-top:24px;max-width:500px;margin:24px auto}
#links a {box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1);background:#fff;padding:16px 24px;border-radius:48px;gap:24px;display:inline-block;margin:8px;font-weight:bold;font-size:18px;color:#000;cursor:pointer}
@media(max-width:768px) {
#animation_05 {height:inherit}
}

#faqs {background:rgba(0, 0, 0, 0.4);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff}
#faqs .width_100 {display:block;padding:min(5vw, 72px);padding-bottom:24px;width:70%}
#faqs h2{padding:0 0 6px 0}
#faqs h3{font-size:0.5em;margin-bottom:4px}
#faqs a{color:#00c2ff;margin-top:6px;display:inline-block}
#faqs h2 sup{font-size:0.5em;position:relative;top:-6px;margin-left:2px}
#faqs>div{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding:min(5vw, 72px);padding-top:0}
#faqs>div>div{margin:24px 0 0 0;border-radius:8px}
@media(max-width:768px){
#faqs>div{grid-template-columns:1fr;gap:0;padding:0}
#faqs .width_100{gap:0;padding:0;width:100%;border-bottom:1px solid rgba(255,255,255,0.2);padding-bottom:24px}
}

#nous_rejoindre {background:rgba(255, 255, 255, 0.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 10px 20px rgba(0,0,0,0.1)}
#nous_rejoindre .width_100{display:block;padding:min(5vw, 72px);padding-bottom:24px}
#nous_rejoindre h2{padding:0 0 6px 0}
#nous_rejoindre h3{font-size:0.5em;margin-bottom:4px}
#nous_rejoindre a{color:#0090ff}
#nous_rejoindre h2 sup{font-size:0.5em;position:relative;top:-6px;margin-left:2px}
#nous_rejoindre > div{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding:min(5vw, 72px);padding-top:0}
#nous_rejoindre > div > div{margin:24px 0 0 0;border-radius:8px}
@media(max-width:768px){
#nous_rejoindre > div{grid-template-columns:1fr;gap:0;padding:0}
#nous_rejoindre .width_100{gap:0;padding:0;width:100%;border-bottom:1px solid rgba(0,0,0,0.2);padding-bottom:24px}
}

.next-btn{position:absolute;bottom:64px;left:10vw;margin:10px;width:64px;height:64px;border-radius:50%;border:none;background:rgba(0,0,0,0) url('https://centreservicesdev.fr/assets/img/icons/arrow_forward_24dp_FFF.svg') no-repeat center/24px;display:grid;place-items:center;cursor:pointer;z-index:112;outline:none}
.next-btn svg{position:absolute;inset:0;transform:rotate(-90deg)}
.next-btn circle{fill:none;stroke:#fff;stroke-width:3px;stroke-dasharray:314;stroke-dashoffset:314;transition:none;will-change:stroke-dashoffset}
@keyframes ringNext{to{stroke-dashoffset:0}}
.next-btn:hover{background-color:rgba(0,0,0,0)}
@media(max-width:768px){
.next-btn{bottom:24px;left:24px;width:52px;height:52px}
}

.market_bloc.ecologie {background:url('https://centreservicesdev.fr/assets/img/respect-environnement.jpg') no-repeat right center/cover;min-height:60dvh;display:flex;align-items:center}
.market_bloc.ecologie > div {display:flex;flex-direction:column;justify-content:center;gap:16px;color:#fff;width:clamp(320px,40%,600px);padding:0 0 0 min(5vw, 72px)}
.market_bloc.ecologie h3 {font-family:Agbalumo;font-size:3vw;line-height:.9em}
.market_bloc.ecologie span {font-family:Agbalumo;color:#fff300}
.market_bloc.ecologie p {width:80%}
@media(max-width:768px){
.market_bloc.ecologie {background:url('https://centreservicesdev.fr/assets/img/respect-environnement.jpg') no-repeat center/cover}
.market_bloc.ecologie h3 {font-size:28px;line-height:1.1em}
.market_bloc.ecologie > div {width:90%;;padding:0}
}

.box_marketing.franchise {position:relative;aspect-ratio:9 / 16;overflow:hidden}
.box_marketing.franchise h2 {font-family:Agbalumo;line-height:36px;margin-bottom:16px;font-size:2em;line-height:1em}
.box_marketing.franchise h3 {font-size:12px;background:rgba(0,0,0,0.7);width:auto;display:inline-block;float:left;padding:3px 6px;border-radius:5px}
.box_marketing.franchise button, .box_marketing.youtube_link a:last-child {font-weight:bold;border-radius:48px;display:block;position:absolute;bottom:84px;height:auto;padding:12px;top:inherit;
margin:auto;transform:translateX(50%);width:50%;left:0;font-size:15px;text-align:center;margin-top:0!important}
.block_marketing {padding-right:0!important;overflow-y:hidden}
.box_marketing.franchise button:hover {bottom:86px}
.box_marketing.youtube_link .overlay {background:none;position:absolute;width:100%;height:100%;left:0;top:0;}
.box_marketing.youtube_link {background:url('https://centreservicesdev.fr/assets/img/youtube-background.jpg') no-repeat center/cover} 
.box_marketing.youtube_link a {background:#f00;color:#fff}

.box_marketing.franchise-197 {background:url('https://centreservicesdev.fr/assets/img/franchises/interview-bordeaux-est.jpg') no-repeat center/cover}
.box_marketing.franchise-173 {background:url('https://centreservicesdev.fr/assets/img/franchises/interview-annecy.jpg') no-repeat center/cover}
.box_marketing.franchise-144 {background:url('https://centreservicesdev.fr/assets/img/franchises/interview-rueil.jpg') no-repeat center/cover}
.box_marketing.franchise-149 {background:url('https://centreservicesdev.fr/assets/img/franchises/interview-malakoff.jpg') no-repeat center/cover}
.box_marketing.franchise-190 {background:url('https://centreservicesdev.fr/assets/img/franchises/interview-brunoy.jpg') no-repeat center/cover}
.box_marketing.franchise-126 {background:url('https://centreservicesdev.fr/assets/img/franchises/interview-lagny.jpg') no-repeat center/cover}
.box_marketing.franchise-188 {background:url('https://centreservicesdev.fr/assets/img/franchises/interview-valenceiennes.jpg') no-repeat center/cover}

.box_marketing.franchise-173 button {background:#16dedd;color:#fff}
.box_marketing.franchise-197 button {background:#bf74a2;color:#fff}
.box_marketing.franchise-144 button {background:#a19ebb;color:#fff}
.box_marketing.franchise-149 button {background:#debb8f;color:#fff}
.box_marketing.franchise-190 button {background:#e89998;color:#fff}
.box_marketing.franchise-126 button {background:#bcc1d5;color:#fff}
.box_marketing.franchise-188 button {background:#91ddaf;color:#fff}

@media (max-width:768px) {
.box_marketing.franchise h2 {font-size:1.7em;line-height:1em;margin-bottom:10px}
.box_marketing.franchise {padding:30px}
.box_marketing.franchise button, .box_marketing.youtube_link a:last-child {font-size:16px;bottom:68px}
.box_marketing:first-child.franchise {margin-left:min(5vw, 36px)}
.box_marketing:last-child.franchise {margin-right:min(5vw, 36px)}
.block_marketing {padding-right:5vw!important;scrollbar-gutter:stable both-edges}
.box_marketing.franchise button:hover {bottom:68px}
}

#search_agence{position:relative}
#input_search_agence{padding-right:28px}
#clear_search{background:rgba(0,0,0,.4) url('https://centreservicesdev.fr/assets/img/icons/close_24dp_FFF.svg') no-repeat center/16px;position:absolute;right:18px;top:50%;transform:translateY(-50%);border:none;font-size:0;line-height:1;cursor:pointer;color:#999;width:24px;height:24px;border-radius:24px}
#clear_search:hover{color:#333}
#search_results{position:relative;top:6px;left:0;right:0;z-index:9999;max-height:220px;overflow:auto;display:block;box-shadow:0 25px 30px rgba(0,0,255,0.1)}
#search_results.open{border-radius:30px;background:#fff;padding:20px}
#search_results .search-item{display:flex;justify-content:space-between;gap:10px;padding:10px;cursor:pointer;border-radius:12px}
#search_results .search-item:hover,#search_results .search-item:focus{background:rgba(0,0,0,.05);outline:none}
#search_results .search-item .ville{font-weight:600;color:#0f172a}
#search_results .search-item .cp{color:#475467}
#search_agence {background:#fff;height:60px;width:600px;max-width:80%;margin:12px auto 8px auto;border-radius:80px}
#icon_search_agence {height:100%;float:left;width:60px}
#icon_search_agence span {height:100%;float:left;width:60px;background:url('https://centreservicesdev.fr/assets/img/icons/fmd_good.svg') no-repeat center center / 34px}
#input_search_agence {height:100%;float:left;width:calc(100% - 60px);border:none;background:none;outline:none;font-size:1.1em}

/* === GÉNÉRAL === */
.animation-block {position:relative;height:300dvh;overflow:visible}
.scroll-text-container {position:sticky;top:20dvh;padding:10dvh 0;text-align:center;z-index:2;opacity:0;transition:opacity 1s ease-in-out}
.scroll-text-container.visible {opacity:1}
.scroll-title {font-size:2.5rem;font-weight:bold;line-height:1.4;max-width:80%;margin:auto;padding:0}
.scroll-bg-image {transition:transform 0.2s ease-out}
.scroll-text-container small,  #bottom_footer small {font-size:12px;opacity:0.65;font-style:italic}
.scroll-text-container small img,  #bottom_footer small img {display:inline;position:relative;top:4px;height:16px;width:16px}
.scroll-text-container .btn, #bottom_footer .btn {background:linear-gradient(90deg, #00bfff 10%, #0081ff 90%, #0081ff);color:#fff;padding:18px 24px;border-radius:36px;font-size:16px;font-weight:bold;cursor:pointer;margin:16px 0 8px 0;display:inline-block}

/* === ANIMATION 01 === */
#animation_00 {background:#fcd995;z-index:1;height:110dvh}
#animation_00 .scroll-title {color:white;font-family:Agbalumo;font-size:5vw;margin-bottom:6px}
#animation_00 p, #animation_00 a {color:#000;font-weight:bold}
#animation_00 a:hover {text-decoration:underline}
#animation_00 .group{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:36px;overflow-x:auto;padding:24px 0 24px 0}
#animation_00 .group>div{flex:0 0 auto;text-align:center}
#animation_00 .group>div img{width:128px;margin:auto}

@media(max-width:768px) {
#animation_00 {height:inherit;padding:10vw}
#animation_00 .scroll-text-container {padding:0;height:inherit;padding:36px 0}
#animation_00 .group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;padding-top:48px;overflow:visible;padding:24px}
#animation_00 .group>div h3{font-size:14px;line-height:1.25;margin-top:8px}
}

/* === ANIMATION 01 === */
#animation_01 {background:linear-gradient(135deg, #007bff, #00c3ff);z-index:1;height:110dvh;padding-bottom:220px}
#animation_01 .scroll-title {color:white}
#animation_01 .scroll-bg-image {position:absolute;top:100%;left:0;width:100vw;height:100vw;transform:translate(-100%, 0%);z-index:1;pointer-events:none}
#animation_01 small {color:#fff!important;opacity:1}
#animation_01 .group{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:24px;overflow-x:auto;padding:0 0 24px 0}
#animation_01 .group>div{flex:0 0 auto;text-align:center}
#animation_01 .group>div img{width:92px;margin:auto}

@media(max-width:768px) {
#animation_01 {height:inherit;;padding:0}
#animation_01 .scroll-text-container {padding:0;height:inherit;padding:160px 0 180px 0}
#animation_01 .group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;padding-top:48px;overflow:visible;padding:24px}
#animation_01 .group>div{padding:12px 8px}
#animation_01 .group>div h3{font-size:14px;line-height:1.25;margin-top:8px}
}

/* === ANIMATION 03 === */
#animation_03 {position:relative;overflow:visible;z-index:0;height:400dvh;}
#animation_03::before {content:"";position:fixed;inset:0;background:#f3f0eb url('https://centreservicesdev.fr/assets/img/salon-range-03.jpg') no-repeat bottom /cover;z-index:0;pointer-events:none}
#animation_03 .left-curtain {position:fixed;inset:0;background:#d2cdc9 url('https://centreservicesdev.fr/assets/img/salon-derange-04.jpg') no-repeat bottom /cover;z-index:1;pointer-events:none;will-change:clip-path;clip-path:inset(0 0 0 0)}
#animation_03 .scroll-text-container {position:sticky;top:0;z-index:2;text-align:center;}
#animation_03 h2 {position:relative;z-index:11;color:rgba(0,0,0,0.6);}

#animation_03::after {
  content:"";
  position:fixed;
  top:0; bottom:0;
  width:120px;
  left: calc(var(--seam-x, 50vw) - 60px);
  pointer-events:none;
  z-index:1;
  background:url('https://centreservicesdev.fr/assets/img/etincelles.png') center/120px repeat-y;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 20px rgba(255,214,133,.9));
  animation: sparksScroll 5s linear infinite;
  opacity: var(--sparks-visible, 0);
  animation-play-state: var(--sparks-play, paused);
  transition: opacity .35s ease; /* fade propre */
}

@keyframes sparksScroll {
  from { background-position-y: 0; }
  to   { background-position-y: 120px; }
}

/* === ANIMATION 04 === */
#animation_04 {z-index:11;min-height:100%;height:250dvh;background:url('https://centreservicesdev.fr/assets/img/ciel-01.jpg') no-repeat top left /cover;color:#fff;position:relative;overflow:visible}
#animation_04 .scroll-text-container{position:sticky;padding:20dvh 0;top:0;height:auto;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:2}
#animation_04 .scroll-title {margin:0 0 24px 0;position:absolute;width:100vw;color:rgba(255,255,255,1)}
#animation_04 .stars-row{position:absolute;top:0;z-index:3;height:100dvh;width:100vw;display:flex;align-items:center;justify-content:center;pointer-events:none;will-change:transform,filter;contain:layout paint}
#animation_04 .star{width:84px;height:auto;transform-origin:center;will-change:transform,filter;pointer-events:none;transition:all linear 0.6s}
#animation_04 .star.yellow {transition:all ease 0.1s;filter:brightness(0) saturate(100%) invert(85%) sepia(31%) saturate(724%) hue-rotate(347deg) brightness(105%) contrast(103%)!important;transform:scale(1.1)!important}
#animation_04 .scroll-title br {display:none}

#logo_google {display:inline-block;height:18px;position:relative;top:5px;margin-left:1px}

.commentaires-row {width:800px;max-width:90vw;display:grid;gap:24px}
.commentaires-row .commentaire {display:flex;align-items:flex-start;background:rgba(255,255,255,0.2);margin-bottom:5vwpx;padding:24px 0;border-radius:30px}
.commentaires-row .commentaire .commentaire-photo {flex:0 0 84px;width:84px;height:84px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-size:2em}
.commentaires-row .commentaire .commentaire-text {flex:1 1 auto;min-width:0;text-align:left;padding:16px;font-size:1.5em}
.commentaires-row .commentaire .commentaire-text p {font-size:0.85em}
.commentaires-row .commentaire .commentaire-nom {font-weight:bold;margin-bottom:16px}

#animation_04 .star{margin-top:-50dvh}
#animation_04 .scroll-title {top:100px}
.commentaires-row {margin:150px auto 0}

@media (max-width:768px) {
#animation_04, #animation_05 {border-radius:0 0 calc(5vw + 30px) calc(5vw + 30px)}
#animation_04 .scroll-title {top:60px}
.commentaires-row {margin:120px auto 0}
#animation_04 .star{margin-top:-40dvh}
#animation_04 .scroll-title {line-height:36px}
#animation_04 .scroll-text-container{padding:20dvh 0 5vw 0}
.commentaires-row .commentaire .commentaire-photo {flex:0 0 72px;width:72px;height:72px;font-size:2em}
.commentaires-row .commentaire .commentaire-text {font-size:1em}
}

#animation_05 {background:#f5f5f5}

#menu-mobile {z-index:10000000!important}
header {z-index:10000000!important;position:absolute}
footer {z-index:1;position:relative}
footer::before {z-index:-1;content:"";width:100vw;height:100%;position:absolute;bottom:0;transform:scale(3, 1);left:-50vw;background:linear-gradient(0deg,rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);overflow:hidden}

.grid_parent {display:flex;flex-wrap:wrap;calc(100% - var(--gap-carousel) * 2);margin:auto;position:relative;padding:2vw;gap:1.99vw;}
.grid_100 {width:100%;}
.grid_50 {display:flex;width:calc(50% - 1vw);flex-direction:column;justify-content:center;align-items:center;text-align:center;}
@media (min-width: 768px) {
	.grid_parent {
	width: calc(100% - var(--gap-carousel) * 2 - 48px);padding:0
	}
}
@media screen and (min-width: 1600px) {
	.grid_parent {
	width: calc(80vw - 3 * var(--gap-carousel));padding:0
	}
}
	


.grid_parent > div {min-height:400px;background:#fff;padding:0;border-radius:30px;font-size:2em;box-sizing:border-box;z-index:1}
.grid_50 a {background:linear-gradient(135deg, #00bfff 10%, #0081ff 90%, #0081ff);cursor:pointer;color:#fff;padding:12px 16px;border-radius:36px;margin-top:12px;display:inline-block;z-index:1;position:relative;}
@media (max-width:769px) {
.grid_50 {box-shadow:0 0 0;}
}


/* Ménage */
#bloc_service_8 {background:#37dfdf!important}
#bloc_service_8 .button_devis {background:#f43cb3}
#bloc_service_8 .clip-layout {background:linear-gradient(0deg,rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0) 60%)}
#bloc_service_8 .clip-line-back {background-image:url(https://centreservicesdev.fr/assets/img/services/line-back-8.png)}
#bloc_service_8 .clip-line-front {background-image:url(https://centreservicesdev.fr/assets/img/services/line-front-8.png)}
#service_8 {background-image:url(https://centreservicesdev.fr/assets/img/services/clip-8.png)}

/* Jardinage */
#bloc_service_4 .button_devis {background:#ffdf83;color:#3db500}
#bloc_service_4 .clip-layout {background:linear-gradient(0deg,rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0) 50%)}
#bloc_service_4 .clip-line-back {background-image:url(https://centreservicesdev.fr/assets/img/services/line-back-4.png)}
#bloc_service_4 .clip-line-front {background-image:url(https://centreservicesdev.fr/assets/img/services/line-front-4.png)}
#service_4 {background-image:url(https://centreservicesdev.fr/assets/img/services/clip-4.png)}

/* Garde d'enfant */
#bloc_service_2 .button_devis {background:#fdd34b}
#bloc_service_2 .clip-layout {background:linear-gradient(0deg,rgba(0, 0, 0, 0.25) 0%, rgba(255, 255, 255, 0) 60%)}
#bloc_service_2 .clip-line-back {background-image:url(https://centreservicesdev.fr/assets/img/services/line-back-2.png)}
#bloc_service_2 .clip-line-front {background-image:url(https://centreservicesdev.fr/assets/img/services/line-front-2.png)}
#service_2 {background-image:url(https://centreservicesdev.fr/assets/img/services/clip-2.png)}

/* Aaide aux personnes âgées */
#bloc_service_1 .button_devis {background:#85ceff}
#bloc_service_1 .clip-layout {background:linear-gradient(0deg,rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0) 50%)}
#bloc_service_1 .clip-line-back {background-image:url(https://centreservicesdev.fr/assets/img/services/line-back-1.png)}
#bloc_service_1 .clip-line-front {background-image:url(https://centreservicesdev.fr/assets/img/services/line-front-1.png)}
#service_1 {background-image:url(https://centreservicesdev.fr/assets/img/services/clip-1.png)}

/* Bricolage */
#bloc_service_3 .button_devis {background:#b2edff;color:#a39384}
#bloc_service_3 .clip-layout {background:linear-gradient(0deg,rgba(0, 0, 0, 0.25) 0%, rgba(255, 255, 255, 0) 50%)}
#bloc_service_3 .clip-line-back {background-image:url(https://centreservicesdev.fr/assets/img/services/line-back-3.png)}
#bloc_service_3 .clip-line-front {background-image:url(https://centreservicesdev.fr/assets/img/services/line-front-3.png)}
#service_3 {background-image:url(https://centreservicesdev.fr/assets/img/services/clip-3.png)}

/* Crédit d'impôt */
#bloc_service_50 .button_devis {background:#e96c2a}
#bloc_service_50 .clip-layout {background:linear-gradient(0deg,rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0) 50%)}
#bloc_service_50 .clip-line-back {background-image:url(https://centreservicesdev.fr/assets/img/services/line-back-50.png)}
#bloc_service_50 .clip-line-front {background-image:url(https://centreservicesdev.fr/assets/img/services/line-front-50.png)}
#service_50 {background-image:url(https://centreservicesdev.fr/assets/img/services/clip-50.png)}

.button_devis {position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.02);font-size:24px;padding:24px 48px;margin-top:48px;border-radius:100px;cursor:pointer;z-index:6!important}
.button_devis::after {content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);transform:skewX(-20deg);animation:shine 3s infinite;pointer-events:none}

.clip-line {background-size:cover;position:absolute;top:0;width:110vw;height:100dvh;background-repeat:no-repeat}
.clip-line-back {z-index:-1;background-position:left top;pointer-events:none;left:40vw}
.clip-line-front {z-index:3;background-position:left bottom;pointer-events:none;left:60vw}

.clip-slide-left {width:50%;display:flex;z-index:50!important;margin-top:50px}
.clip-slide-left .service_title {font-family:Agbalumo;line-height:1em;text-shadow:0 5px 3px rgba(0,0,0,0.01)}
.clip-slide-right {display:flex;width:50%;float:right;height:100dvh}.clip-slide-left,.clip-slide-right {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.clip-slide-left,.clip-slide-right {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.clip-slide {position:absolute;width:100%;height:100%;z-index:0;color:white;font-size:5vw;font-weight:bold;display:flex;justify-content:center;align-items:center;text-align:center;background:transparent;clip-path:circle(0% at 50% 50%)}
.clip-slide.visible {z-index:2}
.clip-slide.conceal {z-index:2}
.clip-slide.behind {z-index:0;clip-path:circle(0% at 50% 50%)}

.clip-img {height:100dvh;width:2000%;background-size:auto 100%;background-repeat:no-repeat;background-position:top}
.clip-layout {width:100vw;height:100dvh;position:absolute;bottom:0}
.clip-content {width:80vw;margin:auto;display:flex;justify-content:space-between;align-items:center}
.clip-container {position:relative;width:100vw;height:100dvh;max-height:100dvh}

/* Quand la modale cookies est ouverte, force la pose "frame 0%" */
body.cookies-locked .clip-slide-left {
  transform: translateY(50px) !important;       /* 0% de appear_to_bottom */
}

body.cookies-locked .clip-img {
  transform: translateX(70px) !important;       /* 0% de appear_to_right */
}

/* lignes décor (valeurs 0% de tes keyframes) */
body.cookies-locked .clip-line-front {
  transform: translateX(0) !important;          /* 0% de appear_front */
}

body.cookies-locked .clip-line-back {
  transform: translateX(-250px) !important;     /* 0% de appear_back */
}

/* On neutralise toute "retenue" de fin d'anim pendant le lock */
body.cookies-locked .clip-slide-left,
body.cookies-locked .clip-img,
body.cookies-locked .clip-line-front,
body.cookies-locked .clip-line-back {
  animation-play-state: paused !important;
  animation-fill-mode: none !important; /* évite d’afficher la frame finale */
}



* {margin:0;padding:0;box-sizing:border-box}
html, body {height:100%;font-family:sans-serif;overflow-x:hidden}
.no_shadow {box-shadow:0 0 0!important}
.uppercase {text-transform:uppercase}

#logo_back {position:absolute;top:64px;left:10vw;width:84px;height:84px;background:white;border-radius:50%;z-index:111}
#logo_img {top:0;left:0;width:84px;height:84px;padding:13px;z-index:111}
#logo_script {position:absolute;top:72px;left:calc(10vw + 100px);z-index:111}
#logo_script img {width:auto;height:68px}



@media (min-width:769px) {
#bottom_footer {display:none}
}

@media (max-width:768px) {

	#animation_03::before, .left-curtain {background-position:right bottom!important;background-size:220%!important}
	
	
	#animation_03  {height:300dvh}
	
	#animation_04  {box-shadow:0 10vw 0 10vw #f5f5f5}
	#animation_04 .scroll-text-container{top:0}
	#animation_04 .star{width:42px;transition:all ease 0s}
	#animation_04 .scroll-title br {display:inherit}

	footer {margin-bottom:90dvh}
	#bottom_footer {position:absolute;bottom:0;left:0;width:100vw;height:85dvh;text-align:center;z-index:0;padding-top:10vw}
	#bottom_footer h2 {font-size:24px;width:80%;margin:auto}
	#bottom_footer_container {position:relative}

	.grid_parent {width:100%;display:block;margin:3vw 0 0 0}
	.grid_100,.grid_50 {width:100%}
	.grid_parent > div {border-radius:30px;padding:30px;max-width:90vw;margin:0 auto 5vw auto}
	
	.scroll-title {font-size:1.6em}
	.scroll-title br {display:none}
	
	/* Jardinage */
	#bloc_service_4 .button_devis {background:#3db500;color:#fff}
	
	/* Garde d'enfant */
	#bloc_service_2 .button_devis {background:#fcc000;color:#fff}

	/* Bricolage */
	#bloc_service_3 .button_devis {background:#a39384;color:#fff}
	
	.clip-layout {background:linear-gradient(0deg,rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0) 60%)}
	
	.clip-line {width:150vw}
	.clip-slide, #animation_00 h2 {font-size:10vw!important}
	.clip-slide-right {min-width:100%;position:absolute;z-index:0;width:100vw}
	.clip-slide-left .button_devis {font-size:20px;padding:12px 28px;margin-top:24px}
	.clip-slide-left .service_title {padding:0 24px}
	.clip-slide-left {min-width:100%;position:absolute;margin-top:260px}
	
	.clip-line-back {left:50vw}

	.clip-img {background-size:auto 100dvh;height:110dvh;width:200%;background-position:top;margin-top:24px}
	
	.clip-content {width:100vw}

	#logo_back {top:10vw;left:10vw;width:72px;height:72px}
	#logo_img {width:72px;height:72px;padding:10px}
	#logo_script {position:absolute;top:10vw;left:calc(10vw + 88px);z-index:111;height:56px;margin-top:8px}
	#logo_script img {width:auto;height:100%}
	
	@keyframes appear_back {
	  0% {transform:translateX(200px)}
	  100% {transform:translateX(0px)}
	}
}

@keyframes appear_back {
  0% {transform:translateX(-250px)}
  100% {transform:translateX(-150px)}
}

@keyframes appear_front {
  0% {transform:translateX(0)}
  100% {transform:translateX(-250px)}
}

@keyframes appear_to_bottom {
  0% {transform:translateY(50px)}
  100% {transform:translateY(0)}
}

@keyframes appear_to_right {
  0% {transform:translateX(70px)}
  100% {transform:translateX(0)}
}

@keyframes reveal {
  from {clip-path:circle(0% at var(--clip-x, 50%) var(--clip-y, 50%))}
  to {clip-path:circle(150% at var(--clip-x, 50%) var(--clip-y, 50%))}
}

@keyframes shine {
  0%   {left:-75%}
  50%  {left:125%}
  100% {left:125%}
}

@keyframes spin {
	from {transform:scale(1.4) rotate(0deg)}
	to {transform:scale(2) rotate(360deg)}
}