/*
Theme Name: Kadence – C2S Holding
Description: Thème enfant de Kadence pour le site de C2S Holding : charte graphique (bleu #0052C0, vert #00C37F), police Poppins hébergée en local, styles communs (cartes arrondies, ombres légères).
Template: kadence
Version: 1.0.0
Text Domain: kadence-child
Requires at least: 6.0
Requires PHP: 7.4
*/

/* ==========================================================================
   Variables de la charte C2S Holding
   Le vert vif #00C37F n'atteint pas le contraste AA avec du texte blanc (2,3:1) :
   utiliser un texte foncé (--c2s-ink) sur du vert, ou --c2s-green-dark pour du texte vert sur fond clair.
   ========================================================================== */
:root {
	--c2s-blue: #0052c0;
	--c2s-blue-dark: #003a8c;
	--c2s-green: #00c37f;
	--c2s-green-dark: #007a50;
	--c2s-ink: #1a202c;
	--c2s-text: #2d3748;
	--c2s-muted: #5f6b7a;
	--c2s-bg: #f7fafc;
	--c2s-bg-tint: #eef3fa;
	--c2s-radius: 16px;
	--c2s-radius-sm: 10px;
	--c2s-shadow: 0 4px 20px rgba(0, 32, 96, 0.08);
	--c2s-shadow-hover: 0 10px 30px rgba(0, 32, 96, 0.14);
	--c2s-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Police du thème : surcharge les réglages Kadence pour rester cohérent même si le Customizer est réinitialisé. */
	--global-body-font-family: var(--c2s-font);
	--global-heading-font-family: var(--c2s-font);
}

/* « html body » : plus spécifique que la règle `body { font-family: système }` de Gutenverse (frontend.css), chargée après ce fichier. */
html body {
	font-family: var(--global-body-font-family);
}

/* ==========================================================================
   Accessibilité
   ========================================================================== */
:focus-visible {
	outline: 3px solid var(--c2s-blue);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   Boutons : coins arrondis (Kadence et blocs Gutenberg)
   ========================================================================== */
.button,
.wp-block-button__link,
.kb-button,
.kb-btn,
button[type="submit"],
input[type="submit"] {
	border-radius: var(--c2s-radius-sm);
	font-weight: 600;
}

/* ==========================================================================
   Carte réutilisable : <div class="c2s-card"> dans un bloc « HTML personnalisé » ou en classe CSS additionnelle d'un bloc.
   ========================================================================== */
.c2s-card {
	background: #fff;
	border-radius: var(--c2s-radius);
	box-shadow: var(--c2s-shadow);
	padding: 1.75rem;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Carte cliquable (ex. département) : légère élévation au survol. */
.c2s-card--hover:hover,
.c2s-card--hover:focus-within {
	box-shadow: var(--c2s-shadow-hover);
	transform: translateY(-2px);
}

/* ==========================================================================
   En-tête : respiration autour du logo (le logo est carré, avec le texte dessous)
   ========================================================================== */
.site-branding {
	padding-block: 0.5rem;
}

/* ==========================================================================
   Menu mobile (tiroir) aux couleurs de la charte
   ========================================================================== */
#mobile-drawer .drawer-inner {
	background: #002a66;
}

#mobile-drawer .mobile-navigation a,
#mobile-drawer .mobile-navigation a:visited {
	color: #fff;
}

#mobile-drawer .mobile-navigation a:hover,
#mobile-drawer .mobile-navigation a:focus-visible,
#mobile-drawer .mobile-navigation .current-menu-item > a,
#mobile-drawer .mobile-navigation .current-menu-ancestor > a {
	color: #4de0a8;
}

#mobile-drawer .mobile-navigation li,
#mobile-drawer .mobile-navigation .menu > li {
	border-color: rgba(255, 255, 255, 0.18);
}

#mobile-drawer .drawer-header .drawer-toggle {
	color: #fff;
}