/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/

/* 1. On détache la barre d'admin du scroll */
#wpadminbar {
    position: absolute !important;
}

/* 2. On ajoute la marge en haut du site uniquement pour l'admin */
/* Sur Desktop (Barre = 32px) */
body.admin-bar {
    margin-top: 32px !important;
}

/* Sur Mobile / Tablettes (Barre = 46px) */
@media screen and (max-width: 782px) {
    body.admin-bar {
        margin-top: 46px !important;
    }
}

/* 3. On s'assure que ton menu reste collé au top 0 une fois qu'on a scrollé */
body.admin-bar #logo-container-mobile {
    top: 0 !important;
}

@font-face {
  font-family: 'claudeine';
  src: url('font/claudeine.eot?83533558');
  src: url('font/claudeine.eot?83533558#iefix') format('embedded-opentype'),
       url('font/claudeine.woff?83533558') format('woff'),
       url('font/claudeine.ttf?83533558') format('truetype'),
       url('font/claudeine.svg?83533558#claudeine') format('svg');
  font-weight: normal;
  font-style: normal;
}

 [class^="logo-"]:before, [class*=" logo-"]:before {
  font-family: "claudeine";
  font-style: normal;
  font-weight: normal;
  font-weight: 900;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
}
.logo-claudeine:before { content: '\e800'; } /* '' */

.wght100 {
	font-variation-settings: "wght" 100;
}
.wght200 {
	font-variation-settings: "wght" 200;
}
.wght300 {
	font-variation-settings: "wght" 300;
}
.wght400 {
	font-variation-settings: "wght" 400;
}
.wght500 {
	font-variation-settings: "wght" 500;
}
.wght600 {
	font-variation-settings: "wght" 600;
}
.wght700 {
	font-variation-settings: "wght" 700;
}
.wght800 {
	font-variation-settings: "wght" 800;
}
.wght900 {
	font-variation-settings: "wght" 900;
}
.style-dark a:hover, .style-light a:hover:not(.JCgrid-view-more-btn):not(.jc-tag-item)  {
	color:#b8975a !important;
}
.uncode-btn-round, .uncode-btn-round .btn:not(.btn-default-shape):not(.btn-square):not(.btn-circle) {
	border-radius:4px !important;
}
/* Force la césure sur le titre du header */
body:not(.home) #page-header h1, 
body:not(.home) #page-header h1 span {
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    display: inline !important; /* Aide le navigateur à voir le mot d'un seul bloc */
}

/* Overlay popup */
.pum-overlay-uncode {
	background-color: rgba(23,72,56,0.90) !important;
}
@media screen and (min-width: 960px) {
	/* scrolltop */
	.footer-scroll-top {
	  right: 60px !important;
	  bottom: -4px !important;
	}

	.footer-scroll-top i, .footer-scroll-top.style-light .btn-default {
		background-color:#b8975a !important;
		border-color:#b8975a !important;
		border-radius:4px;
		padding-bottom:30px;
	}
}
/* formulaire */
.frm_forms input[readonly] {
    -webkit-appearance: none; /* Force la suppression du style natif iOS */
    -moz-appearance: none;
    appearance: none;
    box-shadow: none !important; /* Supprime l'ombre CSS */
    text-shadow: none !important;
	font-weight:700 !important;
	padding-top: 5px !important;
    padding-bottom: 5px !important;
    min-height: 30px !important; /* Ajuste la hauteur totale si besoin */
}
.frm_form_field:has(input[readonly]), .frm_html_container {
    margin-bottom: 10px !important; /* Réduit l'espace avec le champ du dessous */
}

/* alignement label inline*/
.frm_form_field.frm_inline_container .frm_primary_label {
	padding:8px 0 0 0 !important;
}

/* Ciblage précis de tes conteneurs inline */
.frm_form_field.frm_inline_container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px; /* Espace entre le label et l'input */
}

/* Le label s'adapte à la largeur de son texte sans revenir à la ligne */
.frm_form_field.frm_inline_container label.frm_primary_label {
    width: auto !important;
    max-width: fit-content !important;
    flex-shrink: 0 !important; /* Empêche le texte de se compresser */
    margin-right: 10px !important;
    margin-bottom: 0 !important;
    white-space: nowrap; /* Force le texte sur une seule ligne */
}

/* L'input prend tout l'espace vide restant dans la colonne */
.frm_form_field.frm_inline_container input[type="text"] {
    flex-grow: 1 !important;
    width: 100% !important; /* Nécessaire pour remplir l'espace flex */
    min-width: 0; /* Évite que l'input ne casse la grille si le texte est long */
}

/* separateur formulaire*/
.frm_forms hr {
	background-color: rgba(23,72,56,1) !important;
	border: 0;
    height: 1px;
	margin:10px 0px;
}

/* 1. POSITIONNEMENT DES CONTENEURS (S'applique à tout champ contenant ces types) */
.frm_form_field:has(input[type="email"]),
.frm_form_field:has(input[type="tel"]),
.frm_form_field:has(textarea),
.frm_form_field.nom,
.frm_form_field.map {
    position: relative !important;
}

/* 2. BASE DE L'ICÔNE (Pseudo-élément) */
.frm_form_field:has(input[type="email"])::before,
.frm_form_field:has(input[type="tel"])::before,
.frm_form_field:has(textarea)::before,
.frm_form_field.nom::before,
.frm_form_field.map::before {
    font-family: 'uncodeicon' !important;
    font-weight: 900;
    position: absolute;
    left: 12px;
    top: 22px !important;
    color: #174838;
    pointer-events: none;
    z-index: 10;
    font-size: 16px;
}

/* Changement de couleur de l'icône quand le champ est en erreur */
.frm_form_field.frm_blank_field::before {
    /* Optionnel : tu peux aussi ajouter une petite animation de vibration */
    animation: shake 0.5s;
}

/* Optionnel : Animation de vibration pour attirer l'attention */
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

/* 3. DÉCALAGE DU TEXTE (Sur l'input/textarea lui-même) */
.frm_form_field:has(input[type="email"]) input,
.frm_form_field:has(input[type="tel"]) input,
.frm_form_field:has(textarea) textarea,
.frm_form_field.nom input,
.frm_form_field.map input {
    padding-left: 35px !important;
}

/* Ajustement spécifique pour le textarea */
.frm_form_field:has(textarea)::before {
    top: 20px !important;
}

/* 4. ATTRIBUTION DES ICÔNES PAR TYPE */

/* Email */
.frm_form_field:has(input[type="email"])::before {
    content: "\f003"; 
}

/* Téléphone */
.frm_form_field:has(input[type="tel"])::before {
    content: "\f095";
}

/* Utilisateur (via ta classe manuelle) */
.frm_form_field.nom::before {
    content: "\f2c0";
}

/* Location (via ta classe manuelle) */
.frm_form_field.map::before {
    content: "\f041";
}

/* Crayon (via la présence d'un textarea) */
.frm_form_field:has(textarea:not(.g-recaptcha-response))::before {
	content: "\e802";
}

/* 1. On cible le label qui CONTIENT l'input coché */
#form_contact #frm_field_13_container .frm_radio label:has(input:checked) {
    background-color: #2c463a !important;
    color: #ffffff !important;
    border-color: #174838 !important;
}

/* 2. Au cas où votre navigateur ne supporte pas encore :has() (Safari ancien) */
/* On double avec cette règle qui cible l'état où l'input est l'enfant direct */
#form_contact #frm_field_13_container .frm_radio input:checked + label,
#form_contact #frm_field_13_container .frm_radio label:focus-within {
    background-color: #174838 !important;
    color: #ffffff !important;
}

/* 3. On s'assure que le texte du label passe bien en blanc */
#form_contact #frm_field_13_container .frm_radio input:checked + label,
#form_contact #frm_field_13_container .frm_radio input:checked + font + label {
    background-color: #174838 !important;
    color: #ffffff !important;
}

/* --- RAPPEL DU RESTE DU CODE (SANS MODIF) --- */
#form_contact #frm_field_13_container .frm_opt_container {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
}
#form_contact #frm_field_13_container .frm_radio { flex: 1 !important; }
#form_contact #frm_field_13_container .frm_radio label {
    display: flex !important;
    height: 60px !important;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    color: #174838 !important;
    border: 1px solid #174838 !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}
@media (max-width: 767px) {
    #form_contact #frm_field_13_container .frm_opt_container { flex-direction: column !important; }
}
#form_contact #frm_field_13_container input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
}

/* icon contact */
.contact .icon-box-content p {
	margin:0 !important;
}
.contact .icon-box-heading h3 {
	text-transform:uppercase !important;
	color:#b8975a !important;
}
/*
 * FAQ
 */

.uncode-accordion .panel {
	border-color:#174838 !important;
}
.uncode-accordion .panel a:hover, .panel a:hover span::after {
	color: #b8975a !important;
}
/* Container principal */
.JC-faq-container {
    max-width: 100%;
    margin: 36px;
    border-top: 1px solid #174838;
}

/* Item individuel */
.JC-faq-item {
    border-bottom: 1px solid #174838;
	padding : 18px 0;
}

/* Style de la question (bouton) */
.JC-faq-question {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    font-size: 1.1rem;
    transition: color 0.3s ease;
	color:#174838;
	padding:0 !important;
}

.JC-faq-question:hover {
    color: #b8975a !important;
}

/* Style de l'icône + */
.JC-faq-icon {
    font-size: 1.4em;
    font-weight: 300;
    margin-left: 20px;
    
    /* CRUCIAL : l'élément doit être inline-block ou block pour pivoter */
    display: inline-block !important; 
    
    /* On fixe l'origine de la rotation au centre */
    transform-origin: center center;
    
    /* Animation fluide */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    line-height: 1;
}

/* État lors de l'ouverture : Rotation de 45 degrés */
.JC-faq-item.active .JC-faq-icon {
    transform: rotate(45deg) !important;
}

/* Style de la réponse (cachée par défaut) */
.JC-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
    line-height: 1.6;
}

.JC-faq-answer-content {
    padding-bottom: 25px;
}

/* Classe active pour l'ouverture */
.JC-faq-item.active .JC-faq-answer {
    max-height: 2000px; /* Valeur haute pour permettre l'expansion */
    transition: max-height 0.4s cubic-bezier(1, 0, 1, 0);
}

/*
 * TAG
 */

/* Container global */
.jc-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

/* Style des tags Thématique/Style (avec liens) */
a.jc-tag-item {
    display: inline-block;
    padding: 2px 12px 4px 12px;
    color: #174838 !important;
    border-radius: 4px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    border: 1px solid #174838;
	font-size:0.8em;
}

a:hover.jc-tag-item {
    background-color: #174838; /* Ton bleu */
    color: #fff !important;
    border-color: #174838;
}

/* Style des tags Filtre (sans liens - Class différente) */
.jc-tag-filter {
    display: inline-block;
    padding: 6px 12px 4px 12px;
    background-color: #303133;
    color: #fff;
    border-radius: 4px; /* Un peu plus carré pour différencier */
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
}

/* Style de la référence */
.jc-product-reference {
}


/* *
 * sceau Wall Dezign
 * */

/* On définit que cette div est le "référentiel" de taille et de COULEUR */
.sceau-wrap {
    container-type: inline-size; 
    width: 100%;           /* Il prend toute la largeur du parent */
    max-width: 500px;      /* Sécurité pour ne pas qu'il devienne immense */
    aspect-ratio: 1 / 1;   /* Reste un cercle parfait */
    position: relative;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
	text-transform:uppercase;
    
    /* --- COULEUR PAR DÉFAUT ICI --- */
    color: #174838; /* Cette couleur sera héritée par TOUT le contenu */
    /* ------------------------------ */
}

.sceau-orbit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: orbit 20s linear infinite;
}

/* On force le SVG orbital à utiliser la couleur héritee */
.sceau-orbit text {
    fill: currentColor !important;
}

.sceau-ring {
    position: absolute;
    width: 82%;
    height: 82%;
    border-radius: 50%;
    /* Utilisation de currentColor avec opacité pour la bordure */
    border: 0.2cqi solid currentColor; 
    opacity: 1
}

.sceau-ring-2 {
    position: absolute;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    border: 0.15cqi dashed currentColor;
    opacity: 1;
}

.sceau-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10%;
}

.sceau-svg-icon {
    width: 25cqi;
    height: auto;
    margin-bottom: 2cqi;
}

/* On force l'icône centrale à utiliser la couleur héritée */
.sceau-svg-icon .st0, 
.sceau-svg-icon path {
    fill: currentColor !important;
}

.sceau-text-top {
    font-size: 3.5cqi;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    /* Hérite de la couleur */
    color: currentColor;
    line-height: 1.4;
    margin-bottom: 4%;
}

.sceau-text-mid {
    font-size: 3.5cqi;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* Hérite de la couleur */
    color: currentColor;
    border-top: 0.1cqi solid currentColor;
    border-bottom: 0.1cqi solid currentColor;
    padding: 1.5% 0;
    width: 55%;
}

/* Légère correction pour les bordures du texte du milieu pour qu'elles soient moins opaques */
.sceau-text-mid {
    border-color: rgba(0,0,0,1); /* Optionnel : pour adoucir les lignes */
}
/* Ou mieux, pour rester full monochrome adaptatif : */
.sceau-text-mid {
     border-color: currentColor;
}
/* Et on applique une opacité juste aux bordures via un pseudo-élément si besoin, 
   mais pour faire simple, currentColor fonctionne très bien */
@keyframes orbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.tag-no-link {
    color:#174838;
	border: 1px solid #174838;
	padding:0px 5px;
	border-radius:4px;
	display: inline-block;
	font-size:10px;
	line-height: 1.3em;
	text-transform:uppercase;
}

blockquote {
    background-color: #f4f5f5; /* Gris très clair pour le fond */
    border-left: 5px solid #b8975a; /* Bordure épaisse couleur Or */
    padding: 20px 30px; /* Espace interne pour respirer */
    margin: 30px 0; /* Espace externe haut/bas */
    position: relative;
}

blockquote p {
	font-size:15px !important;
	line-height: 1.2em !important;
}

/* Suppression des guillemets par défaut si Uncode en ajoute */
blockquote::before, 
blockquote::after {
    content: none !important;
}

/* Style global du tableau */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
	border:none !important;
}

/* Style des cellules (en-têtes et corps) */
table td, 
table th {
    padding: 15px 0; /* Espace vertical entre les lignes */
    text-align: left;
    border-bottom: 1px solid #f4f5f5 !important; /* Ligne fine entre chaque rangée */
    vertical-align: middle;
	border-left: none !important;
    border-right: none !important;
	font-weight:400;
}

/* Style de la colonne de gauche (Libellés) */
table td:first-child, 
table th:first-child {
    width: 40%; /* Ajustez selon vos besoins */
    font-weight: 600;
    padding-right: 20px;
}

/* Style de la colonne de droite (Valeurs) */
table td:last-child {
}

/* Suppression de la bordure sur la dernière ligne */
table tr:last-child td {
    border-bottom: none !important;
}

/* Optionnel : Changement de couleur au survol de la ligne */
table tr:hover td {
    background-color: #f4f5f5;
}

/* On cache le menu par défaut (Mobile et Tablettes) */
.jc-nav-overlay {
    display: none !important;
}
/*
 * Dot nav
 * */
/* On ne l'affiche que sur Desktop (écrans > 1024px) */
@media only screen and (min-width: 960px) {

    /* Conteneur global type Lightbox */
    .jc-nav-overlay {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        height: 100vh !important;
        width: 80px !important;
        z-index: 9999999 !important;
        pointer-events: none !important;
        display: flex !important; /* Rétablit l'affichage */
        align-items: center !important;
        justify-content: center !important;
    }

    /* Le menu en lui-même */
    .jc-side-dot-nav {
        pointer-events: auto !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.2); 
        padding: 10px 10px;
        border-radius: 40px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* Style des points */
    .jc-dot-item {
        width: 12px;
        height: 12px;
        background-color: #b8975a;
        border-radius: 50%;
        display: block;
        opacity: 0.4;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }

    .jc-dot-item:hover {
        opacity: 1;
        transform: scale(1.4);
    }

    /* Flèches */
    .jc-dot-arrow {
        color: #b8975a;
        font-size: 22px;
        line-height: 1;
        text-decoration: none;
        padding: 5px;
        transition: transform 0.2s ease;
    }

    .jc-dot-arrow:hover {
        transform: scale(1.2);
    }
	
	.jc-up {
		margin-bottom: -2px; /* On remonte légèrement la flèche du bas pour compenser l'écart visuel */
	}
	.jc-down {
		margin-top: -10px; /* On remonte légèrement la flèche du bas pour compenser l'écart visuel */
	}
	
    .jc-up:hover { transform: translateY(-3px); }
    .jc-down:hover { transform: translateY(3px); }

    .jc-dots-container {
        display: flex;
        flex-direction: column;
        gap: 10px; /* Légèrement augmenté pour l'esthétique */
        margin: 0;
    }

    /* Tooltips style "Bulle de dialogue" */
    .jc-tooltip {
        position: absolute;
        right: 40px;
        top: 50%;
        transform: translateY(-50%);
        background: #b8975a;
        color: #ffffff;
        padding: 4px 15px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .jc-tooltip:after {
        content: "";
        position: absolute;
        left: 100%;
        top: 50%;
        margin-top: -6px;
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent transparent #b8975a;
    }

    .jc-dot-item:hover .jc-tooltip {
        opacity: 1;
        visibility: visible;
        right: 35px;
    }
}

/* Classe de base pour l'effet de zoom */
.jc-zoom-effect {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transition fluide */
    display: inline-block; /* Nécessaire pour que le transform s'applique correctement */
    will-change: transform; /* Optimisation pour le navigateur */
}

/* État au survol */
.jc-zoom-effect:hover {
    transform: scale(1.1); /* Zoom de 20% (1.2). Ajustez à 1.1 pour un effet plus discret */
    z-index: 10; /* S'assure que l'élément passe au-dessus des autres pendant le zoom */
}