body{
  width: 100%;
  display: flex;
  flex-direction: column;
  height: auto;
  margin:0;
  padding:0;
}

p, a, button{
  text-decoration: none;
  color:#000000;
  margin:0;
}

button, picture, img{
  background: none;
  border:none;
}

svg{
  display: flex;
}

h1, h2, h3{
  margin:0;
}

h2{
  text-align: center;
  align-self: center;
}

/* Ariane / Navigation */
.ariane{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background-color: var(--Noir);
  position: sticky;
  top: 0;
  z-index: 10;
}

@media(min-width:600px){
  .ariane{
    padding: 12px 40px;
  }
}

.ariane a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.ariane svg{
  color:white;
  width:12px;
  height:12px;
}

@media(min-width:800px){
  .ariane svg{;
  width:17px;
  height:17px;
}

}

.ariane ol {
  list-style: none;       /* supprime la numérotation */
  display: flex;          /* éléments sur une ligne */
  padding: 0;
  margin: 0;
  gap: 8px;      
  align-items: center;
  justify-content: center;         
}

.ariane li::after {
  content: "›";           /* caractère séparateur */
  margin: 0 8px;
  color: #fff;  
  font-size: 1.5em;            /* couleur grisée */
}

.ariane li:last-child::after {
  content: "";            /* pas de séparateur après le dernier élément */
}


.haut-de-page {
  font-family: "Helvetica-Bold", Helvetica;
  font-weight: 700;
  color: var(--Blanc);
  font-size: var(--Fonts-Bouton-Fontsize);
  letter-spacing: var(--Fonts-Bouton-LetterSpacing);
  line-height: var(--Fonts-Bouton-Lineheight);
  white-space: nowrap;
}

/* Structure principale */
.mainFrame {
  display: flex;
  padding:79px 24px;
  flex-direction: column;
  align-items: center;
  gap: var(--Spaces-Gapvertical-XL);
}

@media(min-width:500px){
  .mainFrame{
    padding: 100px 12.5%;
  }
}

@media(min-width:900px){
  .mainFrame{
    padding: 100px 16.67%;
  }
}

@media(min-width:1300px){
  .mainFrame{
    padding: 100px 20%;
  }
}


.frameM {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spaces-Gapvertical-M);
  align-self: stretch;
}

.frameL{
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--Spaces-Gapvertical-L, 28px);
align-self: stretch;
}

.frameXL{
  display: inline-flex;
flex-direction: column;
align-items: center;
gap: var(--Spaces-Gapvertical-XL, 80px);
align-self: center;
}

/* Header projet */
.title{
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}

@media(min-width:440px){
  .title{
    gap:32px;
  }
}

.title svg{
  width:86px;
  height:88px;
}

@media(min-width:600px){
  .title svg{
    width: 117px;
height: 120px;
aspect-ratio: 39/40;
  }
}

@media(min-width:1000px){
  .title svg{
    width: 233px;
height: 240px;
aspect-ratio: 233/240;
  }
}

h1{
  display: flex;
  width: 200px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10.909px;
}

@media(min-width:440px){
  h1{
    width: 305px;
    gap: var(--Spaces-Gapvertical-M, 20px);
  }
}

/* Chapo section */
.chapoFrame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Spaces-Gapvertical-S);
  align-self: stretch;
}

.line, hr {
  align-self: stretch;
  width: 100%;
  height: 1px;
  border: none;
  background-color: var(--Noir);
  margin: 0;
}

.line, hr {
  transform: scaleY(1.01);
}


.lineBig{
  align-self: stretch;
  width: 100%;
  height: 2px;
  border: none;
  background-color: var(--Noir);
  margin: 0;
}

.chapo{
  display: flex;
  padding: 0 var(--Spaces-Padding-Chapo, 20px);
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.chapoTitle{
  display: flex;
  padding: 0 var(--Spaces-Padding-Chapo, 20px);
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.chapoTitle p{
  font-size: var(--Fonts-Chapo-Fontsize, 16px);
}

.chapoCita{
  display: flex;
  padding: 0 var(--Spaces-Padding-Chapo, 20px);
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  flex: 1 0 0;
}

.chapo p{
  text-align: center;
}



/* Logos artiste/asso/entreprise */
.threeLogos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  align-self: stretch;
}

@media(min-width:600px){
  .threeLogos{
    gap:40px;
  }
}

.oneLogo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#svgLogoArtist{
  width:70px;
  height:56px
}

#svgLogoAsso{
  width:56px;
  height:56px
}

#svgLogoEntreprise{
  width:50px;
  height:56px
}


@media(min-width:600px){
  #svgLogoArtist{
  width: 111px;
height: 88px;
aspect-ratio: 111/88;
}

#svgLogoAsso{
  width: 88px;
height: 88px;
aspect-ratio: 1/1;
}

#svgLogoEntreprise{
 width: 79px;
height: 88px;
aspect-ratio: 79/88;
}

}




.frame-9 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}



/* Sections avec images */
.frameS {
  display: flex;
  align-items: flex-start;
  gap: var(--Spaces-Gapvertical-S);
  align-self: stretch;
  flex-direction: column;
}

.pictureFull, .pictureFull img{
  display: flex;
  max-width:100%;
  width:100%;
}

.frameS label{
  font-size: calc(0.75*var(--Fonts-H2helvetica-Fontsize, 20px));
  letter-spacing: calc(0.75*var(--Fonts-H2helvetica-LetterSpacing, 3px));
}


/* Cartel / Citations */
.cartel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--Spaces-Gaphorizontal-S);
  padding: var(--Spaces-Padding-Cartel);
  background-color: var(--Noir);
}

.citations{
   display: flex;
  flex-direction: column;
  gap: var(--Spaces-Gaphorizontal-S);
  background-color: var(--Noir);
}

@media(min-width:640px){
  .citations{
    flex-direction: row;
  }
}

.cartel p{
  color:white;
}


.signature {
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: var(--Blanc);
  font-size: 9px;
  letter-spacing: 0.45px;
  line-height: 25px;
  margin: 0;
  align-self: flex-end;
}

/* Boutons */
.button{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 13px;
  align-self: stretch;
  border-radius: 5px;
  text-decoration: none;
  background-color: var(--Blanc);
  border: 2px solid var(--Noir);
}

.button:hover{
  border-radius: 5px;
border: 2px solid #454545;
background: var(--Blanc, #FFF);
}

.button:hover p, .button:hover svg{
  color:#454545
}

.blackBackground:hover{

background: #454545;
}

.blackBackground:hover p, .blackBackground:hover svg{
  color:white;
}

@media(min-width:625px){
  .buttons .button{
    width:50%;
  }
}

.button svg{
  width: 9.48px;
  height: 9.634px;
  aspect-ratio: 9.48/9.63;
}

@media(min-width:700px){
  .button svg{
  width: 13px;
  height: auto;
  aspect-ratio: 9.48/9.63;
}
}

.blackBackground{
  background-color: var(--Noir);
  color:var(--Blanc);
}

.deco{
  width: 38px;
height: 40px;
aspect-ratio: 19/20;
}

@media(min-width:800px){
  .deco{
    width: 61px;
height: 64px;
aspect-ratio: 61/64;
  }
}

.bouton, .bouton-2 {
  font-family: var(--bouton-1-font-family);
  font-weight: var(--bouton-1-font-weight);
  font-size: var(--Fonts-Bouton-Fontsize);
  text-align: center;
  letter-spacing: var(--Fonts-Bouton-LetterSpacing);
  line-height: var(--Fonts-Bouton-Lineheight);
  white-space: nowrap;
}

.bouton {
  color: var(--Blanc);
}

.bouton-2 {
  color: var(--Noir);
}

.buttons{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap:var(--Spaces-Gapvertical-M);
  align-self: stretch;
}

@media(min-width:625px){
  .buttons{
    flex-direction: row;
    justify-content: flex-start;
    gap:16px;
  }
}

.threeButtons{
display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap:var(--Spaces-Gapvertical-M);
  align-self: stretch;
}

@media(min-width:625px){
  .threeButtons{
    
gap: var(--Spaces-Gapvertical-S, 14px);

  }
}

.fourButtons{

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spaces-Gapvertical-M);
  align-self: stretch;

}
@media(min-width:625px){
  .fourButtons {
    gap:16px;
  }
}
@media(min-width:625px){
  .fourButtons .buttons{
    flex-direction: column;
  }
}

@media(min-width:800px){
  .fourButtons .buttons{
    flex-direction: row;
  }
}

@media(min-width:625px){
  .fourButtons .button{
    width:auto;
  }
}

@media(min-width:800px){
  .fourButtons .button{
    width:50%;
  }
}

.center{
  text-align: center;
  align-self: center;
}

/* Carrousel éco-conçu */
.caroussel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  position: relative;
  scroll-behavior: smooth;
  width:100%;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

/* Masquer la barre de défilement sur Chrome/Safari */
.caroussel::-webkit-scrollbar {
  display: none;
}

.caroussel-track {
  display: flex;
  gap: 1rem;
  transition: transform 0.3s ease-out;
  will-change: transform;
  width:100%;
}


.carrouselTitle{
  display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
}


article{
  flex: 0 0 auto;
  width:220px;
  scroll-snap-align: start;
  display: flex;
flex-direction: column;
gap: 16px;
}

@media (min-width: 800px) {
  article {
    width: 260px;
  }
}

@media (min-width: 800px) {
  article {
    width: 260px;
  }
}

@media (min-width: 1100px) {
  article {
    width: 300px;
  }
}




.bouton-carrousel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 100px;
  border: 1px solid var(--Noir);
  background: none;
  cursor: pointer;
}


.bouton-carrousel:hover{
  background-color: #000000;
  color:white;
}

.bouton-carrousel:focus{
  background-color: #454545;
  color:white;
}

.bouton-carrousel svg{
  width: 9.84px;
height: 10px;
aspect-ratio: 9.84/10.00;
}

@media(min-width:800px){

.bouton-carrousel svg{
  width: 20px;
height: 20px;
aspect-ratio: 1/1;
}

}

/* Carrousels */
.caroussel, .caroussel-2 {
  display: flex;
  align-items: center;
  gap: var(--Spaces-Gapvertical-M);
  align-self: stretch;
  width: 100%;
  overflow: hidden;
  overflow-x: scroll;
}

.caroussel::-webkit-scrollbar,
.caroussel-2::-webkit-scrollbar {
  width: 0;
  display: none;
}

.caroussel-2 {
  align-items: flex-start;
  gap: var(--Spaces-Gaphorizontal-M);
}

.frame-13 {
  display: inline-flex;
  align-items: center;
  gap: var(--Spaces-Gapvertical-S);
  flex-direction: column;
  flex-shrink: 0;
}

.frame-13 img {
  width: 220px;
  height: var(--Sizes-Image-Carrouselheight);
  object-fit: cover;
}

.titre {
  align-self: stretch;
  font-family: var(--intertitre-font-family);
  font-weight: var(--intertitre-font-weight);
  color: var(--Noir);
  font-size: var(--Fonts-Intertitre-Fontsize);
  line-height: var(--Fonts-Intertitre-Lineheight);
  margin: 0;
}

.sous-titre {
  align-self: stretch;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: var(--Noir);
  font-size: var(--Fonts-Body1-Fontsize);
  line-height: var(--Fonts-Body1-Lineheight);
  margin: 0;
}




.frame-6{
  display: flex;
padding: 0 20px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
gap:3px;
}


.subtitle{
  display: flex;
align-items: center;
gap: 20px;
align-self: stretch;
}

.subtitle svg{
  width: 90px;
  height: 72px;
  aspect-ratio: 5/4;
}

@media(min-width:1000px){
  .subtitle svg{
    width: 131px;
    height:auto;
    aspect-ratio: 151/120;
  }
}

@media(min-width:1400px){
  .subtitle svg{
    width: 151px;
    height: 120px;
    aspect-ratio: 151/120;
  }
}

.subtitle h2{
  align-self: auto;
  text-align: left;
}

.button .telecharger{
  width: 9.48px;
height: 12.837px;
aspect-ratio: 9.48/12.84;
}

.textGras{
  color: var(--Noir, #000);
  font-family: Helvetica;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px; /* 186.667% */
  width: 352px;
  max-width: var(--Sizes-Maxwidth-Bodytext, 740px);
}

.contact-info{
  align-self: center;
  display: flex;
  flex-direction: column;
}



.frameS input{
  border-radius: 3px;
  background: #EEE;
  height: 34.43px;
  align-self: stretch;
  border:none;
}

.frameS input:focus-visible{
  border: 2px solid black;
  outline:none;
}


.frameS textarea{
    height: 245.856px;
  align-self: stretch;
  border-radius: 3px;
    background: #EEE;
      border:none;
}

.frameS textarea:focus-visible{
  border: 2px solid black;
  outline:none;
}


#buttonContainer{
  display: flex;
justify-content: flex-end;
align-items: flex-end;
gap: 8px;
align-self: stretch;
width:100%;
}



.caroussel-track picture{
display: flex;
height: var(--Sizes-Image-Carrouselheight, 220px);
width: 100%;
align-items: center;
aspect-ratio: 1/1;
}

.caroussel-track{
  display: flex;
align-items: flex-start;
gap: var(--Spaces-Gaphorizontal-M, 20px);
align-self: stretch;
}

.gallery-page .caroussel-track picture{
  width:100%;
  height:auto;
  aspect-ratio: auto;
}

.gallery-page .caroussel-track{
  gap:0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.logo{
    display: flex;
    max-width: 350px;
    max-height:200px;
    max-width:100%;
}

.logos{
    display: flex;
  align-items: center;
  gap: var(--Spaces-Gapvertical-M);
  flex-wrap: wrap;
  justify-content: space-around;
}