/*=========================================
nuke margins
========================================*/

*,
*:before,
*:after {
  margin-block-start: 0;
  list-style: none;
  outline: unset;
  border: none;
  padding: 0;
  text-decoration: none;
  /* background-color: #1a1a1a; */
  /* color: #E6E6E6; */
}

a:focus,
a:active, 
a:visited{
  color: var(--color-text);
  text-decoration: none;
}
a:h2{
  color: var(--color-gray-300);
}

/*=========================================
variables
========================================*/

:root {
  /*base variable ( not used in css)*/
  --color-gray-100: #1a1a1a;
  --color-gray-200: hsl(0, 0%, 20%);
  --color-gray-300: hsl(0, 0%, 30%);
  --color-gray-400: hsl(0, 0%, 40%);
  --color-gray-500: hsl(0, 0%, 50%);
  --color-gray-600: hsl(0, 0%, 60%);
  --color-gray-700: hsl(0, 0%, 70%);
  --color-gray-800: hsl(0, 0%, 80%);
  --color-gray-900: #E6E6E6;

  --color-brand: #A61717;
  --color-brand-dark: #59111E;
  --color-brand-light: #ecafbb;
  

  /*incident variables(use in css)*/

  
  
 
  --color-link: var(--color-brand-light);
  --color-link-hover: var(var(--color-brand-dark));
  --color-accent: var(--color-brand);
  --color-titre: color:linear-gradient(0.25turn,var(var(--color-brand),var(var(--color-brand-light))));

  /* fonts*/

  --fontstack-main: "Utendo","Utendo2","Inter", system-ui, "roboto", "helvetica Neue", sans-serif;
  --fontstack-alt: "Inspiration","Inspiration2","Dancing","Dancing2", "Cursive",  sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--color-gray-100);
    --color-text: var(--color-gray-900);
    --color-text-offset: var(--color-gray-600);
    --color-titre:color:linear-gradient(var(var(--color-brand),var(var(--color-brand-light))));
    padding: 30px;
  }
}
@media (prefers-color-scheme:light ) {
  :root {
    --color-background: var(--color-gray-100);
    --color-text: var(--color-gray-900);
    --color-text-offset: var(--color-gray-600);
    --color-titre:color:linear-gradient(var(var(--color-brand),var(var(--color-brand-light))));
    padding: 30px;
  }
}

/*=========================================
fonts
========================================*/

/* @font-face {
  font-family: "Ranade";
  src: url() format("woff2") tech("variations"),
    url("/fonts/ranade-variable.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
} */
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Variable.ttf") format("ttf") tech("variations");
    
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Utendo";
  src: url("/fonts/Utendo-Semibold.woff") format("woff") tech("semiblod");
  font-weight: 100 700;
  font-style: bold;
  font-display: swap;
}
@font-face {
  font-family: "Utendo2";
  src: url("/fonts/Utendo-Semibold.woff2") format("woff2") tech("semiblod");
    
  font-weight: 100 700;
  font-style: bold;
  font-display: swap;
}
@font-face {
  font-family: "Dancing";
  src: url("/fonts/DancingScript-Regular.woff") format("woff") tech("variations");
  
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dancing2";
  src: url("/fonts/DancingScript-Regular.woff2") format("woff2") tech("variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Inspiration";
  src: url("/fonts/Inspiration-Regular.woff") format("woff") tech("variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inspiration2";
  src: url("/fonts/Inspiration-Regular.woff2") format("woff2") tech("variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

.titreRond{
  font-family: var(--fontstack-alt);
  font-size: larger;
  margin: 0;
  letter-spacing: 2px;
}
@media all and (min-width:750px){
.titreRond{
  
  font-size: x-large;
} }
/*=========================================
html
========================================*/
html {
  font: 400 100%/1.5 var(--fontstack-main);
  scroll-behavior: smooth;
  
}

/*=========================================
body
========================================*/

body {
  background-color: var(--color-background);
  color: var(--color-text);
  margin: 0 auto;
  
}
body.has-menu {
  overflow-y: hidden;
}
.colortitre{ 
  font-size: 250%;
  background-image:linear-gradient(25deg,rgba(137, 57, 113, 1) 10%,rgba(14, 41, 216, 1));
  background-clip:text; 
  color:transparent;
  white-space:nowrap;
  overflow: hidden;
  
}
@media all and (min-width:750px){
  .colortitre{
    font-size: 300%;
  }
}
@media all and (min-width:1024px){
  .colortitre{
    font-size: 500%;
  }
}
.colortitre2{ 
  font-size: 250%;
  background-image:linear-gradient(25deg,rgba(78, 235, 144, 1) 2%,rgba(6, 85, 142, 1));
  background-clip:text; 
  color:transparent
  
}
@media all and (min-width:750px){
  .colortitre2{
    font-size: 200%;
  }
}
@media all and (min-width:1024px){
  .colortitre2{
    font-size: 400%;
  }
}
.colortitre3{ 
  font-size: 250%;
  background-image:linear-gradient(25deg,rgba(254, 190, 90, 1) 2%,rgba(244, 82, 202, 1));
  background-clip:text; 
  color:transparent
  
}
@media all and (min-width:750px){
  .colortitre3{
    font-size: 200%;
  }
}
@media all and (min-width:1024px){
  .colortitre3{
    font-size: 300%;
  }
}

/*=========================================
slides
========================================*/

.c-slides {
  overflow-x: scroll;

  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: 280px;
  grid-auto-flow: column;
  grid-auto-columns: 280px;
  gap: 24px;

  scroll-snap-type: x mandatory;

  scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
  scrollbar-width: thin;
}

.c-slides__slide {
  scroll-snap-align: start;
}



.slider_box{
  display: flex;
  align-items: center;
  justify-content: center;

}


.container_slider{
  /* width:55% ; */
  max-width: 300px;
  display: flex;
  align-items: center;
  border: 6px solid var(--color-brand-dark);
  overflow: hidden;
  border-radius:33px ;
  
}
.container_sliderPasFlex{
  /* width:55% ; */
  max-width: 300px;
  
  align-items: center;
  border: 6px solid var(--color-brand-dark);
  overflow: hidden;
  border-radius:33px ;
  
}

.slider{
  display: flex;
  transition: transform 0.5s ease-in-out;
  
}

.sliderIMG{
  width: 100%;
  height: auto;
  min-height: 200px;
  object-fit: cover;
  width: 600px;
  height: 600px;
  object-position: 50% 50%;
}
.slide{
  flex: 0 0 100% ;
  height: 500px;
  width: auto;
  min-height: 500px;
  background-size: cover;
  background-position: center;
}
@media all and (min-width:750px){
.slide{
  
  height: 550px;

}}
.slide img{
  width: 100%;
  height: auto;
}
.slider2{
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide2{
  flex: 0 0 100% ;
  height: auto;
  min-height: 500px;
  background-size: cover;
  background-position: center;
}
@media all and (min-width:750px){
.slide2{

  height: 550px;
  
}}
.slide2 img{
  width: 100%;
  height: auto;
}

.slider_controls button{
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: none;
}
@media all and (min-width:750px){
.slider_controls button{
  height: 30px;
  width: 30px;
 
}}



.prev,
.next{
  margin: 0 10px;
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
  padding: 2px;
}

.slide.active{
  transform: translateX(0);
}

.prev2,
.next2{
  margin: 0 10px;
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
  padding: 2px;
}

.slide2.active{
  transform: translateX(0);
}

/*=========================================
fluideimg
========================================*/

.fluidimg {
  display: block;
  max-width: 100%;
  height: auto;
}
.fluidvideo {
  display: block;
  max-width: 100%;
  height: auto;
}

/*=========================================
container
========================================*/

.l-container {
  --container-padding: calc(6 / 16 * 1rem);
  max-width: 1500px;
  margin: 0 auto;
  padding-bottom: 20px;
  padding-inline: var(--container-padding);
}

@media all and (min-width: 750px) {
  .l-container {
    --container-padding: calc(50 / 16 * 1rem);
  }
}

.l-container-card {
  --container-padding: calc(36 / 16 * 1rem);
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 60px;
  padding-inline: var(--container-padding);
}

@media all and (min-width: 750px) {
  .l-container-card {
    --container-padding: calc(100 / 16 * 1rem);
  }
}



.container-galerie{
 
  min-width: 1000px;
  padding-inline: var(--container-padding);
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-self: center;
  justify-content: center;
  align-items: center;
}
/*=========================================
header
========================================*/
.c-siteheader {
  --vpading: calc(18 / 16 * 1rem);
  padding-block: var(--vpading);
  border-block-end: 1px solid rgba(0, 0, 0, 0.18);
}

.c-siteheader__content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.c-siteheader__logo {
  margin-block-end: 0;
  margin-inline-end: auto;

  width: 200px;
}

.c-siteheader__navcompact {
  margin: 0;
}

.c-siteheader__navcompact a,
.c-siteheader__navcompact img {
  display: block;
}

/*toggle nav visibility*/

.c-siteheader__nav {
  display: none;
}

@media all and (min-width: 1024px) {
  .c-siteheader__nav {
    display: block;
  }

  .c-siteheader__navcompact {
    display: none;
  }
}

/*=========================================
mainnav
========================================*/

.c-mainnav {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: calc(12 / 16 * 1rem);
}

.c-mainnav__link {
  display: block;
  padding: calc(6 / 16 * 1rem);
  color: var(--color-text);
  text-decoration: none;
  font-size: larger;
}

.c-mainnav__link:hover,
.c-mainnav__link:focus {
  color: var(--color-accent);
}

/* ===================================
=mobile menu
=================================== */

.c-mobilemenu {
  z-index: 9999;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;

  padding: calc(24 / 16 * 1rem);
  background-color: var(--color-background);

  /* caché par defaut */
  display: none;
}

@media all and (min-width: 750px) {
  .c-mobilemenu {
    padding: calc(30 / 16 * 1rem);
  }
}

.c-mobilemenu.is-active {
  --menuAnimDuration: 0.2s;

  /* remettre en flex et pas en box */
  display: flex;

  animation-name: appear;
  animation-duration: var(--menuAnimDuration);
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

@media all and (min-width: 1024px) {
  .c-mobilemenu,
  .c-mobilemenu.is-active {
    display: none;
  }
}

.c-mobilemenu__actions {
  flex: 0 0 auto;
  text-align: end;
}

.c-mobilemenu__body {
  flex: 1 1 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.c-mobilemenu__close {
  display: inline-block;
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding: 0;
  width: 50px;
  height: 50px;
  overflow: hidden;
  text-indent: -9999px;
  background: url(../img/boutonclose.svg) 50% 50% no-repeat;
}

/* ===================================
=mobile nav
=================================== */

.c-mobilenav {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 24px;
}

@media all and (min-width: 750px) {
  .c-mobilenav {
    gap: 12px;
  }
}

.c-mobilenav__item {
  overflow: hidden;
}

.c-mobilenav__link {
  display: inline-block;
  font-weight: 500;
  font-size: calc(40 / 16 * 1rem);
  line-height: 1.02;
  font-family: var(--fontstack-main);
  color: var(--color-text-inverse);
  text-decoration: none;
}

@media all and (min-width: 750px) {
  .c-mobilenav__link {
    font-size: calc(61 / 16 * 1rem);
  }
}

.has-menu .c-mobilenav__link {
  --linkAnimDuration: 0.3s;
  --linkAnimDelay: 0s;

  animation-name: slideUp;
  animation-duration: var(--linkAnimDuration);
  animation-timing-function: ease-out;
  animation-delay: calc(var(--menuAnimDuration) + var(--linkAnimDelay));
  animation-fill-mode: both;
}

/* ===================================
=animations
=================================== */

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/*=========================================
grid framework
========================================*/

.l-grid {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: minmax(200px, 1fr);
  gap: 30px;
}
.l-grid--2cols-small {
  grid-template-columns: repeat(1, minmax(200px, 1fr));
}
.l-grid--3cols-small {
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}
.l-grid--4cols-small {
  grid-template-columns: repeat(4, minmax(200px, 1fr));
}

@media all and (min-width: 500px) {
  .l-grid--2cols-small {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }
  .l-grid--3cols-small {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
  }
  .l-grid--4cols-small {
    grid-template-columns: repeat(4, minmax(200px, 1fr));
  }
}
@media all and (min-width: 750px) {
  .l-grid--2cols-medium {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }
  .l-grid--3cols-medium {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
  }
  .l-grid--4cols-medium {
    grid-template-columns: repeat(4, minmax(200px, 1fr));
  }
}
@media all and (min-width: 1024px) {
  .l-grid--2cols-large {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }
  .l-grid--3cols-large {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
  }
  .l-grid--4cols-large {
    grid-template-columns: repeat(4, minmax(200px, 1fr));
  }
}

/*=========================================
podcast
========================================*/
@keyframes appearBounce {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  20% {
    transform: translateY(0);
    opacity: 1;
  }
  40% {
    transform: translateY(10px);
    opacity: 1;
  }
  60% {
    transform: translateY(0);
    opacity: 1;
  }
  80% {
    transform: translateY(5px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.c-podcast__img {
  border-radius: 25px;
 
}
.c-podcast {
  box-sizing: content-box;
  border-radius: 25px 25 0 0;
  height: 500px;
  position: relative;
  
}
@media all and (min-width:750px){

  .c-podcast {
    box-sizing: content-box;
    border-radius: 25px 25 0 0;
    height: 550px;
    position: relative;
  }
}
.c-podcast__card {
  max-width: 300px;
  /* display: block; */
  /* box-sizing: border-box; */
  list-style: none;
  background-color: var(--color-gray-800);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  /*transition toujours dans l'element de base, pas dans le hover*/
  transition: box-shadow 0.2s ease-in-out;
  border-radius: 25px;
}

.c-podcast__card:hover,
.c-podcast__card:focus {
  box-shadow: 0 4px 24px rgba(253, 214, 214, 0.18);
}

.c-podcast__media {
  position: relative;
  box-sizing: border-box;
  margin: 0 auto;
  margin-block-end: calc(24 / 16 * 1rem);
}
.c-podcast__media::before {
  z-index: 5;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 100);
  pointer-events: none; /*inerte pour la souris , n'empeche donc pas de cliquer sur le lien derrière*/
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

/* .c-podcast__media::after {
  z-index: 10;
  content: "";
  background-image: url(../img/logo.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 42px;
  height: 42px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -24px;
  margin-left: -24px;
  opacity: 0;
  pointer-events: none;

  transform: translate3d(0, 60px, 0);

  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
} */

.c-podcast__media > a {
  display: block;
  
  position: relative;
}

/* .c-podcast__media > a::after {
  content: "";
  position: absolute;
  inset-block-end: 18px;
  inset-inline-end: 18px;
  width: 42px;
  height: 42px;

  background-image: url("/img/disney-channel.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  opacity: 0;
} */

.c-podcast__card:hover .c-podcast__media::before,
.c-podcast__card:focus .c-podcast__media::before {
  opacity: 0.2;
}

.c-podcast__card:hover .c-podcast__media::after,
.c-podcast__card:focus .c-podcast__media::after {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.c-podcast__media > a:hover::after {
  animation: appearBounce;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-timing-function: ease-in;
}
.c-podcast__title {
  font-weight: 400;
  padding-left: calc(12 / 16 * 1rem);
  padding-right: calc(12 / 16 * 1rem);
  font-family: var(--fontstack-main);
  font-size: clamp(18px, 1rem + 2vw, 33px);
  margin-block-end: calc(6 / 16 * 1rem);
  line-height: 1.2;
  color: var(--color-accent);
  display: flex;
  justify-content: center;
}

.c-podcast__title > a {
  color: var(--color-gray-300);
  text-decoration: none;
}

.c-podcast__title > a:hover,
.c-podcast__title > a:active,
.c-podcast__title > a:focus {
  color: var(--color-accent);
  font-size: clamp(24px, 1rem + 2vw, 39px);
  margin-block-end: calc(12 / 16 * 1rem);
  transition: color 0.2s ease-out, font-size 0.2s ease-in-out;
}
@media all and (min-width:750px){
.c-podcast__title {
  font-weight: 550;
  padding-left: calc(24 / 16 * 1rem);
  padding-right: calc(24 / 16 * 1rem);
  font-family: var(--fontstack-main);
  font-size: clamp(28px, 1rem + 2vw, 33px);
  margin-block-end: calc(12 / 16 * 1rem);
  line-height: 1.2;
  color: var(--color-accent);
  display: flex;
  justify-content: center;

   
  }
  
  .c-podcast__title > a {
    color: var(--color-gray-300);
    text-decoration: none;
  }
  .c-podcast__title:hover,
  .c-podcast__title:focus {
    color: var(--color-accent);
    font-size: clamp(36px, 1rem + 2vw, 39px);
    margin-block-end: calc(12 / 16 * 1rem);
    
    transition: color 0.2s ease-out;
    transition: font-size 0.2s ease-in-out;
  }
}

.c-podcast__annee {
  padding-left: calc(16 / 16 * 1rem);
  padding-inline: calc(16/16 * 1rem);
  color: var(--color-gray-300);
}
@media all and (min-width:750px){
.c-podcast__annee {
  padding-left: calc(24 / 16 * 1rem);
  padding-inline: calc(24/16 * 1rem);
  color: var(--color-gray-300);
}
}
.c-podcast__description {
  font-weight: 300;
  padding-inline: calc(16/16 * 1rem);
  padding-top: calc(16/16*1rem);
  padding-left: calc(16 / 16 * 1rem);
  color: var(--color-gray-300);
}
@media all and (min-width:750px){

  .c-podcast__description {
    font-weight: 400;
    padding-inline: calc(24/16 * 1rem);
    padding-top: calc(24/16*1rem);
    padding-left: calc(24 / 16 * 1rem);
    color: var(--color-gray-300);
  }
}

/*=========================================
section
========================================*/

.c-section {
  --section-padding: calc(24 / 16 * 1rem);

  padding-block: var(--section-padding);
}

@media all and (min-width: 750px) {
  .c-section {
    --section-padding: calc(42 / 16 * 1rem);
    margin-bottom: 30px;
  }
}
@media all and (min-width: 1024px) {
  .c-section {
    --section-padding: calc(90/ 16 * 1rem);
    margin-bottom: 90px;
    margin-top: 60px;
  }
}

/*=========================================
imgtxt
========================================*/

.c-imgtxt{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "img"
    "txt";
  gap: calc(24 / 16 * 1rem);
  align-items: center;


}
.c-imgtxt2{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "img"
    "txt";
  gap: calc(12 / 16 * 1rem);
  align-items: center;


}

@media all and (min-width: 750px) {
  .c-imgtxt {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "txt img";
    column-gap: calc(60 / 16 * 1rem);
  }
}
@media all and (min-width: 1024px) {
  .c-imgtxt {
    grid-template-columns: 5fr  6fr;
    grid-template-areas: "txt  img";
    column-gap: calc(60 / 16 * 1rem);
  }
}
@media all and (min-width: 1024px) {
  .c-imgtxt2 {
    grid-template-columns: 5fr 1fr 8fr ;
    grid-template-areas: "txt . img";
    column-gap: calc(30 / 16 * 1rem);
  }
}

.c-imgtxt__txt {
  grid-area: txt;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 12px;
 
}
@media all and (min-width:1024px){
  .c-imgtxt__txt{
    gap: 30px;
  }
}
.c-imgtxt__img {
  grid-area: img;
  max-width: 600px;
}

/*=========================================
reverse variant
========================================*/

.c-imgtxt--reverse {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "txt"
    "img";
  gap: calc(30 / 16 * 1rem);
  align-items: center;
}

@media all and (min-width: 750px) {
  .c-imgtxt--reverse {
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "img txt";
    column-gap: calc(120 / 16 * 1rem);
    
  }
}
@media all and (min-width: 1024px) {
  .c-imgtxt--reverse {
    grid-template-columns:  6fr 1fr 3fr 1fr;
    grid-template-areas: " img . txt.";
    column-gap: calc(30 / 16 * 1rem);
  }
}

/*=========================================
banner
========================================*/
.c-banner {
  height: auto;
}
.c-banner__image {
  display: block;
 
  height: 100%;
  width: 100%;
}

@media all and (min-width: 600px) {
  .c-banner {
    height: 500px;
  }
}

/*=========================================
card
========================================*/

.c-card {
  /*width*/
  width: 300px;
  border-radius: 25px;
  background-color: var(--color-brand-dark);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.2s ease-in-out;
}

.c-card:hover,
.c-card:focus {
  box-shadow: 0 4px 24px rgba(253, 214, 214, 0.18);
}

.c-card__media {
  position: relative;
  /* align-self: center; */
 
}
.c-card__media::before {
  z-index: 5;
  
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 100);
  pointer-events: none; /*inerte pour la souris , n'empeche donc pas de cliquer sur le lien derrière*/
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.c-card:hover .c-card__media::before,
.c-card:focus .c-card__media::before {
  opacity: 0.2;
}

.c-card__media::after {
  z-index: 10;
  content: "";
  
  background-image: url(../img/button.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 42px;
  height: 42px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -24px;
  margin-left: -24px;
  opacity: 0;
  pointer-events: none;

  transform: translate3d(0, 60px, 0);

  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.c-card:hover .c-card__media::after,
.c-card:focus .c-card__media::after {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.c-card__img {
  border-radius: 25px 25px 0 0;
  max-width: 100%;
 width: auto;
  position: relative;
}


.c-card__body {
  padding: calc(19 / 16 * 1rem);
}

.c-card__titre {
  font-size: calc(20 / 16 * 1rem);
  font-weight: 500;
  color: var(--color-accent);
  margin-block-end: 0.5em;
}

.c-card__titre > a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.5s ease-out;
}

.c-card__titre:hover,
.c-card__titre > a:focus {
  color: var(--color-brand-dark);
}

.c-card__body p:last-child {
  margin-block-end: 0;
}


.imgnuage{
  /* background-image: url(../img/fille.avif); */
  mask-image: url(../img/nuage.png);
  mask-repeat: no-repeat;
  mask-position: 30%;
  mask-size:contain;
  
}






.l-container2 {
  --container-padding: calc(36 / 16 * 1rem);
  display: flex;
  min-height: 750px;
  width: 100%;
  flex-direction: row;
  justify-content: center;
}

input[type="radio"] {
  display: none;
}

.card {
  position: absolute;
  width: 60%;
  height: 100% auto;
  left: 0;
  right: 0;
  margin: auto;
  transition: transform 0.4s ease;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: 500px;
  max-height: 600px;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.cards {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
 
}
#item-1:checked ~ .cards #song-5,
#item-2:checked ~ .cards #song-1,
#item-3:checked ~ .cards #song-2,
#item-4:checked ~ .cards #song-3,
#item-5:checked ~ .cards #song-4 {
  transform: translatex(120%) scale(0.8);
  opacity: 0.4;
  z-index: 0;
}
#item-1:checked ~ .cards #song-4,
#item-2:checked ~ .cards #song-5,
#item-3:checked ~ .cards #song-1,
#item-4:checked ~ .cards #song-2,
#item-5:checked ~ .cards #song-3 {
  transform: translatex(-60%) scale(0.9);
  opacity: 1;
  z-index: 1;
}

#item-1:checked ~ .cards #song-3,
#item-2:checked ~ .cards #song-4,
#item-3:checked ~ .cards #song-5,
#item-4:checked ~ .cards #song-1,
#item-5:checked ~ .cards #song-2 {
  transform: translatex(60%) scale(0.9);
  opacity: 1;
  z-index: 1;
}

#item-1:checked ~ .cards #song-2,
#item-2:checked ~ .cards #song-3,
#item-3:checked ~ .cards #song-4,
#item-4:checked ~ .cards #song-5,
#item-5:checked ~ .cards #song-1 {
  transform: translatex(-120%) scale(0.8);
  opacity: 0.4;
  z-index: 0;
}

#item-1:checked ~ .cards #song-1,
#item-2:checked ~ .cards #song-2,
#item-3:checked ~ .cards #song-3,
#item-4:checked ~ .cards #song-4,
#item-5:checked ~ .cards #song-5 {
  transform: translatex(0) scale(1);
  opacity: 1;
  z-index: 2;

  img {
    box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
  }
}

.upper-part {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  height: 36px;
  overflow: hidden;
}

.info-area {
  width: 100%;
  position: absolute;
  top: 0;
  left: 30px;
  transition: transform 0.4s ease-in;
}




#it-1:checked ~ .cards #son-6,
#it-2:checked ~ .cards #son-1,
#it-3:checked ~ .cards #son-2,
#it-4:checked ~ .cards #son-3,
#it-5:checked ~ .cards #son-4,
#it-6:checked ~ .cards #son-5 {
  transform: translatex(60%) scale(0.9);
  opacity: 1;
  z-index: 2;
}
#it-1:checked ~ .cards #son-5,
#it-2:checked ~ .cards #son-6,
#it-3:checked ~ .cards #son-1,
#it-4:checked ~ .cards #son-2,
#it-5:checked ~ .cards #son-3,
#it-6:checked ~ .cards #son-4 {
  transform: translatex(120%) scale(0.8);
  opacity: 0.4;
  z-index: 1;
}

#it-1:checked ~ .cards #son-4,
#it-2:checked ~ .cards #son-5,
#it-3:checked ~ .cards #son-6,
#it-4:checked ~ .cards #son-1,
#it-5:checked ~ .cards #son-2,
#it-6:checked ~ .cards #son-3 {
  transform: translatex(0%) scale(0.9);
  opacity: 0;
  z-index: 0;
}
#it-1:checked ~ .cards #son-3,
#it-2:checked ~ .cards #son-4,
#it-3:checked ~ .cards #son-5,
#it-4:checked ~ .cards #son-6,
#it-5:checked ~ .cards #son-1,
#it-6:checked ~ .cards #son-2 {
  transform: translatex(-120%) scale(0.8);
  opacity: 0.4;
  z-index: 1;
}

#it-1:checked ~ .cards #son-2,
#it-2:checked ~ .cards #son-3,
#it-3:checked ~ .cards #son-4,
#it-4:checked ~ .cards #son-5,
#it-5:checked ~ .cards #son-6,
#it-6:checked ~ .cards #son-1 {
  transform: translatex(-60%) scale(0.9);
  opacity: 1;
  z-index: 2;
}

#it-1:checked ~ .cards #son-1,
#it-2:checked ~ .cards #son-2,
#it-3:checked ~ .cards #son-3,
#it-4:checked ~ .cards #son-4,
#it-5:checked ~ .cards #son-5,
#it-6:checked ~ .cards #son-6 {
  transform: translatex(0) scale(1);
  opacity: 1;
  z-index: 3;

  img {
    box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
  }
}





#ite-1:checked ~ .cards #projet-10,
#ite-2:checked ~ .cards #projet-1,
#ite-3:checked ~ .cards #projet-2,
#ite-4:checked ~ .cards #projet-3,
#ite-5:checked ~ .cards #projet-4,
#ite-6:checked ~ .cards #projet-5,
#ite-7:checked ~ .cards #projet-6,
#ite-8:checked ~ .cards #projet-7,
#ite-9:checked ~ .cards #projet-8,
#ite-10:checked ~ .cards #projet-9 {
  transform: translatex(60%) scale(0.9);
  opacity: 1;
  z-index: 2;
}
#ite-1:checked ~ .cards #projet-9,
#ite-2:checked ~ .cards #projet-10,
#ite-3:checked ~ .cards #projet-1,
#ite-4:checked ~ .cards #projet-2,
#ite-5:checked ~ .cards #projet-3,
#ite-6:checked ~ .cards #projet-4,
#ite-7:checked ~ .cards #projet-5,
#ite-8:checked ~ .cards #projet-6,
#ite-9:checked ~ .cards #projet-7,
#ite-10:checked ~ .cards #projet-8 {
  transform: translatex(120%) scale(0.8);
  opacity: 0.4;
  z-index: 1;
}
#ite-1:checked ~ .cards #projet-8,
#ite-2:checked ~ .cards #projet-9,
#ite-3:checked ~ .cards #projet-10,
#ite-4:checked ~ .cards #projet-1,
#ite-5:checked ~ .cards #projet-2,
#ite-6:checked ~ .cards #projet-3,
#ite-7:checked ~ .cards #projet-4,
#ite-8:checked ~ .cards #projet-5,
#ite-9:checked ~ .cards #projet-6,
#ite-10:checked ~ .cards #projet-7 {
  transform: translatex(0%) scale(0.8);
  opacity:0;
  z-index: 0;
}
#ite-1:checked ~ .cards #projet-7,
#ite-2:checked ~ .cards #projet-8,
#ite-3:checked ~ .cards #projet-9,
#ite-4:checked ~ .cards #projet-10,
#ite-5:checked ~ .cards #projet-1,
#ite-6:checked ~ .cards #projet-2,
#ite-7:checked ~ .cards #projet-3,
#ite-8:checked ~ .cards #projet-4,
#ite-9:checked ~ .cards #projet-5,
#ite-10:checked ~ .cards #projet-6 {
  transform: translatex(0%) scale(0.9);
  opacity: 0;
  z-index: 0;
}
#ite-1:checked ~ .cards #projet-6,
#ite-2:checked ~ .cards #projet-7,
#ite-3:checked ~ .cards #projet-8,
#ite-4:checked ~ .cards #projet-9,
#ite-5:checked ~ .cards #projet-10,
#ite-6:checked ~ .cards #projet-1,
#ite-7:checked ~ .cards #projet-2,
#ite-8:checked ~ .cards #projet-3,
#ite-9:checked ~ .cards #projet-4,
#ite-10:checked ~ .cards #projet-5 {
  transform: translatex(0%) scale(0.9);
  opacity: 0;
  z-index: 0;
}
#ite-1:checked ~ .cards #projet-5,
#ite-2:checked ~ .cards #projet-6,
#ite-3:checked ~ .cards #projet-7,
#ite-4:checked ~ .cards #projet-8,
#ite-5:checked ~ .cards #projet-9,
#ite-6:checked ~ .cards #projet-10,
#ite-7:checked ~ .cards #projet-1,
#ite-8:checked ~ .cards #projet-2,
#ite-9:checked ~ .cards #projet-3,
#ite-10:checked ~ .cards #projet-4 {
  transform: translatex(0%) scale(0.9);
  opacity: 0;
  z-index: 0;
}
#ite-1:checked ~ .cards #projet-4,
#ite-2:checked ~ .cards #projet-5,
#ite-3:checked ~ .cards #projet-6,
#ite-4:checked ~ .cards #projet-7,
#ite-5:checked ~ .cards #projet-8,
#ite-6:checked ~ .cards #projet-9,
#ite-7:checked ~ .cards #projet-1,
#ite-8:checked ~ .cards #projet-2,
#ite-9:checked ~ .cards #projet-3,
#ite-10:checked ~ .cards #projet-4 {
  transform: translatex(0%) scale(0.9);
  opacity: 0;
  z-index: 0;
}
#ite-1:checked ~ .cards #projet-3,
#ite-2:checked ~ .cards #projet-4,
#ite-3:checked ~ .cards #projet-5,
#ite-4:checked ~ .cards #projet-6,
#ite-5:checked ~ .cards #projet-7,
#ite-6:checked ~ .cards #projet-8,
#ite-7:checked ~ .cards #projet-9,
#ite-8:checked ~ .cards #projet-10,
#ite-9:checked ~ .cards #projet-1,
#ite-10:checked ~ .cards #projet-2 {
  transform: translatex(-120%) scale(0.8);
  opacity: 0,4;
  z-index: 1;
}

#ite-1:checked ~ .cards #projet-2,
#ite-2:checked ~ .cards #projet-3,
#ite-3:checked ~ .cards #projet-4,
#ite-4:checked ~ .cards #projet-5,
#ite-5:checked ~ .cards #projet-6,
#ite-6:checked ~ .cards #projet-7,
#ite-7:checked ~ .cards #projet-8,
#ite-8:checked ~ .cards #projet-9,
#ite-9:checked ~ .cards #projet-10,
#ite-10:checked ~ .cards #projet-1 {
  transform: translatex(-60%) scale(0.9);
  opacity: 1;
  z-index: 2;
}



#ite-1:checked ~ .cards #projet-1,
#ite-2:checked ~ .cards #projet-2,
#ite-3:checked ~ .cards #projet-3,
#ite-4:checked ~ .cards #projet-4,
#ite-5:checked ~ .cards #projet-5,
#ite-6:checked ~ .cards #projet-6,
#ite-7:checked ~ .cards #projet-7,
#ite-8:checked ~ .cards #projet-8,
#ite-9:checked ~ .cards #projet-9,
#ite-10:checked ~ .cards #projet-10 {
  transform: translatex(0) scale(1);
  opacity: 1;
  z-index: 3;

  img {
    box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
  }
}




/*=========================================
footer
========================================*/
.c-sitefooter {
  --vpading: calc(12 / 16 * 1rem);
  padding-block: var(--vpading);
 padding-inline: calc(24/16*1rem);
  margin-top:20px ;
}

@media all and (min-width:750px){
.c-sitefooter {
  --vpading: calc(18 / 16 * 1rem);

 padding-inline: calc(42/16*1rem);
  padding-top:150px ;
}}

.c-sitefooter__content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  justify-content: center;
  gap:calc(12/16*1rem) ;
  background-image:linear-gradient(25deg,rgba(78, 235, 144, 1) 2%,rgba(6, 85, 142, 1));
  mask-image: url(../img/logos\ contact.svg);
  mask-repeat: no-repeat;
  mask-position: 50%;
  mask-size: 200px;
}
@media all and (min-width:750px){
  .c-sitefooter__content{
    mask-size: 270px;
    gap:calc(32/16*1rem) ;
  }
}
@media all and (min-width:1024px){
  .c-sitefooter__content{
    mask-size: 330px;
    gap:calc(33/16*1rem) ;
  }
}

.c-sitefooter__logo {

  margin-block-end: 0;
 max-height: 60px;
 width: auto;
  max-width: 50px ;
  height: auto;
  visibility: hidden;
  
  
}
@media all and (min-width:750px){
  .c-sitefooter__logo{
    max-width: 50px;
  }
}
@media all and (min-width:1024px){
  .c-sitefooter__logo{
    max-width: 70px;
  }
}
.c-sitefooter__nav{
  padding: 24px;
}




.js-ordi{
  display: none;
}
@media all and (min-width:1024px){
  .js-ordi{
    display: flex;
  }
}

.js-gsm{
  display: block;
}
@media all and (min-width:1024px){
  .js-gsm{
    display: none;
  }
}




.buttonCV{
  width: 90px;
  height: 42px;
  background-color: var(--color-brand-light);
  color: var(--color-gray-200);
  border-radius: 25px;
  font-size: medium;
  font-weight: 400;
  font-family: var(--fontstack-main);
  padding: 12px;
}
.buttonCV:hover{
  color:var(--color-text) ;
  background-color: var(--color-brand-dark);
}


.experience{
  padding-left: 60px
}
.en-grand {
  max-width: 900px;
  height: auto;
 
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
}