/* MENU */

/* #site-navigation {
    margin-top: 10px;
} */

body.archive, .one-container .container {
  background-color: var(--global-color-8);
}

body.single .inside-article a {
  color: var(--contrast);
  background-size: 100% 0.2em, 0 0.1em;
  background-position: 100% 105%, 0 100%;
  background-repeat: no-repeat;
  background-image: linear-gradient(to right, var(--accent), var(--global-color-9), var(--accent));
}

body.single .inside-article a {
  text-decoration: none;
}

/* Posts */
.type-post figure {
  margin-bottom: 1.5em;
}

/* Share */
#pbx-social-input {
	flex-grow: 1;
	max-width: 400px;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 10px;
	background-color: #f9f9f9;
	color: #555;
	font-size: 14px;
}

#pbx-social-copymsg {
	display: none;
	color: #28a745;
	font-size: 0.9em;
	font-weight: bold;
}

#pbx-native-share-btn, #pbx-native-share-copy-btn {
	background-image: unset;
}

@media (min-width: 1025px) {
	#pbx-social-copymsg {
		align-self: center;
	}
}

#pbx-native-share-copy-btn, 
#pbx-social-input, 
#pbx-social-copymsg {
	display: none;
}

/* Separateur */

hr {
  background-color: var(--contrast-3);
  border: 0 !important;
  height: 1px;
  margin-bottom: 20px;
  margin-top: 20px;
  max-width: 70%;
}

/* Logo */
@media(min-width: 769px) {
  .site-logo {
    margin-bottom: -15px;
  }
}

@media(max-width: 768px) {
  .site-logo.mobile-header-logo img {
    height: 55px;
  }
  .mobile-header .gp-icon.icon-menu-bars {
    display: inline-block;
  }
}

@media(min-width:769px) {
  .navigation-branding img, .site-logo.mobile-header-logo img {
    height: 100px !important;
  }

  .inside-navigation grid-container {
    margin-top: -15px;
  }
}

.secondary-navigation a:hover, 
.main-navigation .main-nav ul li a:hover {
  text-decoration: underline;
}

/* Bouton Rejoindre */
.menu-item:has(a[aria-haspopup]) {
  align-items: center;
  background-color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  border-radius: 10px;
  margin-left: 20px;
}

@media(max-width: 768px) {
  .menu-item:has(a[aria-haspopup]) {
    margin-left: -10px;
    padding-left: 10px;
    margin-right: -10px;
    padding-right: 10px;
  }
}

.menu-item a[aria-haspopup] {
  color: #ffffff !important;
  font-weight: bold;
}

@media(max-width: 768px) {
  .main-navigation .main-nav ul li a.pbx-mm-petitlien {
    font-size: 0.8em;
    line-height: 2em;
  }
  .main-navigation .main-nav ul li:has(a.pbx-mm-petitlien):first-of-type {
    margin-top: 20px;
  }
}

/* Désactive le secondary menu sur mobile (car on utilise le menu hors canva) */
.secondary-navigation .menu-toggle {
  display: none;
}

@media(max-width: 768px) {
  #secondary-navigation {
    display: none;
  }
}

/*li.pbx_vertical_anim1__container__list__item {
	font-size: clamp(1rem, 35px, 100vw); 
  
  width: 100%;
}
*/

/* Menu hors canva (mobile) */
.slideout-navigation button.slideout-exit, 
.main-navigation .main-nav ul#menu-menu-mobile li a {
  padding-left: 0px;
  padding-right: 0px;
}

.pbxanimclamp {
	font-size: clamp(18px, 3.5vw, 80px);
	width: 100%;
	text-wrap: balance;
}

.pbxnowrap {
	white-space: nowrap;
}

/* ANIMATION 1 */
.pbx_vertical_anim1 {
  overflow: hidden;
  line-height: 1.5em;
  color: #000;
}
.pbx_vertical_anim1__container {
  font-weight: 600;
  overflow: hidden;
  height: 1.5em;
}
.pbx_vertical_anim1__container:before {
  content: "";
  left: 0;
}
.pbx_vertical_anim1__container:after {
  content: "";
  position: absolute;
  right: 0;
}
.pbx_vertical_anim1__container:after, .pbx_vertical_anim1__container:before {
  position: absolute;
  top: 0;
  color: #000;
  line-height: 1.5em;
  -webkit-animation-name: opacity;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-name: opacity;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.pbx_vertical_anim1__container__text {
  display: inline;
  float: left;
  margin: 0;
}

ul.pbx_vertical_anim1__container__list {
	margin: 0 0 0 0;
}

.pbx_vertical_anim1__container__list {
  margin-top: 0;
  padding-left: 0;
  text-align: left;
  list-style: none;
  -webkit-animation-name: change1;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-name: change1;
  animation-duration: 50s;
  animation-iteration-count: infinite;
}
.pbx_vertical_anim1__container__list__item {
  line-height: 1.5em;
  margin: 0;
}

@-webkit-keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes change1 {
  /* ALLER : Items 1 à 13 */
  0%, 2.5%       { transform: translate3d(0, 0, 0); }                /* Item 1 */
  4.16%, 6.66%   { transform: translate3d(0, -7.69%, 0); }           /* Item 2 */
  8.32%, 10.82%  { transform: translate3d(0, -15.38%, 0); }          /* Item 3 */
  12.48%, 14.98% { transform: translate3d(0, -23.07%, 0); }          /* Item 4 */
  16.64%, 19.14% { transform: translate3d(0, -30.76%, 0); }          /* Item 5 */
  20.8%, 23.3%   { transform: translate3d(0, -38.45%, 0); }          /* Item 6 */
  24.96%, 27.46% { transform: translate3d(0, -46.14%, 0); }          /* Item 7 */
  29.12%, 31.62% { transform: translate3d(0, -53.83%, 0); }          /* Item 8 */
  33.28%, 35.78% { transform: translate3d(0, -61.52%, 0); }          /* Item 9 */
  37.44%, 39.94% { transform: translate3d(0, -69.21%, 0); }          /* Item 10 */
  41.6%, 44.1%   { transform: translate3d(0, -76.9%, 0); }           /* Item 11 */
  45.76%, 48.26% { transform: translate3d(0, -84.59%, 0); }          /* Item 12 */
  49.92%, 52.42% { transform: translate3d(0, -92.28%, 0); }          /* Item 13 */

  /* RETOUR : Items 12 à 2 */
  54.08%, 56.58% { transform: translate3d(0, -84.59%, 0); }          /* Retour 12 */
  58.24%, 60.74% { transform: translate3d(0, -76.9%, 0); }           /* Retour 11 */
  62.4%, 64.9%   { transform: translate3d(0, -69.21%, 0); }          /* Retour 10 */
  66.56%, 69.06% { transform: translate3d(0, -61.52%, 0); }          /* Retour 9 */
  70.72%, 73.22% { transform: translate3d(0, -53.83%, 0); }          /* Retour 8 */
  74.88%, 77.38% { transform: translate3d(0, -46.14%, 0); }          /* Retour 7 */
  79.04%, 81.54% { transform: translate3d(0, -38.45%, 0); }          /* Retour 6 */
  83.2%, 85.7%   { transform: translate3d(0, -30.76%, 0); }          /* Retour 5 */
  87.36%, 89.86% { transform: translate3d(0, -23.07%, 0); }          /* Retour 4 */
  91.52%, 94.02% { transform: translate3d(0, -15.38%, 0); }          /* Retour 3 */
  95.68%, 98.18% { transform: translate3d(0, -7.69%, 0); }           /* Retour 2 */
  100%           { transform: translate3d(0, 0, 0); }                /* Retour 1 */
}
@keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes change1 {
  /* ALLER : Items 1 à 13 */
  0%, 2.5%       { transform: translate3d(0, 0, 0); }                /* Item 1 */
  4.16%, 6.66%   { transform: translate3d(0, -7.69%, 0); }           /* Item 2 */
  8.32%, 10.82%  { transform: translate3d(0, -15.38%, 0); }          /* Item 3 */
  12.48%, 14.98% { transform: translate3d(0, -23.07%, 0); }          /* Item 4 */
  16.64%, 19.14% { transform: translate3d(0, -30.76%, 0); }          /* Item 5 */
  20.8%, 23.3%   { transform: translate3d(0, -38.45%, 0); }          /* Item 6 */
  24.96%, 27.46% { transform: translate3d(0, -46.14%, 0); }          /* Item 7 */
  29.12%, 31.62% { transform: translate3d(0, -53.83%, 0); }          /* Item 8 */
  33.28%, 35.78% { transform: translate3d(0, -61.52%, 0); }          /* Item 9 */
  37.44%, 39.94% { transform: translate3d(0, -69.21%, 0); }          /* Item 10 */
  41.6%, 44.1%   { transform: translate3d(0, -76.9%, 0); }           /* Item 11 */
  45.76%, 48.26% { transform: translate3d(0, -84.59%, 0); }          /* Item 12 */
  49.92%, 52.42% { transform: translate3d(0, -92.28%, 0); }          /* Item 13 */

  /* RETOUR : Items 12 à 2 */
  54.08%, 56.58% { transform: translate3d(0, -84.59%, 0); }          /* Retour 12 */
  58.24%, 60.74% { transform: translate3d(0, -76.9%, 0); }           /* Retour 11 */
  62.4%, 64.9%   { transform: translate3d(0, -69.21%, 0); }          /* Retour 10 */
  66.56%, 69.06% { transform: translate3d(0, -61.52%, 0); }          /* Retour 9 */
  70.72%, 73.22% { transform: translate3d(0, -53.83%, 0); }          /* Retour 8 */
  74.88%, 77.38% { transform: translate3d(0, -46.14%, 0); }          /* Retour 7 */
  79.04%, 81.54% { transform: translate3d(0, -38.45%, 0); }          /* Retour 6 */
  83.2%, 85.7%   { transform: translate3d(0, -30.76%, 0); }          /* Retour 5 */
  87.36%, 89.86% { transform: translate3d(0, -23.07%, 0); }          /* Retour 4 */
  91.52%, 94.02% { transform: translate3d(0, -15.38%, 0); }          /* Retour 3 */
  95.68%, 98.18% { transform: translate3d(0, -7.69%, 0); }           /* Retour 2 */
  100%           { transform: translate3d(0, 0, 0); }                /* Retour 1 */
}





/* ANIMATION 2 */
.pbx_vertical_anim2 {
  overflow: hidden;
  line-height: 1.5em;
  color: #000;
}
.pbx_vertical_anim2__container {
  font-weight: 600;
  overflow: hidden;
  height: 1.5em;
}
.pbx_vertical_anim2__container:before {
  content: "";
  left: 0;
}
.pbx_vertical_anim2__container:after {
  content: "";
  position: absolute;
  right: 0;
}
.pbx_vertical_anim2__container:after, .pbx_vertical_anim2__container:before {
  position: absolute;
  top: 0;
  color: #000;
  line-height: 1.5em;
  -webkit-animation-name: opacity;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-name: opacity;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.pbx_vertical_anim2__container__list {
  margin: 0;
  text-align: left;
  list-style: none;
  -webkit-animation-name: change2;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-name: change2;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}
.pbx_vertical_anim2__container__list__item {
  line-height: 1.5em;
  margin: 0;
}

@-webkit-keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes change2 {
  /* Aller : du 1er au 8ème item */
  0%, 4.14%     { transform: translate3d(0, 0, 0); }         /* Item 1 */
  7.14%, 11.28% { transform: translate3d(0, -12.5%, 0); }    /* Item 2 */
  14.28%, 18.42%{ transform: translate3d(0, -25%, 0); }      /* Item 3 */
  21.42%, 25.56%{ transform: translate3d(0, -37.5%, 0); }    /* Item 4 */
  28.56%, 32.7% { transform: translate3d(0, -50%, 0); }      /* Item 5 */
  35.7%, 39.84% { transform: translate3d(0, -62.5%, 0); }    /* Item 6 */
  42.84%, 46.98%{ transform: translate3d(0, -75%, 0); }      /* Item 7 */
  49.98%, 54.12%{ transform: translate3d(0, -87.5%, 0); }    /* Item 8 */

  /* Retour : du 7ème au 2ème item */
  57.12%, 61.26%{ transform: translate3d(0, -75%, 0); }      /* Retour Item 7 */
  64.26%, 68.4% { transform: translate3d(0, -62.5%, 0); }    /* Retour Item 6 */
  71.4%, 75.54% { transform: translate3d(0, -50%, 0); }      /* Retour Item 5 */
  78.54%, 82.68%{ transform: translate3d(0, -37.5%, 0); }    /* Retour Item 4 */
  85.68%, 89.82%{ transform: translate3d(0, -25%, 0); }      /* Retour Item 3 */
  92.82%, 96.96%{ transform: translate3d(0, -12.5%, 0); }    /* Retour Item 2 */
  100%          { transform: translate3d(0, 0, 0); }         /* Retour Item 1 */
}
@keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes change2 {
  /* Aller : du 1er au 8ème item */
  0%, 4.14%     { transform: translate3d(0, 0, 0); }         /* Item 1 */
  7.14%, 11.28% { transform: translate3d(0, -12.5%, 0); }    /* Item 2 */
  14.28%, 18.42%{ transform: translate3d(0, -25%, 0); }      /* Item 3 */
  21.42%, 25.56%{ transform: translate3d(0, -37.5%, 0); }    /* Item 4 */
  28.56%, 32.7% { transform: translate3d(0, -50%, 0); }      /* Item 5 */
  35.7%, 39.84% { transform: translate3d(0, -62.5%, 0); }    /* Item 6 */
  42.84%, 46.98%{ transform: translate3d(0, -75%, 0); }      /* Item 7 */
  49.98%, 54.12%{ transform: translate3d(0, -87.5%, 0); }    /* Item 8 */

  /* Retour : du 7ème au 2ème item */
  57.12%, 61.26%{ transform: translate3d(0, -75%, 0); }      /* Retour Item 7 */
  64.26%, 68.4% { transform: translate3d(0, -62.5%, 0); }    /* Retour Item 6 */
  71.4%, 75.54% { transform: translate3d(0, -50%, 0); }      /* Retour Item 5 */
  78.54%, 82.68%{ transform: translate3d(0, -37.5%, 0); }    /* Retour Item 4 */
  85.68%, 89.82%{ transform: translate3d(0, -25%, 0); }      /* Retour Item 3 */
  92.82%, 96.96%{ transform: translate3d(0, -12.5%, 0); }    /* Retour Item 2 */
  100%          { transform: translate3d(0, 0, 0); }         /* Retour Item 1 */
}


/* WPSR INSTAGRAM */
.wpsr-ig-post-media {
  box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.1);
  border-radius: 8px;
}


/* GRADIENT TEXTE */
.gradient-text {
background: linear-gradient(to right, #ff66c4 0%, #cb6ce6 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
	text-wrap: balance;
}




/* TIMELINE */
/* https://www.jonashietala.se/blog/2024/08/25/a_simple_timeline_using_css_flexbox/ */

.events::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: var(--accent);
}

.events {
  position: relative;
  display: flex;
  margin-block: 0.5em;
  flex-direction: column;
  row-gap: 1em;
}

.event {
  display: flex;
  align-items: baseline;
}
.event .marker {
  position: relative;
  left: -6px;
}

.event.life .marker {
  fill: var(--accent);
}
.event.programming .marker {
  fill: var(--accent);
}
.event.family .marker {
  fill: var(--accent);
}

.event .content span {
  font-weight: bold;
}

.event time {
  font-weight: normal;
}

@media (min-width: 700px) {
  .events::before {
    left: 50%;
  }
  .event .marker {
    order: 1;
  }
  .event .content {
    width: 50%;
    text-align: right;
    padding-inline: 1em;
  }
  .event:is(.programming, .work, .projects) {
    flex-direction: row-reverse;

    .content {
      text-align: left;
    }
    .marker {
      left: 6px;
    }
  }

    .event:nth-child(even) {
        flex-direction: row-reverse;
    }

    .event:nth-child(even) {
        .content { text-align: left; }
        .marker { left: 6px; }
    }


}