/**
 * ANAVA Components
 * Styles réutilisables : boutons, cartes, formulaires, etc.
 */

/* ============================================
   BOUTONS
   ============================================ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	height: var(--btn-height);
	padding: var(--btn-padding-y) var(--btn-padding-x);
	font-size: var(--btn-font-size);
	font-weight: var(--btn-font-weight);
	font-family: var(--font-sans);
	border: none;
	border-radius: var(--btn-border-radius);
	cursor: pointer;
	transition: var(--btn-transition);
	text-decoration: none;
	white-space: nowrap;
	user-select: none;
	text-align: center;

	/* Focus visible pour accessibilité */
	&:focus-visible {
		outline: var(--focus-outline-width) solid var(--focus-outline-color);
		outline-offset: var(--focus-outline-offset);
	}
}

/* Primary (Coral) */
.btn-primary {
	background-color: var(--btn-primary-bg);
	color: var(--btn-primary-color);
	border: none;
}

.btn-primary:hover {
	background-color: var(--btn-primary-hover-bg);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.btn-primary:active {
	transform: translateY(0);
	box-shadow: var(--shadow-md);
}

.btn-primary:disabled {
	background-color: var(--btn-disabled-bg);
	color: var(--btn-disabled-color);
	cursor: var(--btn-disabled-cursor);
	opacity: var(--btn-disabled-opacity);
	transform: none;
}

/* Secondary (Outline) */
.btn-secondary {
	background-color: var(--btn-secondary-bg);
	color: var(--btn-secondary-color);
	border: var(--btn-secondary-border);
}

.btn-secondary:hover {
	background-color: var(--btn-secondary-hover-bg);
	transform: translateY(-2px);
}

.btn-secondary:active {
	transform: translateY(0);
}

.btn-secondary:disabled {
	color: var(--btn-disabled-color);
	border-color: var(--btn-disabled-bg);
	cursor: var(--btn-disabled-cursor);
	opacity: var(--btn-disabled-opacity);
}

/* Tertiary (Text link) */
.btn-tertiary {
	background-color: var(--btn-tertiary-bg);
	color: var(--btn-tertiary-color);
	border: none;
	height: auto;
	padding: 0;
	text-decoration: var(--btn-tertiary-text-decoration);
}

.btn-tertiary:hover {
	color: var(--btn-tertiary-hover-color);
}

/* Size variants */
.btn-sm {
	height: var(--btn-height-sm);
	padding: 8px 16px;
	font-size: 14px;
}

.btn-lg {
	height: 56px;
	padding: 16px 32px;
	font-size: 18px;
}

/* Full width */
.btn-block {
	display: flex;
	width: 100%;
}

/* Icon only */
.btn-icon {
	height: var(--btn-height);
	width: var(--btn-height);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
}

/* ============================================
   CARTES EXPÉRIENCES
   ============================================ */

.card-experience {
	background-color: var(--color-bg-light);
	border-radius: var(--card-border-radius);
	overflow: hidden;
	transition: var(--transition-base);
	box-shadow: var(--shadow-sm);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.card-experience:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}

.card-experience__image {
	width: 100%;
	height: 240px;
	object-fit: cover;
	display: block;
}

.card-experience__content {
	padding: var(--spacing-xl);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.card-experience__label {
	display: inline-block;
	background-color: var(--color-accent-teal);
	color: var(--color-text-white);
	padding: 6px 12px;
	border-radius: var(--radius-md);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: var(--spacing-md);
	width: fit-content;
}

.card-experience__title {
	font-family: var(--font-serif);
	font-size: var(--h3-size-desktop);
	font-weight: 600;
	color: var(--color-primary);
	margin: 0 0 var(--spacing-md) 0;
	line-height: 1.25;
}

.card-experience__description {
	font-size: var(--small-size);
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin: 0 0 var(--spacing-lg) 0;
	flex: 1;
}

.card-experience__link {
	color: var(--color-accent-teal);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color var(--transition-base);
}

.card-experience__link:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.card-experience__link::after {
	content: "→";
	transition: transform var(--transition-base);
}

.card-experience:hover .card-experience__link::after {
	transform: translateX(4px);
}

/* ============================================
   FORMULAIRES
   ============================================ */

.form-group {
	margin-bottom: var(--spacing-xl);
}

.form-group--last {
	margin-bottom: 0;
}

label {
	display: block;
	font-size: var(--label-font-size);
	font-weight: var(--label-font-weight);
	color: var(--label-color);
	margin-bottom: var(--label-margin-bottom);
}

label.required::after {
	content: " *";
	color: var(--color-error);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
textarea,
select {
	width: 100%;
	padding: var(--input-padding);
	font-size: var(--input-font-size);
	font-family: inherit;
	border: var(--input-border-width) solid var(--input-border-color);
	border-radius: var(--input-border-radius);
	background-color: var(--color-bg-light);
	color: var(--color-text-primary);
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
	appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
	outline: var(--input-focus-outline);
	border-color: var(--input-focus-border-color);
	box-shadow: var(--input-focus-shadow);
}

textarea {
	resize: vertical;
	min-height: 120px;
	font-family: inherit;
}

select {
	cursor: pointer;
	padding-right: 32px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23062B43' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px;
}

/* État d'erreur */
.form-group--error input,
.form-group--error textarea,
.form-group--error select {
	border-color: var(--input-error-border-color);
	background-color: var(--input-error-bg);
}

.form-group--error input:focus,
.form-group--error textarea:focus,
.form-group--error select:focus {
	border-color: var(--input-error-border-color);
	box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}

.form-error {
	display: block;
	color: var(--color-error);
	font-size: 12px;
	font-weight: 600;
	margin-top: 6px;
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
	width: 20px;
	height: 20px;
	margin-right: var(--spacing-sm);
	cursor: pointer;
	vertical-align: middle;
	accent-color: var(--color-accent-teal);
}

.form-check {
	display: flex;
	align-items: flex-start;
	margin-bottom: var(--spacing-lg);
	gap: var(--spacing-sm);
}

.form-check label {
	margin-bottom: 0;
	font-weight: 400;
	cursor: pointer;
}

/* ============================================
   SECTIONS
   ============================================ */

.section {
	padding: var(--section-spacing-desktop) 0;
}

.section--navy {
	background-color: var(--color-primary);
	color: var(--color-text-white);
}

.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 {
	color: var(--color-text-white);
}

.section--deep-navy {
	background-color: var(--color-primary-dark);
	color: var(--color-text-white);
}

.section--deep-navy h1,
.section--deep-navy h2,
.section--deep-navy h3,
.section--deep-navy h4 {
	color: var(--color-text-white);
}

.section--mist {
	background-color: var(--color-mist);
}

.section--sand {
	background-color: var(--color-sand);
}

.section--light {
	background-color: var(--color-bg-light);
}

/* ============================================
   GRILLE
   ============================================ */

.grid {
	display: grid;
	gap: var(--spacing-2xl);
	width: 100%;
}

.grid--2-cols {
	grid-template-columns: repeat(2, 1fr);
}

.grid--3-cols {
	grid-template-columns: repeat(3, 1fr);
}

.grid--4-cols {
	grid-template-columns: repeat(4, 1fr);
}

.grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* ============================================
   FLEXBOX
   ============================================ */

.flex {
	display: flex;
	gap: var(--spacing-lg);
}

.flex--center {
	align-items: center;
	justify-content: center;
}

.flex--between {
	align-items: center;
	justify-content: space-between;
}

.flex--column {
	flex-direction: column;
}

.flex--gap-sm {
	gap: var(--spacing-sm);
}

.flex--gap-md {
	gap: var(--spacing-md);
}

.flex--gap-lg {
	gap: var(--spacing-lg);
}

.flex--gap-xl {
	gap: var(--spacing-xl);
}

/* ============================================
   UTILS
   ============================================ */

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mt-3xl { margin-top: var(--spacing-3xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }
.mb-3xl { margin-bottom: var(--spacing-3xl); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-white { color: var(--color-text-white); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-teal { color: var(--color-accent-teal); }
.text-coral { color: var(--color-accent-coral); }

.bg-white { background-color: var(--color-bg-light); }
.bg-navy { background-color: var(--color-primary); }
.bg-mist { background-color: var(--color-mist); }
.bg-sand { background-color: var(--color-sand); }

.hidden { display: none; }
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}