/* =========================================================
   PAGE LA VISION
========================================================= */

.page-vision{
    width: 100%;
    overflow-x: hidden;
  }

  /* =========================================================
   HERO VISION
   - même logique que l’accueil
========================================================= */

.vision-hero{
  width: 100%;
  padding-block: 8vh;
}

.vision-hero-contenu{
  width: 100%;
  padding: 0 15%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8%;
}

/* Colonne texte */
.vision-hero-texte-colonne{
  width: 52%;
}

.vision-hero-titre{
  margin: 0 0 5% 0;
  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(2rem, 2.5vw, 3rem);
}

.vision-hero-texte{
  margin-top: 3vh;
  margin-bottom: 0;
  line-height: 1.5;
  max-width: 90%;
  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);
}

/* Boutons */
.vision-hero-boutons{
  margin-top: 5%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vision-hero-bouton{
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  width: fit-content;
  text-decoration: none;
  color: var(--noir);
  cursor: pointer;
  margin-top: 5%;
}

.vision-hero-bouton-texte{
  position: relative;
  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;
}

.vision-hero-bouton-texte::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.18em;
  width: 100%;
  height: 0.09em;
  background: var(--noir);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.vision-hero-bouton-fleche{
  position: relative;
  width: 1.2rem;
  height: 0.12rem;
  background: var(--noir);
  transform-origin: center;
  transition: transform 0.35s ease;
}

.vision-hero-bouton-fleche::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 0.12rem solid var(--noir);
  border-top: 0.12rem solid var(--noir);
  transform: translateY(-50%) rotate(45deg);
}

.vision-hero-bouton:hover .vision-hero-bouton-texte::after{
  transform: scaleX(1);
}

.vision-hero-bouton:hover .vision-hero-bouton-fleche{
  transform: rotate(45deg);
}

/* Colonne visuel */
.vision-hero-visuel{
  width: 40%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.vision-hero-image{
  width: 90%;
  max-width: 34rem;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 900px){
  .vision-hero{
    padding-block: 6vh;
  }

  .vision-hero-contenu{
    width: 100%;
    padding: 0 8%;
    flex-direction: column;
    align-items: flex-start;
    gap: 6vh;
  }

  .vision-hero-texte-colonne{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    order: 1;
  }

  .vision-hero-titre{
    width: 100%;
    max-width: 100%;
    font-size: clamp(1.75rem, 7.2vw, 2.7rem);
    line-height: 0.96;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    white-space: normal;
  }

  .vision-hero-texte{
    max-width: 100%;
  }

  .vision-hero-visuel{
    width: 100%;
    justify-content: flex-start;
    order: 2;
  }

  .vision-hero-image{
    width: 70%;
    max-width: 22rem;
  }
}

@media (max-width: 480px){
  .vision-hero-contenu{
    padding: 0 10%;
  }

  .vision-hero-titre{
    font-size: clamp(1.55rem, 7vw, 2.2rem);
  }

  .vision-hero-image{
    width: 82%;
  }
}


  /* =========================================================
   SECTION — À PROPOS DE ARTIST+
========================================================= */

.vision-apropos{
  width: 100%;
  padding: 10vh 0 12vh 0;
}

.vision-apropos-contenu{
  width: 100%;
  padding: 0 15%;
}

/* =========================================================
   ENTÊTE
   - titre aligné à droite
========================================================= */

.vision-apropos-entete{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.vision-apropos-titre{
  margin: 0;
  width: 50%;
  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;
  line-height: 1.05;
}

/* =========================================================
   GRILLE
========================================================= */

.vision-apropos-grille{
  width: 100%;
  display: grid;
  grid-template-columns: 38% 48%;
  column-gap: 14%;
  align-items: start;
}

/* =========================================================
   COLONNE TEXTE
========================================================= */

.vision-apropos-colonne-texte{
  width: 100%;
}

.vision-apropos-paragraphe{
  margin: 0 0 5vh 15vh;
  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);
  line-height: 1.45;
}

.vision-apropos-paragraphe:last-child{
  margin-bottom: 0;
}

/* =========================================================
   COLONNE LISTE
========================================================= */

.vision-apropos-colonne-liste{
  width: 100%;
  padding-top: 10vh;
}

.vision-apropos-item{
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: 1.5rem;
  align-items: start;
}

.vision-apropos-item:last-child{
  margin-bottom: 0;
}

.vision-apropos-item-picto{
  width: 2.5rem;
  height: auto;
  display: block;
  margin-top: 0.25rem;
}

.vision-apropos-item-texte{
  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;
}

/* =========================================================
   RESPONSIVE TABLETTE
========================================================= */

@media (max-width: 1024px){

  .vision-apropos{
    padding: 8vh 0 10vh 0;
  }

  .vision-apropos-contenu{
    padding: 0 10%;
  }

  .vision-apropos-entete{
    justify-content: flex-start;
    margin-bottom: 6vh;
  }

  .vision-apropos-titre{
    width: 100%;
  }

  .vision-apropos-grille{
    grid-template-columns: 1fr;
    row-gap: 6vh;
  }

  .vision-apropos-colonne-liste{
    padding-top: 0;
  }

  .vision-apropos-item{
    align-items: center;
    margin: 0 5%;
    column-gap: 0;
  }

  .vision-apropos-item-texte{
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    margin: 5% 0;
  }
}

/* =========================================================
   RESPONSIVE MOBILE
========================================================= */

@media (max-width: 640px){

  .vision-apropos{
    padding: 6vh 0 8vh 0;
  }


  .vision-apropos-entete{
    margin-bottom: 4vh;
  }

  .vision-apropos-titre{
    font-size: clamp(1.8rem, 7vw, 2.5rem);
    line-height: 1.08;
  }

  .vision-apropos-paragraphe{
    margin: 10% 0 0 15%;
    font-size: 1rem;
    line-height: 1.5;
  }


  .vision-apropos-item-picto{
    width: 2.3rem;
  }
}

/* =========================================================
   SECTION — IMAGES EDITORIALES
========================================================= */

.vision-images-editorial{
  width: 100%;
  padding: 3vh 0 5vh 0;
}

.vision-images-editorial-conteneur{
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 8%;
  display: grid;
  grid-template-columns: 52% 42%;
  align-items: center;
}

/* =========================================================
   COLONNE GAUCHE
========================================================= */

.vision-images-editorial-gauche{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5vh;
}

/* image haute */

.vision-images-editorial-image-haut{
  width: 72%;
  aspect-ratio: 22 / 6;
  overflow: hidden;
  margin-left: auto;
}

/* image basse */

.vision-images-editorial-image-bas{
  width: 82%;
  aspect-ratio: 16 / 6;
  overflow: hidden;
}

/* =========================================================
   IMAGE DROITE (GRANDE)
========================================================= */

.vision-images-editorial-droite{
  width: 82%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-left: auto;
}

/* =========================================================
   IMG GLOBAL
========================================================= */

.vision-images-editorial img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   RESPONSIVE TABLETTE
   - on garde une composition éditoriale
   - pas de pile basique
========================================================= */

@media (max-width: 1024px){

  .vision-images-editorial{
    padding: 2vh 0 5vh 0;
  }

  .vision-images-editorial-conteneur{
    max-width: none;
    padding: 0 10%;
    grid-template-columns: 1fr;
    row-gap: 5vh;
    position: relative;
  }

  .vision-images-editorial-droite{
    width: 68%;
    aspect-ratio: 4 / 5;
    margin-left: 5rem;
    margin-right: 0;
    order: 1;
  }

  .vision-images-editorial-gauche{
    width: 100%;
    gap: 3vh;
    order: 2;
    margin-top: -8vh;
  }

  .vision-images-editorial-image-haut{
    width: 58%;
    margin-left: 0;
    margin-right: auto;
  }

  .vision-images-editorial-image-bas{
    width: 72%;
    margin-left: 18%;
  }
}

/* =========================================================
   RESPONSIVE MOBILE
   - composition toujours éditoriale
   - grande verticale + deux bandes décalées
========================================================= */

@media (max-width: 640px){

  .vision-images-editorial{
    padding: 2vh 0 4vh 0;
  }

  .vision-images-editorial-droite{
    width: 70%;
    aspect-ratio: 3 / 2;
  }

  .vision-images-editorial-gauche{
    gap: 2vh;
    margin-top: -5vh;
  }

  .vision-images-editorial-image-haut{
    width: 72%;
    aspect-ratio: 18 / 6;
    margin-left: 0;
  }

  .vision-images-editorial-image-bas{
    width: 82%;
    aspect-ratio: 16 / 6;
    margin-left: auto;
  }
}

/* =========================================================
   PETIT MOBILE
========================================================= */

@media (max-width: 480px){

  .vision-images-editorial-gauche{
    margin-top: -3vh;
  }

  .vision-images-editorial-image-haut{
    width: 76%;
  }

  .vision-images-editorial-image-bas{
    width: 86%;
  }
}

/* =========================================================
VISION — MODELE
========================================================= */

.vision-modele{
  width:100%;
  padding:5vh 0;
}

.vision-modele-conteneur{
  width:80%;
  margin:0 auto;
}

/* ================= TITRE ================= */

.vision-modele-titre{
  margin:0 0 5vh 0;
  font-family:var(--font-titre);
  font-weight:var(--font-weight-titre);
  letter-spacing:var(--tracking-titre);
  text-transform:uppercase;
  line-height:1.05;
  max-width:75%;
}

/* ================= GRID ================= */

.vision-modele-contenu{
  display:grid;
  grid-template-columns: 20% 1fr;
  align-items:start;
  margin: 0 10%;
}

/* ================= IMAGE ================= */

.vision-modele-visuel{
  padding-top:1vh;
}

.vision-modele-barre{
  width:80%;
  max-width:14rem;
  display:block;
}

/* ================= TEXTE ================= */

.vision-modele-texte p{
  margin:0 0 5vh 0;
  max-width:40rem;
  font-family:var(--font-texte);
  font-weight:var(--font-weight-texte);
  line-height:1.5;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:1024px){


.vision-modele-conteneur{
  width:100%;
  margin: 0;
}


  .vision-modele-titre{
    max-width:100%;
  }

  .vision-modele-contenu{
    grid-template-columns:1fr;
    row-gap:5vh;
    margin: 0;
  }

  .vision-modele-visuel{
    order:1;
  }

  .vision-modele-texte{
    order:2;
    margin: 5% 0 0 15%;
  }

  .vision-modele-barre{
    max-width:12rem;
  }

}

@media(max-width:768px){

  .vision-modele{
    padding:10% 10% 0 10%;
  }


  .vision-modele-titre{
    font-size:clamp(1.9rem,7vw,2.6rem);
    line-height:1.1;
  }

  .vision-modele-texte p{
    font-size:1rem;
    line-height:1.6;
  }

}

@media(max-width:480px){


  .vision-modele-barre{
    max-width:10rem;
  }

}



/* =========================================================
   SECTION — PROGRESSION
========================================================= */

.vision-progression{
  width: 100%;
  padding: 5vh 0;
}

.vision-progression-conteneur{
  width: 80%;
  margin: 0 auto;
}

/* =========================================================
   ENTETE
========================================================= */

.vision-progression-entete{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8vh;
}

.vision-progression-titre{
  width: 80%;
  margin: 0 10% 0 0;
  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;
  line-height: 1.05;
  text-align: right;
}

/* =========================================================
   INTRO
========================================================= */

.vision-progression-introduction{
  width: 50%;
  margin: 0 0 2vh 10vh;
}

.vision-progression-intro-texte{
  margin: 0 0 5vh 0;
  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);
  line-height: 1.45;
}

.vision-progression-intro-texte:last-child{
  margin-bottom: 0;
}

/* =========================================================
   GRILLE
========================================================= */

.vision-progression-grille{
  width: 90%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 5%;
  align-items: start;
  margin: 0 0 0 10%;
}

.vision-progression-colonne{
  display: flex;
  flex-direction: column;
  gap: 8vh;
}

.vision-progression-colonne-gauche{
margin: 15% 0;
}

/* =========================================================
   BLOC
========================================================= */

.vision-progression-bloc{
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  column-gap: 1.8rem;
  align-items: start;
}

.vision-progression-bloc-contenu{
  width: 100%;
}

.vision-progression-bloc-titre{
  margin: 0 0 2vh 0;
  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;
  line-height: 1.1;
}

.vision-progression-bloc-texte{
  margin: 0;
  max-width: 90%;
  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);
  line-height: 1.45;
}

/* =========================================================
   PICTOS
   - même largeur pour tous
   - hauteur auto
========================================================= */

.vision-progression-picto{
  width: 3rem;
  height: 3rem;
  display: block;
  object-fit: contain;
}


/* =========================================================
   RESPONSIVE TABLETTE
========================================================= */

@media (max-width: 1024px){


  .vision-progression-entete{
    justify-content: flex-start;
    margin-bottom: 5vh;
  }

  .vision-progression-titre{
    width: 100%;
    text-align: left;
  }

  .vision-progression-introduction{
    width: 90%;
    margin: 0 10% 0 10%;
  }

  .vision-progression-grille{
    grid-template-columns: 1fr;
    margin: 0 5%;
  }

  .vision-progression-colonne{
    gap: 5vh;
  }

  .vision-progression-bloc{
    grid-template-columns: 3.8rem 1fr;
    column-gap: 1.4rem;
    margin-left: 0 !important;
  }

  .vision-progression-bloc-texte{
    max-width: 100%;
  }

  .vision-progression-picto{
    width: 2.7rem;
  }
}

/* =========================================================
   RESPONSIVE MOBILE
========================================================= */

@media (max-width: 640px){

  .vision-progression-titre{
    font-size: clamp(1.8rem, 7vw, 2.5rem);
    line-height: 1.08;
  }

  .vision-progression-intro-texte{
    font-size: 1rem;
    line-height: 1.5;
  }

  .vision-progression-colonne{
    gap: 4vh;
  }

  .vision-progression-bloc{
    grid-template-columns: 3rem 1fr;
    column-gap: 1rem;
  }

  .vision-progression-picto{
    width: 2.3rem;
  }

  .vision-progression-bloc-titre{
    font-size: clamp(1.05rem, 4.8vw, 1.35rem);
    line-height: 1.12;
  }

  .vision-progression-bloc-texte{
    font-size: 1rem;
    line-height: 1.5;
  }
}

/* =========================================================
   SECTION IMAGE BANDEAU — PAGE VISION
   - même logique que l’accueil / dispositif
   - classes spécifiques
========================================================= */

.vision-image-bandeau{
  width:100%;
  padding:0 10% 5vh 10%;
}

.vision-image-bandeau-contenu{
  width:100%;
  aspect-ratio:21 / 6;
  overflow:hidden;
}

.vision-image-bandeau-contenu img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width: 1024px){
  .vision-image-bandeau-contenu{
    width:100%;
    aspect-ratio:7 / 6;
    overflow:hidden;
  }
}


/* =========================================================
   SECTION — SOUTENIR ARTIST+
========================================================= */

.soutenir-artist{
  width: 100%;
}

.soutenir-artist-conteneur{
  width: 70%;
  margin: 0 20%;
}

/* =========================================================
   ENTETE — SOUTENIR ARTIST+
   (centrage type maquette)
========================================================= */

.soutenir-artist-entete{
  width: 100%;
  margin-bottom: 8vh;
  text-align: center;
}

/* zone du titre */

.soutenir-artist-titre{
  width: 50%;
  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;
  text-align: left;
  line-height: 1.05;
}

/* zone du texte */

.soutenir-artist-intro{
  width: 70%;
  margin: 0 30vh;
  text-align: left;
  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);
  line-height: 1.5;
}
/* =========================================================
   GRILLE PRINCIPALE
========================================================= */

.soutenir-artist-grille{
  width: 80%;
  display: grid;
  grid-template-columns: 40% 40%;
  column-gap: 20%;
  row-gap: 8vh;
  align-items: start;
  margin: 0 0 10% 5%;
}

/* =========================================================
   BLOC
========================================================= */

.soutenir-artist-bloc{
  width: 100%;
  display: grid;
  grid-template-columns: 4rem 1fr;
  column-gap: 1.5rem;
  align-items: start;
}

/* décalage léger ligne 2 comme sur ta maquette */
.soutenir-artist-bloc:nth-child(3),
.soutenir-artist-bloc:nth-child(4){
  margin-top: 1vh;
}

/* =========================================================
   PICTOS
========================================================= */

.soutenir-artist-picto{
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  display: block;
  margin-top: 0.2rem;
}

/* =========================================================
   CONTENU
========================================================= */

.soutenir-artist-bloc-contenu{
  width: 100%;
}

.soutenir-artist-bloc-titre{
  margin: 0 0 1.5vh 0;
  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;
  line-height: 1.08;
}

.soutenir-artist-bloc-texte{
  margin: 0;
  max-width: 20rem;
  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);
  line-height: 1.5;
}

/* =========================================================
   RESPONSIVE TABLETTE
========================================================= */

@media (max-width: 1024px){

  .soutenir-artist-conteneur{
    padding: 0 10%;
    margin: 0 0 0 5%;
    width: 100%;
  }

  .soutenir-artist-entete{
    margin-bottom: 7vh;
  }

  .soutenir-artist-grille{
    column-gap: 10%;
    row-gap: 6vh;
  }

  .soutenir-artist-bloc{
    grid-template-columns: 3.8rem 1fr;
    column-gap: 1.2rem;
  }

  .soutenir-artist-picto{
    width: 3rem;
    height: 3rem;
  }

  .soutenir-artist-bloc-texte{
    max-width: 100%;
  }
}

/* =========================================================
   RESPONSIVE MOBILE
========================================================= */

@media (max-width: 640px){

  .soutenir-artist-entete{
    margin-bottom: 6vh;
  }

  .soutenir-artist-titre{
    font-size: clamp(1.9rem, 7vw, 2.7rem);
    line-height: 1.08;
  }

  .soutenir-artist-intro{
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 0 5%;
    width: 90%;
  }

  .soutenir-artist-grille{
    grid-template-columns: 1fr;
    row-gap: 5vh;
  }

  .soutenir-artist-bloc{
    grid-template-columns: 3.2rem 1fr;
    column-gap: 1rem;
  }

  .soutenir-artist-bloc:nth-child(3),
  .soutenir-artist-bloc:nth-child(4){
    margin-top: 0;
  }

  .soutenir-artist-picto{
    width: 2.8rem;
    height: 2.8rem;
  }

  .soutenir-artist-bloc-titre{
    font-size: clamp(1.05rem, 4.6vw, 1.3rem);
    line-height: 1.1;
  }

  .soutenir-artist-bloc-texte{
    font-size: 1rem;
    line-height: 1.5;
    max-width: 100%;
  }
}