/* 
Theme Name: Nova Theme Child
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Brandon Villanova
Template: hello-elementor
Version: 2.0.0
*/

/* =========================================================
   0) FONT / TYPOGRAPHY
   - Déclare la police custom + applique la police sur un élément précis
========================================================= */
@font-face {
  font-family: "Nyght Serif woff";
  src: url("https://couvreur-richard.fr/wp-content/uploads/2025/12/NyghtSerif-MediumItalic-1.woff2") format("woff2");
}

.elementor-744 .elementor-element.elementor-element-f85157f {
  font-family: "Nyght Serif", serif;
}

/* =========================================================
   1) GLOBAL FIXES
   - Correctifs généraux (overflow, textarea hauteur)
========================================================= */
body {
  overflow-x: hidden;
  overflow-x: scroll;
}

#form-field-message {
  min-height: 250px;
}

/* =========================================================
   2) HOME PAGE - OVERFLOW FIX (Elementor page id 12)
   - Empêche certains blocs de déborder horizontalement
========================================================= */
.elementor-12 .elementor-element.elementor-element-1116433,
.elementor-12 .elementor-element.elementor-element-6c33dbb,
.elementor-12 .elementor-element.elementor-element-6467e64,
.elementor-12 .elementor-element.elementor-element-5fe5a68 {
  overflow: hidden;
}

/* =========================================================
   3) BUTTONS - ALIGNMENT + SVG SIZE
   - Aligne texte + icône et fixe la taille des SVG
========================================================= */
.btn-arrow-round .elementor-button-content-wrapper,
.nk-icon-arrow .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.btn-arrow-round .elementor-button-icon,
.nk-icon-arrow .elementor-button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-arrow-round .elementor-button-text,
.nk-icon-arrow .elementor-button-text {
  line-height: 1;
  text-align: center;
}

.btn-arrow-round .elementor-button-icon svg,
.nk-icon-arrow .elementor-button-icon svg {
  width: 32px;
  height: 32px;
}

.btn-arrow-round .elementor-button-icon svg path,
.nk-icon-arrow .elementor-button-icon svg path {
  transform-origin: center;
  transform-box: fill-box;
}

/* =========================================================
   4) BTN-ARROW-ROUND - HORIZONTAL ARROW ANIMATION
   - Animation de flèche horizontale (hover / out)
========================================================= */
.elementor-button:hover .elementor-button-icon svg path {
  animation: arrow-right-in 0.6s ease-out;
}

.elementor-button:not(:hover) .elementor-button-icon svg path {
  animation: arrow-right-out 0.6s ease-out;
}

@keyframes arrow-right-in {
  0%   { transform: translateX(0);  opacity: 1; }
  35%  { transform: translateX(6px); opacity: 0; }
  36%  { transform: translateX(-6px); opacity: 0; }
  100% { transform: translateX(0);  opacity: 1; }
}

@keyframes arrow-right-out {
  0%   { transform: translateX(0);  opacity: 1; }
  35%  { transform: translateX(-6px); opacity: 0; }
  36%  { transform: translateX(6px);  opacity: 0; }
  100% { transform: translateX(0);  opacity: 1; }
}

/* =========================================================
   5) NK-ICON-ARROW - DIAGONAL ARROW ANIMATION
   - Animation de flèche diagonale (hover / out)
   - Possibilité de désactiver l’animation via .disable-animation
========================================================= */
.nk-icon-arrow .elementor-button:hover .elementor-button-icon svg path {
  animation: arrow-diag-in 0.6s ease-out;
}

.nk-icon-arrow .elementor-button:not(:hover) .elementor-button-icon svg path {
  animation: arrow-diag-out 0.6s ease-out;
}

.disable-animation .elementor-button-icon svg path {
  animation: none !important;
}

@keyframes arrow-diag-in {
  0%   { transform: translate(0, 0); opacity: 1; }
  35%  { transform: translate(6px, 6px); opacity: 0; }
  36%  { transform: translate(-6px, -6px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes arrow-diag-out {
  0%   { transform: translate(0, 0); opacity: 1; }
  35%  { transform: translate(-6px, -6px); opacity: 0; }
  36%  { transform: translate(6px, 6px);  opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

/* =========================================================
   6) SWIPER NAV BUTTONS
   - Taille des boutons next/prev + taille des SVG
========================================================= */
.elementor-swiper-button-next,
.elementor-swiper-button-prev {
  width: 56px !important;
  height: 56px !important;
}

.elementor-swiper-button svg {
  width: 72px !important;
  height: 72px !important;
}

/* =========================================================
   7) TEXTAREA - DISABLE RESIZE (specific forms)
   - Empêche le redimensionnement du textarea sur des formulaires précis
========================================================= */
.elementor-19 .elementor-element.elementor-element-f7f25a2 .elementor-field-group 
.elementor-field:not(.elementor-select-wrapper),
.elementor-1115 .elementor-element.elementor-element-b462b80 .elementor-field-group 
.elementor-field:not(.elementor-select-wrapper) {
  resize: none;
}

/* =========================================================
   8) DESKTOP BREAKPOINTS
   - Ajustements de padding/largeur selon la taille écran
========================================================= */
@media (min-width: 1367px) {
  .section-max {
    padding-left: calc((100vw - 1280px) / 2) !important;
    padding-right: calc((100vw - 1280px) / 2) !important;
  }

  .Bouton-double {
    width: 100%;
  }

  .section-interne {
    padding-left: calc((100vw - 1280px) / 2 - 16px) !important;
    padding-right: 64px;
  }

  .section-max-section-padding {
    padding-left: calc((100vw - 1280px) / 2 - 16px) !important;
    padding-right: calc((100vw - 1280px) / 2 - 16px) !important;
  }
}

@media (min-width: 1201px) and (max-width: 1366px) {
  .section-max {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }

  .Bouton-double {
    width: 100%;
  }

  .section-interne {
    padding-left: 64px;
    padding-right: 64px;
  }

  .section-max-section-padding {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
}

/* =========================================================
   9) DISABLE ICON ANIMATIONS (GLOBAL)
   - Désactive transitions / transforms / animations sur icônes
========================================================= */
.elementor-icon,
.elementor-icon *,
.e-transform {
  transition: none !important;
  transform: none !important;
  animation: none !important;
}

/* =========================================================
   10) NAV MENU - CLICK TOGGLE SUBMENU
   - Sous-menu uniquement au clic (pas au hover)
   - Rotation flèche quand ouvert
========================================================= */
.elementor-nav-menu .sub-arrow {
  cursor: pointer !important;
  pointer-events: auto;
}

.elementor-nav-menu li.menu-item-has-children > ul.sub-menu {
  display: none !important;
}

.elementor-nav-menu li.menu-item-has-children.is-open > ul.sub-menu {
  display: block !important;
}

.elementor-nav-menu a.elementor-item.highlighted:not(:hover) {
  background: none !important;
  color: inherit !important;
}

/* Couleur flèche submenu (menu header page 25) */
.elementor-25
.elementor-element.elementor-element-9038906
.elementor-nav-menu--main
.elementor-item:hover .sub-arrow svg,
.elementor-25
.elementor-element.elementor-element-9038906
.elementor-nav-menu--main
.elementor-item.elementor-item-active .sub-arrow svg,
.elementor-25
.elementor-element.elementor-element-9038906
.elementor-nav-menu--main
.elementor-item.highlighted .sub-arrow svg,
.elementor-25
.elementor-element.elementor-element-9038906
.elementor-nav-menu--main
.elementor-item:focus .sub-arrow svg {
  fill: currentColor !important;
}

/* Couleur flèche submenu (menu header page 680) */
.elementor-680
.elementor-element.elementor-element-cbf3ec5
.elementor-nav-menu--main
.elementor-item:hover .sub-arrow svg,
.elementor-680
.elementor-element.elementor-element-cbf3ec5
.elementor-nav-menu--main
.elementor-item.elementor-item-active .sub-arrow svg,
.elementor-680
.elementor-element.elementor-element-cbf3ec5
.elementor-nav-menu--main
.elementor-item.highlighted .sub-arrow svg,
.elementor-680
.elementor-element.elementor-element-cbf3ec5
.elementor-nav-menu--main
.elementor-item:focus .sub-arrow svg {
  fill: currentColor !important;
}

/* Évite les effets Elementor quand highlighted sans hover */
.elementor-nav-menu a.elementor-item.highlighted:not(:hover) .sub-arrow {
  fill: inherit !important;
  color: inherit !important;
  transform: none !important;
}

/* Empêche l’ouverture au hover (force clic seulement) */
.elementor-nav-menu li.menu-item-has-children:hover > ul.sub-menu {
  display: none !important;
}

.elementor-nav-menu li.menu-item-has-children.is-open:hover > ul.sub-menu {
  display: block !important;
}

/* Rotation douce de la flèche */
.elementor-nav-menu .sub-arrow svg {
  transition: transform 0.25s ease;
}

.elementor-nav-menu li.menu-item-has-children.is-open > a .sub-arrow svg {
  transform: rotate(180deg);
}

/* =========================================================
   11) SUBMENU DROPDOWN - ALIGN LEFT (KEEP FLEX)
   - Sous-menu dropdown aligné à gauche, items en full width
========================================================= */
ul.sub-menu.elementor-nav-menu--dropdown {
  padding-left: 0 !important;
  text-align: left !important;
}

ul.sub-menu.elementor-nav-menu--dropdown > li {
  width: 100% !important;
}

ul.sub-menu.elementor-nav-menu--dropdown > li > a {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  text-align: left !important;
  padding-left: 0 !important;
  padding-right: 30px !important;
}

/* =========================================================
   12) SWIPER BUTTON HOVER COLORS
   - Hover/focus : change couleurs (rect / path)
========================================================= */
.elementor-swiper-button svg rect,
.elementor-swiper-button svg path {
  transition: fill .25s ease, stroke .25s ease;
}

.elementor-swiper-button:hover svg rect,
.elementor-swiper-button:focus-visible svg rect {
  fill: #90BF24 !important;
}

.elementor-swiper-button:hover svg path,
.elementor-swiper-button:focus-visible svg path {
  stroke: #ffffff !important;
}

/* =========================================================
   13) POPUP HEIGHT
   - Force la popup à prendre la hauteur écran
========================================================= */
#elementor-popup-modal-1599 .dialog-message {
  height: 100vh !important;
  min-height: 100vh !important;
}

/* =========================================================
   14) IMAGE BOX - MOBILE LAYOUT
   - Sur mobile : image à gauche + texte à droite (flex row)
========================================================= */
@media (max-width: 767px) {
  .elementor-image-box-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .elementor-image-box-img {
    margin: 0;
    flex: 0 0 auto;
  }

  .elementor-image-box-img img {
    display: block;
    width: 102px;
    height: 102px;
    object-fit: cover;
  }

  .elementor-image-box-content {
    flex: 1;
    min-width: 0;
  }
}

.elementor-image-box-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* =========================================================
   15) FORM FOCUS BORDER
   - Bordure verte au focus sur input/textarea
========================================================= */
.Form input.elementor-field:focus,
.Form textarea.elementor-field:focus {
  border: 1px solid #90BF24 !important;
  outline: none !important;
  transition: border-color 0.3s ease !important;
}

/* =========================================================
   16) MOBILE PADDING OVERRIDE
   - Padding spécifique sur mobile pour .mobile
========================================================= */
@media (max-width: 767px) {
  .mobile {
    padding: 18px 32px 8px 32px;
  }
}

/* =========================================================
   17) WORD WRAP
   - Coupe les mots longs pour éviter le débordement
========================================================= */
.mot {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* =========================================================
   18) HOVER TEXT + RATING (Elementor page 437)
   - Met du texte blanc + ajuste les couleurs du rating au hover
========================================================= */
.elementor-437 .elementor-element.elementor-element-40c0059:hover
.elementor-element-115ab8f,
.elementor-437 .elementor-element.elementor-element-40c0059:hover
.elementor-element-7532a2b,
.elementor-437 .elementor-element.elementor-element-40c0059:hover
.elementor-element-41ab6b5 {
  color: #fff !important;
}

.elementor-437 .elementor-element.elementor-element-40c0059:hover
.elementor-element-6151e5d {
  --e-rating-icon-marked-color: #fff;
  --e-rating-icon-color: rgba(255,255,255,.35);
}

/* =========================================================
   19) PAGINATION - ALIGNEMENT + FAUSSE PAGINATION (layout)
   - Centre la pagination et remplace Prev/Next par des SVG
========================================================= */
.elementor-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0px;
}

/* FAUSSE pagination : layout seulement (pas de font ici) */
.elementor-pagination.is-fake-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0px;
}

/* Box commune (alignement) */
.elementor-pagination.is-fake-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  padding:0;
  line-height:1;
  vertical-align:middle;
  text-decoration:none;
}

/* Page active */
.elementor-pagination.is-fake-pagination .page-numbers.current{
  font-family:"OverusedGrotesk-VF", sans-serif;
  font-size:20px;
  font-weight:500;   
  color:#A1A1A1;
}

/* Cacher "Page" (Elementor screen-only) */
.elementor-pagination.is-fake-pagination .elementor-screen-only{
  display:none !important;
}

/* Remplacer texte Previous/Next par icônes */
.elementor-pagination.is-fake-pagination .page-numbers.prev,
.elementor-pagination.is-fake-pagination .page-numbers.next{
  font-size:0;
  line-height:0;
}

/* SVG previous (48px) */
.elementor-pagination.is-fake-pagination .page-numbers.prev::before{
  content:"";
  width:48px;
  height:48px;
  display:block;
  background:url("https://couvreur-richard.fr/wp-content/uploads/2026/01/previous.svg") no-repeat center / contain;
}

/* SVG next (48px) */
.elementor-pagination.is-fake-pagination .page-numbers.next::before{
  content:"";
  width:48px;
  height:48px;
  display:block;
  background:url("https://couvreur-richard.fr/wp-content/uploads/2026/01/next.svg") no-repeat center / contain;
}

/* Aspect "désactivé" sur 1 page */
.elementor-pagination.is-fake-pagination .page-numbers[aria-disabled="true"]{
  opacity:.4;
  pointer-events:none;
}

/* =========================================================
   20) POSTS/CARDS - HOVER TEXT (Elementor page 10533)
   - Texte blanc sur hover + meta plus lisible
========================================================= */
.elementor-10533 .elementor-element.elementor-element-669b9f3:hover .elementor-element-ecccce1,
.elementor-10533 .elementor-element.elementor-element-669b9f3:hover .elementor-element-7c4e56f{
  color:#ffffff !important;
}

.elementor-10533 .elementor-element.elementor-element-669b9f3:hover .elementor-post-info__item,
.elementor-10533 .elementor-element.elementor-element-669b9f3:hover .elementor-post-info__item a,
.elementor-10533 .elementor-element.elementor-element-669b9f3:hover .elementor-icon-list-text{
  color:#cfcfcf !important;
}

/* Hover global sur les articles */
.elementor-post:hover .elementor-post__title a {
  color: #ffffff !important;
}

.elementor-post:hover .elementor-post__meta-data span,
.elementor-post:hover .elementor-post__meta-data span a {
  color: #cfcfcf !important;
}

/* =========================================================
   21) IMAGE GRADIENT OVERLAY (degradation)
   - Image + overlay dégradé au-dessus, avec border-radius 16px
   - Widget en absolute (on ne touche pas)
========================================================= */
.degradation{
  overflow: hidden;
  border-radius: 16px;
}

/* L’image */
.degradation img{
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  border-radius: 16px;
}

/* Dégradé AU-DESSUS */
.degradation::after{
  content:"";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42, 123, 155, 0) 25%, rgba(0, 0, 0, 1) 90%);
  z-index: 2;
  pointer-events: none;
  border-radius: 16px;
}

/* =========================================================
   22) POSTS - TITLE/DATE SPACE-BETWEEN
   - Met le titre en haut et la date en bas dans .elementor-post__text
========================================================= */
.elementor-post__text{
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}