/*
 * La Page à Thomas - fondations graphiques
 *
 * Ce fichier reste sans effet tant qu'une page ne le charge pas et ne porte
 * pas la classe ThemeSite. Les composants seront ajoutés par étapes.
 */

:root {
    color-scheme: light;

    /* Couleurs principales */
    --theme-couleur-fond: #f8faf8;
    --theme-couleur-surface: #ffffff;
    --theme-couleur-surface-secondaire: #f0f6f1;
    --theme-couleur-navigation: #eaf5ec;
    --theme-couleur-navigation-active: #cfe8d5;
    --theme-couleur-principale: #3e765f;
    --theme-couleur-principale-survol: #315f4c;
    --theme-couleur-principale-claire: #e3efe6;

    /* Texte */
    --theme-couleur-texte: #1b2c27;
    --theme-couleur-titre: #193a31;
    --theme-couleur-texte-secondaire: #62746b;
    --theme-couleur-texte-discret: #66756c;
    --theme-couleur-sur-principale: #ffffff;

    /* Etats et accents */
    --theme-couleur-danger: #bd4650;
    --theme-couleur-danger-claire: #faeeee;
    --theme-couleur-succes: #3e765f;
    --theme-couleur-succes-claire: #e1f0e5;
    --theme-couleur-attention: #9a6e24;
    --theme-couleur-attention-claire: #fff0d6;
    --theme-couleur-information: #4e6680;
    --theme-couleur-information-claire: #e7edf4;
    --theme-couleur-note: #d4a141;

    /* Bordures et focus */
    --theme-couleur-bordure: #dce7e0;
    --theme-couleur-bordure-legere: #e7ede9;
    --theme-couleur-champ: #87998d;
    --theme-couleur-focus: #638f76;
    --theme-focus: 0 0 0 3px rgb(99 143 118 / 22%);

    /* Typographies */
    --theme-police-texte: Arial, Helvetica, sans-serif;
    --theme-police-titre: Georgia, "Times New Roman", serif;
    --theme-taille-texte-xs: 0.6875rem;
    --theme-taille-texte-sm: 0.8125rem;
    --theme-taille-texte-md: 0.9375rem;
    --theme-taille-texte-lg: 1.0625rem;
    --theme-taille-titre-sm: 1.25rem;
    --theme-taille-titre-md: 1.75rem;
    --theme-taille-titre-lg: 2.5rem;
    --theme-interligne-compact: 1.2;
    --theme-interligne-texte: 1.6;

    /* Espacements sur une grille de 4 px */
    --theme-espace-1: 0.25rem;
    --theme-espace-2: 0.5rem;
    --theme-espace-3: 0.75rem;
    --theme-espace-4: 1rem;
    --theme-espace-5: 1.25rem;
    --theme-espace-6: 1.5rem;
    --theme-espace-8: 2rem;
    --theme-espace-10: 2.5rem;
    --theme-espace-12: 3rem;
    --theme-espace-16: 4rem;

    /* Formes et profondeur */
    --theme-rayon-xs: 0.25rem;
    --theme-rayon-sm: 0.375rem;
    --theme-rayon-md: 0.5rem;
    --theme-rayon-rond: 999px;
    --theme-ombre-sm: 0 2px 8px rgb(30 58 47 / 6%);
    --theme-ombre-md: 0 8px 24px rgb(30 58 47 / 10%);
    --theme-ombre-navigation: 10px 0 28px rgb(30 58 47 / 10%);

    /* Dimensions communes */
    --theme-largeur-contenu: 92rem;
    --theme-largeur-navigation: 17.5rem;
    --theme-hauteur-controle: 2.875rem;
    --theme-transition: 160ms ease;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --theme-couleur-fond: #101715;
    --theme-couleur-surface: #17201d;
    --theme-couleur-surface-secondaire: #1b2c24;
    --theme-couleur-navigation: #182a22;
    --theme-couleur-navigation-active: #284536;
    --theme-couleur-principale: #8fbea0;
    --theme-couleur-principale-survol: #a1c9ae;
    --theme-couleur-principale-claire: #20342a;
    --theme-couleur-texte: #edf4ef;
    --theme-couleur-titre: #edf4ef;
    --theme-couleur-texte-secondaire: #a6b6ad;
    --theme-couleur-texte-discret: #899b91;
    --theme-couleur-sur-principale: #102018;
    --theme-couleur-danger: #e27b82;
    --theme-couleur-danger-claire: #3b2226;
    --theme-couleur-succes: #8fbea0;
    --theme-couleur-succes-claire: #20342a;
    --theme-couleur-attention: #e4b75e;
    --theme-couleur-attention-claire: #3a3020;
    --theme-couleur-information: #a9bdd2;
    --theme-couleur-information-claire: #25313d;
    --theme-couleur-bordure: #2b3c34;
    --theme-couleur-bordure-legere: #26352e;
    --theme-couleur-champ: #597367;
    --theme-couleur-focus: #8fbea0;
    --theme-focus: 0 0 0 3px rgb(143 190 160 / 18%);
    --theme-ombre-sm: 0 2px 8px rgb(0 0 0 / 16%);
    --theme-ombre-md: 0 8px 24px rgb(0 0 0 / 24%);
    --theme-ombre-navigation: 10px 0 28px rgb(0 0 0 / 22%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --theme-couleur-fond: #101715;
        --theme-couleur-surface: #17201d;
        --theme-couleur-surface-secondaire: #1b2c24;
        --theme-couleur-navigation: #182a22;
        --theme-couleur-navigation-active: #284536;
        --theme-couleur-principale: #8fbea0;
        --theme-couleur-principale-survol: #a1c9ae;
        --theme-couleur-principale-claire: #20342a;
        --theme-couleur-texte: #edf4ef;
        --theme-couleur-titre: #edf4ef;
        --theme-couleur-texte-secondaire: #a6b6ad;
        --theme-couleur-texte-discret: #899b91;
        --theme-couleur-sur-principale: #102018;
        --theme-couleur-danger: #e27b82;
        --theme-couleur-danger-claire: #3b2226;
        --theme-couleur-succes: #8fbea0;
        --theme-couleur-succes-claire: #20342a;
        --theme-couleur-attention: #e4b75e;
        --theme-couleur-attention-claire: #3a3020;
        --theme-couleur-information: #a9bdd2;
        --theme-couleur-information-claire: #25313d;
        --theme-couleur-bordure: #2b3c34;
        --theme-couleur-bordure-legere: #26352e;
        --theme-couleur-champ: #597367;
        --theme-couleur-focus: #8fbea0;
        --theme-focus: 0 0 0 3px rgb(143 190 160 / 18%);
        --theme-ombre-sm: 0 2px 8px rgb(0 0 0 / 16%);
        --theme-ombre-md: 0 8px 24px rgb(0 0 0 / 24%);
        --theme-ombre-navigation: 10px 0 28px rgb(0 0 0 / 22%);
    }
}

/* Base volontairement limitée aux pages migrées. */
.ThemeSite,
.ThemeSite *,
.ThemeSite *::before,
.ThemeSite *::after {
    box-sizing: border-box;
}

.ThemeSite {
    min-width: 20rem;
    margin: 0;
    background: var(--theme-couleur-fond);
    color: var(--theme-couleur-texte);
    font-family: var(--theme-police-texte);
    font-size: var(--theme-taille-texte-md);
    line-height: var(--theme-interligne-texte);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.ThemeSite h1,
.ThemeSite h2,
.ThemeSite h3,
.ThemeSite h4,
.ThemeSite p {
    margin-top: 0;
}

.ThemeSite h1,
.ThemeSite h2,
.ThemeSite h3,
.ThemeSite h4 {
    color: var(--theme-couleur-titre);
    font-family: var(--theme-police-titre);
    line-height: var(--theme-interligne-compact);
}

.ThemeSite :where(a) {
    color: var(--theme-couleur-principale);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.ThemeSite :where(a:hover) {
    color: var(--theme-couleur-principale-survol);
}

.ThemeSite img,
.ThemeSite svg {
    display: block;
    max-width: 100%;
}

.ThemeSite button,
.ThemeSite input,
.ThemeSite select,
.ThemeSite textarea {
    font: inherit;
}

.ThemeSite :focus-visible {
    outline: 2px solid var(--theme-couleur-focus);
    outline-offset: 2px;
}

.ThemeConteneur {
    width: min(100%, var(--theme-largeur-contenu));
    margin-inline: auto;
    padding-inline: clamp(var(--theme-espace-4), 4vw, var(--theme-espace-16));
}

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

/* Actions */
.ThemeBouton {
    --theme-bouton-spinner: currentColor;

    position: relative;
    display: inline-flex;
    min-width: 0;
    min-height: var(--theme-hauteur-controle);
    align-items: center;
    justify-content: center;
    gap: var(--theme-espace-2);
    border: 1px solid transparent;
    border-radius: var(--theme-rayon-sm);
    padding: var(--theme-espace-2) var(--theme-espace-4);
    font-family: var(--theme-police-texte);
    font-size: var(--theme-taille-texte-sm);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition:
        background-color var(--theme-transition),
        border-color var(--theme-transition),
        color var(--theme-transition),
        box-shadow var(--theme-transition),
        transform var(--theme-transition);
}

.ThemeBouton svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    stroke-width: 2;
}

.ThemeBoutonPrimaire {
    --theme-bouton-spinner: var(--theme-couleur-sur-principale);

    border-color: var(--theme-couleur-principale);
    background: var(--theme-couleur-principale);
    color: var(--theme-couleur-sur-principale);
    box-shadow: var(--theme-ombre-sm);
}

.ThemeBoutonPrimaire:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    border-color: var(--theme-couleur-principale-survol);
    background: var(--theme-couleur-principale-survol);
    color: var(--theme-couleur-sur-principale);
    box-shadow: var(--theme-ombre-md);
}

.ThemeBoutonSecondaire {
    --theme-bouton-spinner: var(--theme-couleur-principale);

    border-color: var(--theme-couleur-bordure);
    background: var(--theme-couleur-surface);
    color: var(--theme-couleur-principale);
}

.ThemeBoutonSecondaire:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    border-color: var(--theme-couleur-focus);
    background: var(--theme-couleur-principale-claire);
    color: var(--theme-couleur-principale-survol);
}

.ThemeBoutonDiscret {
    --theme-bouton-spinner: var(--theme-couleur-principale);

    border-color: transparent;
    background: transparent;
    color: var(--theme-couleur-texte-secondaire);
    box-shadow: none;
}

.ThemeBoutonDiscret:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    background: var(--theme-couleur-principale-claire);
    color: var(--theme-couleur-principale-survol);
}

.ThemeBoutonDanger {
    --theme-bouton-spinner: var(--theme-couleur-danger);

    border-color: color-mix(in srgb, var(--theme-couleur-danger) 35%, var(--theme-couleur-bordure));
    background: var(--theme-couleur-surface);
    color: var(--theme-couleur-danger);
}

.ThemeBoutonDanger:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    border-color: var(--theme-couleur-danger);
    background: var(--theme-couleur-danger-claire);
    color: var(--theme-couleur-danger);
}

.ThemeBoutonIcone {
    width: var(--theme-hauteur-controle);
    min-width: var(--theme-hauteur-controle);
    padding: 0;
}

.ThemeBoutonCompact {
    min-height: 2.25rem;
    padding: var(--theme-espace-1) var(--theme-espace-3);
    font-size: var(--theme-taille-texte-xs);
}

.ThemeBoutonLarge {
    min-height: 3.25rem;
    padding-inline: var(--theme-espace-5);
    font-size: var(--theme-taille-texte-md);
}

.ThemeBoutonPleineLargeur {
    width: 100%;
}

.ThemeBouton:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    transform: translateY(1px);
    box-shadow: none;
}

.ThemeBouton:disabled,
.ThemeBouton[aria-disabled="true"] {
    cursor: not-allowed;
    filter: saturate(55%);
    opacity: 0.5;
    pointer-events: none;
}

.ThemeBouton[aria-busy="true"] {
    cursor: progress;
    pointer-events: none;
}

.ThemeBouton[aria-busy="true"] > * {
    visibility: hidden;
}

.ThemeBouton[aria-busy="true"] {
    color: transparent;
}

.ThemeBouton[aria-busy="true"]::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    transform: translate(-50%, -50%);
    border: 2px solid color-mix(in srgb, var(--theme-bouton-spinner) 28%, transparent);
    border-top-color: var(--theme-bouton-spinner);
    border-radius: 50%;
    content: "";
    animation: theme-rotation 700ms linear infinite;
}

@keyframes theme-rotation {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Formulaires */
.ThemeGroupeChamp {
    display: grid;
    gap: var(--theme-espace-2);
    min-width: 0;
}

.ThemeEtiquette,
.ThemeLegende {
    color: var(--theme-couleur-texte);
    font-size: var(--theme-taille-texte-sm);
    font-weight: 700;
    line-height: 1.35;
}

.ThemeEtiquetteObligatoire::after {
    margin-left: var(--theme-espace-1);
    color: var(--theme-couleur-danger);
    content: "*";
}

.ThemeChamp,
.ThemeZoneTexte,
.ThemeSelect {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--theme-couleur-champ);
    border-radius: var(--theme-rayon-sm);
    background: var(--theme-couleur-surface);
    color: var(--theme-couleur-texte);
    font-family: var(--theme-police-texte);
    font-size: var(--theme-taille-texte-sm);
    line-height: 1.45;
    transition:
        background-color var(--theme-transition),
        border-color var(--theme-transition),
        box-shadow var(--theme-transition);
}

.ThemeChamp,
.ThemeSelect {
    height: var(--theme-hauteur-controle);
    padding: 0 var(--theme-espace-3);
}

.ThemeZoneTexte {
    min-height: 7rem;
    padding: var(--theme-espace-3);
    resize: vertical;
}

.ThemeChamp::placeholder,
.ThemeZoneTexte::placeholder {
    color: var(--theme-couleur-texte-discret);
    opacity: 1;
}

.ThemeChamp:hover:not(:disabled):not([readonly]),
.ThemeZoneTexte:hover:not(:disabled):not([readonly]),
.ThemeSelect:hover:not(:disabled) {
    border-color: var(--theme-couleur-focus);
}

.ThemeChamp:focus,
.ThemeZoneTexte:focus,
.ThemeSelect:focus {
    border-color: var(--theme-couleur-focus);
    box-shadow: var(--theme-focus);
    outline: 0;
}

.ThemeChamp:disabled,
.ThemeZoneTexte:disabled,
.ThemeSelect:disabled {
    background: var(--theme-couleur-surface-secondaire);
    color: var(--theme-couleur-texte-discret);
    cursor: not-allowed;
    opacity: 0.7;
}

.ThemeChamp[readonly],
.ThemeZoneTexte[readonly] {
    background: var(--theme-couleur-surface-secondaire);
    color: var(--theme-couleur-texte-secondaire);
    cursor: default;
}

.ThemeChamp[aria-invalid="true"],
.ThemeZoneTexte[aria-invalid="true"],
.ThemeSelect[aria-invalid="true"],
.ThemeChampErreur {
    border-color: var(--theme-couleur-danger);
    box-shadow: 0 0 0 3px rgb(189 70 80 / 12%);
}

.ThemeChampValide {
    border-color: var(--theme-couleur-succes);
}

.ThemeChampAvecIcone,
.ThemeChampAvecAction {
    position: relative;
}

.ThemeChampAvecIcone > svg {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: var(--theme-espace-3);
    width: 1.05rem;
    height: 1.05rem;
    transform: translateY(-50%);
    color: var(--theme-couleur-texte-discret);
    pointer-events: none;
}

.ThemeChampAvecIcone > .ThemeChamp {
    padding-left: 2.65rem;
}

.ThemeChampAvecAction > .ThemeChamp {
    padding-right: 3rem;
}

.ThemeActionChamp {
    position: absolute;
    top: 50%;
    right: var(--theme-espace-1);
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: var(--theme-rayon-xs);
    background: transparent;
    color: var(--theme-couleur-texte-secondaire);
    cursor: pointer;
}

.ThemeActionChamp:hover {
    background: var(--theme-couleur-principale-claire);
    color: var(--theme-couleur-principale-survol);
}

.ThemeActionChamp svg {
    width: 1.05rem;
    height: 1.05rem;
}

.ThemeChoix {
    display: inline-grid;
    grid-template-columns: 1.1rem minmax(0, 1fr);
    align-items: start;
    gap: var(--theme-espace-2);
    color: var(--theme-couleur-texte-secondaire);
    cursor: pointer;
    font-size: var(--theme-taille-texte-sm);
    line-height: 1.45;
}

.ThemeChoix input[type="checkbox"],
.ThemeChoix input[type="radio"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.12rem 0 0;
    accent-color: var(--theme-couleur-principale);
    cursor: pointer;
}

.ThemeChoix:has(input:disabled) {
    color: var(--theme-couleur-texte-discret);
    cursor: not-allowed;
    opacity: 0.65;
}

.ThemeChoix input:disabled {
    cursor: not-allowed;
}

.ThemeChoixTexte {
    display: grid;
    gap: var(--theme-espace-1);
}

.ThemeChoixTexte strong {
    color: var(--theme-couleur-texte);
    font-size: var(--theme-taille-texte-sm);
}

.ThemeChoixTexte small,
.ThemeAideChamp {
    color: var(--theme-couleur-texte-discret);
    font-size: var(--theme-taille-texte-xs);
    line-height: 1.45;
}

.ThemeMessageChamp {
    display: flex;
    align-items: flex-start;
    gap: var(--theme-espace-1);
    margin: 0;
    color: var(--theme-couleur-texte-discret);
    font-size: var(--theme-taille-texte-xs);
    line-height: 1.45;
}

.ThemeMessageChamp svg {
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 auto;
    margin-top: 0.08rem;
}

.ThemeMessageChampErreur {
    color: var(--theme-couleur-danger);
}

.ThemeMessageChampSucces {
    color: var(--theme-couleur-succes);
}

.ThemeGroupeChoix {
    display: grid;
    gap: var(--theme-espace-3);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ThemeGroupeChoix .ThemeLegende {
    margin-bottom: var(--theme-espace-2);
    padding: 0;
}

.ThemeAideContextuelle {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ThemeAideDeclencheur {
    display: grid;
    width: 1.4rem;
    height: 1.4rem;
    place-items: center;
    border: 0;
    border-radius: var(--theme-rayon-rond);
    background: var(--theme-couleur-principale-claire);
    color: var(--theme-couleur-principale);
    cursor: help;
    font-size: var(--theme-taille-texte-xs);
    font-weight: 800;
}

.ThemeAideBulle {
    position: absolute;
    z-index: 20;
    bottom: calc(100% + var(--theme-espace-2));
    left: 50%;
    width: min(15rem, calc(100vw - 2rem));
    transform: translate(-50%, var(--theme-espace-1));
    border: 1px solid var(--theme-couleur-bordure);
    border-radius: var(--theme-rayon-sm);
    padding: var(--theme-espace-3);
    background: var(--theme-couleur-surface);
    color: var(--theme-couleur-texte-secondaire);
    box-shadow: var(--theme-ombre-md);
    font-size: var(--theme-taille-texte-xs);
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity var(--theme-transition),
        transform var(--theme-transition);
}

.ThemeAideContextuelle:hover .ThemeAideBulle,
.ThemeAideContextuelle:focus-within .ThemeAideBulle,
.ThemeAideContextuelle.ThemeAideOuverte .ThemeAideBulle {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

/* Informations et retours utilisateur */
.ThemeBadge {
    display: inline-flex;
    min-height: 1.5rem;
    align-items: center;
    justify-content: center;
    gap: var(--theme-espace-1);
    max-width: 100%;
    border: 1px solid var(--theme-couleur-bordure);
    border-radius: var(--theme-rayon-rond);
    padding: 0.2rem var(--theme-espace-2);
    background: var(--theme-couleur-surface-secondaire);
    color: var(--theme-couleur-texte-secondaire);
    font-size: var(--theme-taille-texte-xs);
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.ThemeBadgeSucces {
    border-color: transparent;
    background: var(--theme-couleur-succes-claire);
    color: var(--theme-couleur-succes);
}

.ThemeBadgeAttention {
    border-color: transparent;
    background: var(--theme-couleur-attention-claire);
    color: var(--theme-couleur-attention);
}

.ThemeBadgeDanger {
    border-color: transparent;
    background: var(--theme-couleur-danger-claire);
    color: var(--theme-couleur-danger);
}

.ThemeBadgeInformation {
    border-color: transparent;
    background: var(--theme-couleur-information-claire);
    color: var(--theme-couleur-information);
}

.ThemeBadge svg {
    width: 0.8rem;
    height: 0.8rem;
    flex: 0 0 auto;
}

.ThemePastilleNotification {
    display: inline-grid;
    min-width: 1.15rem;
    height: 1.15rem;
    place-items: center;
    border: 2px solid var(--theme-couleur-surface);
    border-radius: var(--theme-rayon-rond);
    padding-inline: 0.2rem;
    background: var(--theme-couleur-danger);
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.ThemePastilleNotification.ThemePastilleSimple {
    width: 0.65rem;
    min-width: 0.65rem;
    height: 0.65rem;
    border-width: 1px;
    padding: 0;
}

.ThemeAlerte {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--theme-espace-3);
    width: 100%;
    border: 1px solid var(--theme-couleur-bordure);
    border-left: 3px solid var(--theme-couleur-information);
    border-radius: var(--theme-rayon-sm);
    padding: var(--theme-espace-4);
    background: var(--theme-couleur-information-claire);
    color: var(--theme-couleur-texte-secondaire);
}

.ThemeAlerte > svg {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
    color: var(--theme-couleur-information);
}

.ThemeAlerteContenu {
    min-width: 0;
}

.ThemeAlerteTitre {
    margin: 0;
    color: var(--theme-couleur-titre);
    font-family: var(--theme-police-texte);
    font-size: var(--theme-taille-texte-sm);
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.ThemeAlerteTexte {
    margin: var(--theme-espace-1) 0 0;
    color: inherit;
    font-size: var(--theme-taille-texte-sm);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ThemeAlerte[tabindex="-1"]:focus {
    outline: 2px solid var(--theme-couleur-focus);
    outline-offset: 3px;
}

.ThemeAlerteActions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--theme-espace-2);
    margin-top: var(--theme-espace-3);
}

.ThemeAlerteSucces {
    border-left-color: var(--theme-couleur-succes);
    background: var(--theme-couleur-succes-claire);
}

.ThemeAlerteSucces > svg {
    color: var(--theme-couleur-succes);
}

.ThemeAlerteAttention {
    border-left-color: var(--theme-couleur-attention);
    background: var(--theme-couleur-attention-claire);
}

.ThemeAlerteAttention > svg {
    color: var(--theme-couleur-attention);
}

.ThemeAlerteErreur {
    border-left-color: var(--theme-couleur-danger);
    background: var(--theme-couleur-danger-claire);
}

.ThemeAlerteErreur > svg {
    color: var(--theme-couleur-danger);
}

.ThemeMessageRetour {
    display: flex;
    align-items: flex-start;
    gap: var(--theme-espace-2);
    width: 100%;
    margin: 0;
    border-radius: var(--theme-rayon-sm);
    padding: var(--theme-espace-3) var(--theme-espace-4);
    background: var(--theme-couleur-surface-secondaire);
    color: var(--theme-couleur-texte-secondaire);
    font-size: var(--theme-taille-texte-sm);
    line-height: 1.5;
}

.ThemeMessageRetour svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.ThemeMessageSucces {
    background: var(--theme-couleur-succes-claire);
    color: var(--theme-couleur-succes);
}

.ThemeMessageErreur {
    background: var(--theme-couleur-danger-claire);
    color: var(--theme-couleur-danger);
}

.ThemeSeparateur {
    width: 100%;
    height: 1px;
    margin: var(--theme-espace-4) 0;
    border: 0;
    background: var(--theme-couleur-bordure-legere);
}

.ThemeSeparateurAvecTexte {
    display: flex;
    align-items: center;
    gap: var(--theme-espace-3);
    width: 100%;
    color: var(--theme-couleur-texte-discret);
    font-size: var(--theme-taille-texte-xs);
    text-align: center;
}

.ThemeSeparateurAvecTexte::before,
.ThemeSeparateurAvecTexte::after {
    height: 1px;
    flex: 1 1 auto;
    background: var(--theme-couleur-bordure-legere);
    content: "";
}

.ThemeEtatVide {
    display: grid;
    min-height: 14rem;
    place-items: center;
    align-content: center;
    gap: var(--theme-espace-2);
    padding: var(--theme-espace-8) var(--theme-espace-4);
    color: var(--theme-couleur-texte-secondaire);
    text-align: center;
}

.ThemeEtatVideIcone {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--theme-espace-2);
    place-items: center;
    border-radius: var(--theme-rayon-rond);
    background: var(--theme-couleur-principale-claire);
    color: var(--theme-couleur-principale);
}

.ThemeEtatVideIcone svg {
    width: 1.35rem;
    height: 1.35rem;
}

.ThemeEtatVide h2,
.ThemeEtatVide h3 {
    margin: 0;
    font-size: var(--theme-taille-titre-sm);
}

.ThemeEtatVide p {
    max-width: 28rem;
    margin: 0;
    color: var(--theme-couleur-texte-secondaire);
    font-size: var(--theme-taille-texte-sm);
    line-height: 1.55;
}

.ThemeEtatVideActions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--theme-espace-2);
    margin-top: var(--theme-espace-3);
}

.ThemeChargement {
    display: inline-flex;
    align-items: center;
    gap: var(--theme-espace-2);
    color: var(--theme-couleur-texte-secondaire);
    font-size: var(--theme-taille-texte-sm);
}

.ThemeIndicateurChargement {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    border: 2px solid var(--theme-couleur-bordure);
    border-top-color: var(--theme-couleur-principale);
    border-radius: var(--theme-rayon-rond);
    animation: theme-indicateur-rotation 700ms linear infinite;
}

.ThemeIndicateurChargementGrand {
    width: 2rem;
    height: 2rem;
    border-width: 3px;
}

.ThemeSquelette {
    position: relative;
    overflow: hidden;
    min-height: 1rem;
    border-radius: var(--theme-rayon-xs);
    background: var(--theme-couleur-bordure-legere);
    animation: theme-squelette-pulsation 1.3s ease-in-out infinite alternate;
}

.ThemeSqueletteTexte {
    width: 100%;
    height: 0.8rem;
}

.ThemeSqueletteTexteCourt {
    width: 58%;
}

.ThemeSqueletteCercle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--theme-rayon-rond);
}

@keyframes theme-indicateur-rotation {
    to {
        transform: rotate(360deg);
    }
}

@keyframes theme-squelette-pulsation {
    from {
        opacity: 0.48;
    }

    to {
        opacity: 1;
    }
}

/* Structures visuelles communes */
.ThemePage {
    min-height: 100svh;
    background: var(--theme-couleur-fond);
}

.ThemePageContenu {
    width: min(100%, var(--theme-largeur-contenu));
    margin-inline: auto;
    padding: clamp(var(--theme-espace-6), 4vw, var(--theme-espace-16));
}

.ThemePageEtroite {
    width: min(100%, 52rem);
}

.ThemeEntetePage,
.ThemeEnteteSection {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--theme-espace-6);
}

.ThemeEntetePage {
    margin-bottom: var(--theme-espace-10);
}

.ThemeEnteteSection {
    margin-bottom: var(--theme-espace-5);
    padding-bottom: var(--theme-espace-3);
    border-bottom: 1px solid var(--theme-couleur-bordure-legere);
}

.ThemeEntetePageTexte,
.ThemeEnteteSectionTexte {
    min-width: 0;
}

.ThemeSurtitre {
    margin: 0 0 var(--theme-espace-2);
    color: var(--theme-couleur-principale);
    font-size: var(--theme-taille-texte-xs);
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
}

.ThemeTitrePage {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.ThemeTitreSection {
    margin: 0;
    font-size: var(--theme-taille-titre-md);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ThemeDescriptionPage,
.ThemeDescriptionSection {
    max-width: 46rem;
    margin: var(--theme-espace-2) 0 0;
    color: var(--theme-couleur-texte-secondaire);
}

.ThemeDescriptionPage {
    font-size: var(--theme-taille-texte-md);
}

.ThemeDescriptionSection {
    font-size: var(--theme-taille-texte-sm);
}

.ThemeEnteteActions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--theme-espace-2);
}

.ThemeBarreActions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--theme-espace-4);
    width: 100%;
    padding: var(--theme-espace-3) 0;
    border-bottom: 1px solid var(--theme-couleur-bordure-legere);
}

.ThemeBarreActionsGauche,
.ThemeBarreActionsDroite {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--theme-espace-2);
}

.ThemeBarreActionsDroite {
    justify-content: flex-end;
    margin-left: auto;
}

.ThemeGrille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--theme-espace-4);
}

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

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

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

.ThemeGrilleEspaceLarge {
    gap: var(--theme-espace-6);
}

.ThemePanneau,
.ThemeCarte {
    min-width: 0;
    border: 1px solid var(--theme-couleur-bordure);
    border-radius: var(--theme-rayon-md);
    background: var(--theme-couleur-surface);
}

.ThemePanneau {
    padding: clamp(var(--theme-espace-4), 2.5vw, var(--theme-espace-8));
}

.ThemePanneauSecondaire {
    background: var(--theme-couleur-surface-secondaire);
}

.ThemeCarte {
    overflow: hidden;
    box-shadow: var(--theme-ombre-sm);
    transition:
        border-color var(--theme-transition),
        box-shadow var(--theme-transition),
        transform var(--theme-transition);
}

.ThemeCarteInteractive {
    cursor: pointer;
}

.ThemeCarteInteractive:hover {
    border-color: var(--theme-couleur-focus);
    box-shadow: var(--theme-ombre-md);
    transform: translateY(-1px);
}

.ThemeCarteEntete,
.ThemeCarteCorps,
.ThemeCartePied {
    padding: var(--theme-espace-4);
}

.ThemeCarteEntete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--theme-espace-3);
    padding-bottom: var(--theme-espace-3);
}

.ThemeCarteCorps {
    color: var(--theme-couleur-texte-secondaire);
}

.ThemeCartePied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--theme-espace-2);
    padding-top: var(--theme-espace-3);
    border-top: 1px solid var(--theme-couleur-bordure-legere);
}

.ThemeCarteTitre {
    margin: 0;
    font-size: var(--theme-taille-titre-sm);
}

.ThemeCarteTexte {
    margin: var(--theme-espace-2) 0 0;
    color: var(--theme-couleur-texte-secondaire);
    font-size: var(--theme-taille-texte-sm);
    line-height: 1.55;
}

.ThemeFondSuperpose {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    overflow-y: auto;
    place-items: center;
    padding: var(--theme-espace-4);
    background: rgb(16 32 24 / 48%);
    backdrop-filter: blur(3px);
}

.ThemeFondSuperpose[hidden] {
    display: none;
}

.ThemeModale {
    width: min(100%, 34rem);
    max-height: min(90svh, 52rem);
    overflow: auto;
    border: 1px solid var(--theme-couleur-bordure);
    border-radius: var(--theme-rayon-md);
    background: var(--theme-couleur-surface);
    color: var(--theme-couleur-texte);
    box-shadow: var(--theme-ombre-md);
}

.ThemeModaleLarge {
    width: min(100%, 52rem);
}

.ThemeModaleEntete,
.ThemeModaleCorps,
.ThemeModalePied {
    padding: var(--theme-espace-5);
}

.ThemeModaleEntete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--theme-espace-4);
    border-bottom: 1px solid var(--theme-couleur-bordure-legere);
}

.ThemeModaleTitre {
    margin: 0;
    font-size: var(--theme-taille-titre-sm);
}

.ThemeModaleDescription {
    margin: var(--theme-espace-1) 0 0;
    color: var(--theme-couleur-texte-secondaire);
    font-size: var(--theme-taille-texte-sm);
}

.ThemeModaleCorps {
    color: var(--theme-couleur-texte-secondaire);
}

.ThemeModalePied {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--theme-espace-2);
    border-top: 1px solid var(--theme-couleur-bordure-legere);
}

.ThemeTableauConteneur {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--theme-couleur-bordure);
    border-radius: var(--theme-rayon-md);
    background: var(--theme-couleur-surface);
    -webkit-overflow-scrolling: touch;
}

.ThemeTableau {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    color: var(--theme-couleur-texte);
    font-size: var(--theme-taille-texte-sm);
}

.ThemeTableau th,
.ThemeTableau td {
    padding: var(--theme-espace-3) var(--theme-espace-4);
    border-bottom: 1px solid var(--theme-couleur-bordure-legere);
    text-align: left;
    vertical-align: middle;
}

.ThemeTableau th {
    background: var(--theme-couleur-surface-secondaire);
    color: var(--theme-couleur-texte-secondaire);
    font-size: var(--theme-taille-texte-xs);
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.ThemeTableau tbody tr:last-child td {
    border-bottom: 0;
}

.ThemeTableau tbody tr:hover {
    background: var(--theme-couleur-principale-claire);
}

.ThemeTableauActions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--theme-espace-1);
    white-space: nowrap;
}

.ThemeListeStructuree {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ThemeListeElement {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--theme-espace-3);
    min-width: 0;
    padding: var(--theme-espace-3) 0;
    border-bottom: 1px solid var(--theme-couleur-bordure-legere);
}

.ThemeListeElement:first-child {
    padding-top: 0;
}

.ThemeListeElement:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ThemeListeIcone {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: var(--theme-rayon-rond);
    background: var(--theme-couleur-principale-claire);
    color: var(--theme-couleur-principale);
}

.ThemeListeIcone svg {
    width: 1.1rem;
    height: 1.1rem;
}

.ThemeListeTexte {
    min-width: 0;
}

.ThemeListeTitre,
.ThemeListeDescription {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
}

.ThemeListeTitre {
    color: var(--theme-couleur-texte);
    font-size: var(--theme-taille-texte-sm);
    font-weight: 700;
    white-space: nowrap;
}

.ThemeListeDescription {
    margin-top: var(--theme-espace-1);
    color: var(--theme-couleur-texte-discret);
    font-size: var(--theme-taille-texte-xs);
    line-height: 1.4;
}

.ThemeListeActions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--theme-espace-1);
}

@media (max-width: 56.25rem) {
    .ThemeGrilleQuatreColonnes,
    .ThemeGrilleTroisColonnes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 43.75rem) {
    .ThemePageContenu {
        padding: var(--theme-espace-6) var(--theme-espace-4) var(--theme-espace-10);
    }

    .ThemeEntetePage,
    .ThemeEnteteSection,
    .ThemeBarreActions {
        align-items: stretch;
        flex-direction: column;
    }

    .ThemeEnteteActions,
    .ThemeBarreActionsGauche,
    .ThemeBarreActionsDroite {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    .ThemeGrilleDeuxColonnes,
    .ThemeGrilleTroisColonnes,
    .ThemeGrilleQuatreColonnes {
        grid-template-columns: 1fr;
    }

    .ThemeModaleEntete,
    .ThemeModaleCorps,
    .ThemeModalePied {
        padding: var(--theme-espace-4);
    }

    .ThemeModalePied {
        align-items: stretch;
        flex-direction: column;
    }

    .ThemeModalePied .ThemeBouton {
        width: 100%;
    }

    .ThemeListeElement {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ThemeListeActions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: calc(2.5rem + var(--theme-espace-3));
    }

    .ThemeChamp,
    .ThemeZoneTexte,
    .ThemeSelect {
        font-size: 1rem;
    }
}

@media (max-width: 30rem) {
    .ThemeTitrePage {
        font-size: 2rem;
    }

    .ThemeEnteteActions .ThemeBouton,
    .ThemeBarreActions .ThemeBouton {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ThemeSite *,
    .ThemeSite *::before,
    .ThemeSite *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}