/*
Theme Name: Ville de Saint-Pierre
Template: taochy-starter
Author: Taochy Consulting
Description: Habillage Ville de Saint-Pierre de La Réunion.
Version: 1.0.0
Text Domain: saintpierre
*/

/* ==========================================================================
   IDENTITÉ — seul fichier à modifier pour habiller ce site
   ========================================================================== */

:root {
	/* Couleurs institutionnelles */
	--encre:         #12233a;
	--encre-douce:   #5b6b80;
	--papier:        #ffffff;
	--papier-teinte: #f4f5f8;
	--trait:         #e7e9ef;
	--accent:        #0057b8;
	--accent-clair:  #cfe3f5;

	/* Or patrimonial — réservé aux signaux, jamais aux aplats */
	--or:            #f5a623;
	--or-sombre:     #caa64a;
	--sable:         #f2e6c4;

	/* Typographies */
	--police-titre: "Montserrat", -apple-system, "Segoe UI", sans-serif;
	--police-texte: "Montserrat", -apple-system, "Segoe UI", sans-serif;
	--police-signature: "Dancing Script", cursive;

	--rayon: 6px;
}

/* --------------------------------------------------------------------------
   Montserrat en titres : sans-serif, donc graisse forte et interlettrage
   resserré pour tenir l'autorité institutionnelle.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

/* Le surtitre porte la signature manuscrite : un seul endroit, jamais deux. */
.surtitre {
	font-family: var(--police-signature);
	font-size: var(--t-md);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--or-sombre);
}

/* Filet doré sous les titres de section : rappel patrimonial discret. */
.titre-section {
	padding-bottom: var(--e2);
	border-bottom: 3px solid var(--or);
	display: inline-block;
}

/* Les chiffres reprennent le bleu, le filet passe en or. */
.chiffre { border-top-color: var(--or); }
.chiffre__valeur { color: var(--accent); }

/* Services sur fond sable plutôt que gris : chaleur créole. */
.services { background: var(--sable); }

/* Boutons institutionnels : arrondis francs, pas d'effet de survol appuyé. */
.bouton {
	border-radius: var(--rayon);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.bouton:hover { transform: none; opacity: 1; background: #00468f; }
.bouton--inverse:hover { background: var(--sable); }

/* En-tête : liseré doré, marqueur d'identité de la collectivité. */
.entete { border-bottom: 3px solid var(--or); }

.pied { background: var(--encre); }