/* ============================================================
   RASSEMBL — DESIGN TOKENS GLOBAUX
   Source de vérité : RassemblTheme.cs (côté Blazor) +
   ~/repos/websites/regelec/site/src/styles/global.css (site marketing).
   ============================================================ */
:root {
    /* Palette violet × crème × lime (alignée site marketing) */
    --rassembl-violet: #6B3CFF;
    --rassembl-violet-deep: #1A0B3D;
    --rassembl-violet-darker: #0F0726;
    --rassembl-violet-soft: #8F6BFF;
    --rassembl-cream: #F5EFE6;
    --rassembl-cream-warm: #ECE5D8;
    --rassembl-lime: #C4F542;
    --rassembl-lime-dim: #9FD030;
    --rassembl-rose: #FFB5C5;
    --rassembl-rose-deep: #E98BA0;
    --rassembl-ink: #0A0A0A;
    --rassembl-ink-soft: #2A2A2A;

    /* Alias sémantiques */
    --rassembl-primary: var(--rassembl-violet);
    --rassembl-surface: #FFFFFF;
    --rassembl-background: var(--rassembl-cream);
    --rassembl-line: rgba(10, 10, 10, 0.10);
    --rassembl-line-soft: rgba(10, 10, 10, 0.05);
}

html, body {
    font-family: 'General Sans', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TYPOGRAPHIE — classes utilitaires
   .display : Clash Display (titres importants)
   .script  : Caveat (touches manuscrites — greetings, post-its)
   ============================================================ */
.display,
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4 {
    font-family: 'Clash Display', 'General Sans', 'Inter', sans-serif;
    letter-spacing: -0.02em;
    font-weight: 600;
}

.script {
    font-family: 'Caveat', cursive;
    font-weight: 600;
}

h1:focus {
    outline: none;
}

/* ============================================================
   LIENS / BOUTONS LEGACY (Bootstrap résiduel — gardé pour compat)
   ============================================================ */
a, .btn-link {
    color: var(--rassembl-primary);
}

.btn-primary {
    color: var(--rassembl-cream);
    background-color: var(--rassembl-ink);
    border-color: var(--rassembl-ink);
}

.btn-primary:hover {
    background-color: var(--rassembl-primary);
    border-color: var(--rassembl-primary);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(107, 60, 255, 0.4);
}

/* ============================================================
   RESPONSIVE — toutes les pages utilisent .page-shell pour
   padding 32px + max-width centrée. En mobile, on réduit le
   padding pour gagner de la place et on neutralise les overrides
   inline locaux. Les pages qui ont besoin d'un comportement
   spécifique peuvent surcharger ensuite.
   ============================================================ */
@media (max-width: 700px) {
    .page-shell { padding: 12px !important; }
    /* MudTabs ToolBar : padding compact en mobile */
    .mud-tabs-toolbar { padding: 2px !important; }
    /* Inputs en mode dense + touch target plus généreux */
    .mud-input-control .mud-input-slot { min-height: 48px; }
}

/* ============================================================
   CONTRASTE — Color.Secondary = lime pur (#C4F542), illisible sur
   fond clair en variantes Text / Outlined. On force la version
   sombre (#9FD030, ratio AA sur blanc) pour ces variantes — Filled
   reste en lime pur car le texte du bouton est sombre par défaut.
   Idem pour les MudChip Outlined et le texte typo Secondary.
   ============================================================ */
.mud-button-text-secondary,
.mud-button-outlined-secondary {
    color: var(--rassembl-lime-dim) !important;
}
.mud-button-outlined-secondary {
    border-color: var(--rassembl-lime-dim) !important;
}
.mud-chip-text.mud-chip-color-secondary,
.mud-chip-outlined.mud-chip-color-secondary {
    color: var(--rassembl-lime-dim) !important;
}
.mud-chip-outlined.mud-chip-color-secondary {
    border-color: var(--rassembl-lime-dim) !important;
}
.mud-typography-color-secondary,
.mud-icon-button-color-secondary {
    color: var(--rassembl-lime-dim) !important;
}

/* ============================================================
   FORMS — états validation
   ============================================================ */
.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--rassembl-lime-dim);
}

.invalid {
    outline: 1px solid var(--rassembl-rose-deep);
}

.validation-message {
    color: var(--rassembl-rose-deep);
}

/* ============================================================
   BLAZOR ERROR UI / LOADING (overrides du runtime Blazor WASM)
   ============================================================ */
#blazor-error-ui {
    color-scheme: light only;
    background: var(--rassembl-cream-warm);
    border-top: 2px solid var(--rassembl-rose-deep);
    color: var(--rassembl-ink);
    bottom: 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.7rem 1.25rem 0.8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: 'General Sans', 'Inter', sans-serif;
}

#blazor-error-ui .reload {
    color: var(--rassembl-primary);
    font-weight: 600;
    margin-left: 0.5rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: var(--rassembl-rose-deep);
    color: white;
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 10px;
}

.blazor-error-boundary::after {
    content: "Une erreur est survenue dans cette section.";
}

/* Loading splash Blazor — couleurs Rassembl */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: rgba(107, 60, 255, 0.15);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--rassembl-primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 600;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    font-family: 'Clash Display', 'General Sans', sans-serif;
    letter-spacing: -0.01em;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Chargement de Rassembl…");
}

code {
    color: var(--rassembl-violet-deep);
    background: rgba(107, 60, 255, 0.08);
    padding: 0.1em 0.3em;
    border-radius: 4px;
    font-size: 0.92em;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.page {
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

main {
    width: 100vw;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

.layout-container {
    width: 100%;
    margin: 0;
    padding: 0;
}

.main-content {
    width: 100%;
    margin: 0;
    padding: 0;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}