/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Animation custom pour monter les 4 cards sur la page d'accueil */

/* Style de base */
.pnospace, .pnospace p {
  margin-block-end: 0 !important;
}

ul, ol {
  margin-bottom: 15px;
}


/* Style pour les cards avec transition */
.up-hover {
  position: relative; /* IMPORTANT : nécessaire pour le position absolute du bandeau */
  transition: transform 0.3s ease;
}

.up-hover:hover {
  transform: translateY(-10px);
}

.up-hover img {
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}

.up-hover:hover img {
  filter: grayscale(0%) !important;
}

/* === BANDEAU === */
.hover-banner {
  position: absolute;
  bottom: 20px !important;          /* position de base (état non survolé) */
  left: 0;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background: #182730;
  color: #FFF;
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0.9px;
  transition: background 0.4s ease, bottom 0.8s ease;  /* ← ajouter bottom */
  overflow: hidden;
  z-index: 2;
}

/* Au survol : fond orange ET descend */
.up-hover:hover .hover-banner {
  background: #E66445;
  bottom: 0;             /* descend collé en bas */
}

/* Au survol : fond orange + texte orange clair */
.up-hover:hover .hover-banner {
  background: #E66445;
}

/* Header : titre + flèche alignés */
.hover-banner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.hover-banner-title {
  flex: 1;
}

/* Flèche */
.hover-banner .arrow-rotate {
  display: inline-block;
  color: #FFF;
  transition: transform 0.3s ease;
  transform: rotate(0deg); /* ↗ */
}

.up-hover:hover .hover-banner .arrow-rotate {
  transform: rotate(45deg); /* → */
}

.hover-banner .arrow-rotate i {
  color: #FFF;
}

/* Description : masquée par défaut, apparaît au survol */
.hover-banner-description {
  max-height: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  opacity: 0;
  margin: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
}

.up-hover:hover .hover-banner-description {
  max-height: 100px; /* ajuste selon la longueur max attendue */
  opacity: 1;
  margin-top: 12px;
}

.titre-deroulant {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.titre-deroulant-track {
  display: inline-flex;
  white-space: nowrap;
  width: max-content;
  animation: defile 30s linear infinite;
}

.titre-deroulant-item {
  padding-right: 80px;
  flex-shrink: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 250;
  font-size: 150px;
  line-height: 150px;
  letter-spacing: 0.15em;   /* 15% */
  text-transform: uppercase;
  vertical-align: middle;
  color: white;           /* à adapter */
}

@keyframes defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 1024px) {
  .titre-deroulant-item {
    font-size: 55px;
    line-height: 45px;
  }

}


.conteneur-article-hp:hover .titre-article-boucle-hp div {
  font-weight: 700 !important;
  color: #E66445 !important;
  text-decoration: underline !important;
}

@media (max-width: 1024px) {

  /* Pas d'effet de soulèvement au survol sur tactile */
  .up-hover:hover {
    transform: none;
  }

  /* Image toujours en couleur (pas de grayscale sur tactile) */
  .up-hover img {
    filter: grayscale(0%) !important;
  }

  /* Bandeau : orange par défaut, collé en bas, pas d'animation de position */
  .hover-banner {
    bottom: 0 !important;
    background: #E66445 !important;
    transition: none !important;
  }

  /* Annule le changement au survol (déjà orange et en bas) */
  .up-hover:hover .hover-banner {
    background: #E66445 !important;
    bottom: 0 !important;
  }

  /* Titre : typo mobile demandée */
  .hover-banner-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.05em;   /* 5% */
  }

  /* Description : complètement masquée sur mobile/tablette */
  .hover-banner-description {
    display: none !important;
  }

  /* La flèche reste droite (pas de rotation au tap) */
  .up-hover:hover .hover-banner .arrow-rotate {
    transform: rotate(0deg);
  }
}

/* Fin du style pour les cards qui ont une transition */



/* Style pour les cards sous les articles */

.single-post .post .conteneur-article-hp {
  --padding-top: 20px !important;
  --padding-bottom: 20px !important;
  --padding-left: 20px !important;
  --padding-right: 20px !important;
}