/* =============================================================================
   Haltemis — Design system
   Généré depuis ~/Projects/bb-forge/specs/haltemis/tokens.json (2026-08-18).
   NE PAS ÉDITER À LA MAIN : modifier la spec puis régénérer.

   Palette, typographie et grille = Figma CrzFs9XmmlivbBC7bTPZEB, frame 1:10
   (maquette finale du 06/08). La maquette fait foi — arbitrage Nicolas du 18/08.

   Portée : tokens + non-éditable uniquement (polices, variables, décor,
   micro-interactions). Les valeurs éditables par le client vivent dans les
   Global Styles et les settings de modules, pas ici.
   ============================================================================= */

/* ----------------------------------------------------------------------------
   1. Polices auto-hébergées (woff2 variable, sous-ensemble latin + latin-ext)
   180 Ko pour toutes les graisses. Aucune requête tierce, rien à déclarer RGPD.
   ---------------------------------------------------------------------------- */

/* Lora en STATIQUE, pas en variable : à wght 700 la variable rend plus grasse
   que le Lora-Bold de la charte, et les titres sortaient plus épais qu'en
   maquette (comparaison au pixel du H1, 18/08). Ce sont les fichiers exacts
   livrés par la graphiste. */
@font-face {
	font-family: 'Lora';
	src: url('../fonts/lora-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lora';
	src: url('../fonts/lora-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lora';
	src: url('../fonts/lora-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('../fonts/plusjakartasans-variable.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('../fonts/plusjakartasans-italic-variable.woff2') format('woff2');
	font-weight: 200 800;
	font-style: italic;
	font-display: swap;
}

/* ----------------------------------------------------------------------------
   2. Tokens
   ---------------------------------------------------------------------------- */

:root {
	/* Marque — maquette Figma du 06/08 (source de vérité, arbitrage 18/08) */
	--hal-marron:           #5B2020;
	--hal-creme:            #FCF8F1;
	--hal-terracotta:       #9D3F00;
	--hal-gold:             #FFC201;
	--hal-beige:            #FFD9BB;
	--hal-olive:            #736B02;

	/* Neutres — valeurs relevées dans la maquette */
	--hal-gris:             #EBE8E2;
	--hal-filet:            #D8D6D2;
	--hal-bordure:          #C0BEBA;
	--hal-text-muted:       #8F6563;

	/* États — assombrissement 12 % */
	--hal-gold-hover:       #E0AB01;
	--hal-olive-hover:      #655E02;
	--hal-terracotta-hover: #8A3700;
	--hal-marron-hover:     #501C1C;

	/* Illustration — portée limitée à l'intérieur des icônes */
	--hal-ill-orange:       #FFCC80;
	--hal-ill-peche:        #FED3A6;
	--hal-ill-corail:       #FDAC83;
	--hal-ill-encre:        #3D3A56;
	--hal-ill-vert:         #7AB393;
	--hal-ill-bleu:         #90C2DC;
	--hal-ill-bleu-pale:    #C7DBDE;
	--hal-ill-gris:         #738794;

	/* Typographie */
	--hal-font-heading:     'Lora', Georgia, 'Times New Roman', serif;
	--hal-font-body:        'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Espacement */
	--hal-space-1:   4px;
	--hal-space-2:   8px;
	--hal-space-3:  12px;
	--hal-space-4:  16px;
	--hal-space-6:  24px;
	--hal-space-8:  32px;
	--hal-space-10: 40px;
	--hal-space-12: 48px;
	--hal-space-14: 56px;
	--hal-space-16: 64px;
	--hal-space-20: 80px;
	--hal-space-24: 96px;
	--hal-space-32: 128px;

	/* Rayons */
	--hal-radius-sm: 4px;
	--hal-radius-md: 8px;
	--hal-radius-lg: 20px;

	/* Mouvement */
	--hal-transition: 180ms ease;

	/* Grille */
	--hal-content-width: 1280px;
	--hal-pad-x:           32px;
}

/* ----------------------------------------------------------------------------
   3. Base
   ---------------------------------------------------------------------------- */

body {
	font-family: var(--hal-font-body);
	color: var(--hal-marron);
	background-color: var(--hal-creme);
	/* Aligne le rendu du navigateur sur celui de la maquette Figma.
	   Sans lui, les titres Lora paraissent plus gras qu'en maquette. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--hal-font-heading);
	font-weight: 700;
	color: var(--hal-marron);
	line-height: 1.15;
}

/* ----------------------------------------------------------------------------
   4. Micro-interactions (convention pipeline BB Forge)
   ---------------------------------------------------------------------------- */

.fl-button,
.fl-button *,
a {
	transition: color var(--hal-transition),
	            background-color var(--hal-transition),
	            border-color var(--hal-transition),
	            box-shadow var(--hal-transition),
	            transform var(--hal-transition);
}

/* Le CSS du thème BB écrase `transition` sur .fl-button : !important ciblé
   nécessaire (piège n° 12). Ce n'est pas un champ éditable dans l'UI. */
.fl-button {
	transition: color var(--hal-transition),
	            background-color var(--hal-transition),
	            border-color var(--hal-transition),
	            box-shadow var(--hal-transition),
	            transform var(--hal-transition) !important;
}

/* Accessibilité clavier — visible sur fond clair comme sur fond foncé. */
:focus-visible {
	outline: 2px solid var(--hal-terracotta);
	outline-offset: 2px;
}

.fl-row[class*="hal-row--dark"] :focus-visible,
.hal-on-dark :focus-visible {
	outline-color: var(--hal-gold);
}

/* Beaver Builder 2.11 (constaté le 06/11/2026) : le CSS de layout pose
   `:where(.fl-builder-content, .fl-page) :is(a[href], button, …,
   [tabindex]:not([tabindex="-1"])):focus { outline: 2px solid }`, de
   spécificité (0,3,0). Un clic de souris donne le focus au lien ou au bouton :
   un cadre de 2 px apparaissait au clic dans l'en-tête, le pied, les contenus
   et l'accordéon de la FAQ. Retiré quand le focus ne vient pas du clavier
   (0,4,0) ; le contour clavier ci-dessus reste intact (WCAG 2.4.7). */
:where(.fl-builder-content, .fl-page) :is(a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus:not(:focus-visible) {
	outline: none;
}

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

/* ----------------------------------------------------------------------------
   5. Utilitaires de fond de section
   `hal-row--*` se pose en classe custom sur la row, jamais en pseudo-classe
   structurelle (piège n° 7 : :nth-child casse dans l'éditeur BB).
   ---------------------------------------------------------------------------- */

.hal-row--creme      > .fl-row-content-wrap { background-color: var(--hal-creme); }
.hal-row--gris       > .fl-row-content-wrap { background-color: var(--hal-gris); }
.hal-row--beige      > .fl-row-content-wrap { background-color: var(--hal-beige); }
.hal-row--terracotta > .fl-row-content-wrap { background-color: var(--hal-terracotta); }
.hal-row--marron     > .fl-row-content-wrap { background-color: var(--hal-marron); }

.hal-row--terracotta,
.hal-row--marron {
	color: var(--hal-creme);
}

.hal-row--terracotta h1, .hal-row--terracotta h2, .hal-row--terracotta h3,
.hal-row--terracotta h4, .hal-row--terracotta h5, .hal-row--terracotta h6,
.hal-row--marron h1, .hal-row--marron h2, .hal-row--marron h3,
.hal-row--marron h4, .hal-row--marron h5, .hal-row--marron h6 {
	color: var(--hal-creme);
}

/* ----------------------------------------------------------------------------
   6. Cibles tactiles — WCAG 2.2 AA, critère 2.5.8 (24 × 24 CSS minimum)
   Un lien de texte dans un paragraphe fait la hauteur de sa ligne : 19 px pour
   le « LinkedIn » du footer. La contrainte ne porte pas sur la taille visible
   mais sur la surface cliquable, d'où le padding vertical compensé par une
   marge négative : la zone grandit, la ligne ne bouge pas.
   ---------------------------------------------------------------------------- */

.hal-footer a:not(.fl-button):not([class*="fl-"]) {
	display: inline-block;
	padding-block: 3px;
	margin-block: -3px;
	min-height: 24px;
}

/* --- Pas de rectangle gris au toucher (19/08/2026) ------------------------
   Sur mobile, WebKit peint un aplat translucide sur tout élément touché. Sur
   des liens de navigation posés sur des aplats de marque, cela produit un
   rectangle gris parasite à chaque appui.

   On le retire, mais on ne touche pas au focus clavier : `:focus-visible` reste
   entièrement visible, c'est lui qui rend le site utilisable sans souris. On
   neutralise seulement le contour du focus NON visible, celui que certains
   navigateurs posaient encore après un appui tactile. */
a, button, [role="button"], input, select, textarea, .fl-button, summary {
	-webkit-tap-highlight-color: transparent;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.fl-button:focus:not(:focus-visible) {
	outline: none;
}

/* ----------------------------------------------------------------------------
   7. Newsletter remplacée par un bouton « Nous contacter » (06/11/2026)
   Rendu par [ht_newsletter] et [ht_newsletter_action] (includes/ht-blog.php)
   tant que HT_NEWSLETTER_CONTACT vaut true. Copie du bouton or des modules BB
   du site (settings des specs : fond #FFC201, texte #5B2020, contour 2 px de la
   couleur du fond, rayon 8, padding 17/26 puis 14/22, 18 px puis 16 px) et de
   son survol (fond #FFFDF6, contour marron). Lien produit par un shortcode,
   donc pas un champ éditable dans le constructeur : R5 respectée.
   ---------------------------------------------------------------------------- */

.fl-builder-content a.ht-news-contact {
	display: inline-block;
	padding: 17px 26px;
	border: 2px solid var(--hal-gold);
	border-radius: var(--hal-radius-md);
	background-color: var(--hal-gold);
	color: var(--hal-marron);
	font-family: var(--hal-font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 18px;
	text-decoration: none;
	text-align: center;
}

.fl-builder-content a.ht-news-contact:hover,
.fl-builder-content a.ht-news-contact:focus-visible {
	background-color: #FFFDF6;
	border-color: var(--hal-marron);
	color: var(--hal-marron);
	text-decoration: none;
}

@media (max-width: 992px) {
	.fl-builder-content a.ht-news-contact {
		padding: 14px 22px;
		font-size: 16px;
		line-height: 16px;
	}
}