/*
Theme Name: Mon Thème Enfant - (Basé sur Astra)
Theme URI: https://kreanumerique.fr/
Description: Thème enfant pour personnaliser le thème astra.
Author: Kaced Fethi
Author URI: https://kreanumerique.fr/
Template: astra 
// 🚨 IMPORTANT : REMPLACEZ 'astra' par le nom du dossier de votre thème parent.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: montheme-child
*/

:root {
    /* Variables pour les couleurs principales de la marque */
    --couleur-primaire-sombre: ;
    --couleur-hover-sombre: ;
	--couleur-secondaire: #E0E0E0;
    --couleur-doree: #E7AB46;
    
    /* Variables pour les messages d'état (Formulaires CF7) */
    --couleur-succes: rgba(16, 189, 89, 0.9);  /* Vert semi-transparent */
    --couleur-erreur: rgba(231, 76, 60, 0.9);  /* Rouge semi-transparent */
    --couleur-bordure-erreur: #c0392b; 
    
    /* Variables pour les couleurs Néon */
    --neon-cyan: #00ffff;
    --neon-magenta: #e28ad5;
}

/* -------------------------------------------------
   VOTRE CSS ADDITIONNEL COMMENCE ICI
   -------------------------------------------------
*/

a
{
	text-decoration:none !important;
	font-weight:bold;
}

a:hover {
    color:#e7ab46 !important;
}

.ast-primary-header-bar
{
	background: url("https://kreanumerique.fr/wp-content/uploads/2025/10/Copilot_20251014_151317.png") !important;
	background-size: cover;
}

/* publication facebook verticale masqué en fullscreen*/
.masquee, .publication-facebook-verticale/*, .intro-responsive*/
{
	display:none !important;
}

/* centrage spinner formulaire */
.wpcf7-spinner 
{
  display: block !important;
	margin-left:auto;
	margin-right:auto;
	margin-top: 50px;
}

.wp-container-core-group-is-layout-6c531013
{
  margin: 0 auto !important;
}

/* bouton formulaire contact masqué */
#contact .wp-block-buttons
{
	display:none !important;
}	

/* couleur checkbox */
.options-couleur .wpcf7-list-item-label {
    color: #42BBCE; /* Votre bleu/vert de marque */
	font-weight: normal;
}

.grecaptcha-badge
{
	visibility:hidden;
}


/*
   STYLE DU NOUVEAU BOUTON CTA (Bleu Sombre Ton 1)
   ============================================== */
/* Nouvelle couleur d'accentuation plus élégante : utiliser le ton sombre de votre site */
:root {
    --couleur-primaire-sombre: #2A2F3A; /* Ton estimé de votre bannière */
    --couleur-hover-sombre: #404550; 
}

/* Cibler le bouton UAGB CTA */
.uagb-cta__button-link-wrapper { 
    /* Couleur d'accentuation: Votre ton principal sombre pour l'harmonie */
    background-color: var(--couleur-primaire-sombre) !important; 
    color: #ffffff !important; 
    border: none !important;
    border-radius: 8px !important; 
    padding: 14px 30px !important; 
    font-size: 1.1em !important; 
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important; 
    transition: all 0.3s ease !important;
    
    /* Ombre subtile, mais nette sur le fond clair */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25), 
                0 2px 5px rgba(0, 0, 0, 0.1);
    display: inline-flex !important; 
    align-items: center; 
    gap: 8px; 
}

/* Effet de survol (HOVER) pour le CTA */
.uagb-cta__button-link-wrapper:hover {
    background-color: var(--couleur-hover-sombre) !important; 
    transform: translateY(-2px); /* Soulèvement subtil */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Ombre plus intense */
}

/* Style pour l'icône SVG à l'intérieur du bouton (flèche) */
.uagb-cta__button-link-wrapper svg {
    fill: #ffffff !important; 
    width: 18px !important;    
    height: 18px !important;
    transition: transform 0.3s ease;
}

/* Effet survol sur l'icône */
.uagb-cta__button-link-wrapper:hover svg {
    transform: translateX(3px); 
}

/*** Section 4 Prix et détail ***/

ul.wp-block-list
{
    list-style: none;
    padding-left: 0;
}

/*** Section 5 Publication Facebook ***/

/* lignes néon */
.neon-blend {
    /* Le mode 'screen' (écran) additionne les couleurs des deux couches, 
       ce qui rend le noir (valeur 0) totalement transparent et laisse passer 
       les couleurs plus claires (les lignes néon). */
    mix-blend-mode: screen; 
}

.efbl-view-share a, .esf-share-wrapper a
{
	color: #ffffff !important;
	font-weight: bold !important;
	background-color: #2a2f3a !important;
	border-radius:10px !important;
	font-family: inherit !important;
}

.efbl-view-share a:hover, .esf-share-wrapper a:hover
{
	background-color: #8894a2 !important;
	color:#000000 !important;
}

.efbl-halfwidth-skin {
    margin-bottom: 0px;
	  border-radius:15px;
}

/* Style de la bordure néon bleue sur le côté gauche */
.neon-border-left {
    /* Ajoute un peu de padding intérieur si nécessaire */
    padding-left: 15px !important; 
    position: relative; /* Nécessaire pour positionner l'élément 'before' */
}

/* Création de la ligne néon (pseudo-élément ::before) */
.neon-border-left::before {
    content: ""; /* Obligatoire pour les pseudo-éléments */
    position: absolute;
    top: 0;
    left: 0;
    width: 6px; /* Épaisseur de la ligne */
    height: 100%; /* S'étend sur toute la hauteur du bloc */
    background-color: #00ffff; /* Couleur de base (Cyan / Bleu Néon) */
    border-radius: 8px 0 0 8px; /* Arrondit seulement le coin supérieur et inférieur gauche */
    
    /* EFFET NÉON (Box-Shadow) */
    box-shadow: 0 0 5px #00ffff, /* Ombre intérieure légère */
                0 0 15px #00ffff, /* Ombre extérieure moyenne */
                0 0 30px #00ffff; /* Ombre extérieure forte pour l'éclat */
}

/* Assurez-vous que le conteneur du titre a une position relative si l'effet doit être à l'intérieur */
/* Par exemple, si votre titre est dans un Bloc Groupe ou une Colonne, ajoutez-lui la classe neon-border-right */

.neon-border-right {
    /* Si vous voulez que la bordure soit collée au texte, 
       ajustez le padding-right du conteneur du titre */
    padding-right: 15px !important; 
    position: relative; /* Nécessaire pour positionner l'élément 'before' */
}

/* Création de la ligne néon droite (pseudo-élément ::after) */
.neon-border-right::after {
    content: ""; /* Obligatoire pour les pseudo-éléments */
    position: absolute;
    top: 0;
    right: 0; /* Alignement à droite */
    width: 6px; /* Épaisseur de la ligne */
    height: 100%; /* S'étend sur toute la hauteur du bloc */
    background-color: #e28ad5; /* Couleur du néon (rose/magenta, comme les particules) */
    border-radius: 0 8px 8px 0; /* Arrondit seulement les coins supérieur et inférieur droit */
    
    /* EFFET NÉON (Box-Shadow) */
    box-shadow: 0 0 5px #e28ad5, /* Ombre intérieure légère */
                0 0 15px #e28ad5, /* Ombre extérieure moyenne */
                0 0 30px #e28ad5; /* Ombre extérieure forte pour l'éclat */
}

/** Nos services **/

/* 1. Style de base pour tous les onglets */
.uagb-tabs__wrap li.uagb-tab a.uagb-tabs-list {
    background-color: transparent !important; 
    color: #aaaaaa !important;                 
    border: none !important;                   
    padding: 10px 15px !important;             
    transition: all 0.2s ease-out;             
    display: inline-block;
    box-shadow: none !important; 
}

#post-8 .uagb-tabs__wrap li.uagb-tabs__active a.uagb-tabs-list {
	border-bottom: 3px solid #8ed1fc !important;
}

/* 2. Effet de survol (HOVER) */
.uagb-tabs__wrap li.uagb-tab a.uagb-tabs-list:hover {
    color: #ffffff !important;
    transform: scale(1.03);
    cursor: pointer;
}

/* 3. Style de l'onglet ACTIF (Sélectionné) : Ligne Lumineuse */
.uagb-tabs__wrap li.uagb-tabs__active a.uagb-tabs-list {
    background-color: transparent !important;
    color: #ffffff !important; 
    transform: scale(1) !important;
    
    /* Ombre subtile pour donner un léger éclat à la ligne */
    box-shadow: 0 4px 6px -6px rgba(255, 255, 255, 0.4) !important;
}

/*fiche map*/
.wpgmp_infowindow
{
	width: 300px;
  height: 200px;
	border-radius: 10px;
	border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  padding: 20px;
  background-color: #fff;
}

.wpgmp_map
{
	border-radius:10px;
}

.fc-feature-img
{
	border-radius:10px;
	width: 80%;
  margin: 0 auto;
}

@keyframes bougerEtClignoterdroite {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-20px) scale(1.1); /* Bouge et s'agrandit */
    opacity: 0.5; /* Devient semi-transparent */
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.fleche-animee 
{
  animation: bougerEtClignoterdroite 2s infinite alternate;
}


.page-id-30 #content,
.page-id-511 #content,
.page-id-3 #content,
.page-id-516 #content,
.page-id-880 #content
{
	background-color: var(--couleur-secondaire) !important;
}

.message-recaptcha
{
	Margin:0 auto !important;
}

/* Surcharger le style pour que le message de succès soit VERT */
.wpcf7 form.sent .wpcf7-response-output, 
.wpcf7-response-output.wpcf7-mail-sent-ok {
    /* Couleurs pour le succès */
    color: #ffffff !important; /* Texte blanc */
    background-color: rgba(16 189 89 / 90%) !important; /* Fond vert clair */
    border: 1px solid #27ae60 !important; /* Bordure verte foncée */
    
    /* Conserver les autres styles du thème (arrondi, ombre, etc.) */
    border-radius: 25px; 
    padding: 10px 15px 10px 15px; 
    margin: 0 auto 0 auto !important;
    font-size: 0.95em;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
}

.wpcf7-response-output
{
	color: #ffffff;
	text-align: center;
}

/**** PAGE LES PRIX *****/

#post-890 table
{
	margin-bottom:0 !important;
}

#custom-alert {
    position: fixed;
    top: 50%;
    left: 50%;
	width: 30%;
    /* État Initial (Masqué et Rétracté) */
    transform: translate(-50%, -50%) scale(0.5); 
    opacity: 0; 
    visibility: hidden; 
    
    /* Transition pour l'Animation (0.3s) */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 

    /* [Reste de vos styles visuels ici...] */
    background: #fff;
    padding: 30px;
    border: 2px solid #8ed1fc; 
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 99999; 
    text-align: center;
}

/* État Final (Visible et Zoomé à Taille Normale) */
#custom-alert.is-visible {
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1); 
    visibility: visible;
}

/* Nouvelle classe pour l'état ACTIF (visible avec zoom) */
#custom-alert.is-visible {
    opacity: 1; /* Complètement visible */
    transform: translate(-50%, -50%) scale(1); /* Taille normale (zoom in) */
    visibility: visible;
}

#custom-alert button {
    background-color: #003366; /* Un bleu foncé classique */
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold; /* Ajouté pour un meilleur contraste */
    text-transform: uppercase; /* Optionnel, pour un style bouton plus prononcé */
    transition: background-color 0.2s ease; /* Transition douce au survol */
}

#custom-alert button:hover {
    background-color: #005599; /* Un bleu légèrement plus clair au survol */
}

/* --- Style de la carte et du contenu --- */
.step-card {
    position: relative; /* Base pour l'ombre absolue */
    padding: 30px 20px 20px 20px;
    border-radius: 12px;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    /* Assurez-vous que la carte prend toute la place dans son conteneur UAGB */
    width: 100%; 
    height: 100%;
}

.step-card h3 {
    margin-top: 10px;
    color: #333;
}

.icon-container {
    font-size: 2em;
    margin-bottom: 15px;
}

/* --- L'Ombre/Barre Colorée à Gauche --- */

.step-card::before {
    content: "";
    position: absolute;
    top: 0;
    /* FIX : Positionnement à GAUCHE */
    left: 0; 
    width: 8px; /* Épaisseur de la barre */
    height: 100%;
    border-radius: 12px 0 0 12px; /* Coins arrondis seulement à gauche */
    z-index: 1; 
}
/****/

/* ------------------------------------------------------------------
 * STYLE DE BASE DES CARTES (STEP-CARD)
 * ------------------------------------------------------------------
 */
.step-card {
    position: relative;
    /* Espace interne du contenu */
    padding: 30px 20px 20px 20px; 
    border-radius: 12px;
    background-color: white; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%; 
    height: 100%;
    overflow: hidden; /* Important pour que les dégradés internes ne débordent pas */
}

/* Styles pour le contenu interne */
.step-card h3 {
    margin-top: 10px;
    color: #333;
}
.icon-container {
    font-size: 2em;
    margin-bottom: 15px;
}

/*
 * ------------------------------------------------------------------
 * BARRES LATÉRALES (::before) - GAUCHE/DROITE
 * ------------------------------------------------------------------
 */
.step-card::before {
    content: "";
    position: absolute;
    top: 0;
    width: 8px; /* Épaisseur de la barre */
    height: 100%;
    z-index: 2; /* Au-dessus du dégradé interne */
}

/* Barres à GAUCHE (BLOCS 1 et 2) - Accompagne le glissement vers la DROITE */
.step-card.step-1::before,
.step-card.step-2::before {
    left: 0;
    right: auto; 
    border-radius: 12px 0 0 12px;
}

/* Barres à DROITE (BLOCS 3 et 4) - Accompagne le glissement vers la GAUCHE */
.step-card.step-3::before,
.step-card.step-4::before {
    right: 0;
    left: auto; 
    border-radius: 0 12px 12px 0;
}

/* Couleurs des Barres */
.step-card.step-1::before, .step-card.step-2::before, .step-card.step-3::before, .step-card.step-4::before 
{ 
	background: linear-gradient(to bottom, var(--couleur-secondaire), var(--couleur-secondaire)); } /* Gris (Objectifs) */



/*
 * ------------------------------------------------------------------
 * FORMES DÉGRADÉES INTERNES (::after) - SYMÉTRIQUES ET VISIBLES
 * ------------------------------------------------------------------
 */
.step-card::after {
    content: "";
    position: absolute;
    top: 15px;    /* Marge supérieure */
    bottom: 15px; /* Marge inférieure */
    border-radius: 8px;
    z-index: 0; /* Reste derrière le contenu */
}

/* Formes Dégradées BLOCS DE GAUCHE (1 et 2) */
.step-card.step-1::after,
.step-card.step-2::after {
    left: 50%;   /* Forme commence au milieu */
    right: 15px; /* Marge à droite */
    
    /* Dégradé de DROITE vers GAUCHE et s'estompe */
    background: linear-gradient(to left, 
        rgba(224, 224, 224, 0.7) 0%,     /* Opacité augmentée pour la visibilité */
        rgba(224, 224, 224, 0.00) 100%
    );
}
.step-card.step-2::after {
    background: linear-gradient(to left, 
        rgba(111, 183, 125, 0.3) 0%, 
        rgba(111, 183, 125, 0.00) 100%
    );
}

/* Formes Dégradées BLOCS DE DROITE (3 et 4) */
.step-card.step-3::after,
.step-card.step-4::after {
    right: 50%;  /* Forme commence au milieu */
    left: 15px;  /* Marge à gauche */

    /* Dégradé de GAUCHE vers DROITE et s'estompe */
    background: linear-gradient(to right, 
        rgba(92, 172, 238, 0.3) 0%,     /* Opacité augmentée pour la visibilité */
        rgba(92, 172, 238, 0.00) 100%
    );
}
.step-card.step-4::after {
    background: linear-gradient(to right, 
        rgba(255, 69, 0, 0.3) 0%, 
        rgba(255, 69, 0, 0.00) 100%
    );
}
	
/**** PAGE BLOG ****/

.page-id-2063 #content
{
	background-color: var(--couleur-secondaire);
}

.bloc-polygone
{
	clip-path: polygon(0 0, 90% 0, 100% 30%, 80% 100%, 0 100%);
}
	
#chevrons-promo 
{
    /* 1. Définit le mode de positionnement */
    position: absolute; 
    top: 30%;         /* Déplace le bord supérieur à 50% du parent */
    left: 92%;        /* Déplace le bord gauche à 50% du parent */
    /* Décale l'élément pour que son centre coïncide avec le centre du parent */
    transform: translate(-50%, -50%);
}

.image-top
{
	position: absolute !important;
  top: -50px;
  z-index: 10;
}

.chiffre-dore, .puce-liste-dore::marker
{
	color:var(--couleur-doree);
}

/**** PAGE MAINTENANCE INFORMATIQUE ****/

#post-3216 .uagb-container-inner-blocks-wrap .wp-block-cover
{
	padding:0;
}

#post-3216 .uagb-container-inner-blocks-wrap .wp-block-cover .wp-block-cover__inner-container

{
	top:13%;
}

.titre-tableau-color tr:first-child
{
	background-color:#1d222c;
	color:#FFFFFF;
}

@media screen and (max-width: 699px)
{
	#post-3216 .bloc-margin-info .wp-block-cover
	{
	margin: 0 !important;
	}
}

#custom-alert
{
	width: 80%;
}


/**** PAGE CONTACT ****/

input.wpcf7-form-control.wpcf7-submit {
    /* Dimensions et texte */
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;

    /* Fond et dégradé */
    background-color: #34383D;
    background: linear-gradient(180deg, #4F555D 0%, #34383D 100%);

    /* Ombre interne et externe */
    box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.2),
        inset 0 -1px 3px rgba(0, 0, 0, 0.4),
        0 4px 6px rgba(0, 0, 0, 0.4);
}

/* État de survol (pour un meilleur UX) */
input.wpcf7-form-control.wpcf7-submit:hover {
    background: linear-gradient(180deg, #5D636B 0%, #404449 100%);
    box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.3),
        inset 0 -1px 3px rgba(0, 0, 0, 0.5),
        0 6px 8px rgba(0, 0, 0, 0.5);
	color: #FFFFFF !important;
}

/* État cliqué (pour simuler un enfoncement) */
input.wpcf7-form-control.wpcf7-submit:active {
    background: #34383D;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.5),
        inset 0 -1px 3px rgba(255, 255, 255, 0.1),
        0 2px 3px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}

.map-design
{
	border: solid 2px #e7ab46;
	border-radius: 5px;
}

/**** POLITIQUE DE CONFIDENTIALITE ****/

.page-id-3 .wp-block-uagb-container ul
    {
		list-style: disc;
		padding-left: 40px;
	}

/**** POLITIQUE DE COOKIES ****/

.page-id-516 #cmplz-document
	{
		max-width:100%;
	}
	
	.page-id-516 #cmplz-document p, .page-id-516 #cmplz-document ul li
	{
		font-size:16px;
	}

/**** RESPONSIVE ****/

@media screen and (min-width: 922px) and (max-width: 1500px) 
{ 
	.ast-header-social-wrap a.ast-phone
	{
		margin:0 !important;
	}
	
	.uagb-block-1d570819, .uagb-block-5feb5887 {
	display:none;
  }
}

@media screen and (min-width: 576px)
{ 
	.uagb-block-1d570819, .uagb-block-5feb5887 {
	display:none;
  }
}

@media screen and (max-width: 1230px)
{
/* centrage du bouton c'est parti*/
  input.wpcf7-form-control
  {
    width: 100%;
  }
}
@media screen and (max-width: 610px)
{
/* centrage du bouton veuillez remplir tous les champs*/
  .wpcf7-response-output
  {
    width: 100%;
  }
}

@media screen and (max-width: 575px)
{
/* centrage du bouton veuillez remplir tous les champs*/
  .efbl-thumbnail-wrapper a img
  {
    width: 50% !important;
  }
  
   .efbl_feed_wraper.efbl_skin_312 .efbl-profile-title .efbl-profile-title-wrap h2
  {
	  font-size:14px;
  }
  
  .efbl_feed_wraper.efbl_skin_312 .efbl-d-flex .efbl-profile-title span
  {
	  font-size:9px;
  }
  
  .table-col-1-info
  {
	  display:none;
  }
  
  h3.titre-info-margin
  {
	  margin-bottom:0;
  }
  
  #nos-creations h4:before
  {
	  display:none;
  }
  
  #creations #nos-creations h4 {
    padding-left: 0px;
  }
}

/******** test ********/

/* ========================================= */
/* 1. ÉTATS GÉNÉRAUX DE DÉPART ET DE FIN (.anim) */
/* ========================================= */

.anim {
    visibility: hidden; /* Cache l'élément avant le déclenchement */
    opacity: 0;
    transition-property: opacity, transform !important;
    transition-timing-function: ease-in-out; 
    /* La transition-duration sera injectée par JavaScript */
}

/* L'état final simplifié, car le JS va forcer le 'transform: none' */
.anim.js-visible {
    visibility: visible;
    opacity: 1;
    transform: none; /* Pas besoin de !important ici, le JS prendra le relais */
}


/*** test zoom nos créations ***/

.img-zoom
{
	overflow:hidden;
}

.img-zoom img {
    /* (Optionnel) Définit la zone visible, nécessaire si l'image est redimensionnée */
    display: block; /* Pour s'assurer que les propriétés de taille fonctionnent bien */
    width: 100%; /* Adaptez la largeur selon votre mise en page */
    
    /* Transition fluide : L'effet durera 0.3 seconde */
    transition: transform 0.3s ease-in-out, filter 0.4s ease-in-out;
	filter: grayscale(0%);
}

/* L'effet de zoom au survol */
.img-zoom img:hover {
    /* Applique un facteur de zoom de 1.1 (110%) */
    transform: scale(1.1); 
    
    /* Astuce : Pour que l'image reste au centre pendant le zoom 
       (seulement si elle est dans un conteneur plus grand avec overflow: hidden) */
    transform-origin: center center;
	filter: grayscale(10%);
}

/* ------------------------------------------- */
/* CODE DES ÉTIQUETTES (Ciblant uniquement H4) */
/* ------------------------------------------- */

/* 1. Rendre les titres H4 relatifs pour positionner l'étiquette */
#nos-creations h4 {
    position: relative;
    /* Décalage pour faire de la place à l'étiquette à gauche */
    padding-left: 80px; 
}

/* 2. Style de base de l'étiquette (::before sur H4) */
#nos-creations h4::before {
    content: ""; /* Le contenu est défini par les classes spécifiques ci-dessous */
    position: absolute;
    top: 50%; /* Centre verticalement */
    left: 0;
    transform: translateY(-50%);
    
    color: #ffffff; 
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap; 
    z-index: 20; /* Assure que l'étiquette est visible au-dessus de tout */
}

/* 3. Définition du contenu et personnalisation de la couleur */

#nos-creations h4.est-vitrine::before {
    content: "SITE VITRINE"; 
    background-color: #5d9cec; /* Bleu clair */
}

#nos-creations h4.est-ecommerce::before {
    content: "E-COMMERCE"; 
    background-color: #e7ab46; /* Orange/Brun */
}



/*** test bordure nos créations V22.0 (Bordures + Grisaille Inversée) ***/

/* ---------------------------------------------------- */
/* 1. GRISAILLE INVERSÉE (Toutes en couleur par défaut) */
/* ---------------------------------------------------- */

/* Cible tous les CONTENEURS de vignettes sauf ceux qui sont survolés */
/* (C'est le sélecteur clé qui crée l'effet de concentration) */
#nos-creations:hover .wp-block-uagb-container:not(:hover) {
    /* Si la grille est survolée, les vignettes non survolées sont grisées */
    filter: grayscale(80%) brightness(0.7); 
    transition: filter 0.3s ease-in-out;
    /* Optionnel : Réduire l'ombre pour accentuer la vignette survolée */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}

/* Remet à zéro le filtre sur l'élément survolé (même s'il est déjà en couleur) */
#nos-creations .wp-block-uagb-container:hover {
    filter: grayscale(0%) brightness(1); 
}

/* ---------------------------------------------------- */
/* 2. LOGIQUE ET COULEUR DES BORDURES (Rétablissement) */
/* ---------------------------------------------------- */

/* État de base du conteneur (Bords Bas/Droit en BLEU par défaut) */
#nos-creations .wp-block-uagb-container {
    position: relative;
    cursor: pointer;
    overflow: hidden; 
    
    /* Rétablissement : Bordure native Bas et Droite (initialement transparentes) */
    border: 0 solid transparent; 
    border-bottom: 3px solid transparent; 
    border-right: 3px solid transparent; 
    
    /* Transitions rétablies pour le soulèvement, ombre, et bordures natives */
    transition: box-shadow 0.3s ease-in-out, 
                transform 0.3s ease-in-out, 
                border-bottom-color 0.3s ease-in-out 0.3s, 
                border-right-color 0.3s ease-in-out 0.3s; 
                
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}

/* Activation de la bordure BAS et DROITE pour toutes les vignettes */
#nos-creations .wp-block-uagb-container:hover {
    transform: translateY(-2px); 
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); 
    
    /* COULEUR PAR DÉFAUT (BLEU) pour Bas/Droit */
    border-bottom-color: #5d9cec; 
    border-right-color: #5d9cec;  
}

/* Surcharge de la couleur pour les vignettes E-COMMERCE (Jaune) */
#nos-creations .wp-block-uagb-container.est-ecommerce:hover {
    border-bottom-color: #e7ab46; 
    border-right-color: #e7ab46; 
}


/* 3. LOGIQUE DE DESSIN HAUT/GAUCHE (Rétablissement) */
/* COULEUR PAR DÉFAUT BLEUE */
#nos-creations .wp-block-uagb-container::before,
#nos-creations .wp-block-uagb-container::after {
    content: '';
    position: absolute;
    background: #5d9cec; /* Couleur bleue par défaut */
    z-index: 10;
    /* Transition de dessin par scale */
    transition: transform 0.3s ease-out; 
}

/* Surcharge de la couleur du dessin HAUT et GAUCHE pour E-COMMERCE (Jaune) */
#nos-creations .wp-block-uagb-container.est-ecommerce::before,
#nos-creations .wp-block-uagb-container.est-ecommerce::after {
    background: #e7ab46; 
}

/* Lignes HAUT et GAUCHE (Invisible par défaut) */
#nos-creations .wp-block-uagb-container::before {
    width: 100%; height: 3px; top: 0; left: 0; 
    transform-origin: left; 
    transform: scaleX(0); 
    transition-delay: 0.3s;
}
#nos-creations .wp-block-uagb-container::after {
    height: 100%; width: 3px; top: 0; left: 0;
    transform-origin: top; 
    transform: scaleY(0); 
    transition-delay: 0s;
}

/* DÉCLENCHEMENT AU SURVOL */
#nos-creations .wp-block-uagb-container:hover::after {
    transform: scaleY(1);
}

#nos-creations .wp-block-uagb-container:hover::before {
    transform: scaleX(1);
}



/* ========================================================================= */
/* CODE CSS FINAL STABLE (V31.0) - ANCRE : #creations                       */
/* ========================================================================= */


/* ---------------------------------------------------- */
/* B. GRISAILLE ET CONCENTRATION INVERSÉE (V27.0 adapté) */
/* ---------------------------------------------------- */

/* Cible le conteneur de grille UAGB et ses enfants directs */
#creations .uagb-layout-grid:hover > div:not(:hover) {
    /* Les vignettes non survolées sont grisées/sombres */
    filter: grayscale(80%) brightness(0.7); 
    transition: filter 0.3s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; 
}

/* Remise à zéro du filtre sur l'élément survolé */
#creations .uagb-layout-grid > div:hover {
    filter: grayscale(0%) brightness(1); 
}


/* ---------------------------------------------------- */
/* C. LOGIQUE ET COULEUR DES BORDURES (Stable V26.0 adapté) */
/* ---------------------------------------------------- */

/* Cible STRICTEMENT les vignettes (enfants de la grille) */
#creations .uagb-layout-grid > div { 
    position: relative;
    cursor: pointer;
    overflow: hidden; 
    
    border: 0 solid transparent; 
    border-bottom: 3px solid transparent; 
    border-right: 3px solid transparent; 
    
    transition: box-shadow 0.3s ease-in-out, 
                transform 0.3s ease-in-out, 
                border-bottom-color 0.3s ease-in-out 0.3s, 
                border-right-color 0.3s ease-in-out 0.3s; 
                
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}

/* Activation de la bordure et soulèvement au survol (BLEU par défaut) */
#creations .uagb-layout-grid > div:hover {
    transform: translateY(-2px); 
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); 
    border-bottom-color: #5d9cec; 
    border-right-color: #5d9cec;  
}

/* Surcharge de la couleur pour les vignettes E-COMMERCE (Jaune/Orange) */
#creations .uagb-layout-grid > div.est-ecommerce:hover {
    border-bottom-color: #e7ab46; 
    border-right-color: #e7ab46; 
}


/* --- D. LOGIQUE DE DESSIN HAUT/GAUCHE (Pseudo-classes) --- */

/* Cible STRICTEMENT les vignettes pour le dessin (Couleur Bleue par défaut) */
#creations .uagb-layout-grid > div::before,
#creations .uagb-layout-grid > div::after {
    content: '';
    position: absolute;
    background: #5d9cec; /* Bleu par défaut */
    z-index: 10;
    transition: transform 0.3s ease-out; 
}

/* Surcharge de la couleur du dessin HAUT et GAUCHE pour E-COMMERCE (Jaune) */
#creations .uagb-layout-grid > div.est-ecommerce::before,
#creations .uagb-layout-grid > div.est-ecommerce::after {
    background: #e7ab46; 
}

/* Lignes HAUT et GAUCHE (Invisible par défaut, dessin par scale) */
#creations .uagb-layout-grid > div::before {
    width: 100%; height: 3px; top: 0; left: 0; 
    transform-origin: left; 
    transform: scaleX(0); 
    transition-delay: 0.3s;
}
#creations .uagb-layout-grid > div::after {
    height: 100%; width: 3px; top: 0; left: 0;
    transform-origin: top; 
    transform: scaleY(0); 
    transition-delay: 0s;
}

/* DÉCLENCHEMENT DU DESSIN AU SURVOL */
#creations .uagb-layout-grid > div:hover::after {
    transform: scaleY(1);
}
#creations .uagb-layout-grid > div:hover::before {
    transform: scaleX(1);
}


/* ---------------------------------------------------- */
/* E. CODE DU ZOOM ET ÉTIQUETTES (Stabilisés)           */
/* ---------------------------------------------------- */

/*** Code du Zoom ***/
.img-zoom {
	overflow:hidden;
}

.img-zoom img {
    display: block; 
    width: 100%; 
    transition: transform 0.3s ease-in-out, filter 0.4s ease-in-out;
	filter: grayscale(0%);
}

/* L'effet de zoom au survol */
.img-zoom img:hover {
    transform: scale(1.1); 
    transform-origin: center center;
	filter: grayscale(10%);
}

/*** Code des Étiquettes ***/
/* Ciblage h4 spécifique à la section #creations */
#creations h4 {
    position: relative;
    padding-left: 80px; 
}

#creations h4::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    
    color: #ffffff; 
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap; 
    z-index: 20; 
}

#creations h4.est-vitrine::before {
    content: "SITE VITRINE"; 
    background-color: #5d9cec; 
}

#creations h4.est-ecommerce::before {
    content: "E-COMMERCE"; 
    background-color: #e7ab46; 
}