/* =====================================================================
   Groupages.ch - jetons de design
   Charte reprise a l identique du site WordPress actuel, pour que la
   refonte soit invisible a l oeil. Toute couleur du site sort d ici :
   aucune valeur hexadecimale en dur ailleurs dans les feuilles.
   ===================================================================== */

:root {
	/* Vert de marque */
	--gp-primary:        #3C643C;
	--gp-primary-dark:   #1F4020;
	--gp-primary-darker: #0F2010;
	--gp-sage:           #7A9170;

	/* Accents */
	--gp-gold:           #D8B44A;   /* mise en avant, rubans */
	--gp-gold-deep:      #C9A227;   /* bordure des annonces en avant */
	--gp-red:            #C82828;   /* envois, alertes */

	/* Fonds */
	--gp-soft:           #F4F7F2;   /* fond de section clair */
	--gp-card:           #E8EFE3;   /* cartes, encadres */
	--gp-white:          #FFFFFF;

	/* Textes */
	--gp-text:           #1A2B1A;
	--gp-muted:          #5A6B5A;
	--gp-border:         #E0E5DE;

	/* Typographie : identique au theme Globax */
	--gp-font-title: "Montserrat", "Segoe UI", system-ui, sans-serif;
	--gp-font-body:  "Roboto", "Segoe UI", system-ui, sans-serif;

	--gp-h1: 48px;  --gp-h1-lh: 56px;
	--gp-h2: 40px;  --gp-h2-lh: 48px;
	--gp-h3: 32px;  --gp-h3-lh: 40px;
	--gp-h4: 24px;  --gp-h4-lh: 32px;
	--gp-body: 16px; --gp-body-lh: 28px;

	/* Rythme vertical. Les bandeaux du site actuel etaient trop epais
	   (retour de Joel) : on part directement sur les valeurs corrigees. */
	--gp-hero-pad-desktop: 72px;
	--gp-hero-pad-tablet:  52px;
	--gp-hero-pad-mobile:  32px;

	/* Divers */
	--gp-radius:      10px;
	--gp-radius-pill: 999px;
	--gp-shadow:      0 2px 12px rgba(0, 0, 0, 0.08);
	--gp-shadow-lift: 0 3px 16px rgba(0, 0, 0, 0.12);

	/* En-tete. Elle est collante sur toutes les tailles d ecran,
	   contrairement au theme WordPress qui ne le faisait qu en desktop.

	   Deux rangees, donc deux hauteurs : celle du repos, et celle prise
	   des que l on descend. L en-tete se resserre alors pour rendre une
	   cinquantaine de pixels au contenu, precisement au moment ou l on
	   regarde la photo et non le menu. */
	--gp-header-h:         136px;
	--gp-header-h-compact: 100px;
	--gp-header-h-mobile:   64px;

	/* Hauteur des bandeaux d entree et du heros video.

	   Elle suit la fenetre moins l en-tete, pour qu un bandeau occupe
	   ce qui reste d ecran sans jamais le deborder, et reste bornee
	   entre 460 et 680 px : en dessous on ne voit plus la photo, au-dela
	   il faut defiler pour atteindre le premier texte.

	   « svh » vise la hauteur reelle sur telephone, barres du navigateur
	   comprises ; « vh » sert de repli aux navigateurs plus anciens. */
	--gp-hero-h: clamp(460px, calc(100vh - var(--gp-header-h)), 680px);
	--gp-bande-h: clamp(360px, 58vh, 620px);

	--gp-container: 1176px;
}

@supports (height: 100svh) {
	:root {
		--gp-hero-h: clamp(460px, calc(100svh - var(--gp-header-h)), 680px);
		--gp-bande-h: clamp(360px, 58svh, 620px);
	}
}

@media (max-width: 767px) {
	:root {
		--gp-h1: 34px;  --gp-h1-lh: 42px;
		--gp-h2: 30px;  --gp-h2-lh: 38px;
		--gp-h3: 26px;  --gp-h3-lh: 34px;
	}
}