/*
Theme Name: Divi Child
Description: Theme enfant de Divi
Author: Valerie - Creartsweb
Author URI: https://www.creartsweb.com
Template: Divi
*/


/* ==========================================================
   1. MENU THEME BUILDER — effet cercle au hover
   ----------------------------------------------------------
   Ici je personnalise le menu desktop du Theme Builder.
   L’idée est d’ajouter un cercle coloré derrière les liens
   au survol, avec une couleur différente pour l’item actif.
   ========================================================== */

.cw-menu-cercle .et-menu-nav .et-menu > li > a {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.cw-menu-cercle .et-menu-nav .et-menu > li > a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.2em;
  height: 2.2em;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  z-index: -1;
  background: #00c0fd; /* bleu au hover */
  transition: transform .22s ease, opacity .22s ease;
}

.cw-menu-cercle .et-menu-nav .et-menu > li > a:hover::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: .35;
}

/* Item actif du menu */
.cw-menu-cercle .et-menu-nav .et-menu > li.current-menu-item > a::before {
  background: #72f730; /* vert pour l’item actif */
  transform: translate(-50%, -50%) scale(1);
  opacity: .25;
}

/* ==========================================================
   NOTE MENU SOUS-MENU DIVI 5
   ----------------------------------------------------------
   L’effet cercle du sous-menu est placé dans :
   Apparence > Personnaliser > CSS additionnel

   Raison :
   Divi 5 charge le style du sous-menu d’une manière qui ne
   laisse pas toujours le style.css du thème enfant prendre
   le dessus.
   ========================================================== */

/* ==========================================================
   2. CORRECTION IOS — liens téléphone
   ----------------------------------------------------------
   iOS a tendance à recolorer les liens tel: en bleu.
   Ici je force la couleur à hériter du style du site.
   ========================================================== */

a[href^="tel"],
a[href^="tel"]:link,
a[href^="tel"]:visited {
  color: inherit !important;
  text-decoration: none !important;
}


/* ==========================================================
   3. ONGLETS DIVI — version colorée La Fugue Champenoise
   ----------------------------------------------------------
   Ici je supprime le style natif Divi des onglets pour avoir
   des blocs couleurs pleins, plus propres visuellement.
   J’ai gardé une seule version pour éviter les conflits.
   ========================================================== */

/* On retire la bande de fond par défaut derrière les onglets */
.fugue-tabs .et_pb_tabs_controls {
  background: transparent !important;
  border: 0 !important;
}

/* On neutralise le style de base des items */
.fugue-tabs .et_pb_tabs_controls li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Le lien prend toute la place de l’onglet */
.fugue-tabs .et_pb_tabs_controls li a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  background: transparent !important;
  padding: .75em 1.1em;
}

/* Couleur différente pour chaque onglet */
.fugue-tabs .et_pb_tabs_controls li:nth-child(1) { background: #ff4f44 !important; } /* rouge */
.fugue-tabs .et_pb_tabs_controls li:nth-child(2) { background: #f99d1c !important; } /* orange */
.fugue-tabs .et_pb_tabs_controls li:nth-child(3) { background: #00c0fd !important; } /* bleu */
.fugue-tabs .et_pb_tabs_controls li:nth-child(4) { background: #72f730 !important; } /* vert */

/* L’onglet actif est juste un peu assombri */
.fugue-tabs .et_pb_tabs_controls li.et_pb_tab_active {
  filter: brightness(0.95);
}


/* ==========================================================
   4. FORMULAIRE DIVI — champ checkbox "prestation_choix"
   ----------------------------------------------------------
   Ici je rends le groupe de cases à cocher plus propre :
   - coins arrondis
   - padding interne
   - fond blanc
   - légère bordure
   ========================================================== */



/* ==========================================================
   5. MODULE IMAGE DIVI — dégradé sur image
   ----------------------------------------------------------
   Ici j’ajoute un dégradé sur un module Image Divi, tout en
   gardant une vraie balise <img> pour de meilleures perfs.
   Utilisation :
   - Module Image > Avancé > Classe CSS : fugue-gradient
   ========================================================== */

/* Le module image sert de référence pour l’overlay */
.et_pb_image.fugue-gradient {
  position: relative;
}

/* Le wrapper de l’image doit être en relatif aussi */
.et_pb_image.fugue-gradient .et_pb_image_wrap {
  position: relative;
  display: block;
  line-height: 0; /* évite un petit espace blanc sous l’image */
}

/* Overlay dégradé sur toute l’image */
.et_pb_image.fugue-gradient .et_pb_image_wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.65) 100%
  );
  pointer-events: none;
}

/* Sécurité sur l’image */
.et_pb_image.fugue-gradient img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================
   7. PAGE GALERIE — cards images La Fugue Champenoise
   ----------------------------------------------------------
   Ici je crée les cards de la galerie avec :
   - image plein format
   - léger zoom au hover
   - filtre noir en bas
   - petit libellé + titre en overlay
   - coins arrondis
   - ombre légère
   Cette version est adaptée à Divi 5.
   ========================================================== */

/* Bloc principal de la card */
.fugue-gallery-card {
  position: relative; /* sert de repère pour l’overlay et les textes */
  overflow: hidden; /* coupe le zoom de l’image */
  border-radius: 20px; /* arrondi global */
  box-shadow: 0 8px 22px rgba(0,0,0,0.10); /* ombre légère */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  background: transparent; /* évite tout fond blanc parasite */
}

/* Ombre un peu plus marquée au survol */
.fugue-gallery-card:hover {
  box-shadow: 0 18px 36px rgba(0,0,0,0.16);
}

/* ===== Module image : on force tous les wrappers Divi ===== */

.fugue-gallery-card .et_pb_image {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
}

.fugue-gallery-card .et_pb_image_wrap,
.fugue-gallery-card .et_pb_image_wrap a {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
}

/* Image plein format */
.fugue-gallery-card .et_pb_image img {
  display: block !important;
  width: 100% !important;
  height: 280px !important; /* hauteur fixe pour uniformiser les cards */
  object-fit: cover !important; /* recadre sans déformer */
  margin: 0 !important;
  transition: transform 0.5s ease;
}

/* Zoom léger de l’image au hover */
.fugue-gallery-card:hover .et_pb_image img {
  transform: scale(1.08);
}

/* ===== Filtre noir en bas de l’image ===== */

.fugue-gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.60) 0%,   /* noir plus marqué tout en bas */
    rgba(0,0,0,0.26) 26%,  /* transition intermédiaire */
    rgba(0,0,0,0.00) 52%   /* transparent plus haut */
  );
  opacity: 0; /* le filtre apparaît seulement au survol */
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.fugue-gallery-card:hover::after {
  opacity: 1;
}

/* ===== Textes en overlay sur l’image ===== */

.fugue-gallery-tag,
.fugue-gallery-caption {
  position: absolute !important;
  left: 18px;
  right: 18px;
  z-index: 3; /* au-dessus du filtre */
  opacity: 0; /* texte invisible au repos */
  transform: translateY(8px); /* petit décalage de départ */
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}

/* Petit libellé au-dessus du titre */
.fugue-gallery-tag {
  bottom: 42px;
  color: #e3a64a;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* Titre principal en bas */
.fugue-gallery-caption {
  bottom: 16px;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}

/* Les textes apparaissent au hover */
.fugue-gallery-card:hover .fugue-gallery-tag,
.fugue-gallery-card:hover .fugue-gallery-caption {
  opacity: 1;
  transform: translateY(0);
}

/* On retire les marges internes parasites des modules texte */
.fugue-gallery-tag p,
.fugue-gallery-caption p,
.fugue-gallery-tag h4,
.fugue-gallery-caption h4 {
  margin: 0 !important;
}

/* Sécurité supplémentaire contre les espacements Divi */
.fugue-gallery-card > .et_pb_module:not(.et_pb_image) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Version mobile : image un peu moins haute */
@media (max-width: 767px) {
  .fugue-gallery-card .et_pb_image img {
    height: 230px !important;
  }
}

/* ==========================================================
   8. NOTES PERSO
   ----------------------------------------------------------
   Rappel des classes utilisées dans Divi pour la galerie :
   
   - Groupe principal de la card :
     fugue-gallery-card

   - Petit libellé :
     fugue-gallery-tag

   - Titre :
     fugue-gallery-caption

   - Module image avec dégradé simple :
     fugue-gradient
   ========================================================== */