/*
Theme Name: Transparence cacao
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Thème enfant Hello Elementor pour Transparence Cacao.
Author: Hybride Conseil
Author URI: https://hybride-conseil.fr/
Template: hello-elementor
Version: 2.2.0
Text Domain: transparencecacao
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   Transparence Cacao — design system

   Cette feuille ne contient que le GLOBAL : jetons de couleur, familles de
   police, comportement de base des liens. Tout le reste vit dans le champ
   « CSS personnalisé » d'Elementor (Avancé → CSS personnalisé), porté par
   l'élément concerné : on le voit dans l'éditeur en cliquant dessus, et il
   voyage avec le modèle quand on l'exporte.
   ========================================================================== */

:root {
	/* Couleurs relevées le 10 sept. 2026 dans le frame Figma 82:2 (« Accueil »),
	   panneau « Selection colors ». Les précédentes venaient de l'export « copier
	   comme code », qui convertit les fills en classes Tailwind : toutes fausses. */
	--tc-brown:        #4A130B; /* texte principal, logo */
	--tc-cream:        #FFEFDE; /* fond des bandeaux */
	--tc-sand:         #F8DBBA; /* sable clair : continents de la carte du monde */
	--tc-amber:        #FFCC4B; /* jaune des cabosses et des accents */
	--tc-green:        #B65633; /* carte « traceability & origins » : terracotta.
	                               Nom du jeton historique : ne pas renommer sans reprendre
	                               le CSS personnalisé de #12, #14, #15 et #16. */
	--tc-coral:        #EB6A59; /* carte « partners » : corail */
	--tc-pink:         #C9607E; /* étiquette « communities » */
	--tc-planet:       #87D6BE; /* étiquette « planet » (variable Figma « Planet ») */
	--tc-grey:         #D4D4D8;

	--tc-font-title:   "Bowlby One SC", Impact, sans-serif;
	--tc-font-body:    "Barlow", system-ui, -apple-system, sans-serif;
	--tc-font-hand:    "Indie Flower", cursive;

	--tc-content:      1272px; /* largeur de contenu (marge 120 px sur 1512) */
}

/* --------------------------------------------------------------- base ---- */

body {
	font-family: var(--tc-font-body);
	color: var(--tc-brown);
}

h1, h2, h3 {
	font-family: var(--tc-font-title);
	font-weight: 400;
	color: var(--tc-brown);
}

/* Aucun lien n'est souligné dans la maquette. Le trait épais est réservé aux
   appels à l'action, qui sont des widgets bouton et portent leur propre bordure. */
.elementor-widget-text-editor a {
	color: inherit;
	text-decoration: none;
	transition: opacity .15s ease;
}

.elementor-widget-text-editor a:hover {
	opacity: .6;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Séparateur « | » du pied de page et du sélecteur de langue */
.elementor-widget-text-editor span { opacity: .4; font-weight: 400; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1024px) {
	:root { --tc-content: 100%; }
}

/* Décors en débordement (cabosses) : ils sortent volontairement du conteneur
   de 1272 px. Selon la largeur de la fenêtre ce débordement passe le bord droit
   et crée une barre de défilement horizontale — à 375 px, à 768 px, et jusqu'à
   environ 1430 px sur la page Planet. On rogne donc au bord de la fenêtre, pas
   au bord de la section : le décor garde son débordement dans les marges de
   page comme sur la maquette, et n'est coupé que par l'écran.
   `clip` et non `hidden` : `clip` ne crée pas de conteneur de défilement, le
   `position: sticky` continue de fonctionner. Sur le seul axe X pour préserver
   les débordements verticaux voulus (visuel « our IMPACT »). */
html { overflow-x: clip; }

/* ------------------------------------------------- en-tête mobile / burger -- */

/* News, Contact, EN et FR sont des entrées du menu principal qui n'existent
   que dans le panneau du burger : sous 1025 px la barre haute qui les portait
   est masquée (visibilité responsive du conteneur Elementor), au-dessus ce
   sont ces entrées-ci qui disparaissent. Une seule source, pas de doublon
   visible. */
@media (min-width: 1025px) {
	.tc-mobile-only { display: none !important; }
}

/* Dans le panneau, la langue inactive est en retrait comme dans la barre
   haute du desktop (le « | FR » y est à 40 % d'opacité). */
@media (max-width: 1024px) {
	.elementor-nav-menu--dropdown .tc-lang:not(.tc-lang-active) > a { opacity: .45; }

	/* Le lien de la langue courante pointe sur la page courante : Elementor lui
	   pose elementor-item-active et son fond sable. On le neutralise, la langue
	   active se lit déjà au retrait des deux autres. */
	.elementor-nav-menu--dropdown .tc-lang > a.elementor-item-active,
	.elementor-nav-menu--dropdown .tc-lang > a.elementor-item-active:focus {
		background-color: transparent !important;
	}
}