/* swiss-jobagent/css/material-style.css */

/* Styles de base et importations */
body {
	font-family: 'Roboto', sans-serif;
	margin: 0;
	padding: 0; /* Le padding-bottom pour le footer est dans common.css */ 
	background-color: #f5f5f5; /* Fond général de la page */ 
	color: #333; 
	line-height: 1.6; 
}

/* Importation de la police Roboto et des icônes Material */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); 
@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); 

/* Règle générale pour les liens et titres : pas de soulignement */
a,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	text-decoration: none; 
}

/* Maintenir le soulignement au survol pour les liens des termes du formulaire si c'était intentionnel */
.form-terms a:hover { 
	text-decoration: underline; /* Rétablit le soulignement pour ce cas spécifique */ 
}


.container {
	width: 90%; 
	max-width: 1000px; /* Ajusté pour la page d'accueil */ 
	margin: 0 auto; /* Centrage */ 
	padding: 20px 0; 
}
@media (min-width: 768px) { 
	.container { 
		padding: 30px 0; 
	}
}


/* Barre d'application */
.app-bar {
	background-color: #6200ee; /* Couleur primaire Material Purple */ 
	color: #ffffff; 
	padding: 0 16px; /* Padding horizontal */ 
	box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
	position: sticky; 
	top: 0; 
	z-index: 1000; 
}
.app-bar-container {
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	min-height: 56px; /* Hauteur standard mobile */ 
	max-width: 1200px; /* Pour aligner avec le contenu global si besoin */ 
	margin: 0 auto; 
	width: 100%; 
}
@media (min-width: 768px) { 
	.app-bar-container { 
		min-height: 64px; /* Hauteur standard desktop */ 
	}
}

.app-bar .logo {
	font-size: 1.5em; /* 24sp */ 
	font-weight: 500; 
	letter-spacing: 0.5px; 
	display: flex; /* Pour aligner l'image et le texte */
	align-items: center; /* Alignement vertical */
}
.app-bar .logo img {
	height: 50px;
	vertical-align: middle;
	margin-right: 8px;
}

/* Bouton Hamburger */
.hamburger-menu {
	display: none; /* Caché par défaut, affiché sur mobile via media query */
	background: none;
	border: none;
	color: #ffffff;
	cursor: pointer;
	padding: 8px;
	/* margin-left: auto; Retiré pour permettre à justify-content: space-between de fonctionner */
}
.hamburger-menu .material-icons {
	font-size: 28px;
	vertical-align: middle;
}

.app-bar nav { /* ID main-nav peut aussi être utilisé #main-nav */
	display: flex; 
	align-items: center;
}

.app-bar nav a {
	color: #ffffff; 
	margin-left: 20px; 
	padding: 8px 10px; 
	font-weight: 500; 
	border-radius: 4px; 
	transition: background-color 0.2s ease; 
}
.app-bar nav a:hover, .app-bar nav a:focus { 
	background-color: rgba(255,255,255,0.12); 
}
.btn-flat-inverse { /* Pour les liens dans l'app-bar */ 
	color: #ffffff; 
	background-color: transparent; 
}
.btn-flat-inverse:hover, .btn-flat-inverse:focus { 
	background-color: rgba(255,255,255,0.1); 
}

/* Styles pour Mobile (max-width: 767px) */
@media (max-width: 767px) {
	.app-bar .logo {
		font-size: 1em; 
	}
	.app-bar .logo img {
		height: 25px; 
		margin-right: 6px; 
	}
	.app-bar-container {
		padding: 0 8px; 
	}

	.hamburger-menu {
		display: block; /* Afficher le hamburger sur mobile */
	}

	.app-bar nav { /* Cible la navigation pour mobile */
		display: none; /* Cacher la nav par défaut sur mobile */
		flex-direction: column;
		align-items: stretch; /* Les liens prennent toute la largeur */
		position: absolute;
		top: 56px; /* Hauteur de l'app-bar mobile, à ajuster si l'app-bar change de hauteur */
		left: 0;
		right: 0;
		background-color: #5a00d2; /* Légèrement plus foncé pour distinguer du header */
		box-shadow: 0 3px 5px rgba(0,0,0,0.2);
		padding: 8px 0; 
		z-index: 999; 
	}

	.app-bar nav.nav-open { /* Classe pour afficher le menu */
		display: flex;
	}

	.app-bar nav a {
		margin: 0; 
		padding: 12px 20px; /* Padding pour les items du menu déroulant */
		border-bottom: 1px solid rgba(255,255,255,0.1); 
		text-align: left;
		width: 100%;
		box-sizing: border-box;
		border-radius: 0; /* Pas de coins arrondis dans le menu déroulant */
	}
	.app-bar nav a:last-child {
		border-bottom: none;
	}
	.app-bar nav a:hover, .app-bar nav a:focus {
		background-color: rgba(255,255,255,0.15); 
	}
}


/* Section Héros */
.hero-section {
	/* background-color: #7e57c2; */ /* Commentez ou supprimez l'ancienne couleur de fond */
	background-image: url('/images/hero-background.webp'); /* Chemin vers votre nouvelle image */
	background-size: cover; /* Assure que l'image couvre toute la section */
	background-position: center center; /* Centre l'image dans la section */
	background-repeat: no-repeat; /* Empêche la répétition de l'image */
	color: #ffffff; /* Gardez le texte en blanc, ajustez si nécessaire */
	padding: 30px 20px; /* Augmentez le padding pour mieux voir l'image et donner de l'espace */
	text-align: center;
	position: relative; /* Nécessaire pour le pseudo-élément d'overlay */
}

/* Ajout d'un overlay semi-transparent pour améliorer la lisibilité du texte */
.hero-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(40, 20, 80, 0.4); /* Overlay violet foncé semi-transparent. Ajustez la couleur et l'opacité (0.0 à 1.0) selon vos goûts et la lisibilité. */
	z-index: 1; /* Place l'overlay derrière le contenu */
}

.hero-section .container { /* Assurez-vous que le contenu (texte, boutons) est au-dessus de l'overlay */
	position: relative;
	padding:0px;
	z-index: 2;
}

.hero-section h1 {
	font-size: 2.8em; /* Légèrement plus grand pour l'impact */
	font-weight: 500;
	margin-bottom: 20px; 
	line-height: 1.2;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.3); /* Ombre portée pour le texte principal */
}

.hero-section .subtitle {
	font-size: 1.2em; 
	font-weight: 300;
	max-width: 750px; /* Un peu plus large si besoin */
	margin: 0 auto 20px auto; /* Plus de marge en bas avant le bouton */
	line-height: 1.7;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Ombre portée légère pour le sous-titre */
}

@media (max-width: 768px) { 
	.hero-section {
		padding: 10px 20px; /* Ajustez le padding pour mobile */
	}
	.hero-section h1 { 
		font-size: 2.2em; 
	}
	.hero-section .subtitle { 
		font-size: 1.1em; 
	}
}

/* Section Inscription */
.registration-section {
	padding-top: 30px; 
	padding-bottom: 30px; 
}

/* Cartes Material */
.material-card {
	background-color: #ffffff; 
	border-radius: 8px; /* Un peu plus arrondi */ 
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 
				0 3px 1px -2px rgba(0, 0, 0, 0.06), 
				0 1px 5px 0 rgba(0, 0, 0, 0.10); 
	margin-bottom: 20px; 
	overflow: hidden; /* Important pour les effets comme ripple ou si le contenu dépasse le radius */ 
}
.material-card .card-content {
	padding: 24px; 
}
@media (min-width: 768px) { 
	.material-card .card-content { 
		padding: 32px; 
	}
}
.material-card .card-title {
	font-size: 1.75em; /* 28sp */ 
	font-weight: 500; 
	line-height: 1.35; 
	margin-bottom: 24px; 
	color: #333; 
	text-align: center; 
}

/* Styles pour le conteneur des résultats sur le dashboard */
.dashboard-results-container {
	background-color: transparent !important; /* Enlève le fond blanc */ 
	box-shadow: none !important; /* Enlève l'ombre */ 
	margin-bottom: 0 !important; /* Enlève la marge du bas si ce n'est plus une "carte" */ 
	border-radius: 0; 
}

/* Styles pour la liste des offres d'emploi */
ul.job-listing {
	list-style-type: none; 
	padding: 0; 
	margin: 0; 
	background: transparent; 
	border: none; 
	box-shadow: none; 
}

/* Styles pour chaque élément d'offre d'emploi (qui est une material-card) */
li.job-item.material-card {
	margin-bottom: 24px; 
	padding: 0; 
}


/* Champs de formulaire Material */
.form-group {
	margin-bottom: 24px; 
	position: relative; 
	padding-top: 16px; 
}

.form-group label {
	font-size: 16px; 
	color: rgba(0,0,0,0.6); 
	position: absolute; 
	top: 26px; /* Position initiale, au milieu du champ */
	left: 0; 
	pointer-events: none; 
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* Ces sélecteurs font "flotter" le libellé */
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label, /* Quand il y a du contenu ou que le placeholder vide est focus */
.form-group input.has-value + label, /* Classe JS pour les champs avec valeur (préremplissage serveur/JS) */
.form-group input:-webkit-autofill + label, /* Spécifique pour Chrome/Safari autofill */
.form-group input:autofill + label, /* Standard (moins de support, mais bon à avoir) */
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label,
.form-group textarea.has-value + label,
.form-group select.material-select:focus + label,
.form-group select.material-select.has-value + label,
.form-group select.material-select:not([value=""]) + label { /* Pour les selects avec une valeur sélectionnée */
	top: 0; /* Nouvelle position, au-dessus du champ */
	font-size: 12px; 
	color: #6200ee; 
}

/* Optionnel: Styles pour l'apparence des champs auto-remplis par le navigateur (souvent fond jaune/bleu) */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group input:-webkit-autofill:active {
	/* Le formulaire de connexion est dans une .material-card qui a un fond blanc */
	-webkit-box-shadow: 0 0 0 30px #ffffff inset !important; /* Force un fond blanc */
	/* Si le texte de l'autofill est difficile à lire, vous pouvez forcer sa couleur : */
	/* -webkit-text-fill-color: #333 !important; */
	transition: background-color 5000s ease-in-out 0s; /* Astuce pour éviter le changement de couleur de fond persistant */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="file"],
.form-group input[type="number"],
.form-group textarea,
.form-group select.material-select {
	width: 100%; 
	padding: 8px 0; 
	font-size: 16px; 
	line-height: 1.5; 
	border: none; 
	border-bottom: 1px solid rgba(0,0,0,0.42); 
	background-color: transparent; 
	transition: border-bottom-color 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
	box-sizing: border-box; 
	border-radius: 0; 
	appearance: none; 
	-webkit-appearance: none; 
	-moz-appearance: none; 
}

.form-group select.material-select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(0,0,0,0.54)'%3e%3cpath d='M7 10l5 5 5-5H7z'/%3e%3c/svg%3e"); 
	background-repeat: no-repeat; 
	background-position: right 0.5em center; 
	background-size: 1.2em; 
	padding-right: 2em; 
}
/* Retirer le style select pour les checkbox */
.form-group .checkbox-group select.material-select {
	background-image: none;
	padding-right: 0;
}


.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="file"]:focus,
.form-group input[type="number"]:focus,
.form-group textarea:focus,
.form-group select.material-select:focus {
	outline: none; 
	border-bottom: 2px solid #6200ee; 
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label, 
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label,
.form-group input.has-value + label, 
.form-group textarea.has-value + label, 
.form-group select.material-select:focus + label,
.form-group select.material-select.has-value + label { 
	top: 0; 
	font-size: 12px; 
	color: #6200ee; 
}
.form-group select.material-select:not([value=""]) + label { 
	top: 0; 
	font-size: 12px; 
	color: #6200ee; 
}


.form-group label.static-label {
	position: static; 
	transform: none; 
	font-size: 12px; 
	color: rgba(0,0,0,0.6); 
	display: block; 
	margin-bottom: 4px; 
	padding-top: 0; 
}
.form-group:has(label.static-label) {
	padding-top: 0; /* Moins de padding-top si le label est statique au-dessus */ 
}


.form-group input[type="file"] {
	border-bottom: none; 
	padding-top: 8px; 
}

.form-group input[type="file"]:focus + label.static-label,
.form-group select.material-select:focus ~ label.static-label { 
}


/* Groupe de cases à cocher pour les cantons */
.checkbox-group {
	border: 1px solid rgba(0,0,0,0.12); 
	padding: 10px; 
	border-radius: 4px; 
}
/* Nouvelle classe pour forcer la mise en colonnes */
.checkbox-group-columns {
	column-count: 2; /* Par défaut sur 2 colonnes */ 
	column-gap: 10px; 
}


.checkbox-group div { 
	break-inside: avoid-column; /* Éviter qu'un item soit coupé entre deux colonnes */ 
	margin-bottom: 8px; 
	display: block; /* Assurer que chaque item prend sa propre ligne dans la colonne */ 
}

.checkbox-group input[type="checkbox"] {
	width: auto; 
	margin-right: 8px; 
	vertical-align: middle; 
	border-bottom: none;  
	padding: 0; 
	appearance: checkbox; /* Forcer l'apparence native */ 
	-webkit-appearance: checkbox; 
	-moz-appearance: checkbox; 
}
.checkbox-group label {
	position: relative; 
	transform: none; 
	font-size: 1em; /* Ajuster si nécessaire */ 
	color: rgba(0,0,0,0.87); 
	vertical-align: middle; 
	top: auto; 
	left: auto; 
	pointer-events: auto; 
}


@media (min-width: 768px) { 
	.checkbox-group-columns { 
		column-count: 3; 
	}
}
@media (max-width: 500px) { 
	.checkbox-group-columns { 
		column-count: 1; 
	}
}


/* Fieldset pour CV */
.cv-fieldset {
	border: 1px solid rgba(0,0,0,0.12); 
	padding: 16px; 
	margin: 24px 0; 
	border-radius: 4px; 
}
.cv-fieldset legend {
	font-size: 1em; 
	font-weight: 500; 
	padding: 0 8px; 
	color: rgba(0,0,0,0.87); 
}
.cv-fieldset .fieldset-description {
	font-size: 0.875em; 
	color: rgba(0,0,0,0.6); 
	margin-bottom: 8px; 
}
.separator-text {
	text-align: center; 
	margin: 16px 0; 
	font-weight: 500; 
	color: rgba(0,0,0,0.6); 
}

/* Messages d'erreur et de succès */
.error-text {
	display: block; 
	color: #d9534f; /* Rouge erreur */ 
	font-size: 0.875em; /* 14sp */ 
	margin-top: 4px; 
	min-height: 1.2em; 
}
.error-message-cv-general { margin-top: 10px; } 

.alert {
	display: flex; 
	align-items: center; 
	padding: 12px 16px; 
	margin-bottom: 20px; 
	border-radius: 4px; 
	font-size: 0.9em; 
}
.alert .material-icons {
	margin-right: 8px; 
	font-size: 1.2em; 
}
.alert-success {
	background-color: #e8f5e9; 
	color: #2e7d32; 
	border: 1px solid #a5d6a7; 
}
.alert-danger {
	background-color: #fce4ec; 
	color: #c2185b; 
	border: 1px solid #f8bbd0; 
}

.alert-info {
  background-color: #e3f2fd; /* très clair, ton bleu ciel */
  color: #1565c0;            /* bleu plus soutenu pour le texte */
  border: 1px solid #90caf9; /* bordure douce bleutée */
}


/* Boutons Material */
.btn {
	display: inline-block; 
	padding: 8px 16px; 
	font-size: 14px; 
	font-weight: 500; 
	text-transform: uppercase; 
	border: none; 
	border-radius: 4px; 
	cursor: pointer; 
	transition: background-color 0.2s ease, box-shadow 0.2s ease; 
	text-align: center; 
	min-width: 64px; 
	line-height: 1.75; /* Important pour l'alignement vertical du texte */ 
	letter-spacing: 0.02857em; 
	position: relative; 
	overflow: hidden; /* Pour l'effet ripple */ 
	vertical-align: middle; /* Pour aider à l'alignement avec d'autres éléments en ligne */ 
}
.btn-primary {
	background-color: #6200ee; 
	color: #ffffff; 
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); 
}
.btn-primary:hover, .btn-primary:focus { 
	background-color: #3700b3; 
	box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2); 
}
.btn-large {
	padding: 10px 24px; 
	font-size: 15px; 
}
.btn-small {
	padding: 6px 12px; 
	font-size: 13px; 
}


.form-actions {
	margin-top: 24px; 
	text-align: right; 
}
.form-terms {
	margin-top: 20px; 
	font-size: 0.8em; 
	color: #555; 
	text-align: center; 
}
.form-terms a {
	color: #6200ee; 
}

/* Styles pour la rangée de formulaire dans la carte de filtre (Dashboard) */
.material-card .form-row {
	display: flex; 
	flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */ 
	gap: 15px 20px;  /* Espace vertical et horizontal entre les .form-group et .form-actions */ 
	align-items: flex-end; /* Aligne les bas des .form-group et .form-actions */ 
}
.material-card .form-row .form-group {
	margin-bottom: 0; /* Le 'gap' du conteneur flex gère l'espacement */ 
}
.material-card .form-row .form-actions {
	margin-top: 0; /* Annule la marge standard si elle existe */ 
	text-align: left;  
}


/* Footer */
.site-footer {
	background-color: #333; 
	color: #bbb; 
	padding: 20px 0; 
	text-align: center; 
	font-size: 0.875em; 
}
.site-footer .container {
	padding-top: 0; 
	padding-bottom: 0; 
}
.site-footer p {
	margin: 0; 
}
.site-footer a {
	color: #bbb; 
}
.site-footer a:hover {
	text-decoration: underline; 
}


/* Ripple effect (CSS de base) */
.ripple-effect {
	position: absolute; 
	border-radius: 50%; 
	background: rgba(255, 255, 255, 0.4); 
	transform: scale(0); 
	animation: ripple-animation 0.6s linear; 
}
@keyframes ripple-animation { 
	to { 
		transform: scale(4); 
		opacity: 0; 
	}
}

/* Styles pour la zone de dépôt de CV */
.cv-drop-zone {
	border: 2px dashed rgba(0,0,0,0.23); 
	border-radius: 4px; 
	padding: 30px; 
	text-align: center; 
	background-color: #fafafa; 
	transition: border-color 0.3s ease, background-color 0.3s ease; 
	margin-bottom: 10px; 
}
.cv-drop-zone.dragover {
	border-color: #6200ee; 
	background-color: #f3e5f5; 
}
.cv-drop-zone-instructions {
	color: rgba(0,0,0,0.6); 
}
.cv-drop-zone-instructions i.material-icons {
	font-size: 48px; 
	margin-bottom: 10px; 
	color: #6200ee; 
}
.cv-drop-zone-instructions p {
	margin: 5px 0; 
	font-size: 0.9em; 
}
.cv-drop-zone .btn {
	margin-top: 10px; 
	background-color: #6200ee; 
	color: white; 
	padding: 8px 16px; 
}
.cv-drop-zone .btn:hover {
	background-color: #3700b3; 
}

/* Pour cacher l'input file réel mais le garder accessible */
.visually-hidden {
	position: absolute !important; 
	height: 1px; 
	width: 1px; 
	overflow: hidden; 
	clip: rect(1px, 1px, 1px, 1px); 
	white-space: nowrap; 
}

.cv-file-info {
	margin-top: 15px; 
	font-size: 0.9em; 
	color: #333; 
}
.cv-file-info .file-name {
	font-weight: 500; 
}
.cv-file-info .file-size {
	color: #777; 
	margin-left: 10px; 
}
.cv-file-info .remove-file {
	margin-left: 15px; 
	color: #d9534f; 
	cursor: pointer; 
	font-weight: 500; 
}
.cv-file-info .remove-file:hover {
	text-decoration: underline; 
}


/* Ajustements pour les pages d'étapes */
.registration-section .card-title { 
	margin-bottom: 16px; 
}
.registration-section .center-align {
	text-align: center; 
	margin-bottom: 20px; 
	color: rgba(0,0,0,0.6); 
}
.form-actions .btn i.material-icons {
	line-height: inherit; 
	font-size: 1.2em; /* S'assurer que les icônes dans les boutons sont bien dimensionnées */ 
	vertical-align: text-bottom; /* ou middle, selon le rendu souhaité */ 
}

/* Styles pour le placeholder de la textarea CV */
#cv_text_paste::placeholder {
  color: rgba(0,0,0,0.38); 
  opacity: 1; /* Firefox */ 
}

/* Styles pour les boutons "active" dans announce_detail_content.php et dashboard */
.btn-primary-active {
	background-color: #2e7d32 !important; /* Vert foncé pour indiquer l'état actif "intéressé" */ 
}
.btn-danger-active {
	background-color: #c62828 !important; /* Rouge foncé pour indiquer l'état actif "pas intéressé" */ 
}
.btn-info-active {
	background-color: #0277bd !important; /* Bleu foncé pour indiquer l'état actif "j'ai postulé" */ 
}

/* Styles pour la pagination */
.pagination-container {
	margin-top: 30px; 
	text-align: center; 
}
.pagination {
	display: inline-flex; 
	list-style-type: none; 
	padding-left: 0; 
	margin: 20px 0; 
	border-radius: 4px; 
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
	overflow: hidden; 
}
.pagination li {
	display: inline; 
}
.pagination .btn.pagination-btn {
	padding: 8px 12px; 
	font-size: 14px; 
	font-weight: 500;  
	text-transform: none;  
	border-radius: 0; 
	border: none; 
	border-right: 1px solid #ddd; 
	background-color: #ffffff; 
	color: #6200ee; 
	text-decoration: none; 
	transition: background-color 0.2s ease; 
	line-height: 1.5; 
	min-width: auto;  
}
.pagination li:last-child .btn.pagination-btn { 
	border-right: none; 
}
.pagination .btn.pagination-btn:hover { 
	background-color: #f0e6ff; 
}
.pagination .btn.pagination-btn.active {
	background-color: #6200ee; 
	color: #ffffff; 
	cursor: default; 
}
.pagination .btn.pagination-btn.disabled {
	background-color: #f5f5f5; 
	color: #aaa; 
	cursor: not-allowed; 
	pointer-events: none; 
}

/* Styles pour les Modales */
.modal {
	display: none; 
	position: fixed; 
	z-index: 1050; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%; 
	overflow: auto; 
	background-color: rgba(0,0,0,0.5); 
	padding-top: 60px; 
}
.modal-content { /* Le conteneur de la modale est une carte Material */
	background-color: #fff;
	margin: 5% auto; 
	padding: 0; /* Padding géré par .card-content à l'intérieur */
	border-radius: 8px;
	max-width: 500px; 
	position: relative;
	animation-name: animatetop;
	animation-duration: 0.4s
}
@keyframes animatetop {
	from {top: -300px; opacity: 0}
	to {top: 0; opacity: 1}
}
.modal-actions { /* Réutilise .form-actions ou peut être spécifique */
	margin-top: 20px;
	text-align: right;
}
.modal-actions .btn {
	margin-left: 8px; 
}