/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.5.1752426411
Updated: 2025-07-13 19:06:51

*/
/* Empêche le footer de remonter et assure un pied de page en bas */
/* Solution pour que le footer soit toujours en bas sans chevaucher le contenu */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
}

.hidden {
  display: none !important;
}

/* Conteneur global qui empile les fonds */
.conteneur-hero {
  position: relative;
  height: 92vh;
  overflow: hidden;
}

/* Toutes les sections fond doivent se superposer */
.section-fond1,
.section-fond2,
.section-fond3 {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: fadeInSlow 2.5s ease-out forwards;
}

.section-fond3-mobile{
  display: none !important;
}

/* ---------------- Page réalisationd PixSmart ----------------------------*/
.hero-realisations::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25); /* ou 0.3 */
  /*z-index: 1;*/
}


/* ------------------------------------------------------------------- Animations ----------------------------------------------------------------------- */

/* === FONDS DU HERO HEADER === */
/* Fond 1 : visible en premier */
.section-fond1 {
  z-index: 1;
  animation-delay: 0s;
}

/* Fond 2 : arrive après */
.section-fond2 {
  z-index: 2;
  animation-delay: 6s;
}

/* Fond 3 : arrive encore après */
.section-fond3 {
  z-index: 3;
  animation-delay: 11s;
}

/* Styles communs à tous les slogans */
.slogan-1,
.slogan-2,
.slogan-3 {
  opacity: 0;
  animation: fadeInSlow 2.5s ease-out forwards;
}

/* Délai pour que les slogans apparaissent l’un après l’autre */
.slogan-1 {
  animation-delay: 2s;
}

.slogan-2 {
  animation-delay: 5s;
}

.slogan-3 {
  animation-delay: 13s;
}

/* Definition des animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInText {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Animations des slogans PixSmart === */
@keyframes fadeInSlow {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation modale de contact */
.animate-modal {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/** Style de la modale de contact **/
.modale-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.modale-contenu {
  margin-top: 60px;
  max-block-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  width: 90%;
  max-width: 600px;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  overflow-y:hidden;
  padding-bottom: 2rem; /* ou plus selon besoin */
}


/** ------------------------------ ZONE FORMULAIRE CF7 ------------------------------------- **/
.modale-contenu input[type="text"],
.modale-contenu input[type="email"],
.modale-contenu textarea {
  width: 100%;
  max-height: 120px;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  box-sizing: border-box;
}

.form-label {
  font-family: 'Montserrat', sans-serif;
}

.wpcf7 form {
  font-family: 'Montserrat', sans-serif;
}

.wpcf7 textarea {
  min-height: 120px; /* ou moins, selon ce que tu veux */
  resize: vertical; /* l'utilisateur pourra encore l'agrandir manuellement si tu veux */
}

.close-modale {
  background-color: #0f7c82;
}
.close-modale:hover {
  background-color: #0c5e63;
}

.wpcf7 input[type="submit"] {
  display: block;
  margin: 2rem auto 0;
  background-color: #0f7c82;
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.wpcf7 input[type="submit"]:hover {
  background-color: #0c5e63;
}

.modale-contenu .submit-form input[type="submit"] {
  background-color: #0f7c82;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

.wpcf7 form>div, .wpcf7 form>p
 {
    margin-bottom: 0.1em;
}

/* RÉACTIF */
@media (max-width: 768px) {
  .modale-contenu {
    display:flex;
    padding: 1rem;
    max-height: 90vh;
  }
}
/** ---------------------------------------------------------------------------------------------------- **/

/** -------------------------------------------- Style des filtres ------------------------------------- **/
#filtres-realisations {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

#filtres-realisations select {
  flex: 1;
  min-width: 200px;
  padding: 0.6em;
}

/** ---------------------------------------------------------------------------------------------------- **/

/** --------------------------------------------- Style page realisations ----------------------------- **/
.container h1{
text-align: center;
color: #0A3B43;
}

.grid-projets {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 2rem;
  padding: 2rem 0;
}


@media (max-width: 768px) {
  .grid-projets {
    grid-template-columns: 1fr;
  }
}

.carte-projet {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
}

.carte-projet:hover {
  transform: translateY(-5px);
}

.carte-projet img {
  width: 100%;
  height: auto; /* <-- ou min-height si tu veux une base */
  aspect-ratio: 16 / 10; /* ou 3 / 2 selon ton besoin */
  object-fit: cover !important;
  border-radius: 8px;
  margin-bottom: 1rem;
}


.carte-projet h2 {
  font-family: 'Montserrat', sans-serif;;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1e1e1e;
}

.carte-projet p {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.carte-projet .btn {
  display: inline-block;
  margin-right: 0.5rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  background-color: #00695c;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s ease;
}


.carte-projet .btn:hover {
  opacity: 0.85;
}

.carte-projet .btn-github {
  background-color: #2d2d2d;
}

.carte-projet .btn-github:hover {
  background-color: #000;
}

/*---------------------------------------- Style page Conditions générales ----------------------------------*/

.mentions-legales {
  font-family: 'Montserrat', sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  background: #fff;
  color: #222;
  line-height: 1.7;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.mentions-legales h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #111;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.5rem;
}

.mentions-legales h3 {
  font-size: 1.3rem;
  margin-top: 2rem;
  color: #333;
}

.mentions-legales p {
  margin: 1rem 0;
  font-size: 1rem;
}

.mentions-legales a {
  color: #0073e6;
  text-decoration: underline;
}

.mentions-legales a:hover {
  color: #005bb5;
  text-decoration: none;
}



/* ------------------------------------------- Style section Univers ---------------------------------- */
.univers-pixsmart {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
  z-index: 1;
}

.wrapper-planete {
  position: absolute;
  z-index: 2;
}

.planete {
  display: block;
  max-width: 100%;
  height: auto;
  pointer-events: none;
}

.planete-ecoute     { width: 250px; }
.planete-creativite { width: 400px; }
.planete-simplicite { width: 180px; }
.planete-fiabilite  { width: 300px; }
.planete-partage    { width: 180px; }


/** --------------------------------------------------------------------------------------------------- **/


/* ---------------- Animations Page réalisation PixSmart ----------------------------*/
/* Animation titre Hero header réalisations */
.hero-realisations h1 {
  animation: fadeIn 1.2s ease-out forwards;
  opacity: 0;
}

.hero-realisations {
  animation: fadeInSlow 2s ease-out forwards;
  opacity: 0;
  position: relative;
  z-index: 1;
}

@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
  from { opacity: 0; transform: translateY(20px); }
}


/* --------------------------------------------------------- Responsive -------------------------------------------------------- */

/* =========================================== */
/* === VERSION TABLETTE & MOBILE           === */
/* =========================================== */

/*Masquer le menu desktop*/
@media (max-width: 1250px) {
  /* Cache le menu desktop */
  #ast-desktop-header {
    display: none !important;
  }
}

/* On masque les animations au profit d’un seul fond statique SVG */
@media (max-width: 1024px) {

   .conteneur-hero {
    height: 65vw !important;
    max-height: 65vw !important;
  }

  .section-fond1,
  .section-fond2,
  .section-fond3,
  .slogan-1,
  .slogan-2 {
    display: none !important;
  }

  .section-fond3-mobile {
    display: block !important;
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;
  }

.slogan-3-mobile {
  display: block !important;
  position: absolute;         /* ajouté */
  transform: translate(-50%, -50%);
  font-size: 28px !important;
  text-align: center;
  width: 80%;
  opacity: 0;
  animation: fadeInSlow 2s ease-out forwards;
  animation-delay: 500ms;
}
}

/*Masquer le bouton contact*/
@media (max-width: 700px) {
  /* Cache le menu desktop */
  .ast-custom-button {
    display: none !important;
  }
}

/* Pour mobile stricte (optionnel : ajustement plus fort si besoin) */
@media (max-width: 767px) {
 .conteneur-hero {
    height: 65vw !important;
    max-height: 65vw;
  }
  .slogan-3-mobile {
    font-size: 22px !important;
    width: 90%;
  }
}
/* =========================================== */
/* === FIN DU STYLE                         === */
/* =========================================== */