/**
 * Socle propre au thème, chargé après les tokens du design system (assets/css/tokens/, dont
 * base.css : box-sizing, corps de texte, titres, liens, focus). Ce fichier ne contient que ce
 * que le design system ne pose pas : reset des listes, utilitaires transverses et bouton.
 * Chargé sur tout le site : uniquement du CSS utilisé par plusieurs blocs indépendamment
 * (sinon il appartient au style.css du bloc concerné).
 */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/**
 * Dark mode global : la classe `.dark` sur <html> (posée par le script en ligne de <head>, voir
 * inc/hooks/setup.php) déclare aussi le schéma de couleurs au navigateur, pour les contrôles
 * natifs (champs, cases, listes) et les barres de défilement. Aucune règle pour le mode clair :
 * `color-scheme: normal` est déjà clair, la redéclarer ne changerait rien.
 */
html.dark {
    color-scheme: dark;
}

ol,
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/**
 * Libellé accessible mais masqué visuellement (RGAA 11.1).
 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/**
 * Lien d'évitement (« Aller au contenu principal », premier élément focalisable de la page) :
 * masqué hors écran, il apparaît en haut à gauche dès qu'il reçoit le focus clavier (WCAG 2.4.7).
 * Le masquage par `transform` le laisse dans l'arbre d'accessibilité et focalisable, contrairement
 * à `display: none`. Le `z-index` passe au-dessus d'un en-tête sticky (`--z-sticky`). `color` est
 * redéclaré dans l'état focus pour battre le `a:hover` du socle (0,1,1).
 */
.skip-link {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: calc(var(--z-sticky) + 1);
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
    padding: 0 var(--space-4);
    background-color: var(--action-primary-bg);
    color: var(--action-primary-fg);
    border-radius: var(--radius-default);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus {
    color: var(--action-primary-fg);
    transform: none;
}

/**
 * Largeur de contenu standard des blocs : un seul utilitaire pour tout le framework.
 * Conteneur « content » du design system (--container-content) + gouttière (16px, 24px dès md :
 * jamais moins de 16px). La gouttière est en padding (box-sizing: border-box posé par le design
 * system) : la largeur max l'ajoute pour que le contenu garde toute la largeur du conteneur.
 */
.container {
    width: 100%;
    max-width: calc(var(--container-content) + 2 * var(--gutter));
    padding-inline: var(--gutter);
    margin-inline: auto;
}

@media (min-width: 768px) {
    .container {
        max-width: calc(var(--container-content) + 2 * var(--gutter-md));
        padding-inline: var(--gutter-md);
    }
}

/**
 * Bouton d'action (Part — Bouton, voir parts/btn.php). Chargé ici car partagé
 * par plusieurs blocs, indépendamment de celui qui déclenche son affichage.
 * Variantes, tailles et valeurs du composant Button du design system. La taille md est celle de
 * `.btn` (pas de modificateur) ; `sm`, `lg`, `icon` et `icon-sm` la modifient plus bas.
 *
 * Le bouton est un lien ou un `<button>`. Pour un lien, `a:hover` du design system (0,1,1)
 * l'emporterait sur `.btn--*` (0,1,0) et changerait la couleur du texte au survol : chaque
 * variante redéclare donc `color` dans son état `:hover` (0,2,0), qui prend le dessus sans
 * dépendre de l'ordre de chargement. Pour un `<button>`, le socle n'a pas de reset : `margin`,
 * `appearance` et `text-align` sont posés ici (bordure, fond, padding et police le sont déjà).
 *
 * Le bouton sans classe d'un formulaire galaxyy-forms (`.gforms-form`, voir items.css, section
 * Galaxyy Forms) prend les valeurs de `.btn--primary` ; `:where()` garde la spécificité de `.btn`.
 * Un bouton qui porte `class="btn …"` garde sa variante.
 */
.btn,
.gforms-form :where(button:not(.btn)) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 40px;
    margin: 0;
    padding: 0 var(--space-4);
    appearance: none;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--radius-default);
    font-family: var(--font-sans);
    font-size: var(--text-body-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--ease-default),
        color var(--duration-fast) var(--ease-default),
        border-color var(--duration-fast) var(--ease-default),
        box-shadow var(--duration-fast) var(--ease-default);
}

.btn--primary,
.gforms-form :where(button:not(.btn)) {
    background-color: var(--action-primary-bg);
    color: var(--action-primary-fg);
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover,
.gforms-form :where(button:not(.btn)):hover {
    background-color: var(--action-primary-bg-hover);
    color: var(--action-primary-fg);
}

.btn--secondary {
    background-color: var(--action-secondary-bg);
    color: var(--action-secondary-fg);
}
.btn--secondary:hover {
    background-color: var(--action-secondary-bg-hover);
    color: var(--action-secondary-fg);
}

.btn--outline {
    background-color: transparent;
    border-color: var(--border-strong);
    color: var(--text-strong);
}
.btn--outline:hover {
    background-color: var(--surface-subtle);
    color: var(--text-strong);
}

.btn--ghost {
    background-color: transparent;
    color: var(--action-ghost-fg);
}
.btn--ghost:hover {
    background-color: var(--action-ghost-bg-hover);
    color: var(--action-ghost-fg);
}

.btn--danger {
    background-color: var(--action-danger-bg);
    color: var(--color-white);
}
.btn--danger:hover {
    background-color: var(--action-danger-bg-hover);
    color: var(--color-white);
}

.btn--link {
    min-height: 0;
    padding: 0;
    background-color: transparent;
    color: var(--text-link);
    text-underline-offset: 4px;
}
.btn--link:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

/**
 * Tailles. Cibles : sm 36 px, md 40 px, lg 48 px comme le design system. Les tailles icône
 * (glyphe seul) montent à `--target-min` (44 px) : écart assumé, le design system les fait à
 * 40 et 36 px alors que sa doc d'accessibilité exige 44 px (voir design-system/components.md).
 */
.btn--sm {
    min-height: 36px;
    padding: 0 var(--space-3);
}

.btn--lg {
    min-height: 48px;
    padding: 0 var(--space-6);
    font-size: var(--text-body);
}

.btn--icon,
.btn--icon-sm {
    min-width: var(--target-min);
    min-height: var(--target-min);
    padding: 0;
}

.btn--block {
    width: 100%;
}

/**
 * Désactivé ou en chargement : `disabled` sur un `<button>`, `aria-disabled` sur un lien (qui
 * perd alors son `href`, voir parts/btn.php).
 */
.btn:disabled,
.btn[aria-disabled="true"],
.gforms-form :where(button:not(.btn)):disabled {
    opacity: 0.5;
    pointer-events: none;
}

/**
 * Spinner du bouton en chargement (icône `loader-2`). Un indicateur de chargement est un retour
 * fonctionnel : sous `prefers-reduced-motion`, il ne disparaît pas, il ralentit (comme dans le
 * composant Button du design system).
 */
.btn__spin {
    animation: btn-spin 1s linear infinite;
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn__spin {
        animation-duration: 2.4s;
    }
}