/* Golden Arena — charte logov01 : #000 / #121212 / #C5A059 / #B89550 / #D4AF37 */

:root {
    --bg: #0d0d0d;
    --surface: #161616;
    --surface2: #242424;
    --text: #f0ebe3;
    --muted: #9a8f7a;
    --accent: #c5a059;
    --accent-dim: #b89550;
    --accent-bright: #d4af37;
    --warn: #d4af37;
    --danger: #e07070;
    --radius: 12px;
    --font: "DM Sans", system-ui, sans-serif;
    --font-display: "Outfit", var(--font);
    /* Champs formulaires — charte */
    --inp-bg: #111111;
    --inp-bg-elevated: #161616;
    --inp-border: color-mix(in srgb, var(--accent) 26%, var(--surface2));
    --inp-border-hover: color-mix(in srgb, var(--accent) 48%, var(--surface2));
    --inp-radius: 10px;
    --inp-pad-x: 0.8rem;
    --inp-pad-y: 0.55rem;
    --inp-min-h: 2.625rem;
    --inp-min-h-compact: 2.35rem;
    --inp-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    overflow-x: hidden;
}

/*
 * Marges gauche / droite du contenu central (header, main, footer utilisent .wrap).
 * Valeurs volontairement généreuses pour que l’air latéral se voie clairement.
 */
.wrap {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: clamp(2.5rem, 10vw, 9rem);
    box-sizing: border-box;
    min-width: 0;
}

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--surface2);
    position: sticky;
    top: 0;
    z-index: 100;
    max-width: 100%;
    overflow-x: hidden;
}

.header-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.55rem 0 0.6rem;
    max-width: 100%;
    min-width: 0;
}

/* Logo + boutons (☰, Onglets ↤, Enregistrer) : haut du menu */
.main-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 3.85rem;
}

.main-nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Logo : image puis bloc texte sur la même ligne horizontale (nom au-dessus de l’accroche) */
.logo {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.logo-img {
    flex-shrink: 0;
    height: 68px;
    width: auto;
    max-width: 210px;
    object-fit: contain;
    object-position: left center;
}

.logo-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
    min-width: 0;
    line-height: 1.2;
}

.logo-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.15;
    white-space: nowrap;
}

.logo-tagline {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.2;
}

.main-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
}

.main-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    align-items: center;
    width: 100%;
    padding-top: 0.55rem;
    border-top: 1px solid var(--surface2);
}

.main-nav-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.88rem;
    padding: 0.35rem 0;
    border-bottom: 2px solid transparent;
}

@media (min-width: 961px) {
    .logo {
        flex-shrink: 0;
    }

    .main-nav-links {
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        min-width: 0;
        gap: 0.3rem 0.65rem;
        overflow-x: hidden;
        overflow-y: visible;
        padding-bottom: 2px;
    }

    .main-nav-links a {
        flex-shrink: 0;
        font-size: 0.8rem;
        white-space: nowrap;
        padding: 0.35rem 0.1rem;
    }
}

.main-nav-links a .nav-icon {
    flex-shrink: 0;
    opacity: 0.88;
}

.main-nav-links a:hover .nav-icon,
.main-nav-links a.active .nav-icon,
.main-nav-links a:focus-visible .nav-icon {
    opacity: 1;
    color: var(--accent-bright);
}

.main-nav-links a:hover,
.main-nav-links a.active {
    color: var(--text);
    border-bottom-color: var(--accent);
}

.nav-link-text {
    line-height: 1.2;
}

/* Masqué par défaut : .btn impose display:flex et peut annuler l’attribut hidden */
#headerSaveBtn[hidden],
.header-save-btn[hidden] {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}

.header-save-btn {
    align-self: center;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    white-space: nowrap;
    border-bottom: none !important;
    min-height: var(--inp-min-h);
    box-sizing: border-box;
}

.header-save-btn:hover,
.header-save-btn:focus-visible {
    border-bottom: none !important;
}

@media (max-width: 960px) {
    .header-save-btn {
        min-height: 2.5rem;
        padding: 0.45rem 0.85rem;
    }
}

/* Barre fixe bas-gauche : menu ☰ + bascule menu latéral (hors bandeau) */
.ga-nav-fab-bar {
    position: fixed;
    left: max(0.65rem, env(safe-area-inset-left, 0px));
    bottom: max(0.65rem, env(safe-area-inset-bottom, 0px));
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    max-width: calc(100vw - 1.3rem);
}

.ga-nav-fab-bar > .nav-toggle,
.ga-nav-fab-bar > .layout-test-btn {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.ga-nav-fab-bar .nav-toggle {
    display: none;
    background: var(--surface2);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--surface2));
    color: var(--text);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}

@media (max-width: 960px) {
    .ga-nav-fab-bar .nav-toggle {
        display: block;
    }

    .main-nav-links {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        gap: 0;
    }

    .main-nav.is-open .main-nav-links {
        display: flex;
    }

    .main-nav-links a {
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--surface2);
    }

    .main-nav-head {
        min-height: 3.5rem;
    }

    .logo-img {
        height: 56px;
        max-width: 170px;
    }

    .logo-name {
        font-size: 1.02rem;
        white-space: normal;
    }

    .logo-tagline {
        font-size: 0.76rem;
        white-space: normal;
    }
}

/* Bouton test : menu vertical à gauche (desktop uniquement) */
.layout-test-btn {
    padding: 0.35rem 0.55rem !important;
    font-size: 0.72rem !important;
    font-weight: 600;
    min-height: auto !important;
    line-height: 1.2;
    color: var(--muted) !important;
    border-color: var(--surface2) !important;
}

.layout-test-btn:hover {
    color: var(--accent-bright) !important;
    border-color: color-mix(in srgb, var(--accent) 40%, var(--surface2)) !important;
}

body.layout-nav-left .layout-test-btn {
    color: var(--accent-bright) !important;
    border-color: color-mix(in srgb, var(--accent) 45%, var(--surface2)) !important;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface)) !important;
}

@media (max-width: 960px) {
    .ga-nav-fab-bar .layout-test-btn {
        display: none !important;
    }
}

@media (min-width: 961px) {
    body.layout-nav-left {
        --ga-nav-sidebar-w: min(15.5rem, 34vw);
    }

    body.layout-nav-left .site-header {
        position: static;
        border: none;
        background: transparent;
        box-shadow: none;
    }

    body.layout-nav-left .header-inner {
        padding: 0;
    }

    body.layout-nav-left .main-nav {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100vh;
        height: 100dvh;
        width: var(--ga-nav-sidebar-w);
        max-width: none;
        z-index: 99;
        display: flex !important;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border: none;
        border-right: 1px solid var(--surface2);
        background: var(--surface);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
        scrollbar-width: thin;
    }

    body.layout-nav-left .main-nav-head {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        min-height: 0;
        padding: 0.65rem 0.5rem 0.55rem;
        border-bottom: 1px solid var(--surface2);
    }

    body.layout-nav-left .logo {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        max-width: 100%;
        gap: 0.55rem;
    }

    body.layout-nav-left .logo-img {
        height: 52px;
        max-width: 160px;
    }

    body.layout-nav-left .logo-name {
        white-space: normal;
    }

    body.layout-nav-left .main-nav-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    body.layout-nav-left .main-nav-links {
        flex: 1 1 auto;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        padding: 0.35rem 0 1rem;
        border-top: none;
        gap: 0;
        overflow-y: auto;
        min-height: 0;
    }

    body.layout-nav-left .main-nav-links a {
        flex-shrink: 0;
        white-space: normal;
        padding: 0.5rem 0.45rem;
        border-bottom: 1px solid var(--surface2);
        border-left: 3px solid transparent;
        font-size: 0.8rem;
        line-height: 1.25;
    }

    body.layout-nav-left .main-nav-links a:hover,
    body.layout-nav-left .main-nav-links a:focus-visible {
        background: color-mix(in srgb, var(--accent) 6%, transparent);
    }

    body.layout-nav-left .main-nav-links a.active {
        border-bottom-color: var(--surface2);
        border-left-color: var(--accent);
        color: var(--text);
        background: color-mix(in srgb, var(--accent) 8%, transparent);
    }

    /*
     * Éviter le débordement : margin-left + largeur 100 % du bloc = contenu coupé à droite
     * (overflow-x sur body). On réserve explicitement la place du menu fixe.
     */
    body.layout-nav-left .site-main {
        margin-left: var(--ga-nav-sidebar-w);
        width: calc(100% - var(--ga-nav-sidebar-w));
        max-width: calc(100% - var(--ga-nav-sidebar-w));
    }

    body.layout-nav-left .site-footer {
        margin-left: var(--ga-nav-sidebar-w);
        width: calc(100% - var(--ga-nav-sidebar-w));
        max-width: calc(100% - var(--ga-nav-sidebar-w));
    }
}

.site-main {
    flex: 1;
    /* Vertical uniquement : .wrap fournit padding-inline (sinon le shorthand écrase les marges latérales). */
    padding-top: 2rem;
    padding-bottom: 3rem;
    position: relative;
    z-index: 1;
    min-width: 0;
    /* largeur gérée par le parent ; pas d’overflow-x ici pour ne pas masquer le contenu */
    width: 100%;
    max-width: 100%;
}

.brand-watermark {
    position: absolute;
    top: 0.75rem;
    right: 0;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

.brand-watermark img {
    filter: grayscale(1);
}

.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--surface2);
    padding: 0.85rem 0;
    font-size: 0.8125rem;
    color: var(--muted);
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
}

.site-footer .footer-inner {
    display: flex;
    justify-content: center;
}

.footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.85rem 1rem;
    max-width: 100%;
    text-align: center;
}

.footer-logo {
    height: 36px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
    opacity: 0.88;
}

.footer-brand-text {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(100%, 52rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
}

.footer-line {
    margin: 0;
    line-height: 1.35;
}

.footer-line--primary {
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
}

.footer-title {
    color: var(--accent-bright);
    font-weight: 600;
}

.footer-line--secondary {
    color: var(--muted);
    font-size: 0.78rem;
}

.footer-sep {
    display: inline;
    margin: 0 0.3rem;
    opacity: 0.45;
    font-weight: 400;
    color: var(--muted);
}

@media (max-width: 640px) {
    .footer-brand {
        flex-direction: column;
        align-items: center;
    }

    .footer-line--primary,
    .footer-line--secondary {
        font-size: 0.75rem;
    }

    .footer-sep {
        margin: 0 0.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-synthese > .synthese-logo-backdrop {
        animation: none;
        transform: none;
        opacity: 0.26;
    }
}

@keyframes synthese-backdrop-intro {
    0% {
        opacity: 0;
        transform: scale(1.12);
    }
    100% {
        opacity: 0.28;
        transform: scale(1);
    }
}

@keyframes synthese-backdrop-intro-sm {
    0% {
        opacity: 0;
        transform: scale(1.08);
    }
    100% {
        opacity: 0.22;
        transform: scale(1);
    }
}

/*
 * Page Synthèse : logo de fond sur toute la hauteur visible (viewport).
 * auto + hauteur 100 % = l’image remplit la zone utile en hauteur, largeur proportionnelle, centrée.
 */
body.page-synthese > .synthese-logo-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    box-sizing: border-box;
    /* Hauteur explicite = référence fiable pour dimensionner le fond sur tout l’écran visible */
    height: 100vh;
    height: 100dvh;
    width: 100%;
    padding: max(0.35rem, env(safe-area-inset-top, 0px)) max(0.35rem, env(safe-area-inset-right, 0px))
        max(0.35rem, env(safe-area-inset-bottom, 0px)) max(0.35rem, env(safe-area-inset-left, 0px));
    background-repeat: no-repeat;
    background-position: center center;
    background-origin: content-box;
    /* Hauteur du visuel : +20 % vs 100 % (logo de fond plus présent), largeur en proportion */
    background-size: auto 120%;
    opacity: 0.28;
    filter: brightness(1.45) contrast(1.05);
    transform-origin: center center;
    /* Durée intro zoom : +10 % vs 2,1 s */
    animation: synthese-backdrop-intro 2.31s cubic-bezier(0.33, 0.95, 0.32, 1) forwards;
}

.page-synthese .brand-watermark {
    display: none;
}

@media (max-width: 560px) {
    body.page-synthese > .synthese-logo-backdrop {
        opacity: 0.22;
        filter: brightness(1.35) contrast(1.02);
        animation-name: synthese-backdrop-intro-sm;
    }
}

@media print {
    body.page-synthese > .synthese-logo-backdrop {
        display: none;
    }

    .ga-nav-fab-bar {
        display: none !important;
    }
}

h1 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin: 2rem 0 0.75rem;
    color: var(--accent-bright);
}

h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    margin: 0 0 0.5rem;
}

.lead {
    font-size: 1.05rem;
    color: var(--muted);
    margin: 0 0 1.5rem;
    max-width: 70ch;
}

.muted {
    color: var(--muted);
}

.big {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--accent);
    margin: 0.25rem 0;
}

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.card {
    background: var(--surface);
    border: 1px solid var(--surface2);
    border-radius: var(--radius);
    padding: 1.25rem;
}

/* Page Synthèse : cartes Emplacement / Offre / Modules — fond ~30 % transparent (70 % surface) */
.grid-cards .card {
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border-color: color-mix(in srgb, var(--surface2) 70%, transparent);
}

.check {
    padding-left: 1.2rem;
}

.check li {
    margin: 0.5rem 0;
}

.note-box {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--surface2));
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

/* Salariés — légende (ex. ETP) */
.sal-legend {
    border: 1px solid var(--surface2);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 0.85rem 1.1rem 1rem;
    margin: 0 0 1.5rem;
}

.sal-legend-title {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-bright);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sal-legend-dl {
    margin: 0;
}

.sal-legend-dl dt {
    margin: 0 0 0.25rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
}

.sal-legend-dl dt abbr {
    text-decoration: none;
    border-bottom: 1px dotted color-mix(in srgb, var(--accent) 55%, transparent);
    cursor: help;
}

.sal-legend-dl dd {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--muted);
}

.sal-legend-examples {
    display: block;
    margin-top: 0.4rem;
    color: color-mix(in srgb, var(--muted) 92%, var(--text));
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 2rem 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.15rem;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-dim));
    color: #0d0d0d;
}

.btn-primary:hover {
    filter: brightness(1.08);
}

.btn-ghost {
    background: transparent;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--surface2));
}

.btn-ghost:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.badge {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bg);
    background: var(--accent);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-weight: 700;
}

.form-panel {
    background: var(--surface);
    border: 1px solid var(--surface2);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem 1.25rem;
    margin-top: 1rem;
    align-items: start;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.88rem;
    color: var(--muted);
    min-width: 0;
}

/* —— Champs texte / nombre / liste : charte or & alignement —— */
.site-main input:where(
        :not([type]),
        [type="text"],
        [type="number"],
        [type="email"],
        [type="search"],
        [type="tel"],
        [type="url"],
        [type="date"],
        [type="time"],
        [type="password"],
        [type="month"],
        [type="week"]
    ),
.site-main textarea {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--text);
    background-color: var(--inp-bg);
    border: 1px solid var(--inp-border);
    border-radius: var(--inp-radius);
    padding: var(--inp-pad-y) var(--inp-pad-x);
    min-height: var(--inp-min-h);
    box-shadow: var(--inp-shadow);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.site-main select {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--text);
    background-color: var(--inp-bg);
    border: 1px solid var(--inp-border);
    border-radius: var(--inp-radius);
    padding: var(--inp-pad-y) var(--inp-pad-x);
    min-height: var(--inp-min-h);
    box-shadow: var(--inp-shadow);
    cursor: pointer;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23c5a059' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 11px 11px;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.site-main textarea {
    min-height: 6rem;
    resize: vertical;
}

.site-main input::placeholder,
.site-main textarea::placeholder {
    color: var(--muted);
    opacity: 0.88;
}

.site-main input:hover:not(:disabled):not(:focus-visible),
.site-main textarea:hover:not(:disabled):not(:focus-visible),
.site-main select:hover:not(:disabled):not(:focus-visible) {
    border-color: var(--inp-border-hover);
}

.site-main input:focus-visible,
.site-main textarea:focus-visible,
.site-main select:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow:
        var(--inp-shadow),
        0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.site-main input:disabled,
.site-main textarea:disabled,
.site-main select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.site-main input[type="checkbox"],
.site-main input[type="radio"] {
    width: 1.1rem;
    height: 1.1rem;
    min-height: 1.1rem;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
    box-shadow: none;
    border-radius: 4px;
    vertical-align: middle;
}

.site-main input[type="radio"] {
    border-radius: 50%;
}

/* Labels : champs pleine largeur */
.field input:where(
        :not([type]),
        [type="text"],
        [type="number"],
        [type="email"],
        [type="search"],
        [type="tel"],
        [type="url"],
        [type="date"],
        [type="time"],
        [type="password"]
    ),
.field textarea,
.field select {
    width: 100%;
    max-width: 100%;
}

/* Tableaux : cellules alignées, champs compacts */
.table-wrap table.data td,
.table-wrap table.data th {
    vertical-align: middle;
}

.table-wrap table.data input:where([type="number"], [type="text"]),
.table-wrap table.data textarea,
.table-wrap table.data select {
    min-height: var(--inp-min-h-compact);
    padding: 0.4rem 0.55rem;
    font-size: 0.875rem;
    background: var(--inp-bg-elevated);
}

.table-wrap table.data .num input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.form-error {
    color: var(--danger);
    margin: 0 0 1rem;
}

.contact-form textarea {
    min-height: 8.75rem;
    resize: vertical;
}

.kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
}

.kpi {
    flex: 1;
    min-width: 140px;
    background: var(--bg);
    border: 1px solid var(--surface2);
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

.kpi span {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 0.25rem;
}

.kpi strong {
    font-size: 1.1rem;
    color: var(--accent-bright);
}

.table-wrap {
    overflow-x: auto;
    max-width: 100%;
    width: 100%;
    margin: 0.75rem 0;
    min-width: 0;
}

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

table.data th,
table.data td {
    padding: 0.55rem 0.65rem;
    text-align: left;
    border-bottom: 1px solid var(--surface2);
}

table.data th {
    color: var(--accent);
    font-weight: 600;
}

table.data .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

table.data tbody tr:hover {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* Formulaires en tableau : moins de scroll, 2 colonnes lisibles */
.table-wrap--tight {
    margin: 0.35rem 0 0;
}

.compact-form-table {
    font-size: 0.86rem;
}

.compact-form-table th[scope="row"] {
    font-weight: 500;
    color: var(--muted);
    vertical-align: middle;
    width: 58%;
    padding: 0.35rem 0.55rem;
}

.compact-form-table td,
.compact-form-table thead th {
    padding: 0.35rem 0.55rem;
}

.compact-form-table tbody tr.compact-form-section td {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    color: var(--accent-bright);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--surface2);
}

.compact-form-cell {
    vertical-align: middle;
}

.compact-form-table .compact-form-cell input:where([type="number"], [type="text"]) {
    max-width: 11rem;
    width: 100%;
    margin-left: auto;
    display: block;
}

.pr-side-by-side {
    display: grid;
    gap: 1rem;
}

@media (min-width: 960px) {
    .pr-side-by-side {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .pr-side-by-side > .form-panel {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* Zone chalandise — carte à gauche, textes à droite (+10 % sur la taille carrée de référence 22rem) */
.ch-map-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem 1.75rem;
    margin: 0.35rem 0 1.75rem;
}

.ch-map-layout__map {
    flex: 0 0 auto;
    align-self: flex-start;
}

.ch-map-layout__aside {
    flex: 1 1 17rem;
    min-width: min(100%, 15rem);
    max-width: 42rem;
}

.ch-map-intro {
    margin: 0 0 0.85rem;
}

.ch-map-layout__aside .ch-map-legend {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
}

/* Conteneur carré (Leaflet impose height:100% sur .leaflet-container : le ratio est sur le wrap) */
.ch-map-wrap {
    width: min(100%, calc(22rem * 1.1));
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    border-radius: var(--radius);
    border: 1px solid var(--surface2);
    overflow: hidden;
    box-sizing: border-box;
    z-index: 1;
    position: relative;
}

@media (max-width: 640px) {
    .ch-map-layout {
        flex-direction: column;
    }

    .ch-map-layout__map {
        width: 100%;
    }

    .ch-map-wrap {
        width: min(100%, calc(22rem * 1.1));
    }

    .ch-map-layout__aside {
        max-width: none;
    }
}

.ch-map {
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    z-index: 1;
}

.ch-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.5rem;
    margin: 0.75rem 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--surface2);
    background: color-mix(in srgb, var(--surface) 88%, var(--bg));
}

.ch-leg {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.ch-leg::before {
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ch-c, var(--accent));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--ch-c, var(--accent)) 45%, var(--surface)),
        0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Tableau Couronnes : même couleur que la carte */
.ch-couronne-row td:first-child {
    border-left: 4px solid var(--ch-accent, var(--accent));
    padding-left: 0.75rem;
}

.ch-couronne-name {
    font-weight: 600;
}

/* Blocs liste des communes : bandeau latéral = couleur de la couronne */
.page-chalandise .ch-zone-section {
    margin: 2.25rem 0 0;
    padding: 1rem 1rem 1.25rem 1.1rem;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--ch-zone, var(--surface2)) 42%, var(--surface2));
    border-left: 5px solid var(--ch-zone, var(--accent));
    background: linear-gradient(
        105deg,
        color-mix(in srgb, var(--ch-zone) 12%, var(--surface)) 0%,
        var(--surface) min(100%, 28rem)
    );
    scroll-margin-top: 5.5rem;
}

.page-chalandise .ch-zone-section:first-of-type {
    margin-top: 1.75rem;
}

.page-chalandise .ch-zone-h2 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    color: color-mix(in srgb, var(--ch-zone, var(--accent-bright)) 82%, var(--text));
}

/* Prévisions */
.pv-chalandise-bridge {
    margin-top: 1.25rem;
    padding: 1rem;
    border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--surface2));
    background: color-mix(in srgb, var(--accent) 5%, var(--bg));
}

.pv-chalandise-bridge-title {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--accent-bright);
}

.pv-chalandise-bridge-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.pv-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.pv-chart-card .pv-chart-wrap {
    height: 260px;
    position: relative;
}

.pv-typo-label {
    width: 100%;
    max-width: 22rem;
}

.pv-typo-pct {
    width: 4.75rem;
    min-width: 4rem;
    text-align: right;
}

/* Prévisions : tableaux style classique (hors charte or du site) */
.page-previsions table.data thead th {
    background: #334155;
    color: #f1f5f9;
    border-bottom: 1px solid #475569;
    font-weight: 600;
}

.page-previsions table.data tbody td {
    border-bottom: 1px solid #334155;
}

.page-previsions table.data tbody tr:nth-child(even) {
    background: rgba(30, 41, 55, 0.45);
}

.page-previsions table.data tbody tr:hover {
    background: rgba(51, 65, 85, 0.65);
}

.page-previsions table.data tfoot td,
.page-previsions table.data tfoot th {
    background: rgba(30, 41, 55, 0.75);
    border-top: 2px solid #475569;
    color: #f1f5f9;
}

.page-previsions table.data .num {
    font-variant-numeric: tabular-nums;
    color: #e2e8f0;
}

.page-previsions .kpi {
    background: #1e293b;
    border-color: #334155;
}

.page-previsions .kpi span {
    color: #94a3b8;
}

.page-previsions .kpi strong {
    color: #bfdbfe;
}

.page-previsions .pv-chart-card {
    background: #0f172a;
    border-color: #334155;
}

.page-previsions .pv-chart-card h3 {
    color: #e2e8f0;
}

.page-previsions .form-panel input:where([type="number"], [type="text"]),
.page-previsions .form-panel textarea,
.page-previsions .form-panel select {
    background: #0f172a;
    border-color: #4b5563;
}

.page-previsions .form-panel input:focus-visible,
.page-previsions .form-panel textarea:focus-visible,
.page-previsions .form-panel select:focus-visible {
    border-color: var(--accent);
    box-shadow:
        var(--inp-shadow),
        0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.page-previsions table.data input,
.page-previsions table.data textarea,
.page-previsions table.data select {
    background: #0f172a;
    border-color: #4b5563;
}

.page-previsions table.data input:focus-visible,
.page-previsions table.data textarea:focus-visible,
.page-previsions table.data select:focus-visible {
    border-color: var(--accent);
    box-shadow:
        var(--inp-shadow),
        0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

/* Terrains */
.terrains-page {
    margin: 1rem 0;
}

.terrains-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 800px) {
    .terrains-layout {
        grid-template-columns: 1fr;
    }
}

.terrains-palette {
    background: var(--surface);
    border: 1px solid var(--surface2);
    border-radius: var(--radius);
    padding: 1rem;
}

.terrains-palette-title {
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.terrains-palette-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.terrains-chip {
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    cursor: grab;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--surface2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.terrains-chip--padel {
    background: color-mix(in srgb, var(--accent) 18%, var(--surface));
    border-color: var(--accent-dim);
}

.terrains-chip--pickleball {
    background: color-mix(in srgb, var(--accent-bright) 12%, var(--surface));
}

.terrains-chip--bar {
    background: color-mix(in srgb, var(--accent-dim) 15%, var(--surface));
}

.terrains-canvas-shell {
    display: grid;
    grid-template-columns: 1fr 36px;
    grid-template-rows: 1fr 36px;
    gap: 4px;
    align-items: stretch;
}

.terrains-canvas-cell {
    grid-column: 1;
    grid-row: 1;
    overflow: auto;
    max-width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--surface2);
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 19px,
        color-mix(in srgb, var(--accent) 6%, transparent) 20px
    ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 19px,
            color-mix(in srgb, var(--accent) 6%, transparent) 20px
        ),
        #0a0a0a;
}

.terrains-canvas {
    position: relative;
    background: transparent;
    margin: 0 auto;
}

.terrains-canvas-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    color: var(--muted);
    font-size: 0.9rem;
    pointer-events: none;
}

.terrains-item {
    position: absolute;
    border-radius: 6px;
    border: 2px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 22%, #1a1510);
    cursor: grab;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    text-align: center;
    padding: 0.25rem 0.3rem 0.45rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    user-select: none;
    touch-action: none;
}

.terrains-item--selected {
    z-index: 4;
    outline: 2px solid var(--accent-bright);
    outline-offset: 1px;
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.5),
        0 0 0 1px color-mix(in srgb, var(--accent-bright) 40%, transparent);
}

.terrains-item-dimlines {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.15rem;
    max-width: 100%;
    pointer-events: none;
}

.terrains-item-line {
    font-size: 0.52rem;
    line-height: 1.2;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.terrains-item-resize {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 15px;
    height: 15px;
    background: var(--accent-bright);
    border: 1px solid var(--surface);
    border-radius: 4px 0 6px 0;
    cursor: nwse-resize;
    pointer-events: auto;
    touch-action: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.terrains-item-resize:hover {
    filter: brightness(1.12);
}

.terrains-item--pickleball {
    border-color: var(--accent-bright);
}

.terrains-item--bar {
    border-color: var(--accent-dim);
    background: color-mix(in srgb, var(--accent-dim) 25%, #1a1510);
}

.terrains-item-label {
    font-weight: 700;
    color: var(--text);
    pointer-events: none;
}

.terrains-item-meta {
    color: var(--muted);
    font-size: 0.6rem;
}

.terrains-resize {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.terrains-resize--y {
    grid-column: 2;
    grid-row: 1;
    flex-direction: column;
}

.terrains-resize--x {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
}

.terrains-resize-corner {
    grid-column: 2;
    grid-row: 2;
}

.terrains-resize-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--surface2);
    background: var(--surface);
    color: var(--accent);
    cursor: pointer;
    font-size: 0.75rem;
}

.terrains-resize-btn:hover {
    background: var(--surface2);
}

.terrains-trash {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 2px dashed var(--surface2);
    text-align: center;
    font-size: 0.88rem;
    color: var(--muted);
    transition: border-color 0.15s, background 0.15s;
}

.terrains-trash--active {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    color: var(--text);
}

.terrains-summary {
    margin-top: 1.25rem;
}

.terrains-summary-list {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
}

.terrains-canvas-header--row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.terrains-room-size {
    font-size: 0.8rem;
    color: var(--accent);
}

/* Calendrier */
.cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.5rem;
    margin: 1rem 0;
}

.cal-year-label {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.cal-year-select {
    min-width: 5.5rem;
}

.cal-sport-field {
    border: 1px solid var(--surface2);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    margin: 0;
}

.cal-sport-legend {
    padding: 0 0.35rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.cal-sport-seg {
    display: flex;
    gap: 0.5rem;
}

.cal-sport-opt {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.5rem 0 1rem;
}

.cal-leg {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}

.cal-leg--ouvre {
    background: color-mix(in srgb, var(--muted) 25%, var(--surface));
}
.cal-leg--weekend {
    background: color-mix(in srgb, var(--accent-dim) 30%, var(--surface));
}
.cal-leg--vacances {
    background: color-mix(in srgb, var(--accent-bright) 25%, var(--surface));
}
.cal-leg--ferie {
    background: color-mix(in srgb, var(--danger) 25%, var(--surface));
}

.cal-section-lead {
    margin: 0 0 0.65rem;
    font-size: 0.9rem;
}

.cal-subheading {
    margin: 1.25rem 0 0.35rem;
    font-size: 1rem;
    color: var(--accent);
}

.cal-hours-hint {
    font-weight: 400;
    color: var(--muted);
    font-size: 0.82rem;
}

.cal-save-hint {
    margin: 0.65rem 0 0;
    font-size: 0.85rem;
    min-height: 1.25rem;
}

.cal-hours-col-time {
    width: 7.5rem;
    text-align: center;
}

.cal-hours-cell-time {
    text-align: center;
    vertical-align: middle;
}

.cal-hours-table input[type="time"] {
    min-height: var(--inp-min-h-compact);
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
    background: var(--inp-bg-elevated);
    border: 1px solid var(--surface2);
    border-radius: 8px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.cal-hours-table input[type="time"]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
}

.cal-months {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.cal-month-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: var(--accent);
}

.cal-dow-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 2px;
}

.cal-dow-cell {
    text-align: center;
    font-size: 0.65rem;
    color: var(--muted);
    text-transform: uppercase;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cal-cell--empty {
    min-height: 2.25rem;
}

.cal-day {
    min-height: 2.6rem;
    border-radius: 6px;
    padding: 0.2rem 0.25rem;
    font-size: 0.72rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid transparent;
}

.cal-day-num {
    font-weight: 700;
}

.cal-day-price {
    font-size: 0.62rem;
    color: var(--accent-bright);
    margin-top: 0.1rem;
}

.cal-day--ouvre {
    background: var(--surface2);
}
.cal-day--weekend {
    background: color-mix(in srgb, var(--accent-dim) 22%, var(--surface));
}
.cal-day--vacances {
    background: color-mix(in srgb, var(--accent-bright) 18%, var(--surface));
}
.cal-day--ferie {
    background: color-mix(in srgb, var(--danger) 20%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.cal-price-inp {
    width: 100%;
    max-width: 5.25rem;
    min-width: 4rem;
    text-align: right;
}

.cal-disc {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cal-disc-table .compact-form-cell .cal-disc {
    max-width: 5.25rem;
    margin-left: auto;
    display: block;
}

a {
    color: var(--accent);
}

a:hover {
    color: var(--accent-bright);
}

code {
    font-size: 0.88em;
    background: var(--surface2);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

/* Page paramètres */
.pr-total-line {
    margin: 1rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--surface2);
    font-size: 1rem;
}

.pr-total-line strong {
    display: block;
    margin-top: 0.35rem;
    font-size: 1.25rem;
    color: var(--accent-bright);
    font-family: var(--font-display);
}

.field.pr-checkbox-line {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 1rem;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.9rem;
}

.pr-checkbox-line input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.pr-actions {
    margin-top: 0.5rem;
}

.pr-save-msg {
    margin-top: 0.75rem;
    max-width: 60ch;
}

/* Paramètres — blocs par activité */
.pr-activity {
    border-left: 4px solid var(--surface2);
    padding-left: 1.15rem;
    margin-left: 0.15rem;
}

.pr-activity--padel {
    border-left-color: #c5a059;
}

.pr-activity--pickle {
    border-left-color: #6b9bd1;
}

.pr-activity--club {
    border-left-color: #94a3b8;
}

.pr-activity-title {
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: 0.02em;
}

.pr-activity-lead {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    max-width: 65ch;
}

.pr-subsection {
    margin: 1.25rem 0 0.65rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pr-activity .pr-subsection:first-of-type {
    margin-top: 0.5rem;
}

/* Salariés */
.sal-col-actions {
    width: 3rem;
    text-align: center;
    vertical-align: middle;
}

.sal-btn-del {
    padding: 0.1rem 0.45rem !important;
    min-width: auto !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
    font-weight: 400;
}

.sal-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.sal-table .sal-lib {
    width: 100%;
    max-width: 18rem;
}

.sal-table .sal-etp,
.sal-table .sal-brut,
.sal-table .sal-net,
.sal-table .sal-cout {
    width: 5.25rem;
    min-width: 4.25rem;
    max-width: 6.5rem;
    text-align: right;
}

/* Sous-traitants */
.st-col-actions {
    width: 3rem;
    text-align: center;
    vertical-align: middle;
}

.st-btn-del {
    padding: 0.1rem 0.45rem !important;
    min-width: auto !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
    font-weight: 400;
}

.st-table .st-lib {
    width: 100%;
    max-width: 22rem;
}

.st-table .st-ligne {
    width: 100%;
    max-width: 8rem;
    min-width: 5.5rem;
    font-variant-numeric: tabular-nums;
}

.st-table .st-montant {
    width: 6.5rem;
    min-width: 5rem;
    text-align: right;
}

/* Devis reçus */
.dev-col-actions {
    width: 3.75rem;
    text-align: center;
    vertical-align: middle;
}

.dev-btn-del {
    padding: 0.2rem 0.4rem !important;
    min-width: auto !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    font-weight: 600;
    white-space: nowrap;
}

.dev-col-pdf-head,
.dev-col-pdf {
    vertical-align: top;
    min-width: 7rem;
    max-width: 10.5rem;
}

.dev-col-pdf.dev-pdf-dragover {
    outline: 2px dashed var(--accent);
    outline-offset: 2px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.dev-pdf-drop-hint {
    display: block;
    font-size: 0.62rem;
    line-height: 1.3;
    margin-top: 0.35rem;
    max-width: 10rem;
}

.dev-pdf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-bottom: 0.25rem;
}

.dev-pdf-actions .btn {
    padding: 0.2rem 0.45rem !important;
    min-height: auto !important;
    font-size: 0.72rem !important;
}

.dev-pdf-clear {
    min-width: 1.75rem !important;
    padding-inline: 0.25rem !important;
}

.dev-pdf-filename {
    display: block;
    font-size: 0.72rem;
    line-height: 1.25;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dev-pdf-modal {
    width: min(96vw, 56rem);
    max-height: 90vh;
    margin: auto;
    padding: 0;
    border: 1px solid var(--surface2);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.dev-pdf-modal::backdrop {
    background: rgba(0, 0, 0, 0.72);
}

.dev-pdf-modal__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--surface2);
}

.dev-pdf-modal__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.dev-pdf-modal__frame {
    display: block;
    width: 100%;
    height: min(72vh, 820px);
    border: none;
    background: #0a0a0a;
}

.dev-table input[type="text"],
.dev-table input[type="number"],
.dev-table input[type="date"],
.dev-table select {
    min-height: var(--inp-min-h-compact);
    padding: 0.35rem 0.45rem;
    font-size: 0.8rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.dev-table .dev-fournisseur {
    min-width: 7rem;
    max-width: 11rem;
}

.dev-table .dev-objet {
    min-width: 8rem;
    max-width: 14rem;
}

.dev-table .dev-ref {
    min-width: 5rem;
    max-width: 7rem;
}

.dev-table .dev-montant-ht,
.dev-table .dev-montant-ttc {
    max-width: 6.25rem;
    text-align: right;
}

.dev-table input.dev-date,
.dev-table input.dev-valid {
    min-width: 6.5rem;
    max-width: 8.5rem;
}

.dev-table .dev-statut {
    min-width: 7.5rem;
    max-width: 10rem;
}

.dev-table .dev-notes {
    min-width: 6rem;
    max-width: 10rem;
}