@charset "UTF-8";
  @font-face {
font-family: "affogatoblack";
src: url(//melando.fr/wp-content/themes/starter/fonts/affogato-black-webfont.woff2) format("woff2"), url(//melando.fr/wp-content/themes/starter/fonts/affogato-black-webfont.woff) format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "affogatoregular";
src: url(//melando.fr/wp-content/themes/starter/fonts/affogato-regular-webfont.woff2) format("woff2"), url(//melando.fr/wp-content/themes/starter/fonts/affogato-regular-webfont.woff) format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "dk";
src: url(//melando.fr/wp-content/themes/starter/fonts/dk.woff2) format("woff2"), url(//melando.fr/wp-content/themes/starter/fonts/dk.woff) format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
} .rose-blanc {
background-color: #ff336a;
color: #ffffe6;
}
.rose-bleu {
background-color: #ff336a;
color: #1b3d5f;
}
.bleu-rose {
background-color: #1b3d5f;
color: #ff336a;
}
.bleu-jaune {
background-color: #1b3d5f;
color: #ffcf15;
}
.vert-bleu {
background-color: #80f0a5;
color: #1b3d5f;
}
.jaune-bleu {
background-color: #ffcf15;
color: #1b3d5f;
}
.bleu-blanc {
background-color: #1b3d5f;
color: #ffffe6;
}
.blanc-bleu {
background-color: #ffffe6;
color: #1b3d5f;
}
.jaune {
color: #ffcf15 !important;
}
.rose {
color: #ff336a;
}
.blanc {
color: #ffffe6;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
font: inherit;
color: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
text-wrap: balance;
}
ul {
list-style: none;
}
button,
input,
select {
border: none;
background: transparent;
}
button {
cursor: pointer;
color: inherit;
}
img,
picture,
svg,
video {
max-width: 100%;
height: auto;
display: block;
font-style: italic;
}
iframe {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}   html {
background-color: #ffcf15;
}
body {
min-height: 100svh;
font-family: affogatoregular, system-ui, sans-serif;
font-size: clamp(1.4rem, 0.7rem + 0.5vw, 1.6rem);
font-size: 1.7rem;
color: #1b3d5f;
line-height: 1.4;
font-weight: normal;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body:not(.home) {
background-image: url(//melando.fr/wp-content/themes/starter/img/carte-fond.webp);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
body.overflow--hidden {
overflow-y: hidden;
}
body.avec--fond #fond__ecran {
z-index: 900;
transition: opacity 0.4s, z-index 0s;
}
body.avec--fond.fond--recherche #fond__ecran {
z-index: 1001;
}
#fond__ecran {
position: fixed;
cursor: pointer;
top: 0;
left: 0;
width: 100vw;
height: 100dvh;
background-color: #ffcf15;
opacity: 0;
z-index: -1;
transition: opacity 0.4s, z-index 0s 0.4s;
}
#smooth-wrapper {
overflow: hidden;
}
#smooth-content {
will-change: transform;
}
#page {
opacity: 0;
transition: all 0.7s 0.1s;
}
.loaded #page {
opacity: 1;
}
#primary {
position: relative;
min-height: 100svh;
min-height: calc(100svh - var(--mt, 156px));
}
hr {
height: 5px;
width: 33%;
background-color: #ff336a;
border: none !important;
margin-block: calc(clamp(1rem, 2vw, 2rem) * 2) !important;
margin-inline: auto;
}
hr.mini {
width: 33%;
margin-block: clamp(1rem, 2vw, 2rem);
}
hr.gras {
width: 20%;
margin-inline: auto;
margin-block: calc(clamp(1rem, 2vw, 2rem) * 3);
height: 0.5em;
background-color: rgba(27, 61, 95, 0.77);
}
.fond-bleu {
--fond: #1b3d5f;
--color: #ffcf15;
--accent: #ff336a;
}
.avec-fond {
background-color: var(--fond, #ffffe6);
padding: calc(clamp(1rem, 2vw, 2rem) * 2);
border-radius: min(70px, 7vw);
position: relative;
}
.avec-fond h1,
.avec-fond h2,
.avec-fond h3,
.avec-fond .titre-1,
.avec-fond .titre-2,
.avec-fond .titre-3 {
color: var(--accent, #1b3d5f);
}
.avec-fond p,
.avec-fond li,
.avec-fond a {
color: var(--color, #1b3d5f);
}
.avec-fond a.souligne-lien,
.avec-fond .souligne-lien a,
.avec-fond .texte p a {
background-image: linear-gradient(var(--color, #1b3d5f), var(--color, #1b3d5f));
}
.avec-fond:has(.image-float)::after {
content: "";
display: table;
clear: both;
}   .radius-1 {
border-radius: 22px;
overflow: hidden;
}
.radius-2 {
border-radius: min(70px, 7vw);
overflow: hidden;
}
.carre,
.carre img {
aspect-ratio: 1;
object-fit: cover;
}
.rond,
.rond img {
border-radius: 50%;
aspect-ratio: 1;
object-fit: cover;
}
input {
height: 4rem;
width: fit-content;
position: relative;
display: flex;
place-items: center;
overflow: hidden;
border-radius: 999px;
outline: 1px solid transparent;
z-index: 1;
background-color: #ffffe6;
color: #1b3d5f;
gap: 1em;
padding-inline: 1em;
box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.17);
transition: outline 0.4s;
}
input:focus-visible {
outline: 1px solid #1b3d5f;
}
.clear {
clear: both;
display: flow-root;
}
.none {
display: none;
}    #fermer,
#fermerNL {
position: absolute;
padding: 0;
top: clamp(1rem, 2vw, 2rem);
right: clamp(1rem, 2vw, 2rem);
width: 32px;
height: 32px;
cursor: pointer;
z-index: 1;
}
#fermer:hover .ligne1,
#fermer:hover .ligne2,
#fermerNL:hover .ligne1,
#fermerNL:hover .ligne2 {
rotate: 45deg;
}
#fermer [class*=ligne],
#fermerNL [class*=ligne] {
position: absolute;
right: 0;
top: 1.125rem;
display: block;
width: 3rem;
height: 0.75rem;
background: currentcolor;
transition: transform 0.4s;
color: #ffffe6;
transition: all 0.7s;
}
#fermer .ligne1,
#fermerNL .ligne1 {
transform: rotate(45deg);
}
#fermer .ligne2,
#fermerNL .ligne2 {
transform: rotate(-45deg);
}
.btRechercher {
flex-shrink: 0;
}
.btRechercher:hover {
outline: 1px solid #ff336a !important;
}
#bloc-rechercher {
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
display: none;
text-align: center;
}
#bloc-rechercher.affiche {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1002;
}
#bloc-rechercher.affiche #rechercher {
position: relative;
background-color: #1b3d5f;
padding: calc(clamp(1rem, 2vw, 2rem) * 4) min(clamp(1rem, 2vw, 2rem) * 4, 2vw);
max-width: 100%;
}
#bloc-rechercher p {
margin: 0;
line-height: 1;
}
#bloc-rechercher form {
margin-top: clamp(1rem, 2vw, 2rem);
}
.search-results .resultat.formations {
display: block;
}
.headerSearch {
margin-bottom: calc(clamp(1rem, 2vw, 2rem) * 2);
}
.search-results .resultat a:hover {
text-decoration: none;
}
.search-results .resultat hr {
margin: clamp(1rem, 2vw, 2rem) auto;
}
form.search {
margin-block: clamp(1rem, 2vw, 2rem);
display: flex;
align-items: center;
justify-content: center;
}
form.search input {
max-width: calc(100% - 7rem);
}
.search-submit {
background: url(//melando.fr/wp-content/themes/starter/img/pictos/search.svg);
vertical-align: top;
border: none;
background-size: contain;
width: 7rem;
height: 2.8rem;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
}
.headerSearch {
position: sticky;
top: 0;
z-index: 1;
margin-bottom: clamp(1rem, 2vw, 2rem);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: #ffcf15;
}
.headerSearch form.search {
margin-left: clamp(1rem, 2vw, 2rem);
}
.search-results strong {
color: #1b3d5f;
}
.resultat {
z-index: -1;
position: relative;
}
.search-results .resultat .photo-search {
max-width: 200px;
}   .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.nav-links > * {
padding: clamp(1rem, 2vw, 2rem);
}
.nav-links a span {
display: inline-block;
transform: translate3d(0, 0, 0);
transition: transform 0.4s;
}
.nav-links .nav-previous a:hover span {
transform: translate3d(-1em, 0, 0);
}
.nav-links .nav-next a:hover span {
transform: translate3d(1em, 0, 0);
}
.t1 {
font-family: dk, system-ui, sans-serif;
font-size: clamp(2.5rem, 1.1rem + 1vw, 3rem) !important;
line-height: 1;
}
.t2 {
font-family: dk, system-ui, sans-serif;
font-size: clamp(4rem, 2rem + 1vw, 4rem) !important;
line-height: 1;
}
.font-accent {
font-family: dk, system-ui, sans-serif;
}
.titre-0 {
font-family: dk, system-ui, sans-serif;
font-size: clamp(4.2rem, 2.72rem + 4.5vw, 10rem);
line-height: 1.1;
hyphens: auto;
}
.titre-1,
.entry-content h1 {
--espace: 1.5em;
font-family: dk, system-ui, sans-serif;
font-size: clamp(4rem, 1rem + 3vw, 5.6rem);
color: #ff336a;
line-height: 0.9;
font-style: normal;
}
.titre-1.souligne,
.entry-content h1.souligne {
border-bottom: 1px solid rgba(27, 61, 95, 0.1);
padding-bottom: clamp(1rem, 2vw, 2rem);
}
.titre-2,
.entry-content h2 {
--espace: 1em;
font-family: dk, system-ui, sans-serif;
font-size: clamp(2.5rem, 1.1rem + 1vw, 3rem);
line-height: 1;
}
.titre-3,
.entry-content h3 {
font-family: dk, system-ui, sans-serif;
font-size: clamp(1.4rem, 0.7rem + 0.5vw, 1.6rem);
line-height: 1.2;
}
.entry-content h2 {
background-color: #ffffe6;
border-radius: min(70px, 7vw);
padding: clamp(1rem, 2vw, 2rem) calc(clamp(1rem, 2vw, 2rem) * 2);
width: fit-content;
}
.entry-content h3 {
color: #1b3d5f;
}
.titre-4,
.entry-content h4 {
font-family: dk, system-ui, sans-serif;
font-size: clamp(1.4rem, 0.7rem + 0.5vw, 1.6rem);
color: #ff336a;
}
.vignette-titre-2 {
font-family: dk, system-ui, sans-serif;
font-size: clamp(1.4rem, 0.7rem + 0.5vw, 1.6rem);
color: #1b3d5f;
line-height: 0.9;
}
.vignette-titre-1 {
font-family: dk, system-ui, sans-serif;
font-size: clamp(2.9rem, 1.5rem + 1.984vw, 3.728rem);
color: #ff336a;
line-height: 0.9;
}
p,
.entry-content li {
max-width: 80ch;
text-wrap: balance;
text-wrap: pretty;
}
.image-float + * > p {
max-width: none;
}
p.petit,
.petit p {
font-size: 1.3rem;
}
p b,
p strong,
li b,
li strong,
.gras {
font-weight: bold;
}
.sans-fond p {
color: #ffffe6;
text-shadow: 0 0 4em #77300e, 0 0 12em #77300e;
font-size: clamp(1.7rem, 1.5rem + 0.33vw, 2rem);
}
.bloc {
display: flow-root;
}
.entry-content ul {
list-style: disc;
padding-left: 2em;
padding-left: calc(clamp(1rem, 2vw, 2rem) * 2);
display: flow-root;
}
.entry-content ul ::marker {
color: #ff336a;
}
.entry-content ul li:not(:first-child) {
padding-top: 0.5em;
}
em {
font-style: italic;
}
.maj {
text-transform: uppercase;
}
.texte-centre {
text-align: center;
}
.texte-droite {
text-align: right;
}
.accent {
color: #ff336a;
}
.accent2 {
color: #1b3d5f;
}
.clair,
.clair p b,
.clair p strong,
.clair a,
.clair .gras {
color: #ffffe6 !important;
}
a {
background-color: transparent;
text-decoration: none;
}
.entry-content p:not(.bouton) a, .entry-content ul:not(.bouton) li a, .entry-content .wp-block-file a, p:not(.bouton) a {
font-weight: bold;
color: #ff336a;
}
.entry-content p:not(.bouton) a:hover, .entry-content ul:not(.bouton) li a:hover, .entry-content .wp-block-file a:hover, p:not(.bouton) a:hover {
color: #ff336a;
}
a.souligne-lien,
.souligne-lien a,
.texte p a {
background-image: linear-gradient(#ff336a, #ff336a);
background-size: 0% 3px;
background-repeat: no-repeat;
background-position: left bottom;
padding-block: 0.25em;
transition: background-size 0.5s, opacity 1s ease-in-out 0.3s !important;
}
a.souligne-lien:hover,
.souligne-lien a:hover,
.texte p a:hover {
background-size: 100% 3px;
}
.clair a.souligne-lien,
.clair .souligne-lien a,
.clair .texte p a {
background-image: linear-gradient(#ffffe6, #ffffe6);
}
.split-title .char {
opacity: 0;
}
#page::after {
content: "";
pointer-events: none;
height: 100%;
width: 100%;
background: linear-gradient(-45deg, #ffcf15, #ffcf15, rgba(255, 207, 21, 0), rgba(255, 207, 21, 0));
background-size: 400% 200%;
position: fixed;
z-index: 10;
top: 0;
animation: 4s fondu;
}
body.depart #page::after {
background-position: 100% 100%;
transition: all 0.3s ease-out;
}
@keyframes fondu {
0% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}
.static {
pointer-events: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.static::after {
content: "";
position: fixed;
width: calc(100% + 20rem);
height: calc(100% + 20rem);
border: none;
top: -10rem;
left: -10rem;
background-image: url(//melando.fr/wp-content/themes/starter/img/static.png);
-webkit-animation: static 1s steps(2) infinite;
animation: static 1s steps(2) infinite;
}
@keyframes static {
0% {
-webkit-transform: translate3d(0, 9rem, 0);
-moz-transform: translate3d(0, 9rem, 0);
-ms-transform: translate3d(0, 9rem, 0);
transform: translate3d(0, 9rem, 0);
}
10% {
-webkit-transform: translate3d(-1rem, -4rem, 0);
-moz-transform: translate3d(-1rem, -4rem, 0);
-ms-transform: translate3d(-1rem, -4rem, 0);
transform: translate3d(-1rem, -4rem, 0);
}
20% {
-webkit-transform: translate3d(-8rem, 2rem, 0);
-moz-transform: translate3d(-8rem, 2rem, 0);
-ms-transform: translate3d(-8rem, 2rem, 0);
transform: translate3d(-8rem, 2rem, 0);
}
30% {
-webkit-transform: translate3d(9rem, -9rem, 0);
-moz-transform: translate3d(9rem, -9rem, 0);
-ms-transform: translate3d(9rem, -9rem, 0);
transform: translate3d(9rem, -9rem, 0);
}
40% {
-webkit-transform: translate3d(-2rem, 7rem, 0);
-moz-transform: translate3d(-2rem, 7rem, 0);
-ms-transform: translate3d(-2rem, 7rem, 0);
transform: translate3d(-2rem, 7rem, 0);
}
50% {
-webkit-transform: translate3d(-9rem, -4rem, 0);
-moz-transform: translate3d(-9rem, -4rem, 0);
-ms-transform: translate3d(-9rem, -4rem, 0);
transform: translate3d(-9rem, -4rem, 0);
}
60% {
-webkit-transform: translate3d(2rem, 6rem, 0);
-moz-transform: translate3d(2rem, 6rem, 0);
-ms-transform: translate3d(2rem, 6rem, 0);
transform: translate3d(2rem, 6rem, 0);
}
70% {
-webkit-transform: translate3d(7rem, -8rem, 0);
-moz-transform: translate3d(7rem, -8rem, 0);
-ms-transform: translate3d(7rem, -8rem, 0);
transform: translate3d(7rem, -8rem, 0);
}
80% {
-webkit-transform: translate3d(-9rem, 1rem, 0);
-moz-transform: translate3d(-9rem, 1rem, 0);
-ms-transform: translate3d(-9rem, 1rem, 0);
transform: translate3d(-9rem, 1rem, 0);
}
90% {
-webkit-transform: translate3d(6rem, -5rem, 0);
-moz-transform: translate3d(6rem, -5rem, 0);
-ms-transform: translate3d(6rem, -5rem, 0);
transform: translate3d(6rem, -5rem, 0);
}
100% {
-webkit-transform: translate3d(-7rem, 0, 0);
-moz-transform: translate3d(-7rem, 0, 0);
-ms-transform: translate3d(-7rem, 0, 0);
transform: translate3d(-7rem, 0, 0);
}
}
[class*=conteneur] {
position: relative;
max-width: min(192rem, 100% - clamp(1rem, 2vw, 2rem) * 4);
margin-inline: auto;
}
.conteneur-1 {
width: min(144rem, 100% - clamp(1rem, 2vw, 2rem) * 4);
}
.conteneur-2 {
width: min(102rem, 100% - clamp(1rem, 2vw, 2rem) * 4);
}
.conteneur-3 {
width: min(90ch, 100% - clamp(1rem, 2vw, 2rem) * 4);
}
.conteneur-2:not(:has(.image-float)),
.conteneur-4 {
width: min(75ch, 100% - clamp(1rem, 2vw, 2rem) * 4);
}
.flex-group {
display: flex;
flex-wrap: wrap;
}
.flex-group .card {
position: relative;
flex: 1;
}
.colonne {
flex-direction: column;
}
.content-grid {
--padding-inline: clamp(2rem, 4vw, 4rem);
--content-max-width: 75ch;
--breakout-max-width: 1200px;
--breakout-size: calc(
(var(--breakout-max-width) - var(--content-max-width)) / 2
);
display: grid;
grid-template-columns: [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] min(100% - var(--padding-inline) * 2, var(--content-max-width)) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
}
.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
grid-column: content;
}
.content-grid > .breakout {
grid-column: breakout;
}
.content-grid > .full-width {
grid-column: full-width;
display: grid;
grid-template-columns: inherit;
}
img.full-width {
width: 100%;
max-height: 45vh;
object-fit: cover;
}
figure.full-width img {
grid-column: full-width !important;
width: 100%;
max-height: 45vh;
object-fit: cover;
}
[class*=super-grid] {
display: grid;
gap: clamp(1rem, 2vw, 2rem);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.super-grid-00 {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.super-grid-0 {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.super-grid-1 {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.super-grid-2 {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
}
.break-grille {
grid-column: 1/-1;
height: 0;
list-style: none;
}
.grille-dense {
column-gap: calc(clamp(1rem, 2vw, 2rem) * 4);
row-gap: calc(clamp(1rem, 2vw, 2rem) * 4);
}
.grille-dense .sans-visuel,
.grille-dense .paysage,
.grille-dense .portrait,
.grille-dense .carre {
max-width: 600px;
align-self: self-start;
}
.grid__2,
.grid__3,
.grid__4 {
display: grid;
gap: clamp(1rem, 2vw, 2rem);
}
@media (min-width: 45em) {
.grid__2 {
grid-template-columns: repeat(2, 1fr);
}
.grid__4 {
grid-template-columns: repeat(4, 1fr);
}
.grid__4 > *:last-child {
grid-column-start: 4;
grid-row: 1/span 2;
}
.grid-col-span-2 {
grid-column: span 2;
}
}
body:not(.mobile) .grid__3 {
grid-template-columns: repeat(3, 1fr);
}
.sans-marges,
.sans-marges > * {
margin-block: 0 !important;
}
.inter-marges-0 > * + * {
margin-top: var(--espace, 0.5em);
}
.inter-marges-1 > * + *,
.wp-block-column > * + *,
.wp-block-media-text__content > * + * {
margin-top: var(--espace, 1em);
}
.inter-marges-1-1 > * + * {
margin-top: 1.5em;
}
.inter-marges-2 > * + * {
margin-top: calc(clamp(1rem, 2vw, 2rem) * 2);
}
.inter-marges-3 > * + * {
margin-top: calc(clamp(1rem, 2vw, 2rem) * 3);
}
.inter-marges-4 > * + * {
margin-top: calc(clamp(1rem, 2vw, 2rem) * 4);
}
.padding-0 {
padding: calc(clamp(1rem, 2vw, 2rem) / 2);
}
.padding-1 {
padding: clamp(1rem, 2vw, 2rem);
}
.padding-2 {
padding: calc(clamp(1rem, 2vw, 2rem) * 2);
}
.padding-block-0 {
padding-block: calc(clamp(1rem, 2vw, 2rem) / 2) !important;
}
.padding-block-1 {
padding-block: clamp(1rem, 2vw, 2rem);
}
.padding-block-2 {
padding-block: calc(clamp(1rem, 2vw, 2rem) * 2);
}
.padding-block-3 {
padding-block: calc(clamp(1rem, 2vw, 2rem) * 3);
}
.padding-block-4 {
padding-block: calc(clamp(1rem, 2vw, 2rem) * 4);
}
.padding-inline-1 {
padding-inline: clamp(1rem, 2vw, 2rem);
}
.padding-inline-2 {
padding-inline: calc(clamp(1rem, 2vw, 2rem) * 2);
}
.padding-top-0,
img + .petit {
padding-top: calc(clamp(1rem, 2vw, 2rem) / 2) !important;
}
.padding-top-1 {
padding-top: clamp(1rem, 2vw, 2rem);
}
.padding-top-2 {
padding-top: calc(clamp(1rem, 2vw, 2rem) * 2);
}
.padding-top-3 {
padding-top: calc(clamp(1rem, 2vw, 2rem) * 3);
}
.padding-top-4 {
padding-top: calc(clamp(1rem, 2vw, 2rem) * 4);
}
.padding-bottom-0 {
padding-bottom: calc(clamp(1rem, 2vw, 2rem) / 2);
}
.padding-bottom-1 {
padding-bottom: clamp(1rem, 2vw, 2rem);
}
.padding-bottom-2 {
padding-bottom: calc(clamp(1rem, 2vw, 2rem) * 2);
}
.padding-bottom-4 {
padding-bottom: calc(clamp(1rem, 2vw, 2rem) * 4);
}
.padding-left-1 {
padding-left: clamp(1rem, 2vw, 2rem);
}
.padding-left-0 {
padding-left: 0 !important;
}
.margin-block-1 {
margin-block: clamp(1rem, 2vw, 2rem);
}
.margin-block-2 {
margin-block: calc(clamp(1rem, 2vw, 2rem) * 2);
}
.margin-inline-0 {
margin-inline: calc(clamp(1rem, 2vw, 2rem) / 2);
}
.margin-top-0 {
margin-top: 1em;
}
.margin-top-2em {
margin-top: 2em;
}
.margin-top-3em {
margin-top: 3em;
}
.margin-top-1 {
margin-top: clamp(1rem, 2vw, 2rem);
}
.margin-top-2 {
margin-top: calc(clamp(1rem, 2vw, 2rem) * 2);
}
.margin-bottom-1 {
margin-bottom: clamp(1rem, 2vw, 2rem);
}
.margin-bottom-2 {
margin-bottom: calc(clamp(1rem, 2vw, 2rem) * 2);
}
.ch {
justify-content: center;
}
.cv {
align-items: center;
}
.sb {
justify-content: space-between;
}
.sa {
justify-content: space-around;
}
.asb {
align-self: self-start;
}
.centre-objet {
display: grid;
place-items: center;
}
.centrer {
margin-inline: auto;
max-width: 72ch;
}
.grandeMargeBas {
margin-bottom: calc(clamp(1rem, 2vw, 2rem) * 4);
}
.gap-0 {
gap: 0.4em !important;
}
.gap-1 {
gap: clamp(1rem, 2vw, 2rem);
}
.gap-2 {
gap: calc(clamp(1rem, 2vw, 2rem) * 2);
}
.gap-4 {
gap: calc(clamp(1rem, 2vw, 2rem) * 4);
}
.gap-0-2 {
column-gap: 0;
row-gap: calc(clamp(1rem, 2vw, 2rem) * 2);
}
.gap-1-2 {
column-gap: clamp(1rem, 2vw, 2rem);
row-gap: calc(clamp(1rem, 2vw, 2rem) * 2);
}
.gap-1-3 {
column-gap: clamp(1rem, 2vw, 2rem);
row-gap: calc(clamp(1rem, 2vw, 2rem) * 3);
}
.gap-1-4 {
column-gap: clamp(1rem, 2vw, 2rem);
row-gap: calc(clamp(1rem, 2vw, 2rem) * 4);
}
.gap-2-4 {
column-gap: calc(clamp(1rem, 2vw, 2rem) * 2);
row-gap: calc(clamp(1rem, 2vw, 2rem) * 4);
}
a.cta-1,
button.cta-1,
.bouton a,
a.wp-block-button__link {
position: relative;
display: inline-block;
text-transform: uppercase;
font-family: dk, system-ui, sans-serif;
font-size: clamp(1.4rem, 0.7rem + 0.5vw, 1.6rem);
color: #1b3d5f;
padding: 1em;
line-height: 1em;
border-radius: 22px;
background-color: #ffffe6;
background-image: none;
margin-bottom: 0.4em;
outline: 2px solid;
}
a.cta-1::before,
button.cta-1::before,
.bouton a::before,
a.wp-block-button__link::before {
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 22px;
background-image: url(//melando.fr/wp-content/themes/starter/img/lignes2.png);
left: -0.4em;
bottom: -0.4em;
transition: 0.4s ease-out;
}
a.cta-1:hover,
button.cta-1:hover,
.bouton a:hover,
a.wp-block-button__link:hover {
color: #ff336a;
}
a.cta-1:hover::before,
button.cta-1:hover::before,
.bouton a:hover::before,
a.wp-block-button__link:hover::before {
background-position: 50% 50%;
animation: 3s lignes infinite linear;
}
a.cta-1.bleu,
button.cta-1.bleu,
.bouton a.bleu,
a.wp-block-button__link.bleu {
background-color: #1b3d5f;
color: #ffffe6;
outline: none;
}
.bouton a,
a.wp-block-button__link {
margin-block: 0.4em 0.8em;
}
@keyframes lignes {
0% {
background-position: 0 0;
}
100% {
background-position: -160px 0;
}
}   @media screen and (min-width: 69em) {
.survol-1:hover a img {
opacity: 0.85;
transition: opacity 0.7s;
}
.survol-1 a:hover img {
opacity: 1;
transition: opacity 0.3s;
}
.opacite-thumb img.actif {
opacity: 0.75;
}
.opacite-thumb a:hover img.actif {
opacity: 1;
transition: opacity 0.7s;
}
.transparent.actif {
opacity: 0.8;
}
}
.vignette {
align-self: self-start;
background-color: #ffffe6;
border-radius: 22px;
box-shadow: 1px 1px 5px rgba(27, 61, 95, 0.25);
}
.vignette img {
border-radius: 22px 22px 0 0;
}
.vignette.avec-lien {
transition: all 0.3s, opacity 0.7s ease-in-out !important;
}
.vignette.avec-lien:hover {
box-shadow: 1px 1px 7px rgba(27, 61, 95, 0.11);
scale: 1.02;
z-index: 100;
}
.bt_fermer {
position: absolute;
top: var(--mt, 0);
right: 0;
height: min(7vw, 12rem);
aspect-ratio: 1;
}
.bt_fermer .fermer {
width: 3rem;
aspect-ratio: 1;
color: var(--couleur, #ff336a);
}
.bt_fermer .fermer::before,
.bt_fermer .fermer::after {
content: "";
position: absolute;
right: 0;
top: 1.125rem;
display: block;
width: 3rem;
height: 0.75rem;
background: currentcolor;
transition: transform 0.4s;
rotate: -45deg;
}
.bt_fermer .fermer::after {
rotate: 45deg;
}
@media screen and (min-width: 69em) {
#petiteSouris {
position: fixed;
top: 0;
left: 0;
opacity: 0;
border-radius: 50%;
width: 0em;
translate: -50% -50%;
aspect-ratio: 1;
z-index: 1;
pointer-events: none;
background: #ff336a;
transition: all 0.9s cubic-bezier(0, 0.59, 0.37, 0.98), opacity 0.3s;
display: grid;
place-items: center;
}
.survol_souris #petiteSouris {
width: 6rem;
transition: all 0.4s cubic-bezier(0, 0.59, 0.37, 0.98);
}
.survol_souris.survol_petit #petiteSouris {
width: 4rem;
}
.masque #petiteSouris {
display: none;
}
.survol_souris.ls #petiteSouris {
width: fit-content;
aspect-ratio: auto;
border-radius: 999px;
box-shadow: 0.4em 0.4em 1em #000;
}
.survol_souris.ls #petiteSouris::after {
content: "Lire la suite";
position: relative;
top: 0;
left: 0;
color: #ffcf15;
font-size: 1.3rem;
padding: 0.4em 0.8em;
line-height: 1;
}
.flecheD #petiteSouris::after,
.flecheG #petiteSouris::after {
content: "";
width: 40%;
aspect-ratio: 1;
border-style: solid;
border-color: var(--couleur, #000);
border-width: 0 4px 4px 0;
transform: translate(-20%, 0%) rotate(-45deg);
transition: border-color 0.4s;
display: block;
}
.flecheG #petiteSouris::after {
rotate: 180deg;
}
.survol_souris.plus #petiteSouris {
background-color: pink;
}
}
.home #site-header {
position: absolute;
}
#site-header {
padding-block: clamp(1rem, 2vw, 2rem);
padding-inline: calc((100% - min(144rem, 100% - clamp(1rem, 2vw, 2rem) * 4)) / 2);
position: relative;
width: 100%;
display: flex;
left: 0;
top: 0;
z-index: 1000;
font-family: dk, system-ui, sans-serif;
}
#logo {
max-width: 64vw;
}
#logo a {
display: block;
}
#logo a svg {
width: clamp(140px, 55vw, 310px);
transition: width 0.7s 0.3s;
}
#site-navigation {
display: flex;
place-items: center;
}
#site-navigation li {
transform: translate3d(100%, 0px, 0px);
transition: transform 0.7s 0.3s;
transition-timing-function: cubic-bezier(0.05, 0.97, 0.37, 0.98);
}
#site-navigation li a,
#site-navigation li button {
font-size: clamp(2.5rem, 1.1rem + 1vw, 3rem);
}
#site-navigation.toggled ul#primary-menu {
transform: translate3d(0px, 0px, 0px);
}
#site-navigation.toggled li {
transform: translate3d(0px, 0px, 0px);
}
#site-navigation.toggled li:nth-of-type(1) {
transition-delay: 0.1s;
transition-duration: 0.6s;
}
#site-navigation.toggled li:nth-of-type(2) {
transition-delay: 0.2s;
transition-duration: 0.7s;
}
#site-navigation.toggled li:nth-of-type(3) {
transition-delay: 0.3s;
transition-duration: 0.8s;
}
#site-navigation.toggled li:nth-of-type(4) {
transition-delay: 0.4s;
transition-duration: 0.9s;
}
#site-navigation.toggled li:nth-of-type(5) {
transition-delay: 0.5s;
transition-duration: 1s;
}
#site-navigation.toggled li:nth-of-type(6) {
transition-delay: 0.6s;
transition-duration: 1.1s;
}
#site-navigation.toggled li:nth-of-type(7) {
transition-delay: 0.7s;
transition-duration: 1.2s;
}
#site-navigation.toggled li:nth-of-type(8) {
transition-delay: 0.8s;
transition-duration: 1.3s;
}
#site-navigation.toggled li:nth-of-type(9) {
transition-delay: 0.9s;
transition-duration: 1.4s;
}
#site-navigation.toggled li:nth-of-type(10) {
transition-delay: 1s;
transition-duration: 1.5s;
}
#site-navigation a[aria-current=page],
#site-navigation a:active {
color: #ff336a;
}
ul#primary-menu {
position: absolute;
z-index: 1;
display: flex;
flex-direction: column;
gap: 1em;
height: 100svh;
top: 0;
right: 0;
padding-block: 5em 1em;
padding-inline: calc(clamp(1rem, 2vw, 2rem) * 2);
background-color: #ff336a;
border-left: 1px solid transparent;
transform: translate3d(100%, 0px, 0px);
overflow-x: hidden;
overflow-y: auto;
transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1), border 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#menu-toggle {
position: fixed;
z-index: 2;
right: 0;
cursor: pointer;
color: #ffffe6;
background: #ff336a;
top: clamp(1rem, 2vw, 2rem);
padding: 1em;
border-radius: 999px 0 0 999px;
box-shadow: 5px 4px 13px -5px #000;
}
#menu-bt,
#menu-bt2 {
display: flex;
align-items: center;
position: relative;
overflow: hidden;
gap: 0.8em;
text-transform: uppercase;
}
#menu-bt-texte,
#menu-bt-texte2 {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.1, 1);
}
#menu-bt-texte-fermer,
#menu-bt-texte-fermer2 {
position: absolute;
letter-spacing: -0.1rem;
transform: translate3d(0, 100%, 0);
left: 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.1, 1);
}
#menu-bt-dots {
position: relative;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.1, 1);
transform: translateZ(0) rotate(180deg);
width: 1.15em;
height: 1.15em;
}
#menu-bt-dots .menu-bt-dot {
position: absolute;
display: inline-block;
width: 0.32em;
aspect-ratio: 1;
background: currentColor;
border-radius: 100%;
transform: translateY(-50%);
}
#menu-bt-dots .menu-bt-dot:first-child {
left: 0.1em;
top: 50%;
}
#menu-bt-dots .menu-bt-dot:last-child {
top: 50%;
}
#menu-toggle:hover #menu-bt-dots,
#site-navigation.toggled #menu-bt-dots {
transform: rotate(270deg);
}
#site-navigation.toggled #menu-bt-texte-fermer,
#site-navigation.toggled2 #menu-bt-texte-fermer2 {
transform: translate3d(0, 0, 0);
}
#site-navigation.toggled #menu-bt-texte,
#site-navigation.toggled2 #menu-bt-texte2 {
transform: translate3d(0, -100%, 0);
}
.plus-plus {
display: none;
}
#menu-plus ul {
display: flex;
flex-direction: column;
gap: 1em;
} @media screen and (min-width: 69em) {
#menu-toggle {
display: none;
}
#site-header {
transition: transform 0.77s;
}
#site-header::after {
content: "";
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 0%;
background: #ff336a;
backdrop-filter: blur(4px);
transition: all 0.3s ease-out 0.3s;
z-index: -1;
}
.menu__haut:not(.depart) #site-header {
transform: translate3d(0px, -100%, 0px);
transition: transform 0.4s;
}
body:not(.depart) #site-header.fond {
transition: transform 0.5s;
}
body:not(.depart) #site-header.fond::after {
height: 100%;
transition: all 0.3s ease-out 0.4s;
}
body:not(.depart) #site-header.fond #logo svg {
width: 200px;
}
body:not(.depart) #site-header.fond #logo .accent {
color: #ffffe6;
transition: all 0.3s ease-out 0.7s;
}
body.depart #site-header::after {
transition: all 0.2s ease-out;
}
#site-header .accent {
transition: 0.3s ease-out 0.3s;
}
ul#primary-menu {
display: inherit;
position: relative;
background-color: transparent;
transform: translate3d(0px, 0px, 0px);
padding: 0;
max-width: none;
border: none;
height: auto;
overflow: visible;
flex-direction: row;
}
ul#primary-menu li {
transform: translate3d(0px, 0px, 0px);
white-space: nowrap;
}
ul#primary-menu li a,
ul#primary-menu li button {
font-size: clamp(1.4rem, 0.7rem + 0.5vw, 1.6rem);
padding: 1em;
transition: 0.2s 0.2s;
}
#site-header:not(.fond) ul#primary-menu li a,
#site-header:not(.fond) ul#primary-menu li button {
background-color: #ff336a;
color: #ffffe6;
outline: none;
}
#site-header:not(.fond) ul#primary-menu li a:hover,
#site-header:not(.fond) ul#primary-menu li button:hover {
color: #ffcf15;
transition: 0.1s;
}
#site-navigation a[aria-current=page],
#site-navigation a:active {
background-color: #ffcf15;
color: #1b3d5f;
}
#site-navigation:not(:hover) a[aria-current=page],
#site-navigation:not(:hover) a:active {
color: #ff336a;
}
.plus-plus {
display: inherit;
}
#menu-plus {
position: absolute;
right: 0;
text-align: right;
top: 100%;
margin-top: clamp(1rem, 2vw, 2rem);
transform: translate3d(100%, 0, 0);
transition: transform 0.7s ease-out;
}
.fond #menu-plus {
margin-top: calc(clamp(1rem, 2vw, 2rem) * 3);
}
#menu-plus li {
transform: translate3d(calc((220% + 100vw - min(144rem, 100vw - clamp(1rem, 2vw, 2rem) * 3)) / 2), 0, 0) !important;
}
#menu-plus a {
background-color: #ff336a !important;
color: #ffffe6;
}
#menu-plus a:hover {
color: #ffcf15 !important;
}
#menu-plus li:nth-of-type(1) {
transition-delay: 0.1s;
transition-duration: 0.7s;
}
#menu-plus li:nth-of-type(2) {
transition-delay: 0.2s;
transition-duration: 0.9s;
}
#menu-plus li:nth-of-type(3) {
transition-delay: 0.3s;
transition-duration: 1.1s;
}
#menu-plus li:nth-of-type(4) {
transition-delay: 0.4s;
transition-duration: 1.3s;
}
#menu-plus li:nth-of-type(5) {
transition-delay: 0.5s;
transition-duration: 1.5s;
}
#menu-plus li:nth-of-type(6) {
transition-delay: 0.6s;
transition-duration: 1.7s;
}
#menu-plus li:nth-of-type(7) {
transition-delay: 0.7s;
transition-duration: 1.9s;
}
#menu-plus li:nth-of-type(8) {
transition-delay: 0.8s;
transition-duration: 2.1s;
}
#menu-plus li:nth-of-type(9) {
transition-delay: 0.9s;
transition-duration: 2.3s;
}
#menu-plus li:nth-of-type(10) {
transition-delay: 1s;
transition-duration: 2.5s;
}
#site-navigation.toggled2 #menu-plus {
transform: translate3d(0, 0, 0);
}
#site-navigation.toggled2 #menu-plus li {
transform: translate3d(0, 0, 0) !important;
}
}
#main-footer {
clear: both;
position: relative;
}
#main-footer a.souligne-lien,
#main-footer .souligne-lien a {
background-image: linear-gradient(#ff336a, #ff336a);
}
@media (min-width: 69em) {
#main-footer .rs {
padding: 0 clamp(1rem, 2vw, 2rem) !important;
}
}
.partenaires {
gap: 2em 4vw;
}
.partenaires p {
width: 100%;
max-width: 100%;
text-align: center;
align-self: flex-start;
font-family: dk, system-ui, sans-serif;
}
.partenaires img {
width: auto;
max-width: 15rem;
max-height: 5.5rem;
mix-blend-mode: darken;
}
.bt__gravite {
margin: auto;
display: grid;
place-items: center;
}
.bt__gravite > a, .bt__gravite > button {
font: inherit;
width: 6rem;
background: none;
border: none;
display: grid;
place-items: center;
z-index: 1;
transform: translate3D(var(--tx, 0), var(--ty, 0), 0);
transition: var(--transition, all 0.3s ease-out);
}
.bt__gravite > a:focus-visible, .bt__gravite > button:focus-visible {
outline: 2px solid #ffcf15;
outline-offset: 2px;
opacity: 1;
}
.bt__gravite .bt__icon {
width: 50%;
}
.bt__gravite .bt__icon > * {
transition: fill 0.4s;
}
.bt__gravite .symbole__fb,
.bt__gravite .symbole__insta,
.bt__gravite .symbole__x,
.bt__gravite .symbole__yt,
.bt__gravite .symbole__linkedin,
.bt__gravite .symbole__snapchat,
.bt__gravite .symbole__tiktok {
fill: #ffffe6;
}
.bt__gravite .symbole__x {
fill: #1b3d5f;
}
@media (min-width: 69em) {
.bt__gravite {
width: min(6.5vw, 10rem);
max-width: 100%;
}
.bt__gravite:not(:hover) .fond__fb,
.bt__gravite:not(:hover) .fond__insta,
.bt__gravite:not(:hover) .fond__yt,
.bt__gravite:not(:hover) .fond__linkedin,
.bt__gravite:not(:hover) .fond__snapchat,
.bt__gravite:not(:hover) .fond__tiktok {
fill: #ffcf15;
}
.bt__gravite:not(:hover) .symbole__fb,
.bt__gravite:not(:hover) .symbole__insta,
.bt__gravite:not(:hover) .symbole__yt,
.bt__gravite:not(:hover) .symbole__linkedin,
.bt__gravite:not(:hover) .symbole__snapchat,
.bt__gravite:not(:hover) .symbole__tiktok {
fill: #1b3d5f;
}
.bt__gravite:not(:hover) .symbole__x {
fill: #ffcf15;
}
}
.compte-rs {
margin-top: -1em;
}
.accordeon__wrap {
cursor: pointer;
background-color: transparent;
}
.accordeon__contenu {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s;
}
.active .accordeon__contenu {
grid-template-rows: 1fr;
}
.accordeon__contenu > div {
overflow: hidden;
}
.accordeon__bt {
background: transparent;
margin-right: 4rem;
}
.accordeon__bt::before,
.accordeon__bt::after {
content: "";
position: absolute;
right: clamp(1rem, 2vw, 2rem);
top: calc(1.125rem + clamp(1rem, 2vw, 2rem));
display: block;
width: 3rem;
height: 0.75rem;
background: currentcolor;
transition: transform 0.4s;
}
.accordeon__bt::after {
rotate: 90deg;
}
.accordeon__wrap.active .accordeon__bt::before,
.accordeon__wrap.active .accordeon__bt::after {
transform: rotate(45deg);
}   .image-galerie {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
ul.diaporamaMini {
display: inherit;
position: relative;
list-style: none;
width: 100%;
min-height: 280px;
margin: 0;
overflow: hidden;
}
ul.diaporamaMini li {
position: absolute;
opacity: 0;
height: 100%;
width: 100%;
top: 0;
left: 0;
transition: all 3s 0s;
}
ul.diaporamaMini li img {
margin: auto;
width: 100%;
height: 100%;
object-fit: cover;
}
ul.diaporamaMini li span {
position: absolute;
font-size: 1.3rem;
bottom: 1em;
left: 2em;
color: #ffffe6;
font-weight: bold;
}   #diaporama {
position: relative;
width: 100%;
max-height: 100svh;
aspect-ratio: 16/9;
overflow: hidden;
grid-column: inherit;
}
#diaporama #bt_fermer_diaporama {
display: none;
}
.full-width #diaporama {
max-height: 80svh;
}
#contSlides {
height: 100%;
}
#slides {
position: relative;
display: flex;
height: 100%;
transition: all 1s cubic-bezier(0.33, 0.09, 0.32, 1);
}
#slides.sansTransition {
transition: none;
}
#slides.fondu {
display: inherit;
}
#slides.fondu li {
position: absolute;
height: 100%;
opacity: 0 !important;
filter: blur(100px);
transition: opacity 3.8s ease-out, filter 1.2s cubic-bezier(0, 0.59, 0.37, 0.98) !important;
}
#slides.fondu li.actuel {
z-index: 1;
opacity: 1 !important;
filter: blur(0);
}
#slides li {
display: flex;
justify-content: center;
width: 100%;
opacity: 1;
overflow: hidden;
}
#slides li img {
opacity: 1;
height: 100%;
width: auto;
object-fit: cover;
}
#slides li.paysage img {
width: 100%;
}
#diaporama.diapoGrandOk:not(.grand) li.actuel {
cursor: pointer;
}
#nav__fleche__diaporama {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.diapo_Nav {
flex: inherit;
z-index: 2;
width: 20%;
transition: all 0.1s;
}
.diapo_Nav.masque {
opacity: 0;
cursor: default;
}
.diapo_Nav.masque button {
cursor: default;
}
.diapo_Nav .fleche {
width: 40%;
max-width: 4vw;
aspect-ratio: 1;
border-style: solid;
border-color: var(--couleur, #fff);
border-width: 0 4px 4px 0;
transform: translate(-20%, 0) rotate(-45deg);
transition: border-color 0.4s;
}
#bt_Precedent_Diaporama .fleche {
rotate: 180deg;
}
#nav__ronds__diaporama {
display: none;
}
.legende_diaporama {
position: absolute;
bottom: 0;
background: #ffcf15;
width: 100%;
display: grid;
place-items: center;
padding: 0.4em calc(clamp(1rem, 2vw, 2rem) / 2);
translate: 0 100%;
transition: translate 0.4s;
}
li.actuel .legende_diaporama {
translate: 0;
transition: translate 1s 0.7s;
}
@media (min-width: 69em) {
#diaporama.grand {
position: fixed;
top: 0;
left: 0;
z-index: 901;
height: 100svh;
max-height: 100svh !important;
width: 100vw;
margin: 0;
padding-block: var(--mt, calc(clamp(1rem, 2vw, 2rem) * 4));
background-color: #ffcf15;
display: flex;
}
#diaporama.grand .paysage img {
height: 100%;
width: auto;
}
#diaporama.grand #slides {
flex: 1 0 auto;
width: auto !important;
}
#diaporama.grand #slides li {
position: relative;
width: auto;
flex: 0 0 auto;
height: 100%;
padding-inline: calc(clamp(1rem, 2vw, 2rem) / 2);
}
#diaporama.grand #slides li:not(.actuel) {
cursor: pointer;
}
#diaporama.grand #nav__ronds__diaporama .bt__gravite {
width: var(--mt);
}
#diaporama.grand #nav__fleche__diaporama {
display: none;
}
#diaporama.grand #bt_fermer_diaporama {
display: grid;
}
#nav__ronds__diaporama {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
bottom: 0;
z-index: 2;
width: 100%;
transition: opacity 0.4s;
}
#nav__ronds__diaporama .bt__gravite {
flex: inherit;
width: clamp(6rem, 7vw, 12rem);
}
#nav__ronds__diaporama .bt__gravite button {
background-color: var(--couleur, #fff);
width: min(30%, 2rem);
}
#nav__ronds__diaporama .bt__gravite button:hover {
width: 1.2rem;
background-color: var(--couleur, #fff);
transition: all 0.4s cubic-bezier(0, 0.59, 0.37, 0.98), width 0.3s 0.2s;
}
#nav__ronds__diaporama .bt__gravite button.actuel:not(:hover) {
background-color: #ff336a;
}
#diaporama.grand.full-width {
position: relative;
max-height: 100vh !important;
}
#diaporama.grand.full-width #bt_fermer_diaporama {
display: none;
}
}
.alignleft {
float: left;
margin: 0 calc(clamp(1rem, 2vw, 2rem) / 2) calc(clamp(1rem, 2vw, 2rem) / 2) 0;
}
.alignright {
float: right;
margin: 0 0 calc(clamp(1rem, 2vw, 2rem) / 2) calc(clamp(1rem, 2vw, 2rem) / 2);
}
.wp-block-file__button {
display: none;
}
.has-text-align-center {
margin-inline: auto;
}
.wp-block-group.fond-vert {
background-color: #80f0a5;
padding: clamp(1rem, 2vw, 2rem);
border-radius: min(70px, 7vw);
margin-inline: auto;
max-width: 400px;
}
.wp-block-group.fond-vert h2 {
background-color: transparent;
padding: 0;
color: #ff336a;
margin-bottom: clamp(1rem, 2vw, 2rem);
}
.wp-block-group h1,
.wp-block-group p {
margin-bottom: clamp(1rem, 2vw, 2rem);
}
.hero {
position: relative;
max-width: 1920px;
margin: auto;
overflow: hidden;
background: linear-gradient(#62d0e9, #ffcf15);
}
.gradient {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.fond-degrade {
position: relative;
overflow: hidden;
background: linear-gradient(#80f0a5, #80f0a5);
}
.g1 {
background: linear-gradient(#14a3c4, #c6fdd3);
animation: fade1 40s infinite linear;
}
.g2 {
background: linear-gradient(#62d0e9, #80f0a5);
animation: fade2 40s infinite linear;
}
.g3 {
background: linear-gradient(#80f0a5, #ffac8e);
animation: fade3 40s infinite linear;
}
@keyframes fade1 {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fade2 {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
50% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fade3 {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
50% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.soleil {
position: absolute;
background-color: #ff336a;
width: 18%;
width: max(18%, 19vh);
min-width: 19vh;
aspect-ratio: 1;
border-radius: 50%;
bottom: -11%;
left: 27%;
}
.nuage1 {
position: absolute;
opacity: 0.5;
left: 35vw;
animation: nuage1 140s linear infinite;
}
@keyframes nuage1 {
0% {
left: 35vw;
}
69% {
opacity: 1;
left: -100vw;
}
70% {
opacity: 0;
left: -100vw;
}
71% {
opacity: 0;
left: 100vw;
}
72% {
opacity: 1;
left: 100vw;
}
100% {
left: 35vw;
}
}
.nuage2 {
position: absolute;
opacity: 0.5;
top: 0;
right: 0vw;
animation: nuage2 90s linear infinite;
}
@keyframes nuage2 {
0% {
right: 0vw;
}
49% {
opacity: 0;
right: 100vw;
}
50% {
opacity: 0;
right: -100vw;
}
51% {
opacity: 1;
right: -100vw;
}
100% {
right: 0vw;
}
}
.nuage3 {
position: absolute;
opacity: 0.5;
top: 0;
left: 0vw;
animation: nuage3 180s linear infinite;
rotate: 180deg;
}
@keyframes nuage3 {
0% {
left: 0vw;
}
49% {
opacity: 0;
left: -100vw;
}
50% {
opacity: 0;
left: 100vw;
}
51% {
opacity: 1;
left: 100vw;
}
100% {
left: 0vw;
}
}
.loup {
position: absolute;
height: auto;
width: 200%;
bottom: -2px;
left: -34%;
max-width: none;
}
.texte-accueil {
position: relative;
padding: 25vh calc(clamp(1rem, 2vw, 2rem) * 2) 20vh;
display: grid;
gap: clamp(1rem, 2vw, 2rem);
width: 100%;
text-align: right;
}
.texte-accueil h1 strong {
font-size: clamp(4rem, 1rem + 3vw, 5.6rem);
}
.texte-accueil .presentation {
z-index: 1;
}
.texte-accueil p {
max-width: 36ch;
margin-left: auto;
}
.fond-carte {
background-image: url(//melando.fr/wp-content/themes/starter/img/carte-fond.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
top: -1px;
position: relative;
}
@media screen and (min-width: 40em) {
.hero {
height: max(67vh, 480px);
}
.texte-accueil {
position: absolute;
padding: 0;
top: 0;
right: calc((100% - min(144rem, 100% - clamp(1rem, 2vw, 2rem) * 4)) / 2);
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
width: 50%;
text-align: inherit;
}
}
@media screen and (min-width: 45em) {
.soleil {
width: 18%;
left: 31%;
}
}
@media screen and (min-width: 50em) {
.loup {
max-width: 100%;
left: 0;
}
}
.tarifs {
position: relative;
background-color: #80f0a5;
border-radius: min(70px, 7vw);
padding: clamp(1rem, 2vw, 2rem) calc(clamp(1rem, 2vw, 2rem) * 2);
max-width: 100%;
text-align: center;
}
.tarif-fleches {
position: relative;
margin-top: clamp(1rem, 2vw, 2rem);
height: 20px;
}
.tarif-fleches .tarif-line {
position: absolute;
left: 30px;
right: 30px;
height: 10px;
background-color: #ffcf15;
transform: translateY(-50%);
}
.tarif-fleches .tarif-arrow {
position: absolute;
transform: translateY(-50%);
width: 0;
height: 0;
z-index: 1;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
.tarif-fleches .left-arrow {
left: 0;
border-right: 30px solid #ffcf15;
}
.tarif-fleches .right-arrow {
right: 0;
border-left: 30px solid #ffcf15;
} .tarif-top,
.tarif-bottom {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.tarif-col {
flex: 1;
}
.tarif-bottom p {
font-size: 14px;
margin: 0;
}
.tarif-circle {
background-color: #ffffe6;
color: #ff336a;
width: 60px;
height: 60px;
border-radius: 50%;
margin: 0 auto;
display: grid;
place-items: center;
font-family: dk, system-ui, sans-serif;
}
iframe#idIframe {
background-color: #ffffe6;
border-radius: min(70px, 7vw);
}
#mc_embed_signup form {
margin: clamp(1rem, 2vw, 2rem) 0 !important;
}
#mc_embed_signup .button {
background-color: #ff336a !important;
color: #1b3d5f !important;
font-weight: bold !important;
}
#mc_embed_signup #mce-responses {
padding: 0em 5% !important;
width: 100% !important;
margin: 0 !important;
}
#mc_embed_signup #mce-success-response {
color: #ffffe6 !important;
width: 100% !important;
margin: 0 !important;
}
#mc_embed_signup input {
border-radius: 999px !important;
max-width: 100% !important;
margin: 0 auto !important;
height: 4rem !important;
}
#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {
border: 2px solid #ff336a !important;
}
ul#agenda-accueil {
display: grid;
gap: calc(clamp(1rem, 2vw, 2rem) * 2);
}
ul#agenda-accueil li.titre-1.avec-personnage {
position: relative;
}
ul#agenda-accueil li.titre-1.avec-personnage .personnage {
display: none;
position: absolute;
width: 40%;
bottom: -5rem;
left: -3rem;
}
ul#agenda-accueil li.titre-1.avec-personnage .personnage img {
height: 100%;
max-height: max(48vh, 470px);
width: auto;
}
ul#agenda-accueil li.titre-1.avec-personnage h2 {
text-align: center;
}
ul#agenda-accueil li.lien-agenda {
background-color: #ff336a;
border-radius: min(70px, 7vw);
padding: calc(clamp(1rem, 2vw, 2rem) * 2);
transition: 0.1s ease-out;
}
ul#agenda-accueil li.lien-agenda:hover {
scale: 0.95;
}
ul#agenda-accueil li.lien-agenda a {
display: grid;
height: 100%;
align-content: center;
}
ul#agenda-accueil li.une-date {
grid-row: span 2;
position: relative;
background-color: #1b3d5f;
border-radius: min(70px, 7vw);
overflow: hidden;
}
ul#agenda-accueil .photo-fond {
height: 100%;
}
ul#agenda-accueil .simple .photo-fond {
width: 100%;
position: absolute;
}
ul#agenda-accueil .infos {
pointer-events: none;
display: grid;
}
ul#agenda-accueil .simple .infos {
margin: calc(clamp(1rem, 2vw, 2rem) * 2);
position: relative;
margin-top: 200px;
}
ul#agenda-accueil .journee {
position: relative;
display: flex;
height: 100%;
}
ul#agenda-accueil .journee a.lien-agenda {
width: 100%;
}
ul#agenda-accueil .journee a.lien-agenda .infos-journee {
position: relative;
padding: calc(clamp(1rem, 2vw, 2rem) * 2);
width: 100%;
z-index: 1;
pointer-events: none;
}
ul#agenda-accueil .journee a.lien-agenda .photos-journee {
width: 50%;
height: 100%;
position: absolute;
right: -1px;
top: 0;
display: grid;
grid-auto-rows: 1fr;
}
ul#agenda-accueil .journee a.lien-agenda .infos {
position: relative;
}
ul#agenda-accueil .journee a.lien-agenda .infos2 {
max-width: 50%;
}
ul#agenda-accueil .journee a.lien-agenda .info-journee {
padding: 0;
}
ul#agenda-accueil .journee a.lien-agenda .info-journee.t1 {
margin-block: 0.2em;
}
.photo-fond {
overflow: hidden;
}
.photo-fond img {
object-fit: cover;
height: 100%;
width: 100%;
transition: opacity 0.4s ease-out, transform 0.5s ease-out !important;
}
.infos > div:not(.filtres),
.infos .filtres > div {
display: flex;
flex-wrap: wrap;
}
.info {
padding: 0.4em clamp(1rem, 2vw, 2rem);
font-family: dk, system-ui, sans-serif;
font-size: clamp(1.4rem, 0.7rem + 0.5vw, 1.6rem);
line-height: 1;
}
.info.lieu {
position: relative;
}
.info.lieu::before {
content: "";
display: inline-block;
height: 1em;
aspect-ratio: 1;
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
background-image: url(//melando.fr/wp-content/themes/starter/img/pictos/pictos_carte1.svg);
}
#evs {
display: grid;
gap: calc(clamp(1rem, 2vw, 2rem) * 2);
}
#evs .presentation-evs {
z-index: 1;
}
@media screen and (min-width: 30em) {
#evs {
grid-template-columns: repeat(2, 1fr);
}
#evs h2 {
text-align: right;
}
}
@media screen and (min-width: 45em) {
ul#agenda-accueil {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
}
ul#agenda-accueil li.titre-1.avec-personnage {
display: grid;
place-items: end baseline;
grid-row-start: 1;
grid-column-start: 2;
padding-left: calc(30% - 2rem);
}
ul#agenda-accueil li.titre-1.avec-personnage .personnage {
display: inherit;
position: absolute;
width: 40%;
bottom: -5rem;
left: -3rem;
}
ul#agenda-accueil li.titre-1.avec-personnage .personnage img {
height: 100%;
max-height: max(48vh, 470px);
width: auto;
}
ul#agenda-accueil li.titre-1.avec-personnage h2 {
text-align: left;
max-width: 10ch;
}
ul#agenda-accueil .simple .infos {
position: absolute;
bottom: 0;
}
}
body:not(.mobile) ul#agenda-accueil .filtres {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 500ms;
}
body:not(.mobile) ul#agenda-accueil .filtres div {
overflow: hidden;
}
body:not(.mobile) ul#agenda-accueil .lien-agenda:hover .filtres {
grid-template-rows: 1fr;
}
body:not(.mobile) .photo-evs {
max-width: 50%;
}
#filtres1,
#filtres2,
#filtres3 {
margin-left: calc(clamp(1rem, 2vw, 2rem) / 2);
line-height: 1;
}
#filtres1 button,
#filtres2 button,
#filtres3 button {
font-size: clamp(1.4rem, 0.7rem + 0.5vw, 1.6rem);
font-family: dk, system-ui, sans-serif;
position: relative;
padding: 0.4em;
background-color: #ffffe6;
transition: all 0.2s 0.2s, font-size 0s;
}
#filtres1 button span,
#filtres2 button span,
#filtres3 button span {
position: relative;
z-index: 1;
}
#filtres1 button::before,
#filtres2 button::before,
#filtres3 button::before {
content: "";
position: absolute;
bottom: 0;
left: 0.4em;
background: #ff336a;
width: calc(100% - 0.8em);
height: 0px;
transition: all 0.2s, height 0.3s 0.2s;
}
#filtres1 button:hover::before,
#filtres2 button:hover::before,
#filtres3 button:hover::before {
height: 5px;
}
#filtres1 button[aria-checked=true],
#filtres2 button[aria-checked=true],
#filtres3 button[aria-checked=true] {
color: #ffffe6 !important;
}
#filtres1 button[aria-checked=true]::before,
#filtres2 button[aria-checked=true]::before,
#filtres3 button[aria-checked=true]::before {
left: 0;
width: 100%;
height: 100%;
}
.archive #agenda {
min-height: 100vh;
}
#agenda .titre-festival .info {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 100%;
}
#agenda .uneActivite {
display: grid;
grid-template-rows: 1fr;
transition: all 0.7s ease-in-out;
}
#agenda .uneActivite a, #agenda .uneActivite#rien p {
overflow: hidden;
}
#agenda .uneActivite.masque {
grid-template-rows: 0fr;
padding-bottom: 0;
margin-top: 0 !important;
}
#agenda .filtres2 > div {
transition: all 500ms;
}
#agenda .filtres2 > div div {
overflow: hidden;
}
#agenda .journee .filtres2 {
padding-bottom: clamp(1rem, 2vw, 2rem);
}
#agenda .photo-agenda {
min-height: 160px;
width: 100%;
}
@media screen and (min-width: 35em) {
#agenda .uneActivite a {
width: fit-content;
transition: all 0.7s ease-out;
}
#agenda .uneActivite a:hover {
transform: translate3d(2rem, 0, 0);
}
#agenda .uneActivite a > div {
display: flex;
}
#agenda .uneActivite a .photo-agenda {
aspect-ratio: 16/9;
margin-right: clamp(1rem, 2vw, 2rem);
width: auto;
max-width: 25vw;
flex: 0 0 auto;
}
}
#agenda .filtres2 .info {
padding: 0.4em clamp(1rem, 2vw, 2rem);
}
#agenda .une-belle-journee {
display: grid;
}
#agenda .une-belle-journee .titre-journee {
order: -1;
margin-bottom: 0.8rem;
}
#agenda .une-belle-journee .journee {
margin-top: 0.8rem;
}
.single-agenda .infos .info {
padding: 0.8em;
}
.single-agenda .infos .info.t2 {
padding-block: 0.4em;
}
.single-agenda .les-visuels {
display: grid;
grid-auto-flow: row;
grid-template-rows: 1fr;
}
.single-agenda .liens {
align-items: baseline;
}
.single-agenda .contenu-droite {
position: relative;
z-index: 0;
}
#autres-dates a {
font-size: 1.3rem;
display: flex;
}
#autres-dates a .carre {
width: 100px;
flex: 0 0 auto;
}
#autres-dates a .info {
padding: 0.8rem;
width: fit-content;
transition: 0.4s ease-out;
}
#autres-dates a:hover .info {
transform: translate3d(0, -0.4em, 0);
}
.entry-content .hauteur figure {
height: 100%;
}
.entry-content figure {
border-radius: min(70px, 7vw);
overflow: hidden;
margin-bottom: calc(clamp(1rem, 2vw, 2rem) * 2) !important;
}
.entry-content figure img {
display: initial;
font-style: normal;
object-fit: cover;
width: 100%;
height: 100%;
}
figure.wp-block-embed {
overflow: visible;
}
.image-float {
margin-bottom: 1em;
margin-inline: auto;
}
.image-float img {
width: 100%;
}
@media screen and (min-width: 45em) {
.image-float {
width: calc(50% - clamp(1rem, 2vw, 2rem));
margin-right: calc(clamp(1rem, 2vw, 2rem) * 2);
float: left;
}
}
article figure.wp-block-image {
clear: both;
width: fit-content;
}
.photo-adaptable {
position: relative;
}
.photo-adaptable img {
position: absolute;
top: 0;
left: 0;
}
[class*=photos-cover] {
overflow: hidden;
}
[class*=photos-cover] img {
object-fit: cover;
width: 100%;
height: 100%;
}
.photos-cover-16-9 img {
aspect-ratio: 16/9;
}
.photos-cover-carre img {
aspect-ratio: 1;
max-height: 35vh;
}
.photo-full {
width: 100vw;
height: 100svh;
}
.photo-full img {
object-fit: cover;
width: 100%;
height: 100%;
}
.wp-block-embed__wrapper {
position: relative;
}
.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
padding-top: 56.25%;
}
.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
content: "";
display: block;
padding-top: 50%;
}
.wp-has-aspect-ratio iframe {
bottom: 0;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.videoWrapper,
.embed-container {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
max-width: 100%;
height: auto;
background-color: #ffcf15;
transition: all 0.5s cubic-bezier(0.35, 0.02, 0.37, 0.98) 0s;
}
.videoWrapper iframe,
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 100%;
border: 0;
transition: all 1.5s cubic-bezier(0.35, 0.02, 0.37, 0.98) 0.5s;
}
lite-youtube {
background-color: #000;
position: relative;
display: block;
contain: content;
background-position: center center;
background-size: cover;
cursor: pointer;
max-width: 720px;
} lite-youtube::before {
content: attr(data-title);
display: block;
position: absolute;
top: 0; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.67) 0%, rgba(0, 0, 0, 0.54) 14%, rgba(0, 0, 0, 0.15) 54%, rgba(0, 0, 0, 0.05) 72%, rgba(0, 0, 0, 0) 94%);
height: 99px;
width: 100%;
font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;
color: hsl(0deg, 0%, 93.33%);
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
font-size: 18px;
padding: 25px 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
}
lite-youtube:hover::before {
color: white;
} lite-youtube::after {
content: "";
display: block;
padding-bottom: 56.25%;
}
lite-youtube > iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 0;
} lite-youtube > .lty-playbtn {
display: block; width: 100%;
height: 100%; background: no-repeat center/68px 48px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
position: absolute;
cursor: pointer;
z-index: 1;
filter: grayscale(100%);
transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
border: 0;
}
lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
filter: none;
} lite-youtube.lyt-activated {
cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
opacity: 0;
pointer-events: none;
}
.lyt-visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
body:not(.mobile) .masque-grand {
display: none;
}
body.mobile .masque-mobile {
display: none;
}