/*
  cta.css
  Styles des call-to-action, desktop et responsive.
  Centralisation, optimisation, documentation complète.
*/

/* ================= ICONES RESEAUX SOCIAUX EN BACKGROUND ================= */
.icon-facebook, .icon-instagram, .icon-spotify {
  display: inline-block;
  width: 32px;
  height: 32px;
  gap: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.2s;
}

/* GREEN */
.contener-cta-rs-green .icon-facebook {
  background-image: url('/assets/img/reseauxsociaux/green/facebook-gren.png');
}
.contener-cta-rs-green .icon-facebook:hover {
  background-image: url('/assets/img/reseauxsociaux/green/facebook-gren.png');
}
.contener-cta-rs-green .icon-instagram {
  background-image: url('/assets/img/reseauxsociaux/green/instagram-gren.png');
}
.contener-cta-rs-green .icon-instagram:hover {
  background-image: url('/assets/img/reseauxsociaux/green/instagram-gren.png');
}
.contener-cta-rs-green .icon-spotify {
  background-image: url('/assets/img/reseauxsociaux/green/spotify-gren.png');
}
.contener-cta-rs-green .icon-spotify:hover {
  background-image: url('/assets/img/reseauxsociaux/green/spotify-gren.png');
}

/* PURPLE */
.contener-cta-rs-purple .icon-facebook {
  background-image: url('/assets/img/reseauxsociaux/purple/facebook-ppe.png');
}
.contener-cta-rs-purple .icon-facebook:hover {
  background-image: url('/assets/img/reseauxsociaux/purple/facebook-ppe.png');
}
.contener-cta-rs-purple .icon-instagram {
  background-image: url('/assets/img/reseauxsociaux/purple/instagram-ppe.png');
}
.contener-cta-rs-purple .icon-instagram:hover {
  background-image: url('/assets/img/reseauxsociaux/purple/instagram-ppe.png');
}
.contener-cta-rs-purple .icon-spotify {
  background-image: url('/assets/img/reseauxsociaux/purple/spotify-ppe.png');
}
.contener-cta-rs-purple .icon-spotify:hover {
  background-image: url('/assets/img/reseauxsociaux/purple/spotify-ppe.png');
}


/* CSS SECTION VAR 1 GREEN / CTA CONTACT + RS */
.section-cta {
  background: var(--gradient-principal-grey);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  max-width: 100vw;
  min-height: 1px;
  padding: var(--base-padding);
  margin: 0;
  gap: 50px;
}

/* CSS BLOC CONTACT */
.bloc-contact-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  padding: 50px;
  width: 100%;
  max-width: 1190px;
  margin: 0 auto;
  border-radius: 25px;
  background: var(--gradient-secondary-grey);
  color: #000;
  box-sizing: border-box;
  height: auto;
}

/* CSS CONTENEUR H2 CONTACT */
.conteneur-h2-contact-cta {
  display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}

.conteneur-h2-contact-cta h2 {
  font-size: 28px;
    text-align: center;
    width: 100%;
}
/* CSS CONTENEUR P CTA CONTACT */
.conteneur-p-cta-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.conteneur-p-cta-contact p {
font-size: 16px;
    text-align: center;
    margin: 0;
}

/* CSS CONTENEUR BOUTTON CTA CONTACT GREEN */
.button-cta-contact-green {
  width: fit-content;
  margin: 0 auto;
  padding: 20px;
  background: var(--gradient-secondary-grey);
  border: 2px solid #000;
  border-radius: 50px;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 4px 16px 0 var(--shadow-green);
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  transition: 
    background 0.2s,
    border-color 0.2s,
    border-radius 0.2s,
    color 0.2s,
    box-shadow 0.2s;
  /* inner shadow white */
  box-shadow: 0 4px 16px 0 var(--shadow-green), inset 0 2px 8px 0 #fff;
}
.button-cta-contact-green:hover {
    background: #fff;
    border: 2px solid var(--color-green);
    border-radius: 0px;
    color: var(--color-green);
    box-shadow: 0 4px 16px 0 var(--shadow-grey), inset 0 2px 8px 0 var(--shadow-grey);
}

/* CSS CONTENEUR BOUTTON CTA CONTACT PURPLE */
.button-cta-contact-purple {
  width: fit-content;
  margin: 0 auto;
  padding: 20px;
  background: var(--gradient-secondary-grey);
  border: 2px solid #000;
  border-radius: 50px;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 4px 16px 0 var(--shadow-purple);
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  transition: 
    background 0.2s,
    border-color 0.2s,
    border-radius 0.2s,
    color 0.2s,
    box-shadow 0.2s;
  /* inner shadow white */
  box-shadow: 0 4px 16px 0 var(--shadow-purple), inset 0 2px 8px 0 #fff;
}
.button-cta-contact-purple:hover {
    background: #fff;
    border: 2px solid var(--color-purple);
    border-radius: 0px;
    color: var(--color-purple);
    box-shadow: 0 4px 16px 0 var(--shadow-grey), inset 0 2px 8px 0 var(--shadow-grey);
}

/* CSS BLOC RESEAUX SOCIAUX */
.bloc-rs-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  padding: 50px;
  width: 100%;
  max-width: 1190px;
  margin: 0 auto;
  border-radius: 25px;
  background: var(--gradient-secondary-grey);
  color: #000;
  box-sizing: border-box;
  height: auto;
}

/* CSS CONTENEUR H2 RS */
.conteneur-h2-rs-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

.conteneur-h2-rs-cta h2 {
  font-size: 28px;
  text-align: center;
  width: 100%;
}

/* CSS CONTENEUR P CTA RS */
.conteneur-p-cta-rs {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.conteneur-p-cta-rs p {
  font-size: 16px;
  text-align: center;
  margin: 0;
}

/* CSS CONTENEUR CTA RS ICONES GREEN */
.contener-cta-rs-green {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1190px;
  margin: 0 auto;
  height: 100%;
  gap: 50px;
}

/* CSS CONTENEUR CTA RS ICONES PURPLE */
.contener-cta-rs-purple {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1190px;
  margin: 0 auto;
  height: 100%;
  gap: 50px;
}

/* CSS BLOC SEPARATION GREEN */

 .header-separation-green {
  width: 100%;
  height: 5px;
  background: var(--gradient-secondary-green);
 }

 /* CSS BLOC SEPARATION ORANGE (page contact) */
.header-separation-orange {
  width: 100vw;
  max-width: 100vw;
  height: 5px;
  background: var(--gradient-secondary-orange);
  margin-left: calc(-50vw + 50%);
  margin-right: 0;
  box-sizing: border-box;
}