/**
 * main.css — Typographie, layout utilitaires, composant bouton.
 *
 * Ce fichier définit les styles globaux réutilisables dans tout le thème.
 * Les styles spécifiques aux sections sont dans sections.css.
 * Les styles du header sont dans header.css.
 *
 * @package lafetecontinue-allianz
 */

/* ==========================================================================
   SKIP LINK (accessibilité)
   ========================================================================== */

.skip-link {
	position:      absolute;
	top:           -100%;
	left:          1rem;
	z-index:       9999;
	background:    var(--color-blue-primary);
	color:         var(--color-white);
	padding:       0.5rem 1rem;
	border-radius: var(--btn-radius);
	font-size:     var(--font-size-body);
	transition:    top var(--transition-base);
}

.skip-link:focus {
	top: 1rem;
}

/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */

h1 {
	font-family: var(--font-family-base);
	font-size:   var(--font-size-h1);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
}

h2 {
	font-family: var(--font-family-base);
	font-size:   var(--font-size-h2);
	font-weight: var(--font-weight-regular);
	line-height: 1.2;
}

h3 {
	font-family: var(--font-family-base);
	font-size:   var(--font-size-h3);
	font-weight: var(--font-weight-bold);
	line-height: 1.3;
}

p {
	font-size:   var(--font-size-body);
	line-height: var(--line-height-body);
}

strong,
b {
	font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   COMPOSANT : BOUTON
   Trois variantes : primary (bleu), light (bleu clair), white (sur fond sombre).
   ========================================================================== */

.btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         var(--btn-padding-y) var(--btn-padding-x);
	border-radius:   var(--btn-radius);
	font-family:     var(--font-family-base);
	font-size:       var(--btn-font-size);
	font-weight:     var(--font-weight-regular);
	line-height:     1;
	white-space:     nowrap;
	cursor:          pointer;
	border:          none;
	text-decoration: none;
	transition:      background-color var(--transition-base), opacity var(--transition-base);
}

/* Bleu primaire (défaut) */
.btn--primary {
	background-color: var(--color-blue-primary);
	color:            var(--color-white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background-color: #004e75;
}

/* Bleu clair */
.btn--light {
	background-color: var(--color-blue-light);
	color:            var(--color-white);
}

.btn--light:hover,
.btn--light:focus-visible {
	background-color: #0f87b3;
}

/* Blanc (sur fond sombre) */
.btn--white {
	background-color: var(--color-white);
	color:            var(--color-blue-dark);
}

.btn--white:hover,
.btn--white:focus-visible {
	background-color: var(--color-cyan-pale);
}

/* Focus visible accessible */
.btn:focus-visible {
	outline:        3px solid var(--color-yellow);
	outline-offset: 2px;
}

/* ==========================================================================
   UTILITAIRES WYSIWYG (contenu ACF)
   ========================================================================== */

.wysiwyg-content p {
	margin-bottom: var(--spacing-sm);
}

.wysiwyg-content p:last-child {
	margin-bottom: 0;
}

.wysiwyg-content ul,
.wysiwyg-content ol {
	list-style:    disc;
	padding-left:  1.5rem;
	margin-bottom: var(--spacing-sm);
}

.wysiwyg-content li {
	margin-bottom: var(--spacing-xs);
	line-height:   var(--line-height-body);
}

.wysiwyg-content strong {
	font-weight: var(--font-weight-bold);
}