*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

g[id*="OVERLAY"]{opacity:0;}
/* , g[id*="PASTILLE"] */

body{font-size:16px; font-family:"Poppins", sans-serif;}

.container{position:relative; width:max-content; max-width:100%; padding:20px; margin:0 auto;}

.infographie-title{position:absolute; top:0; right:80px; padding:10px 20px; background-color:#297889; color:#fff; font-size:130%; border-radius:0 0 20px 20px; width:max-content; max-width:100%; width:630px; z-index:1001;}
.infographie-title i{display:inline-block; margin-left:10px;}
.infographie-title br{display:none;}
.infographie-title div{font-size:70%; display:none; padding:10px 20px 20px;}
.infographie-title div p{margin-bottom:10px;}
.infographie-title div a{color:#fff;}
.popup-hiddener{cursor:pointer;}

.overlay-global-content{display:none; position:fixed; inset:0; width:100%; height:100%; background-color:rgba(255,255,255,0.6); justify-content:center; align-items:center; z-index:1000; transition:1s ease background-color 0s; font-size:130%; backdrop-filter:blur(2px);}


.infobulle{position:fixed; pointer-events:none; z-index:9999;}
.infobulle .error{display:block; padding:5px 10px; background-color:#fdecea; color:#b00020; border-radius:5px; box-shadow: rgba(176, 0, 32, 1) 0px 0px 30px 0px; font-size:80%;}


.popup{position:fixed; inset:0; width:100%; height:100%; background-color:rgba(255,255,255,0.6); display:flex; justify-content:center; align-items:center; z-index:10000000; transition:1s ease background-color 0s; font-size:130%; backdrop-filter:blur(2px);}
.popup.is-hidden{pointer-events:none; background-color:transparent; backdrop-filter:blur(0);}
.popup-closer{position:absolute; top:15px; right:30px; color:#15A19A; font-size:120%;}
.popup-container{position:relative; padding:40px 60px 30px; background-color:#fff; box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 10px; border-radius:30px; width:600px; max-width:95%; cursor:pointer; transform-origin:center center; transition:transform 1.2s cubic-bezier(.4,0,.2,1), opacity 1s cubic-bezier(.4,0,.2,1), filter 1s ease;}
.popup.is-hidden .popup-container{opacity:0; filter:blur(4px);}
.popup-title{position:relative; color:#297889; line-height:1.1; margin-bottom:15px; font-size:110%; text-align:center;}
.popup-title:before{content:""; display:block; height:30px; width:30px; background:url(../inc/deco_title.svg) scroll no-repeat center / contain; margin:0 auto 10px;}
.popup-content{color:#15A19A; line-height:1.3; font-weight:300; font-size:90%;}
i.popup-arrow-closer{display:block; margin:20px auto 0; color:#297889; width:max-content; font-size:120%; cursor:pointer; animation: bounce 1.2s ease infinite;}
.popup-btn{display:block; background-color:#15A19A; color:#fff; padding:15px; width:max-content; margin:40px auto 0; border-radius:15px; text-align:center;}
.popup-btn .big{font-size:150%; display:block;}
.popup-btn ol{padding-left:20px; text-align:left; margin-top:20px;}
.popup-btn ol li{margin-bottom:10px; font-size:120%;}

@keyframes bounce {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(0); }
  40%  { transform: translateY(-15px); }
  50%  { transform: translateY(0); }
  60%  { transform: translateY(-10px); }
  80%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

#frise{height:calc(100dvh - 150px); border-radius:20px;}

.char-selector{height:140px; padding:15px 50px; display:flex; gap:2rem; margin-top:-30px; justify-content:space-between; width:100%; position:relative;}
.char-selector__title{display:none;}
.char-block{position:relative; text-align:center; color:#000; z-index:3; line-height:1.2;}
.char-block.is-moved{z-index:6;}
.char-drag{cursor:pointer; height:80px; transition:0.3s ease 0s; transform-origin:bottom;}
.char-drag.animated{scale:1.5;}
.char-drag.animated.stop-animation{scale:1;}
.char-drag.has-dragged{filter:grayscale(1); opacity:0.4;}
img.char{display:inline-block; height:100%; transition:0.1s all ease 0s; transform-origin:bottom; scale:2;}
img.char:hover{scale:2.3;}
img.bulle{position:fixed; display:none; height:100%; transition:0.1s scale ease 0s; box-shadow:rgba(0, 0, 0, 0.3) 4px 4px 4px; border-radius:50%; height:80px; width:80px; z-index:10;}
img.bulle{scale:1.1;}

.char-drag.is-dragging img.char, .char-drag.is-moved img.char{filter:grayscale(1); opacity:0.4;}

.char-presentation{display:none; position:absolute; bottom:calc(100% + 70px); background-color:#fff; color:#000; padding:15px; border-radius:15px; height:auto; width:250px; box-shadow:rgba(0, 0, 0, 0.3) 4px 4px 4px; z-index:3; font-size:70%; text-align:left;}
.char-presentation:after{content:""; position:absolute; top:calc(100% - 5px); left:30px; height:10px; width:10px; background-color:#fff; rotate:45deg; border:1px solid #fff; }
.char-presentation__btn{display:none;}

.content-closer{display:none;}
.content{position:fixed; top:0; left:0; height:auto; width:250px; background-color:#fff; border-radius:25px; display:none; font-style:italic; font-size:85%; box-shadow:rgba(0, 0, 0, 0.3) 4px 4px 4px; z-index:6; font-family:"Epilogue", sans-serif;}
/*.content:before{content:""; position:absolute; bottom:calc(100% - 5px); left:30px; height:10px; width:10px; background-color:#fff; rotate:45deg; border:1px solid #fff; border-left-color:#16968d; border-top-color:#16968d;}*/
.content.alignright .service-name{padding:10px 50px 10px 15px;}
.service-name{padding:10px 15px 10px 50px; color:#fff; border-radius:50px; line-height:1; font-style:normal; font-weight:bold;}
.service-persona-content{padding:15px; line-height:1.3;}
.service-persona-content p:first-child:before{content:"« ";}
.service-persona-content p:first-child:after{content:" »";}
/*.service-persona-content p:last-child:after{content:" »";}*/
.case-hover {filter:brightness(0);}

.service-persona-content__btn{padding:5px 10px; border-radius:50px; border:1px solid transparent; text-align:center; text-decoration:none; margin-top:10px; display:block;}

g[id*="OVERLAY"].overlay-highlight, g[id*="OVERLAY"].overlay-highlight[class*="st"] {
    fill: rgba(41, 120, 137, 0.55) !important;
    opacity: 1 !important;
    stroke: #fff !important;
    stroke-width:5px !important;
}

/* Animation pulsation */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.7); }
}

.pulse-animation {
  animation-name: pulse;
  animation-duration: 1.5s; /* durée totale */
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.3));
}


g[id*="PASTILLE"] circle{box-shadow:rgba(0, 0, 0, 0.3) 4px 4px 4px;}



@media all and (max-width:1600px){
  .popup{font-size:100%;}
  .infographie-title{font-size:120%;}

}

@media all and (max-width:1500px){
  .infographie-title{display:block; right:auto; max-width:max-content;}
  .infographie-title br{display:none;}
}

@media all and (max-width:1400px){
  .infographie-title{font-size:110%;}
}

@media all and (max-width:1200px){
  .infographie-title{font-size:100%;}
}

@media all and (max-width:992px){
  .infographie-title{font-size:90%; right:30px;}
}


@media all and (max-width:800px){
  .popup-hiddener{display:none !important;}
}



@media all and (max-width:1080px) and (orientation:portrait),
               (max-width:800px){
  .container{height:100dvh; overflow-x:scroll; padding:0;}
  i.popup-arrow-closer{display:none;}

  #frise{height:150vh; width:auto; max-width:none; border-radius:0; display:block;}

  .char-drag{cursor:default}

  .char-selector{position:fixed; left:0; bottom:0; height:100%; width:100%; display:flex; justify-content:flex-start; flex-wrap:wrap; background-color:rgba(0,0,0,0.6); margin:0; overflow:scroll; backdrop-filter:blur(17px); padding:30px 15px; gap:7rem 2rem; transition:0.3s all ease 0s;}
  .char-selector.hidden{bottom:calc(-100% + 40px); border-radius:15px; overflow:hidden; padding-top:0;}
  .char-block{flex:0 0 calc(50% - 2rem); color:#fff;}
  
  .char-selector__title{display:block; width:100%; color:#fff; text-align:center; font-size:200%; line-height:1;}
  .char-selector.hidden .char-selector__title{position:relative; font-size:75%; text-align:center;}
  .char-selector.hidden .char-selector__title .bulle{position:relative; top:auto; right:auto; bottom:auto; left:auto; height:40px; width:40px; scale:1; display:inline-block; vertical-align:middle; margin-right:10px;}

  .char-presentation{left:50%; translate:-50% 0; bottom:calc(100% + 60px); top:auto;}
  .char-presentation.open-bottom{top:calc(100% - 20px); bottom:auto;}
  .char-presentation:after{left:50%; translate:-50% 0;}
  .char-presentation.open-bottom:after{bottom:calc(100% - 6px); top:auto;}
  .char-presentation__btn{display:block; margin-top:10px; border-radius:50px; border:1px solid #297889; padding:5px 10px; text-align:center; background:#297889; color:#fff; width:max-content;}
  .char-presentation__btn:hover{color:#297889; background-color:#fff;}

  .content{display:block; top:100%; left:50%; translate:-50% 0; width:calc(100% - 20px); max-height:100%; overflow:scroll; border-radius:0; transition:0.3s all ease 0s; border-radius:15px;}
  .content.show{top:50%; translate:-50% -50%;}
  .content-closer{position:absolute; top:10px; right:10px; color:#fff; display:block; font-style:normal; font-size:150%; background:url(../inc/closer.svg) scroll no-repeat center / contain; height:30px; width:30px;}

  .service-name{border-radius:0; padding:20px 40px 20px 110px}
  .service-name .bulle{position:absolute; top:10px; left:10px; width:80px; height:auto; aspect-ratio:1; display:block; scale:1;}
  .service-persona-content{padding-top:50px;}

  .service-persona-content__btn{margin-top:30px}
}

@media all and (max-width:600px){
  .popup-closer{display:none !important;}
  .popup-container{padding:20px;}
  .popup-btn{margin:15px auto 15px;}

  .char-presentation{left:0; translate:0;}  
  .char-presentation:after{left:20vw;}
  .char-block:nth-child(odd) .char-presentation{left:auto; right:0;}
  .char-block:nth-child(odd) .char-presentation:after{left:auto; right:20vw;}

}

@media all and (max-width:450px){
  .popup-container{font-size:80%;}
}