/**
 * Theme Name: Swebetech
 * Template:   twentytwentyfour
 * Description: Ce thème est 100% sur-mesure. Il est donc entièrement compatible avec l'éditeur Gutenberg et la technologie Full Site Editing (FSE), technologie intégrée nativement à WordPress et permettant la construction de sites Internet sur-mesure, performants et qualitatifs.
 * Author: Swebetech
 * Author URI: https://swebetech.com
 */


/**
 * Custom fonts loading
 */

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("./fonts/fontawesome/fa-solid-900.woff2") format("woff2"), url("./fonts/fontawesome/fa-solid-900.ttf") format("truetype");
}


html {
  scroll-behavior: smooth;
  scroll-padding: 75px;
}

html body .wp-block-post-content {
  margin-block-start: 0px !important;
}

.is-position-sticky {
  position: sticky !important;
  top: 0px;
}

html>body {
  overflow-x: hidden !important;
  transition: 0.3s ease;
  scroll-padding: 75px;
}

.simple-popup--show {
  z-index: 99999;
}

:root :where(body) {
  --wp--style--root--padding-right: var(--wp--preset--spacing--20) !important;
  --wp--style--root--padding-left: var(--wp--preset--spacing--20) !important;
}

:where(.wp-site-blocks *:focus) {
  outline-width: inherit !important;
  outline-style: inherit !important;
}

.hide {
  display: none !important;
}

.no-scroll {
  overflow: hidden;
  height: 100%;
}

.horizontal-center {
  justify-content: center;
  margin-left: auto !important;
  margin-right: auto !important;
}

/**
 * Transitions ciblées pour de meilleures performances
 * Évite la transition globale sur tous les éléments (*)
 */
a,
button,
input,
select,
textarea,
.wp-block-button__link {
  transition: all 0.3s ease;
}

h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  text-decoration: none;
  color: var(--wp--preset--color--main-0);
  transition: 0.3s ease;
}

h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  color: var(--wp--preset--color--main-500);
  text-decoration: none;
}

/**
 * Gestion du Responsive
 */
@media screen and (max-width: 780px) {
  .column-inverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

@media screen and (max-width:780px) {
  .hide-on-tablet {
    display: none !important;
  }

  .alignfull>.has-global-padding {
    padding-right: var(--wp--style--root--padding-right) !important;
    padding-left: var(--wp--style--root--padding-left) !important;
  }
}

@media screen and (min-width:781px) {
  .display-on-mobile {
    display: none !important;
  }
}

@media screen and (max-width:600px) {
  .hide-on-mobile {
    display: none !important;
  }

  .center-on-mobile {
    justify-content: center;
    text-align: center;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    padding-right: 5%;
  }
}

/**
 * Menu Principal Header
 */
header a.wp-block-navigation-item__content:hover,
header a.wp-block-navigation-item__content:active {
  text-decoration: none!important;
  color: var(--wp--preset--color--custom-accent-2) !important;
}

header a.wp-block-navigation-item__content[aria-current="page"] {
  color: var(--wp--preset--color--custom-accent-2) !important;
  font-weight: bold;
}

/**
 * Boutons
 */
:root :where(.wp-element-button:hover, .wp-block-button__link:hover) {
  background-color: var(--wp--preset--color--custom-accent-1)!important;
}


/**
 * Grille des réalisations
 **/

/* Base : le cover sert de référence pour les positionnements */
.grid-realisations .wp-block-cover {
  position: relative;
  overflow: hidden;
}

/* L'image ne doit jamais bloquer les clics */
.grid-realisations .wp-block-cover__image-background {
  pointer-events: none;
}

/* OVERLAY : span plein écran + dégradé bas->haut */
.grid-realisations .wp-block-cover__background.has-background-dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 8, 54, 0.95) 0%,
      rgba(126, 134, 147, 0) 40%) !important;

  /* Mobile : visible */
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Le container WP : on le fait remplir le cover (pour que le titre puisse être placé) */
.grid-realisations .wp-block-cover__inner-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  pointer-events: none;
  /* IMPORTANT : le clic doit aller au lien plein écran */
}

/* Le H2 devient juste un "support" plein écran */
.grid-realisations .wp-block-post-title {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  opacity: 1;
  /* Mobile : visible */
  transition: opacity 0.3s ease;
}

/* LE LIEN = SURFACE CLIQUABLE 100% DU COVER + TEXTE EN BAS À GAUCHE */
.grid-realisations .wp-block-post-title a {
  position: absolute;
  inset: 0;
  z-index: 5;

  display: flex;
  align-items: flex-end;
  justify-content: flex-start;

  padding: 20px;
  box-sizing: border-box;

  color: #fff;
  text-decoration: none;

  pointer-events: auto;
  /* le seul élément cliquable */
}

/* Style du texte (le fond est géré par l'overlay, donc pas besoin d'un badge) */
.grid-realisations .wp-block-post-title a {
  font-size: 1rem;
  font-weight: 500;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45);
}

/* DESKTOP : titre + overlay cachés par défaut, visibles au hover */
@media (min-width: 768px) {
  .grid-realisations .wp-block-cover__background.has-background-dim {
    opacity: 0;
  }

  .grid-realisations .wp-block-post-title {
    opacity: 0;
  }

  .grid-realisations .wp-block-cover:hover .wp-block-cover__background.has-background-dim {
    opacity: 1;
  }

  .grid-realisations .wp-block-cover:hover .wp-block-post-title {
    opacity: 1;
  }

  .grid-realisations .wp-block-post-title a {
    font-size: 1rem;
    font-weight: 500;
    text-shadow: none;
  }
}


/**
 * Carousel Homepage
 */
.cb-carousel-block .swiper-button-prev,
.cb-carousel-block .swiper-button-next {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  padding: 5px 10px;
  transition: 0.3s ease;
}

.cb-carousel-block .swiper-button-prev:hover,
.cb-carousel-block .swiper-button-next:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/**
 * Icônes Homepage
 */
.wp-block-group:has(>.wp-block-font-awesome-icon) {
  aspect-ratio: 1 / 1 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  min-height: 50px;
}

/**
 * Logos Clients Homepage
 */
.customer-logo figure {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
}

/**
 * Navigation sur les pages de réalisation
 */
.post-navigation-link-previous,
.post-navigation-link-next {
  border-radius: 8px;
  padding: 4px 8px;
}

.post-navigation-link-previous a,
.post-navigation-link-next a {
  text-decoration: none;
}

.cb-carousel-block .swiper-button-next,
.cb-carousel-block .swiper-button-prev {
  z-index: 1;
}


/**
 * Logo sur pages réalisations
 */
figure.project-logo {
  max-width: 30%!important;
}