body {background: #fef3e7;font-size: calc(1.0rem + 0.29vw);color: #444444;font-family: "Montserrat", sans-serif;letter-spacing: -0.05rem;}
h1, h2, h3, h4 {font-family: "Quicksand",sans-serif;}
.titre h1 {font-size:calc(2rem + 2.2vw);font-weight: 700;line-height:1.1em;margin:30px 0;}


header .right a{position:relative;margin-right:30px;text-decoration:none;font-size:18px;display:inline-block;}
header .right a.active {color:#17331c;}
header .right a.active:after{content:"";position:absolute;left:0;bottom:-5px;width:0%;height:2px;background-color:#17331c;}
header .right a.active:after{animation:hoverBar .3s forwards}@keyframes hoverBar{0%{width:0%}100%{width:100%}}

.full-width {width: 100vw;position: relative;left: 50%;right: 50%;margin-left: -50vw;margin-right: -50vw;}

p, figure {margin: 15px 0;}
figcaption {text-align: center;color: #999;}

.ahl {font-size:calc(1rem + 1vw);font-weight: 500;margin:15px 0 30px 0;}
.imagepagemain {max-width:900px;width:100%;border-radius:1rem;display:block;margin:0 auto;}
.imagepagemain.logo {max-width:500px;float: none;width:100%;margin:30px 0 0 0;}

header nav a:hover.accompagner {color: #ff0091;}
header nav a:hover.suivre {color: #4119a0;}
header nav a:hover.soutenir {color: #fac600;}
header nav a:hover.apaiser {color: #ffa2ff;}
header .right a:hover.accueillir {color: #ff1a1a;}
header .right a:hover.ecole {color: #b27ce1;}

header nav a.accompagner.active:after, .bg-fuschia {background-color:#ff0091;}
header nav a.suivre.active:after, .bg-bleu {background-color:#4119a0;}
header nav a.soutenir.active:after, .bg-jaune {background-color:#fac600;}
header nav a.apaiser.active:after, .bg-rose {background-color:#ffa2ff;}
header .right a.accueillir.active:after, .bg-rouge {background-color:#ff1a1a;}
header .right a.ecole.active:after, .bg-mauve {background-color:#b27ce1;}

.block--pic {margin: 0 auto;display: block;}
.content--pic {clear:both;margin: 60px auto;display: block;height: 100px;}
blockquote {
  font-size: calc(2rem + 3vw);
  text-align: center;
  font-family: "Sacramento", serif;
  margin: 3rem;
}

blockquote.longquote {
  font-size: 3rem;
  text-align: center;
  font-family: "Sacramento", serif;
  margin: 3rem;
}

cite {
  display: block;
  text-align: right;
  margin-top: 1rem;
  color: #aaa;
  font-style: normal;
}

.pagemaster .contentWrapper li{list-style: inside;line-height: 30px;}
.pagemaster .contentWrapper h3, .bold {font-weight: bold;}
.textWrapper {max-width: 800px;margin:0 auto;}

.source {font-family: "Montserrat", sans-serif;font-size: calc(0.8rem + 0.33vw);display: inline-flex;font-weight: 300;}
.separator {width: 20rem;margin:60px auto;border-bottom: 3px solid}

        .wavy-separator {
            width: 100%;
            display: flex;
            justify-content: center;
            margin: 3rem 0;
        }

        .wavy-separator svg {
            max-width: 30rem;
            width: 100%;
        }

        /* Animation des ondes */
        @keyframes wave-flow {
            0% {
                d: path("M0 10 Q 100 0 200 10 T 400 10 T 600 10 T 800 10 T 1000 10 T 1200 10");
            }
            25% {
                d: path("M0 10 Q 100 20 200 10 T 400 10 T 600 10 T 800 10 T 1000 10 T 1200 10");
            }
            50% {
                d: path("M0 10 Q 100 0 200 10 T 400 20 T 600 0 T 800 10 T 1000 20 T 1200 10");
            }
            75% {
                d: path("M0 10 Q 100 10 200 20 T 400 0 T 600 10 T 800 20 T 1000 0 T 1200 10");
            }
            100% {
                d: path("M0 10 Q 100 0 200 10 T 400 10 T 600 10 T 800 10 T 1000 10 T 1200 10");
            }
        }

        .animate-wave {
            animation: wave-flow 4s ease-in-out infinite;
        }
        /* Variations de couleurs */
        .wave-primary {
            stroke: #3b82f6;
        }
        .wave-accent {
            stroke: #8b5cf6;
        }
        .wave-green {
            stroke: #10b981;
        }


@media screen and (max-width:1200px){
}
@media screen and (min-width: 1200px) {
    .content-wrapper {display: flex;align-items: center;}
    .imagepagemain{
        /* On crée un contexte flex à partir du blockquote */
        /*display: flex;*/
        gap: 30px; /* Espace entre l'image et le texte */
    }

    /* Style de l'image */
    .imagepagemain {
        float: left;
        margin-right: 30px;
        width: 40%; /* Ajustez selon vos besoins */
    }
}