body {
    font-family: var(--police-principale);
    font-size: var(--taille-texte-base);
    font-weight: var(--poids-normal);
    color: var(--couleur-texte-principal);
    background-color: var(--couleur-blanc);
    line-height: 1.6;
}

.conteneur-principal {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--couleur-blanc) 0%, var(--couleur-fond-secondaire) 100%);
}

.entete-formulaire {
    position: sticky;
    top: 0;
    z-index: var(--z-index-fixe);
    background-color: var(--couleur-blanc);
    border-bottom: 1px solid var(--couleur-bordure);
}

.entete-formulaire__logo {
    display: flex;
    justify-content: center;
    padding: var(--espacement-lg) var(--espacement-xl);
    background-color: var(--couleur-blanc);
}

.logo {
    height: 50px;
    width: auto;
}

.barre-progression {
    height: 4px;
    background-color: var(--couleur-gris-clair);
    overflow: hidden;
}

.barre-progression__remplissage {
    height: 100%;
    background: linear-gradient(90deg, var(--couleur-primaire-hover), var(--couleur-primaire));
    border-radius: 0 999px 999px 0;
    transition: width var(--duree-animation) var(--courbe-animation);
    width: 0;
}

.entete-formulaire__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--espacement-lg) var(--espacement-xl);
    max-width: var(--largeur-max-contenu);
    margin: 0 auto;
    width: 100%;
}

.entete-formulaire__compteur {
    font-size: var(--taille-texte-sm);
    font-weight: var(--poids-medium);
    color: var(--couleur-texte-secondaire);
}

.entete-formulaire__sauvegarde {
    display: flex;
    align-items: center;
    gap: var(--espacement-xs);
    padding: var(--espacement-sm) var(--espacement-md);
    border-radius: var(--rayon-bordure-md);
    color: var(--couleur-texte-secondaire);
    transition: all var(--duree-animation-rapide) var(--courbe-animation);
}

.entete-formulaire__sauvegarde[data-statut-sauvegarde="actif"] {
    color: var(--couleur-succes);
}

.entete-formulaire__sauvegarde[data-statut-sauvegarde="erreur"] {
    color: var(--couleur-erreur);
}

.conteneur-formulaire {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--espacement-xl);
}

.formulaire {
    width: 100%;
    max-width: var(--largeur-max-contenu);
}

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacement-sm);
    padding: var(--espacement-md) var(--espacement-xl);
    font-size: var(--taille-texte-base);
    font-weight: var(--poids-semibold);
    letter-spacing: var(--tracking-base);
    border-radius: var(--rayon-bordure-lg);
    transition: transform var(--duree-animation-rapide) var(--courbe-animation),
                box-shadow var(--duree-animation-rapide) var(--courbe-animation),
                background-color var(--duree-animation-rapide) var(--courbe-animation),
                border-color var(--duree-animation-rapide) var(--courbe-animation);
    cursor: pointer;
    white-space: nowrap;
}

.bouton:focus-visible,
.bouton-vider-cache:focus-visible,
.bouton-backoffice:focus-visible,
.entete-formulaire__sauvegarde:focus-visible {
    outline: none;
    box-shadow: var(--anneau-focus);
}

.bouton--primaire {
    background-color: var(--couleur-primaire);
    color: white;
}

.bouton--primaire:hover:not(:disabled) {
    background-color: var(--couleur-primaire-hover);
    transform: translateY(-1px);
    box-shadow: var(--ombre-md);
}

.bouton--primaire:active:not(:disabled) {
    transform: translateY(0);
}

.bouton--secondaire {
    background-color: var(--couleur-blanc);
    color: var(--couleur-noir);
    border: 2px solid var(--couleur-bordure);
}

.bouton--secondaire:hover:not(:disabled) {
    background-color: var(--couleur-fond-secondaire);
    border-color: var(--couleur-noir);
}

.bouton-vider-cache {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--espacement-sm);
    background-color: transparent;
    border: none;
    color: var(--couleur-texte-secondaire);
    cursor: pointer;
    border-radius: var(--rayon-bordure-md);
    transition: all var(--duree-animation-rapide) var(--courbe-animation);
}

.bouton-vider-cache:hover {
    background-color: var(--couleur-fond-secondaire);
    color: var(--couleur-primaire);
}

.bouton-vider-cache svg {
    width: 20px;
    height: 20px;
}

.bouton-backoffice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--espacement-sm);
    background-color: transparent;
    border: 1px solid var(--couleur-bordure);
    color: var(--couleur-texte);
    cursor: pointer;
    border-radius: var(--rayon-bordure-md);
    transition: all var(--duree-animation-rapide) var(--courbe-animation);
}

.bouton-backoffice:hover {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.bouton-backoffice svg {
    width: 20px;
    height: 20px;
}

.bouton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.aide-navigation {
    margin-top: var(--espacement-xl);
    text-align: center;
}

.aide-navigation p {
    font-size: var(--taille-texte-sm);
    color: var(--couleur-texte-secondaire);
}

kbd {
    display: inline-block;
    padding: var(--espacement-xs) var(--espacement-sm);
    font-family: var(--police-mono);
    font-size: var(--taille-texte-xs);
    font-weight: var(--poids-semibold);
    color: var(--couleur-texte-principal);
    background-color: var(--couleur-fond-tertiaire);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-bordure-sm);
    box-shadow: var(--ombre-sm);
}

.modale-confirmation,
.modale-erreur {
    position: fixed;
    inset: 0;
    z-index: var(--z-index-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
}

.modale-confirmation__contenu,
.modale-erreur__contenu {
    background-color: var(--couleur-fond-principal);
    border-radius: var(--rayon-bordure-2xl);
    box-shadow: var(--ombre-xl);
    padding: var(--espacement-3xl);
    max-width: 500px;
    width: 90%;
    text-align: center;
}

.modale-confirmation__icone,
.modale-erreur__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto var(--espacement-xl);
    border-radius: 50%;
}

.modale-confirmation__icone {
    background-color: var(--couleur-succes-clair);
    color: var(--couleur-succes);
}

.modale-erreur__icone {
    background-color: var(--couleur-erreur-clair);
    color: var(--couleur-erreur);
}

.modale-confirmation__titre,
.modale-erreur__titre {
    font-size: var(--taille-texte-2xl);
    font-weight: var(--poids-bold);
    margin-bottom: var(--espacement-md);
}

.modale-confirmation__message,
.modale-erreur__message {
    font-size: var(--taille-texte-base);
    color: var(--couleur-texte-secondaire);
    margin-bottom: var(--espacement-xl);
    line-height: 1.7;
}

.pied-page {
    padding: var(--espacement-xl) var(--espacement-md);
    text-align: center;
    background-color: var(--couleur-blanc);
    border-top: 1px solid var(--couleur-bordure);
    margin-top: auto;
}

.pied-page p {
    margin: 0;
    font-size: var(--taille-texte-sm);
    color: var(--couleur-texte-secondaire);
    font-weight: var(--poids-normal);
}

/* Respect des préférences d'accessibilité : couper les animations non essentielles */
@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;
    }
}