/*
Theme Name: FinPath Child
Theme URI: https://finpath.keydesign.xyz/
Description: Finance & Consulting Elementor WordPress theme
Author: Key-Design
Author URI: http://themeforest.net/user/Key-Design
Template: finpath
Version: 1.0
License: Envato Standard License
License URI: https://themeforest.net/licenses/standard
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-menu, featured-images, flexible-header, post-formats, sticky-post, translation-ready
Text Domain: finpath-child
*/
/* Accueil — cartes actualités sur bande sombre (#actus) : le widget n'expose pas le fond de carte */
#actus .kdbp-card {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.09);
	padding: 28px;
}
#actus .kdbp-title,
#actus .kdbp-title a { color: #FFFFFF; }

/* Onglets services — badge (tab_description) en pastille inline */
#services .kd-advanced-tabs__tab-text {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-direction: row;
}
#services .kd-advanced-tabs__tab-description {
	display: inline-block;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	padding: 3px 8px;
	background: #F2EEE7;
	color: #141414;
	line-height: 1.4;
}

/* Header — tablette 768–1023 : 2 CTA (hd10003/hd10004) débordaient de leur
   colonne hd10007 (36% = 262px, contenu 271px). Deux gestes :
   1. la nav hd10006 est un hamburger (toggle 20px) qui gaspillait 46% → 38% ;
   2. hd10007 passe 36% → 44% (~318px utiles) + padding CTA 26px → 16px.
   Sélecteurs #page : les règles kit pèsent 4 classes, l'id gagne. */
@media (min-width:768px) and (max-width:1023px){
	#page .elementor-element-hd10006{--width:38%;}
	#page .elementor-element-hd10007{--width:44%;}
	#page .elementor-element-hd10003 .kd-button,
	#page .elementor-element-hd10004 .kd-button{
		padding-left:16px;
		padding-right:16px;
	}
}

/* ───────── Encre et nom du header ───────── */

/* Encre du corps. #887e7a rendait 3,42 : 1 sur creme et 3,95 sur blanc,
   sous les 4,5 : 1 que WCAG AA demande pour du texte courant. Le texte le plus pale du
   site est la mention de consentement RGPD du formulaire. #5F5751 rend 6,12 sur creme,
   7,07 sur blanc, 6,08 sur #efeee7 — au-dessus sur les trois fonds de la maison. */
:root { --color-text: #5F5751; }

/* Nom du header. Cinzel (capitales romaines imperiales) remplacee par la
   police que le site porte deja. Meme corps, meme graisse, meme or : seule la lettre change.
   Interlettrage porte a 0.08em, un grotesque en capitales serre davantage qu'un serif.
   Prefixe `body` : post-3084.css charge APRES ce fichier, 0,3,1 bat 0,3,0 sans !important. */
body .elementor-3084 .elementor-element.elementor-element-hd10001 {
  font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
}

/* Chips (label des titres keydesign) */
.elementor-kit-3046 .kd-widget-container .kd-heading .kd-heading__label {
    padding: 9px 10px 0px 0px;
    font-size: 21px;
    border: 0;   /* le filet 1 px des chips de la démo ne tient plus avec ce padding ; la maquette validée n'en a pas */
    background: transparent;   /* plus de fond non plus : le chip est du texte */
}

/* Survol des boutons : vert CICAFFI + texte blanc. La démo vidait le fond au survol ;
   ses règles par widget ont une spécificité (0,5,0) qu'une feuille de thème ne dépasse pas sans !important. */
.elementor-kit-3046 .kd-button:hover,
.elementor-kit-3046 .kd-button:focus {
    background-color: #0A3226 !important;
    border-color: #0A3226 !important;
    color: #FFFFFF !important;
}
.elementor-kit-3046 .kd-button:hover .kd-button__label,
.elementor-kit-3046 .kd-button:hover .kd-button__icon,
.elementor-kit-3046 .kd-button:focus .kd-button__label {
    color: #FFFFFF !important;
}

/* Visuel fondu de bas en haut (zellige de la page Comité) : plein en bas, s'efface vers le haut.
   Classe à poser sur le widget image (Avancé → classes CSS). */
.fondu-vers-le-haut img {
    -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 100%);
            mask-image: linear-gradient(to top, #000 35%, transparent 100%);
}

/* Confirmation d'envoi : le bloc est caché tant que le formulaire n'est pas parti */
#confirmation-envoi, .elementor-element.confirmation-envoi { display: none !important; }        /* le conteneur Elementor impose display:var(--display) */
#confirmation-envoi.est-visible, .elementor-element.confirmation-envoi.est-visible { display: flex !important; }
.formulaire-envoye { display: none !important; }

/* Survol des liens du footer : même couleur que les liens du header (primaire du kit, 0,2 s).
   Les listes de liens portent le réglage dans Elementor (Survol → couleur = Primaire) ; ce bloc couvre les liens
   posés dans un widget texte (« Réalisé par Amine SOUSSI »), où Elementor force color:inherit sur les <a>. */
.elementor-kit-3046 footer .elementor-widget-text-editor a:hover,
.elementor-kit-3046 footer .elementor-widget-text-editor a:focus { color: var(--e-global-color-primary); }

/* Titres des cinq volets de prestations de l'accueil (règle testée à l'inspecteur) : 35 px, retrait droit 120 px.
   Sa règle visait tous les .kd-heading__title du site (titre du hero, bandeaux, textes des onglets) : limitée ici aux volets
   (.sticky-section#prestation-N, présents sur l'accueil seulement), et au bureau (≥ 1025 px) : 120 px de retrait écraseraient le titre en tablette et en mobile. */
@media (min-width: 768px) {    /* taille dès la tablette : sinon 47 px entre 768 et 1024, plus grand qu'en bureau */
    .elementor-kit-3046 .sticky-section[id^="prestation-"] .kd-widget-container .kd-heading .kd-heading__title { margin: 0; font-size: 35px; }
}
@media (min-width: 1025px) {   /* retrait droit en bureau seulement */
    .elementor-kit-3046 .sticky-section[id^="prestation-"] .kd-widget-container .kd-heading .kd-heading__title { padding: 0 120px 0 0; }
}

/* Boutons noirs → verts par défaut, dorés au survol. Classe « bouton-vert » posée sur les neuf boutons à fond noir :
   accueil (hero + 5 volets), en-tête « Demander un devis », contrats « Demander une consultation ».
   Les boutons dorés par défaut (autres pages, formulaires) gardent leur survol vert, règle ci-dessus. */
.elementor-kit-3046 .elementor-widget-keydesign-button.bouton-vert .kd-button {
    background-color: var(--e-global-color-secondary, #0A3226) !important;
    border-color: var(--e-global-color-secondary, #0A3226) !important;
    color: #FFFFFF !important;
}
.elementor-kit-3046 .elementor-widget-keydesign-button.bouton-vert .kd-button:hover,
.elementor-kit-3046 .elementor-widget-keydesign-button.bouton-vert .kd-button:focus {
    background-color: var(--e-global-color-primary, #B8862B) !important;
    border-color: var(--e-global-color-primary, #B8862B) !important;
    color: #FFFFFF !important;
}
.elementor-kit-3046 .elementor-widget-keydesign-button.bouton-vert .kd-button .kd-button__label,
.elementor-kit-3046 .elementor-widget-keydesign-button.bouton-vert .kd-button .kd-button__icon {
    color: #FFFFFF !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   MOTIF KOUFIQUE — essai du 2026-09-16, corrigé 2026-09-17 00:00
   Le PNG #3086 est blanc/taupe sur transparent. Un premier essai l'inversait
   pour le rendre « sépia » : à l'œil, cela donnait une
   tonalité NOIRE. Correction : AUCUN filtre de teinte — le motif garde sa
   taupe d'origine, on ne règle que son opacité et son cadrage.

   .motif-cadre   le motif encadre TOUT le bloc, pas le seul visuel.
                  Dégradé gauche → droite : absent là où le texte vit,
                  présent à droite. Le texte reste lisible par construction,
                  pas par un rabais d'opacité sur toute la surface.
   ───────────────────────────────────────────────────────────────────────── */
.elementor-kit-3046 .e-con.motif-cadre::before {
    background-position: top right !important;
    background-size: 340px auto !important;
    background-repeat: repeat !important;
    filter: none !important;          /* taupe d'origine, sans filtre de teinte */
    opacity: .30 !important;
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%, transparent 38%, rgba(0,0,0,.35) 58%, #000 100%);
            mask-image: linear-gradient(to right,
        transparent 0%, transparent 38%, rgba(0,0,0,.35) 58%, #000 100%);
}

/* Accueil — cartes « trois pôles » : recadrage 4:3 centré, quelle que soit la
   proportion du fichier (visuels 18/09 en 1400 px, ratio natif ~3:2).
   Sans cette règle, les cartes n'ont plus la même hauteur d'image et les
   boutons « Lire la suite » se désalignent. */
.elementor-kit-3046 .elementor-element-247b509 img,
.elementor-kit-3046 .elementor-element-c78c947 img,
.elementor-kit-3046 .elementor-element-4e6c181 img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}

/* ---------------------------------------------------------------------------
   Retours client du 21/09/2026
   --------------------------------------------------------------------------- */

/* ① Coches des listes : au début du paragraphe, pas en son milieu.
   Le client : « la numérotation en forme de check en milieu de paragraphe au
   lieu du début ». Le framework centre verticalement à DEUX niveaux — sur
   l'item et sur sa ligne interne — donc sur un item de plusieurs lignes la
   coche flotte au milieu du texte. On remet les deux en tête.

   Les sélecteurs reprennent exactement ceux du framework
   (`advanced-list.css`) : plus court, on perd la cascade. */

.kd-widget-container .kd-list-item {
	align-items: flex-start;
}

.kd-widget-container .kd-list-item .kd-list-inner {
	align-items: flex-start;
}

.kd-widget-container .kd-list-item .kd-list-icon {
	align-items: flex-start;
	padding-top: 0.28em;
}

/* ② Fil d'ariane du bandeau : retiré de l'affichage, conservé pour les moteurs.
   Le client : « est-ce possible de retirer la répétition des titres ? ». Sur
   chaque page, le bandeau montre le titre en grand puis, cent quatre-vingts
   pixels plus bas, le même mot en fin de fil d'ariane. Le site n'a que deux
   niveaux : ce fil ne sert à personne pour naviguer, il ne fait que répéter.

   On le masque plutôt que de le supprimer : le balisage de données
   structurées (BreadcrumbList) reste dans la page et continue d'informer les
   moteurs. Réversible en retirant ce bloc. */

.kd-breadcrumbs,
.elementor-widget-keydesign-breadcrumbs {
	display: none;
}

/* ---------------------------------------------------------------------------
   Les 13 icônes de contrats — page Contrats.
   Injection : voir `functions.php`, filtre `elementor/widget/render_content`.
   --------------------------------------------------------------------------- */

.cicaffi-icone-contrat {
	display: block;
	margin: 0 0 14px;
	color: #8C5E1A;          /* l'or du site, déjà porté par les sur-titres */
	line-height: 0;          /* pas d'interligne parasite sous le trait */
}

.cicaffi-icone-contrat svg {
	width: 40px;             /* plancher mesuré à 20 px : on double, la paire
	                            dégressive reste lisible sans forcer */
	height: 40px;
	display: block;
}

/* Sur les blocs or, l'encre passe en #5F5751 : un trait de 1,25 px est le
   premier élément à disparaître quand le contraste faiblit. */
.kd-bloc-or .cicaffi-icone-contrat,
.elementor-element[class*="bg-or"] .cicaffi-icone-contrat {
	color: #5F5751;
}

@media (max-width: 767px) {
	.cicaffi-icone-contrat svg {
		width: 28px;         /* le plus serré qu'elle admette en mobile */
		height: 28px;
	}
	.cicaffi-icone-contrat {
		margin-bottom: 10px;
	}
}

/* ---------------------------------------------------------------------------
   Drapeaux de langue, après les boutons de l'en-tête.
   Injection : voir `functions.php`.
   --------------------------------------------------------------------------- */

.cicaffi-drapeaux {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 18px;
	vertical-align: middle;
}

.cicaffi-drapeau {
	display: inline-flex;
	line-height: 0;
	border-radius: 2px;
	overflow: hidden;
	opacity: 0.45;                 /* les langues qu'on peut rejoindre s'effacent */
	transition: opacity 0.18s ease;
}

.cicaffi-drapeau:hover,
.cicaffi-drapeau:focus-visible {
	opacity: 1;
}

/* La langue courante se tient en avant, et ne se clique pas : y aller depuis
   elle-même ne mène nulle part. */
.cicaffi-drapeau.est-courante {
	opacity: 1;
	pointer-events: none;
	box-shadow: 0 0 0 1px rgba(140, 94, 26, 0.55);
}

.cicaffi-drapeau svg {
	display: block;
	width: 20px;
	height: 14px;
}

/* Le nom de la langue reste lisible par une synthèse vocale sans occuper
   d'espace : un drapeau seul ne dit rien à qui ne le voit pas. */
.cicaffi-drapeau .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.cicaffi-drapeaux { margin-left: 10px; gap: 6px; }
}

/* Les drapeaux sont injectés DANS le widget du second bouton : sans cette
   règle, ils se posent sous lui au lieu de le suivre. Le widget devient une
   ligne, le bouton et les drapeaux s'y rangent côte à côte. */
.elementor-widget-keydesign-button:has(.cicaffi-drapeaux),
.elementor-widget-keydesign-button:has(.cicaffi-drapeaux) > .elementor-widget-container {
	display: flex;
	align-items: center;
	gap: 14px;
}

.cicaffi-drapeaux {
	margin-left: 0;
	flex: 0 0 auto;
}

/* Bouton « Commander » / « Order » des articles de livre (28/09) — balisage du widget KeyDesign,
   la couleur vient de la règle .bouton-vert ci-dessus. */
.cicaffi-bouton-livre { clear: both; padding-top: 28px; margin-bottom: 8px; }
.cicaffi-bouton-livre .kd-button-wrap { display: inline-block; }

/* Liens dans les textes : soulignés, couleur du texte. Boutons exclus. */
.elementor-widget-text-editor a:not(.elementor-button) {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.elementor-widget-text-editor a:not(.elementor-button):hover {
	text-decoration-color: #A9761F;
}
.elementor-widget-text-editor a:not(.elementor-button):focus-visible {
	outline: 2px solid #A9761F;
	outline-offset: 2px;
}

/* Bandeau de cookies : le lien vers la politique de confidentialité prend la couleur du texte du bandeau,
   souligné comme les liens de texte du site. */
#cookie-notice .cn-link,
#cookie-notice .cn-link:hover,
#cookie-notice .cn-link:focus { color: inherit; text-decoration: underline; }

/* Après son choix, le visiteur garde un accès discret pour le modifier : une pastille en bas à gauche,
   à la place de la barre pleine largeur. La phrase d'accompagnement reste lue par les lecteurs d'écran. */
#cookie-notice.cookie-revoke-visible { min-width: 0; width: auto; left: 16px; bottom: 16px; background-color: transparent !important; }
#cookie-notice.cookie-revoke-visible .cookie-revoke-container { padding: 0; width: auto; }
#cookie-notice.cookie-revoke-visible #cn-revoke-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#cookie-notice.cookie-revoke-visible .cn-revoke-cookie { margin: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
@media (max-width: 767px) {
	#cookie-notice.cookie-revoke-visible { left: 10px; bottom: 10px; }
	#cookie-notice.cookie-revoke-visible .cn-revoke-cookie { font-size: 11px; line-height: 16px; padding: 5px 10px; opacity: .92; }
}

/* Bandeau de cookies : une carte blanche posée au-dessus de la page, ombrée et bordée d'or, pour qu'on la lise
   comme une fenêtre et non comme une bande du pied de page vert. Les deux boutons ont la même forme et la même couleur. */
#cookie-notice:not(.cookie-revoke-visible) { left: 0; right: 0; bottom: 24px; margin: 0 auto; width: calc(100% - 48px); max-width: 760px; min-width: 0; border-top: 4px solid #B8862B; border-radius: 10px; box-shadow: 0 18px 50px rgba(10, 50, 38, .38), 0 2px 10px rgba(10, 50, 38, .22); font-family: inherit; }
#cookie-notice:not(.cookie-revoke-visible) .cookie-notice-container { padding: 24px 28px; text-align: left; font-size: 15px; line-height: 1.55; }
#cookie-notice #cn-notice-text { display: block; margin: 0 0 18px; }
#cookie-notice #cn-notice-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
#cookie-notice #cn-notice-buttons .cn-button { margin: 0; padding: 12px 28px; border-radius: 4px; color: #FFFFFF; font-family: inherit; font-size: 15px; line-height: 1.2; }
#cookie-notice #cn-notice-buttons .cn-button:hover,
#cookie-notice #cn-notice-buttons .cn-button:focus-visible { background-color: #A9761F !important; }
#cookie-notice #cn-notice-buttons .cn-button:focus-visible { outline: 2px solid #A9761F; outline-offset: 2px; }
/* La languette, blanche et cerclée de vert, reste visible sur le pied de page vert comme sur les fonds clairs. */
#cookie-notice.cookie-revoke-visible .cn-revoke-cookie { background-color: #FFFFFF !important; color: #0A3226; border: 1px solid #0A3226; font-family: inherit; }
@media (max-width: 767px) {
	#cookie-notice:not(.cookie-revoke-visible) { bottom: 12px; width: calc(100% - 24px); }
	#cookie-notice:not(.cookie-revoke-visible) .cookie-notice-container { padding: 18px 18px 20px; font-size: 14px; }
	#cookie-notice #cn-notice-buttons .cn-button { flex: 1 1 0; padding: 12px 10px; }
}

/* Page de confidentialité : le même choix que le bandeau, posé dans la rubrique « Cookies » ; même carte, mêmes boutons. */
.cicaffi-choix-cookies { max-width: 760px; margin: 24px 0 8px; padding: 24px 28px; background-color: #FFFFFF; border-top: 4px solid #B8862B; border-radius: 10px; box-shadow: 0 8px 28px rgba(10, 50, 38, .16), 0 1px 4px rgba(10, 50, 38, .12); color: #0A3226; }
.cicaffi-choix-cookies .cicaffi-choix-cookies__statut { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; }
.cicaffi-choix-cookies .cicaffi-choix-cookies__libelle { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #5F5751; }
.cicaffi-choix-cookies .cicaffi-choix-cookies__valeur { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background-color: #F3EFE6; font-size: 16px; font-weight: 600; color: #0A3226; }
.cicaffi-choix-cookies .cicaffi-choix-cookies__valeur::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: #B8862B; }
.cicaffi-choix-cookies[data-etat="aucun"] .cicaffi-choix-cookies__valeur::before { background-color: transparent; box-shadow: inset 0 0 0 1.5px #B8862B; }
.cicaffi-choix-cookies .cicaffi-choix-cookies__detail { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: #0A3226; }
.cicaffi-choix-cookies .cicaffi-choix-cookies__confirmation { margin: 0 0 18px; padding: 10px 14px; border-left: 3px solid #B8862B; background-color: #FBF7EE; font-size: 15px; font-weight: 600; color: #0A3226; }
.cicaffi-choix-cookies .cicaffi-choix-cookies__confirmation[hidden] { display: none; }
.cicaffi-choix-cookies--enregistre { animation: cicaffi-choix-enregistre 1.6s ease-out 1; }
@keyframes cicaffi-choix-enregistre { 0% { box-shadow: 0 0 0 4px rgba(184, 134, 43, .55), 0 8px 28px rgba(10, 50, 38, .16); } 100% { box-shadow: 0 0 0 0 rgba(184, 134, 43, 0), 0 8px 28px rgba(10, 50, 38, .16), 0 1px 4px rgba(10, 50, 38, .12); } }
.cicaffi-choix-cookies .cicaffi-choix-cookies__coche { margin-right: 8px; }
@media (prefers-reduced-motion: reduce) { .cicaffi-choix-cookies--enregistre { animation: none; } }
.cicaffi-choix-cookies .cicaffi-choix-cookies__boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.cicaffi-choix-cookies .cicaffi-choix-cookies__bouton { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 12px 28px; border: 0; border-radius: 4px; background-color: #0A3226; color: #FFFFFF; font-family: inherit; font-size: 15px; line-height: 1.2; cursor: pointer; }
.cicaffi-choix-cookies .cicaffi-choix-cookies__bouton:hover,
.cicaffi-choix-cookies .cicaffi-choix-cookies__bouton:focus-visible { background-color: #A9761F; color: #FFFFFF; }
.cicaffi-choix-cookies .cicaffi-choix-cookies__bouton:focus-visible { outline: 2px solid #A9761F; outline-offset: 2px; }
@media (max-width: 767px) {
	.cicaffi-choix-cookies { padding: 18px 18px 20px; }
	.cicaffi-choix-cookies .cicaffi-choix-cookies__bouton { flex: 1 1 0; padding: 12px 10px; }
}