:root {
    --plamoges-blue: #3575cc;
    --plamoges-violet: #8668c1;
    --plamoges-white: #ffffff;
    --plamoges-text: #1f2937;
    --plamoges-muted: #6b7280;
    --plamoges-line: #dbe3ee;
}

body {
    color: var(--plamoges-text);
}

.btn-primary {
    --bs-btn-bg: var(--plamoges-blue);
    --bs-btn-border-color: var(--plamoges-blue);
    --bs-btn-hover-bg: #25599e;
    --bs-btn-hover-border-color: #25599e;
}

.btn-outline-primary {
    --bs-btn-color: var(--plamoges-blue);
    --bs-btn-border-color: var(--plamoges-blue);
    --bs-btn-hover-bg: var(--plamoges-blue);
    --bs-btn-hover-border-color: var(--plamoges-blue);
}

.navbar-brand {
    align-items: center;
    display: inline-flex;
    gap: 0.65rem;
}

.plamoges-brand-mark {
    align-items: center;
    background: var(--plamoges-blue);
    border-radius: 8px;
    color: var(--plamoges-white);
    display: inline-flex;
    font-weight: 800;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.plamoges-brand-text {
    color: var(--plamoges-blue);
    font-weight: 800;
}

.plamoges-lang-form {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
    min-height: 2.5rem;
}

.plamoges-lang-form a,
.plamoges-lang-form strong {
    font-size: 0.82rem;
}

.plamoges-lang-label {
    color: var(--plamoges-muted);
    font-size: 0.82rem;
}

.plamoges-hero {
    background: var(--plamoges-white);
    border-bottom: 1px solid var(--plamoges-line);
    padding: 7rem 0 4rem;
}

.plamoges-hero h1 {
    color: var(--plamoges-blue);
    font-size: clamp(2.75rem, 5vw, 5rem);
    font-weight: 800;
    line-height: 1;
}

.plamoges-hero-panel {
    background: var(--plamoges-white);
    border: 1px solid var(--plamoges-line);
    border-top: 4px solid var(--plamoges-violet);
    border-radius: 8px;
    box-shadow: 0 1rem 2.5rem rgba(31, 41, 55, 0.08);
    display: grid;
    gap: 0.75rem;
    padding: 2rem;
}

.plamoges-hero-panel span {
    color: var(--plamoges-violet);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.plamoges-hero-panel strong {
    border-bottom: 1px solid var(--plamoges-line);
    padding-bottom: 0.75rem;
}

.plamoges-hero-panel strong:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.plamoges-page-band {
    background: var(--plamoges-blue);
    color: var(--plamoges-white);
    padding: 7rem 0 3rem;
}

.plamoges-page-heading {
    max-width: 760px;
}

.plamoges-page-heading h1 {
    color: var(--plamoges-white);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
}

.plamoges-page-heading p {
    color: rgba(255, 255, 255, 0.82);
}

.plamoges-eyebrow {
    color: var(--plamoges-violet);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.plamoges-page-band .plamoges-eyebrow {
    color: rgba(255, 255, 255, 0.78);
}

.plamoges-feature {
    background: var(--plamoges-white);
    border: 1px solid var(--plamoges-line);
    border-radius: 8px;
    height: 100%;
    padding: 1.5rem;
}

.plamoges-feature i {
    color: var(--plamoges-violet);
    font-size: 2rem;
}

.plamoges-feature h2 {
    font-size: 1.15rem;
    margin-top: 1rem;
}

.plamoges-feature p {
    color: var(--plamoges-muted);
    margin-bottom: 0;
}

.plamoges-footer {
    background: #f8fafc;
    border-top: 1px solid var(--plamoges-line);
    padding: 2rem 0;
}

.plamoges-footer p {
    color: var(--plamoges-muted);
    margin: 0.25rem 0 0;
}


/* ------------------------------------------------------------------ */
/* Tables de detail empilees sur mobile                                */
/*                                                                     */
/* Les listes principales des ecrans en ligne ont un rendu en cartes    */
/* (voir UI_PAGE_MODELS, docs en et fr). Les sous-tables des panneaux  */
/* detail, elles, sont trop nombreuses et trop variees pour justifier   */
/* un second rendu chacune : elles s empilent, en opt-in, via la classe */
/* `table-stack-mobile`. Chaque cellule doit porter `data-label` avec   */
/* le libelle de sa colonne, sinon l empilement perd le sens des        */
/* valeurs. Les lignes de total gardent leur mise en forme et ne sont   */
/* pas libellees : leur premiere cellule dit deja ce qu elles sont.     */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .table-stack-mobile,
    .table-stack-mobile tbody,
    .table-stack-mobile tbody tr,
    .table-stack-mobile tbody td {
        display: block;
        width: 100%;
    }

    .table-stack-mobile thead {
        display: none;
    }

    .table-stack-mobile tbody tr {
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        margin-bottom: 0.4rem;
        overflow: hidden;
        background: #fff;
    }

    .table-stack-mobile tbody td {
        border: 0;
        border-bottom: 1px solid #f1f3f5;
        padding: 0.4rem 0.6rem;
        text-align: left !important;
        white-space: normal !important;
    }

    .table-stack-mobile tbody tr td:last-child {
        border-bottom: 0;
    }

    .table-stack-mobile tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        color: #6c757d;
    }
}