.sce {
--sce-bleu: #1a9fe0;
--sce-bleu-fonce: #0e7bb5;
--sce-encre: #1f2a44;
--sce-gris: #5b6472;
--sce-fond-pastille: #ffffff;
--sce-ombre: rgba(26, 159, 224, 0.28); --sce-taille: 150px;
--sce-numero: 52px;
--sce-largeur-max: 1200px;
display: block;
width: 100%;
max-width: 100%;
margin: 0;
padding: 2.5rem 0;
box-sizing: border-box;
color: var(--sce-encre);
font-family: inherit;
} .elementor-widget-text-editor .sce,
.elementor-widget-container .sce {
width: 100%;
max-width: 100%;
}
.sce *,
.sce *::before,
.sce *::after {
box-sizing: border-box;
}
.sce__titre {
font-size: clamp(1.75rem, 4vw, 2.6rem);
line-height: 1.1;
font-weight: 800;
letter-spacing: -0.02em;
text-align: center;
margin: 0 0 3rem;
color: var(--sce-encre);
} .sce__liste {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 3rem;
} .sce__etape {
position: relative;
display: grid;
grid-template-columns: var(--sce-taille) 1fr;
gap: 1.5rem;
align-items: center;
} .sce__etape:not(:last-child)::before {
content: "";
position: absolute;
left: calc(var(--sce-taille) / 2 - 20px);
top: auto;
bottom: -2.75rem;
width: 40px;
height: 40px;
background: var(--sce-bleu);
opacity: 1;
-webkit-mask: no-repeat center / contain
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6'/%3E%3C/svg%3E");
mask: no-repeat center / contain
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6'/%3E%3C/svg%3E");
animation: sce-fleche-bas 6s ease-out infinite both;
animation-delay: calc(var(--sce-i) * 1.2s + 0.8s);
} .sce__pastille {
position: relative;
width: var(--sce-taille);
height: var(--sce-taille);
min-width: var(--sce-taille);
flex: 0 0 auto;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--sce-bleu);
} .sce__pastille::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--sce-fond-pastille);
box-shadow: 0 0 30px -6px var(--sce-ombre);
z-index: 0;
animation: sce-apparition 6s ease-out infinite both;
animation-delay: calc(var(--sce-i) * 1.2s + 0.4s);
} .sce__icone,
.sce__image {
position: relative;
z-index: 1;
animation: sce-apparition 6s ease-out infinite both;
animation-delay: calc(var(--sce-i) * 1.2s + 0.4s);
}
.sce__icone svg,
.sce__image {
width: calc(var(--sce-taille) * 0.45);
height: calc(var(--sce-taille) * 0.5);
display: block;
}
.sce__image {
object-fit: contain;
max-width: 100%;
} .sce__etape:nth-child(2) .sce__image {
width: calc(var(--sce-taille) * 0.55);
height: calc(var(--sce-taille) * 0.55);
} .sce__image--hover {
display: none;
}
.sce__numero {
position: absolute;
top: -2px;
right: -2px;
width: var(--sce-numero);
height: var(--sce-numero);
min-width: var(--sce-numero);
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50%;
background: var(--sce-bleu);
color: #fff;
font-size: 1.8rem;
font-weight: 900;
line-height: var(--sce-numero) !important;
text-align: center;
border: 4px solid #fff;
z-index: 2;
animation: sce-numero-bounce 6s ease-out infinite both;
animation-delay: calc(var(--sce-i) * 1.2s);
} .sce__etape-titre {
font-size: 1.3rem;
font-weight: 700;
margin: 0 0 0.5rem;
color: var(--sce-bleu-fonce);
}
.sce__etape-desc {
font-size: 1.02rem;
line-height: 1.6;
margin: 0;
color: var(--sce-gris);
} @media (max-width: 400px) {
.sce__etape {
gap: 1rem;
}
} @media (min-width: 780px) {
.sce {
--sce-taille: 150px;
--sce-numero: 56px;
}
.sce__liste {
grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 4vw, 3rem);
align-items: start;
max-width: var(--sce-largeur-max);
margin-inline: auto;
}
.sce__etape {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 1.5rem;
}
.sce__numero {
font-size: 2.5rem;
border-width: 5px;
--sce-numero-y: 5px;
} .sce__etape:not(:last-child)::before {
content: "";
position: absolute;
left: auto;
left: calc(100% + (clamp(1rem, 4vw, 3rem) - 56px) / 2);
right: auto;
top: calc(var(--sce-taille) / 2 - 24px);
bottom: auto;
width: 56px;
height: 48px;
background: var(--sce-bleu);
opacity: 1;
-webkit-mask: no-repeat center / contain
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
mask: no-repeat center / contain
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
animation: sce-fleche-droite 6s ease-out infinite both;
animation-delay: calc(var(--sce-i) * 1.2s + 0.8s);
}
.sce__contenu {
max-width: 320px;
}
} @media (min-width: 1100px) {
.sce {
--sce-taille: 200px;
--sce-numero: 68px;
--sce-largeur-max: 1360px;
}
.sce__etape:not(:last-child)::before {
left: calc(100% + (clamp(1rem, 4vw, 3rem) - 72px) / 2);
right: auto;
top: calc(var(--sce-taille) / 2 - 31px);
width: 72px;
height: 62px;
}
} @keyframes sce-apparition {
0%   { opacity: 0; }
15%  { opacity: 1; }
90%  { opacity: 1; }
100% { opacity: 0; }
}
@keyframes sce-numero-bounce {
0%   { opacity: 0; transform: translateY(var(--sce-numero-y, 4px)) scale(0.3); }
6%   { opacity: 1; transform: translateY(var(--sce-numero-y, 4px)) scale(1.35); }
10%  { opacity: 1; transform: translateY(var(--sce-numero-y, 4px)) scale(0.9); }
13%  { opacity: 1; transform: translateY(var(--sce-numero-y, 4px)) scale(1.05); }
15%  { opacity: 1; transform: translateY(var(--sce-numero-y, 4px)) scale(1); }
90%  { opacity: 1; transform: translateY(var(--sce-numero-y, 4px)) scale(1); }
100% { opacity: 0; transform: translateY(var(--sce-numero-y, 4px)) scale(1); }
}
@keyframes sce-fleche-bas {
0%   { opacity: 0; transform: translateY(-20px); }
15%  { opacity: 1; transform: translateY(0); }
90%  { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(0); }
}
@keyframes sce-fleche-droite {
0%   { opacity: 0; transform: translateX(-20px); }
15%  { opacity: 1; transform: translateX(0); }
90%  { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.sce__pastille::before,
.sce__icone,
.sce__image,
.sce__numero,
.sce__etape:not(:last-child)::before {
animation: none;
opacity: 1;
}
}.sagamento-cp {
--sagamento-cp-color:         #009ADB;
--sagamento-cp-color-soft:    #7cc9e8; --sagamento-cp-stroke:        #ffffff;
--sagamento-cp-text:          #ffffff;
--sagamento-cp-text-inverted: #009ADB;
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.sagamento-cp__svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
font-family: inherit;
} .sagamento-cp__zone {
cursor: pointer;
text-decoration: none;
outline: none;
transition: filter .2s ease;
}
.sagamento-cp__zone path {
stroke: var(--sagamento-cp-stroke);
stroke-width: 1.5;
stroke-linejoin: round;
transition: fill .2s ease, stroke .2s ease;
}
.sagamento-cp__zone--arr path {
fill: var(--sagamento-cp-color);
}
.sagamento-cp__zone--commune path {
fill: var(--sagamento-cp-color-soft);
} .sagamento-cp__label {
fill: var(--sagamento-cp-text);
font-size: 13px;
font-weight: 600;
pointer-events: none; paint-order: stroke; stroke: rgba(0, 0, 0, .15);
stroke-width: 0.5px;
transition: fill .2s ease;
user-select: none;
}
.sagamento-cp__zone--commune .sagamento-cp__label {
font-size: 11px;
font-weight: 500;
} .sagamento-cp__zone:hover path,
.sagamento-cp__zone:focus path,
.sagamento-cp__zone:focus-visible path {
fill: #ffffff;
stroke: var(--sagamento-cp-color);
stroke-width: 2;
}
.sagamento-cp__zone:hover .sagamento-cp__label,
.sagamento-cp__zone:focus .sagamento-cp__label,
.sagamento-cp__zone:focus-visible .sagamento-cp__label {
fill: var(--sagamento-cp-text-inverted);
stroke: none;
} .sagamento-cp__zone:focus-visible {
filter: drop-shadow(0 0 4px rgba(0, 154, 219, .5));
}  .sagamento-cp .screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
} .sagamento-cp__intro {
text-align: center;
margin: 0 auto 1.5em;
max-width: 900px;
}
.sagamento-cp__intro-title {
text-align: center;
color: var(--sagamento-cp-color);
margin: 0 0 .5em;
}
.sagamento-cp__intro-text {
margin: 0;
line-height: 1.6;
} .sagamento-cp__secteurs {
margin-top: 2em;
}
.sagamento-cp__secteurs-title {
text-align: center;
color: var(--sagamento-cp-color);
margin: 0 0 1em;
}
.sagamento-cp__secteurs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5em 2em;
}
.sagamento-cp__dept-title {
color: var(--sagamento-cp-color);
margin: 0 0 .5em;
padding-bottom: .35em;
border-bottom: 2px solid var(--sagamento-cp-color);
font-size: 1.15em;
}
.sagamento-cp__dept-list {
list-style: none;
padding: 0;
margin: 0;
}
.sagamento-cp__dept-list li {
padding: .2em 0;
}
.sagamento-cp__dept-list a {
color: inherit;
text-decoration: none;
transition: color .2s ease;
}
.sagamento-cp__dept-list a:hover,
.sagamento-cp__dept-list a:focus {
color: var(--sagamento-cp-color);
text-decoration: underline;
} @media (max-width: 640px) {
.sagamento-cp__label {
font-size: 16px;
}
.sagamento-cp__zone--commune .sagamento-cp__label {
font-size: 13px;
}
}