/*
Theme Name: BeFlex Child
Theme URI: https://www.eoxia.com
Author: the Eoxia team
Description: Child theme of BeFlex
License: AGPLv3
License URI: https://spdx.org/licenses/AGPL-3.0-or-later.html
Version: 4.0.0
Template: beflex
Text Domain: beflex-child
*/

/* ==========================================================================
   1. CARTES VIDÉO SUR MESURE (.carte-video-custom)
   ========================================================================== */

/* Conteneur principal */
.carte-video-custom {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  transform: translateZ(0); 
}

/* Lecteur iFrame */
.carte-video-custom iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02); /* Évite la bordure parasite interne */
  transition: opacity 0.35s ease;
  z-index: 1;
  pointer-events: none; /* Redirige le clic vers la zone globale */
}

/* Filtre sombre au repos */
.carte-video-custom::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 2;
  pointer-events: none;
}

/* Titre en bas à gauche */
.carte-video-titre {
  position: absolute;
  bottom: 16px;
  left: 20px;
  z-index: 3;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 500;
  font-family: inherit;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

/* Zone cliquable globale */
.carte-video-custom .lien-plein-ecran {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}

/* Carte vidéo custom dans les boucles query */
.carte-video-custom-container {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 2px solid transparent !important;
  background: linear-gradient(#000, #000) padding-box, linear-gradient(75deg, #00008F 0%, #8a17ba 33%, #ef3f3b 66%, #ff0f36 100%) border-box !important;
}
.carte-video-custom-container .wp-block-post-featured-image {
  transition: opacity 0.2s ease-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.carte-video-custom-container .wp-block-post-featured-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carte-video-custom-container:hover .wp-block-post-featured-image {
  opacity: 0;;
}
.carte-video-custom-container .wp-block-post-content {
  margin-top: 0;
}

/* Interactions Desktop (Survol à la souris) */
@media (hover: hover) {
  .carte-video-custom:hover iframe {
    opacity: 1;
  }
  .carte-video-custom:hover::after {
    opacity: 0;
    visibility: hidden;
  }
}

/* Page single réalisation */
body.single-realisation .carte-video-custom iframe {
  opacity: 1 !important;
}
body.single-realisation .carte-video-custom::after {
  display: none !important;
}
body.single-realisation .carte-video-custom .lien-plein-ecran {
  display: none !important;
}
body.single-realisation .carte-video-custom .carte-video-titre {
  display: none !important;
}
body.single-realisation .carte-video-custom iframe {
  pointer-events: all;
}

/* Interactions Tactiles (Mobile / Tablette) */
@media (hover: none) {
  .carte-video-custom:active iframe,
  .carte-video-custom:focus-within iframe {
    opacity: 1;
  }
  .carte-video-custom:active::after,
  .carte-video-custom:focus-within::after {
    opacity: 0;
    visibility: hidden;
  }
}


/* ==========================================================================
   2. NAVIGATION ET MENUS (.wp-block-navigation)
   ========================================================================== */

/* Typographie de base des liens du menu */
.wp-block-navigation .wp-block-navigation-item a {
  font-family: 'Pixel Emulator', sans-serif !important;
}

/* Effet au survol (Dégradé sur le texte) */
.wp-block-navigation .wp-block-navigation-item a:hover {
  background: linear-gradient(75deg, #743cf8 25%, #8A17BA 50%, #EF3F3B 75%, #FF0F36 20%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease;
}

/* Lien de la page active */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a,
.wp-block-navigation .wp-block-navigation-item.wp-block-navigation-link--current > a {
  color: #ff0000 !important;
  -webkit-text-fill-color: initial;
  background: none;
}

/* ==========================================================================
   1. DÉCLARATION DE LA POLICE (Toujours au tout début du fichier)
   ========================================================================== */

@font-face {
  font-family: 'pixel-emulator';
  src: url('/wp-content/uploads/fonts/Pixel-Emulator.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block; 
  }


/* ==========================================================================
   2. FORMULAIRE DE CONTACT (Contact Form 7 - .wpcf7)
   ========================================================================== */

/* ==========================================================================
   2. FORMULAIRE DE CONTACT (Contact Form 7 - .wpcf7)
   ========================================================================== */

/* Structure & Typographie globale */
.wpcf7 {
  font-family: 'pixel-emulator', monospace;
  color: #ffffff;
  max-width: 800px;
  margin: 0 auto;
}

/* Annulation des marges parasites générées par CF7 */
.wpcf7 p,
.wpcf7 form p,
.wpcf7 span.wpcf7-form-control-wrap {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}

/* Grille personnalisée */
.cf7-grid {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.cf7-col {
  flex: 1;
}

.cf7-full {
  margin-bottom: 20px;
}

/* Labels & Textes des intitulés (Inclus .cf7-label et <p>) */
.wpcf7 label,
.wpcf7 .cf7-label,
.wpcf7 .cf7-label p {
  display: block;
  font-family: 'pixel-emulator', monospace !important;
  font-size: 14px !important;
  color: #ffffff;
  margin-bottom: 3px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Champs de saisie (Inputs & Textarea) */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 .wpcf7-tel,
.wpcf7 textarea {
  width: 100% !important;
  background-color: transparent !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  font-family: 'pixel-emulator', monospace !important;
  font-size: 14px !important;
  padding: 12px 10px;
  margin-top: 0 !important;
  box-sizing: border-box;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.wpcf7 textarea {
  height: 180px;
  resize: vertical;
}

/* Focus sur les champs */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 .wpcf7-tel:focus,
.wpcf7 textarea:focus {
  border-color: #ffffff !important;
  background-color: transparent !important;
}

/* Correction du remplissage automatique Chrome/Safari (autofill fond blanc) */
.wpcf7 input:-webkit-autofill,
.wpcf7 input:-webkit-autofill:hover, 
.wpcf7 input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0px 1000px #000000 inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Bouton d'envoi */
.wpcf7 input[type="submit"] {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  font-family: 'pixel-emulator', monospace !important;
  font-size: 14px !important;
  padding: 12px 30px;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 20px;
  transition: all 0.2s ease;
  margin-top: 10px;
}

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

/* Mobile : Passage de la grille en 1 colonne */
@media (max-width: 600px) {
  .cf7-grid {
    flex-direction: column;
    gap: 15px;
  }
}

/* ==========================================================================
   4. ACCORDÉONS & BLOCS DETAILS
   ========================================================================== */

/* Suppression des flèches par défaut */
details > summary,
.wp-block-details summary {
  list-style: none !important;
  list-style-type: none !important;
}

details > summary::marker,
.wp-block-details summary::marker {
  display: none !important;
  content: "" !important;
}

details > summary::-webkit-details-marker,
.wp-block-details summary::-webkit-details-marker {
  display: none !important;
}

/* Couleur du titre selon l'état */
details:not([open]) summary,
details:not([open]) summary strong {
  color: #a0a0a0 !important; /* Onglet fermé */
}

details[open] summary,
details[open] summary strong {
  color: #ffffff !important; /* Onglet ouvert */
}

/* ==========================================================================
   5. LISTE DE SERVICES ACCORDÉON 
   ========================================================================== */

/* Initialisation du compteur */
.liste-services {
  counter-reset: service-num;
}

/* Layout Flex pour les entêtes */
.liste-services details summary,
.liste-services .wp-block-details summary {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
}

/* Génération du numéro automatique (01, 02, 03...) */
.liste-services details summary::after,
.liste-services .wp-block-details summary::after {
  counter-increment: service-num;
  content: counter(service-num, decimal-leading-zero);
  font-weight: bold;
  margin-left: 1rem;
}

/* Contour couleur degrade */
.bordure-degrade {
  border: 2px solid transparent !important;
  border-radius: 20px !important;
  background: 
    linear-gradient(#000, #000) padding-box, 
    linear-gradient(75deg, #00008F 0%, #8a17ba 33%, #ef3f3b 66%, #ff0f36 100%) border-box !important;
}

/* Texte accueil couleur degradé */
.gradient-text {
  background-image: linear-gradient(75deg, #00008F 0%, #8a17ba 33%, #ef3f3b 66%, #ff0f36 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block;
}

/* Effet dégradé au survol sur les boutons Gutenberg uniquement */
.wp-block-button__link:hover {
  background: 
    linear-gradient(75deg, #743cf8 0%, #8a17ba 33%, #ef3f3b 66%, #ff0f36 100%) border-box !important;
  background-image: 
    linear-gradient(75deg, #743cf8 0%, #8a17ba 33%, #ef3f3b 66%, #ff0f36 100%),
    linear-gradient(#000, #000), 
    linear-gradient(75deg, #743cf8 0%, #8a17ba 33%, #ef3f3b 66%, #ff0f36 100%) !important;
  background-clip: text, padding-box, border-box !important;
  -webkit-background-clip: text, padding-box, border-box !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
body.page-id-39 .wp-block-navigation .button-page-contact .wp-block-button__link {
  background: 
    linear-gradient(#ff0000, #ff0000) border-box !important;
  background-image: 
    linear-gradient(#ff0000, #ff0000),
    linear-gradient(#000, #000), 
    linear-gradient(#ff0000, #ff0000) !important;
  background-clip: text, padding-box, border-box !important;
  -webkit-background-clip: text, padding-box, border-box !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
body.page-id-39 .wp-block-navigation .button-page-contact .wp-block-button__link:hover {
  opacity: 1 !important;
}


/* Bord arrondi sur les gifs */

.border-video {
  border-radius: 20px;
  overflow: hidden; 

}