@charset "UTF-8";
/*!
Theme Name: under_theme_v2
Author: Ecotone
Author URI: https://ecotone-graphic.com
Version: 1.0.0
*/
/****************** variables******************/
@font-face {
  font-family: "affogatoblack";
  src: url("fonts/affogato-black-webfont.woff2") format("woff2"), url("fonts/affogato-black-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "affogatoregular";
  src: url("fonts/affogato-regular-webfont.woff2") format("woff2"), url("fonts/affogato-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "dk";
  src: url("fonts/dk.woff2") format("woff2"), url("fonts/dk.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/****************** couleurs ******************/
.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;
}

/*******************************************/
/**************** structure ****************/
/*******************************************/
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("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;
}

/*******************************************/
/****************** divers ******************/
/*******************************************/
.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;
}

/*******************************************/
/**************** recherche ****************/
/*******************************************/
/* Recherches */
#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("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;
}

/*******************************************/
/**************** actualités ***************/
/*******************************************/
.contenu-actu {
  z-index: 1;
}

.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("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("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;
  }
}
/*******************************************/
/***************** survols *****************/
/*******************************************/
@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;
}

/**************** responsive ***************/
@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);
}

/**************************************/
/*********** Diaporama Mini ***********/
/**************************************/
.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 **************/
/**************************************/
#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("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;
}

/* Structure lignes */
.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;
  min-height: 380px;
  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("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);
  }
  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.t1, .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;
}

/* gradient */
lite-youtube::before {
  content: attr(data-title);
  display: block;
  position: absolute;
  top: 0;
  /* Pixel-perfect port of YT's gradient PNG, using https://github.com/bluesmoon/pngtocss plus optimizations */
  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;
}

/* responsive iframe with a 16:9 aspect ratio
    thanks https://css-tricks.com/responsive-iframes/
*/
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;
}

/* play button */
lite-youtube > .lty-playbtn {
  display: block;
  /* Make the button element cover the whole area for a large hover/click target… */
  width: 100%;
  height: 100%;
  /* …but visually it's still the same size */
  background: no-repeat center/68px 48px;
  /* YT's actual play button svg */
  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;
}

/* Post-click styles */
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;
}

/*
./dart-sass/sass app/public/wp-content/themes/starter/sass/style.scss app/public/wp-content/themes/starter/style.css --watch
*/

/*# sourceMappingURL=style.css.map */