/* =====================================================================================================
   DESIGN — forme et comportement des éléments (espace client + back-office), chargé après Bootstrap
   et les feuilles du site.
   AUCUNE COULEUR NOUVELLE : chaque élément garde la couleur de la charte actuelle (Bootstrap, styles.css,
   styles_ext.css pour la marque blanche). Ce fichier ne règle que les arrondis, ombres, espacements,
   états (survol, clic, focus, désactivé, envoi en cours) et animations.
   Ombres et voiles : noir transparent uniquement (neutre, valable sur toutes les couleurs).
   Planche de validation : DEV-OPTIM-ESPACE-CLIENT.md (Design).
   ===================================================================================================== */

:root {
	--d-radius-sm:   10px;    /* boutons, champs, alertes */
	--d-radius:      14px;   /* cartes / rubriques */
	--d-radius-lg:   18px;   /* fenêtres */
	--d-radius-pill: 999px;  /* pastilles */

	--d-shadow-1: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .08);
	--d-shadow-2: 0 4px 12px rgba(0, 0, 0, .10), 0 2px 4px rgba(0, 0, 0, .06);
	--d-shadow-3: 0 16px 40px rgba(0, 0, 0, .18), 0 4px 10px rgba(0, 0, 0, .08);

	--d-ease: cubic-bezier(.2, .8, .2, 1);
	--d-fast: .15s;
	--d-med:  .25s;
}


/* ---------- BOUTONS ---------- */
.btn {
	border-radius: var(--d-radius-sm);
	font-weight: 500;
	padding-left: 1.05rem; padding-right: 1.05rem;  /* hauteur Bootstrap gardée : alignée avec les champs */
	box-shadow: var(--d-shadow-1);
	transition: transform var(--d-fast) var(--d-ease), box-shadow var(--d-fast) var(--d-ease),
	            background-color var(--d-fast), border-color var(--d-fast), color var(--d-fast), opacity var(--d-fast);
}
.btn-sm { border-radius: calc(var(--d-radius-sm) - 2px); padding-left: .75rem; padding-right: .75rem; }
.btn-lg { border-radius: var(--d-radius); padding-left: 1.5rem; padding-right: 1.5rem; }

.btn:not(:disabled):not(.disabled):hover  { transform: translateY(-1px); box-shadow: var(--d-shadow-2); }
.btn:not(:disabled):not(.disabled):active { transform: translateY(0) scale(.98); box-shadow: var(--d-shadow-1); }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.btn:disabled, .btn.disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }

/* liens et boutons « texte » : pas de relief */
.btn-link, .btn-link:hover, .btn.text-primary, .btn.text-danger { box-shadow: none !important; transform: none !important; }

/* bouton à contour : fond qui apparaît doucement */
[class*="btn-outline-"] { box-shadow: none; }

/* envoi en cours (formSendStart / formSendXhr, common.js) : remplissage = progression de l'envoi,
   reflet animé tant qu'elle n'est pas connue. Fonctionne aussi sur <input type="submit"> */
.btn.is-loading {
	position: relative;
	cursor: progress;
	opacity: 1 !important;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, .28) var(--d-progress, 0%), transparent 0) !important;
}
.btn.is-loading:not(.has-progress) {
	background-image: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .32) 50%, transparent 80%) !important;
	background-size: 200% 100% !important;
	animation: d-shimmer 1.1s linear infinite;
}
/* <button> : roue intégrée (Bootstrap .spinner-border) */
.btn .spinner-border { width: 1em; height: 1em; border-width: .15em; vertical-align: -.15em; margin-right: .45em; }


/* ---------- CHAMPS ---------- */
.form-control, .custom-select, .custom-file-label, .input-group-text {
	border-radius: var(--d-radius-sm);
	transition: border-color var(--d-fast), box-shadow var(--d-fast), background-color var(--d-fast);
}
.form-control:not(:disabled):not([readonly]):hover, .custom-select:not(:disabled):hover { border-color: rgba(0, 0, 0, .28); }
.form-control-sm, .custom-select-sm { border-radius: calc(var(--d-radius-sm) - 2px); }
.custom-file-label::after { border-radius: 0 calc(var(--d-radius-sm) - 1px) calc(var(--d-radius-sm) - 1px) 0; }
.custom-control-label::before { transition: background-color var(--d-fast), border-color var(--d-fast), box-shadow var(--d-fast); }
.custom-checkbox .custom-control-label::before { border-radius: 5px; }


/* ---------- CARTES / RUBRIQUES ---------- */
.card {
	border-radius: var(--d-radius);
	box-shadow: var(--d-shadow-1);
	transition: box-shadow var(--d-med) var(--d-ease), border-color var(--d-med);
}
.card.shadow { box-shadow: var(--d-shadow-1) !important; }
.card:hover { box-shadow: var(--d-shadow-2); }
.card.shadow:hover { box-shadow: var(--d-shadow-2) !important; }
.card > .card-header:first-child { border-radius: calc(var(--d-radius) - 1px) calc(var(--d-radius) - 1px) 0 0; }
.card > .card-footer:last-child  { border-radius: 0 0 calc(var(--d-radius) - 1px) calc(var(--d-radius) - 1px); }
/* carte repliée (dashboard, rubriques fermées) : l'en-tête seul prend tout l'arrondi, sans trait en bas */
.card > .card-header:only-child,
.card > .card-header:first-child:has(+ .collapse:not(.show):last-child) { border-radius: calc(var(--d-radius) - 1px); border-bottom: 0; }
.card > .list-group:first-child .list-group-item:first-child { border-radius: calc(var(--d-radius) - 1px) calc(var(--d-radius) - 1px) 0 0; }
.card-body { padding: 1.35rem; }


/* encadrés d'information (accueil client : statut, région de signature, AJ, attestation… ; « border p-3 ») */
.info-div, .border.p-3 {
	border-radius: var(--d-radius);
	box-shadow: var(--d-shadow-1);
}


/* ---------- ALERTES / MESSAGES ---------- */
.alert {
	border-radius: var(--d-radius-sm);
	border-width: 0 0 0 4px;          /* liseré de la couleur du texte de l'alerte (celle de Bootstrap / du thème) */
	border-left-color: currentColor;
	box-shadow: var(--d-shadow-1);
	animation: d-in var(--d-med) var(--d-ease);
}
.alert .fa:first-child { margin-right: .35em; }


/* ---------- PASTILLES / ONGLETS / LISTES ---------- */
.badge { border-radius: var(--d-radius-pill); padding: .35em .7em; font-weight: 600; }
.nav-pills .nav-link { border-radius: var(--d-radius-sm); transition: background-color var(--d-fast), color var(--d-fast); }
.nav-pills .nav-link:not(.active):hover { background-color: rgba(0, 0, 0, .05); }
.nav-tabs .nav-link { border-radius: var(--d-radius-sm) var(--d-radius-sm) 0 0; transition: color var(--d-fast), background-color var(--d-fast); }
.tab-pane.active { animation: d-in var(--d-med) var(--d-ease); }
.list-group-item:first-child { border-top-left-radius: var(--d-radius-sm); border-top-right-radius: var(--d-radius-sm); }
.list-group-item:last-child  { border-bottom-left-radius: var(--d-radius-sm); border-bottom-right-radius: var(--d-radius-sm); }
.progress { border-radius: var(--d-radius-pill); height: .6rem; }
.progress-bar { border-radius: var(--d-radius-pill); transition: width var(--d-med) var(--d-ease); }


/* ---------- MENUS / FENÊTRES DE CONFIRMATION (bootbox) ---------- */
.dropdown-menu {
	border: 0;
	border-radius: var(--d-radius-sm);
	box-shadow: var(--d-shadow-2);
	padding: .4rem;
	animation: d-in var(--d-fast) var(--d-ease);
}
.dropdown-item { border-radius: calc(var(--d-radius-sm) - 3px); }
.modal-content { border: 0; border-radius: var(--d-radius-lg); box-shadow: var(--d-shadow-3); }
.modal-header, .modal-footer { border-color: rgba(0, 0, 0, .06); }
.modal-footer { gap: .5rem; }
.modal-footer > * { margin: 0; }
.modal.fade .modal-dialog { transform: translateY(12px) scale(.98); transition: transform var(--d-med) var(--d-ease); }
.modal.show .modal-dialog { transform: none; }
.modal-backdrop.show { opacity: .4; }
.modal-backdrop { backdrop-filter: blur(2px); }


/* ---------- NOTIFICATIONS (uiToast, common.js) ---------- */
.d-toasts {
	position: fixed;
	right: max(16px, env(safe-area-inset-right, 0px));
	bottom: max(16px, env(safe-area-inset-bottom, 0px));
	z-index: 2000;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	align-items: flex-end;
	pointer-events: none;
}
.d-toast {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: .65rem;
	max-width: min(380px, calc(100vw - 32px));
	padding: .75rem 1rem;
	border-radius: var(--d-radius);
	background: #fff;
	color: #212529;
	box-shadow: var(--d-shadow-3);
	animation: d-toast-in var(--d-med) var(--d-ease);
}
.d-toast .fa { font-size: 1.15rem; }
.d-toast.is-leaving { animation: d-toast-out .2s var(--d-ease) forwards; }


/* ---------- CHARGEMENT D'UN ONGLET (squelette) ---------- */
.d-skeleton { display: grid; gap: .75rem; padding: .5rem 0; }
.d-skeleton span {
	display: block;
	height: .9rem;
	border-radius: var(--d-radius-pill);
	background: linear-gradient(100deg, rgba(0, 0, 0, .06) 30%, rgba(0, 0, 0, .11) 50%, rgba(0, 0, 0, .06) 70%);
	background-size: 200% 100%;
	animation: d-shimmer 1.2s linear infinite;
}
.d-skeleton span.is-block { height: 5.5rem; border-radius: var(--d-radius); }
.d-skeleton span:nth-child(3n+2) { width: 82%; }
.d-skeleton span:nth-child(3n)   { width: 64%; }


/* ---------- ANIMATIONS ---------- */
@keyframes d-in        { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes d-toast-in  { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes d-toast-out { to { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes d-shimmer   { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
	.btn, .card, .alert, .dropdown-menu, .tab-pane.active, .d-toast, .modal.fade .modal-dialog { animation: none !important; transition: none !important; }
	.btn:not(:disabled):not(.disabled):hover, .btn:not(:disabled):not(.disabled):active { transform: none; }
	.btn.is-loading:not(.has-progress), .d-skeleton span { animation: none; }
}