/* ==========================================================================
   Typographie - Public Sans
   Chaque graisse/style est déclarée comme une police à part entière.
   Utilisation : font-family: var(--font-black);
   ========================================================================== */

:root {
	--font-thin: 'Public Sans Thin';
	--font-thin-italic: 'Public Sans Thin Italic';
	--font-extralight: 'Public Sans ExtraLight';
	--font-extralight-italic: 'Public Sans ExtraLight Italic';
	--font-light: 'Public Sans Light';
	--font-light-italic: 'Public Sans Light Italic';
	--font-regular: 'Public Sans Regular';
	--font-italic: 'Public Sans Italic';
	--font-medium: 'Public Sans Medium';
	--font-medium-italic: 'Public Sans Medium Italic';
	--font-semibold: 'Public Sans SemiBold';
	--font-semibold-italic: 'Public Sans SemiBold Italic';
	--font-bold: 'Public Sans Bold';
	--font-bold-italic: 'Public Sans Bold Italic';
	--font-extrabold: 'Public Sans ExtraBold';
	--font-extrabold-italic: 'Public Sans ExtraBold Italic';
	--font-black: 'Public Sans Black';
	--font-black-italic: 'Public Sans Black Italic';

    /* Couleurs */
	--color-bg-principal: #F8F8F8;      /* Blanc cassé - fond général du site */
	--color-principale: #2F4A5A;        /* Bleu ardoise - titres, pied de page, icônes, éléments institutionnels */
	--color-contraste: #E8EBED;         /* Gris minéral - fonds de sections, cartes, encadrés */
	--color-accent: #3E6B58;            /* Vert forêt - boutons, liens importants, appels à l'action */
	--color-chaude: #d6ba79;            /* Beige pierre - sections spécifiques (ex: Histoire) */
    --color-titre: #2b2e2c;             /* Gris foncé - Titre H1, H2, H3 */
    --color-texte: #54606b;             /* Gris azur - Texte courant */

	/* Tailles de texte responsives (RGAA 10.4 / WCAG 1.4.4 - unités relatives rem
	   pour rester redimensionnables via le zoom et les réglages du navigateur).
	   Fluides entre 320px (mobile) et 1280px (desktop) via clamp(min, préféré, max). */
	--fs-xs: clamp(0.75rem, 0.7083rem + 0.2083vw, 0.875rem);     /* 12px -> 14px : mentions, légendes */
	--fs-sm: clamp(0.875rem, 0.8333rem + 0.2083vw, 1rem);        /* 14px -> 16px : texte secondaire */
	--fs-base: clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem);      /* 16px -> 18px : texte courant */
	--fs-md: clamp(1.125rem, 1.0833rem + 0.2083vw, 1.25rem);     /* 18px -> 20px : chapô, intro */
	--fs-lg: clamp(1.25rem, 1.1667rem + 0.4167vw, 1.5rem);       /* 20px -> 24px : h5, h4 */
	--fs-xl: clamp(1.5rem, 1.375rem + 0.625vw, 1.875rem);        /* 24px -> 30px : h3 */
	--fs-2xl: clamp(1.875rem, 1.6667rem + 1.0417vw, 2.5rem);     /* 30px -> 40px : h2 */
	--fs-3xl: clamp(2.25rem, 1.8333rem + 2.0833vw, 3.5rem);      /* 36px -> 56px : h1 */
	--fs-4xl: clamp(2.75rem, 2.1667rem + 2.9167vw, 4.5rem);      /* 44px -> 72px : titre hero */
}


@font-face {
	font-family: 'Public Sans Thin';
	src: url('../typo/PublicSans-Thin.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans Thin Italic';
	src: url('../typo/PublicSans-ThinItalic.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans ExtraLight';
	src: url('../typo/PublicSans-ExtraLight.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans ExtraLight Italic';
	src: url('../typo/PublicSans-ExtraLightItalic.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans Light';
	src: url('../typo/PublicSans-Light.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans Light Italic';
	src: url('../typo/PublicSans-LightItalic.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans Regular';
	src: url('../typo/PublicSans-Regular.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans Italic';
	src: url('../typo/PublicSans-Italic.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans Medium';
	src: url('../typo/PublicSans-Medium.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans Medium Italic';
	src: url('../typo/PublicSans-MediumItalic.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans SemiBold';
	src: url('../typo/PublicSans-SemiBold.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans SemiBold Italic';
	src: url('../typo/PublicSans-SemiBoldItalic.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans Bold';
	src: url('../typo/PublicSans-Bold.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans Bold Italic';
	src: url('../typo/PublicSans-BoldItalic.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans ExtraBold';
	src: url('../typo/PublicSans-ExtraBold.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans ExtraBold Italic';
	src: url('../typo/PublicSans-ExtraBoldItalic.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans Black';
	src: url('../typo/PublicSans-Black.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans Black Italic';
	src: url('../typo/PublicSans-BlackItalic.ttf') format('truetype');
	font-display: swap;
}

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Le doré global de Divi (--gcid-link-color) sert aussi de couleur aux
   icônes décoratives (police d'icône : leur couleur = "color") et aux
   soulignés — corrects tels quels, donc on ne touche pas à la variable
   (une première tentative l'avait fait, et avait assombri icônes et
   soulignés dans tout le site par effet de bord — repéré et corrigé).
   Le seul cas qui échoue le contraste WCAG/RGAA (≈1.8:1, il faut 4.5:1)
   est son usage comme couleur de TEXTE lisible : un email/URL collé en
   lien simple dans un module Texte. On cible donc uniquement ce cas
   précis, par la nature du lien plutôt que par une classe de bloc (qui
   changerait d'une page à l'autre) : passe à 4.95:1, même teinte. */
.et_pb_text a[href^="mailto:"],
.et_pb_text a[href^="http"] {
	color: #896c2a;
}

/* Lien d'évitement — permet aux utilisateurs clavier de sauter directement
   au contenu principal sans retraverser tout le menu (RGAA 12.7 / WCAG 2.4.1).
   Masqué hors écran par défaut, ramené à l'écran uniquement au focus clavier. */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 10000;
	padding: 12px 20px;
	background: var(--color-principale);
	color: #fff;
	font-weight: 700;
	border-radius: 0 0 4px 0;
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 0;
	outline: 3px solid var(--color-chaude);
	outline-offset: -3px;
}

/* Restaure un indicateur de focus visible au clavier, écrasé sur tout le
   site par le reset CSS du thème parent Divi (`:focus { outline: 0; }`,
   injecté en inline dans le <head>). `:focus-visible` ne cible que la
   navigation clavier, pas le clic souris, pour ne pas réafficher un
   contour à chaque clic (RGAA 10.7 / WCAG 2.4.7, 2.4.11). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--color-chaude);
	outline-offset: 2px;
}

/* Lien superposé sur toute la carte pour les colonnes Divi "cliquables"
   (voir mairie_lapetiteraon_fix_divi_column_links() dans functions.php).
   Contour de focus vers l'intérieur (offset négatif) pour ne jamais être
   rogné par un éventuel overflow:hidden sur la carte (coins arrondis). */
.et_pb_column.et_clickable {
	position: relative;
}

.et_pb_column_link_overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.et_pb_column_link_overlay:focus-visible {
	outline-offset: -3px;
}

h1 {
	font-family: var(--font-black);
	font-size: var(--fs-3xl);
	font-weight: 900;
	line-height: 1.2;
	color: var(--color-titre);
	margin-bottom: 1rem;
}
a {
	text-decoration: none;
	color: inherit;
}