/* ==========================================================================
   # Attention sélective
========================================================================== */
.SaField {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 0 6px;

    &.done {
        .SaBanner {
            opacity: .3;
            pointer-events: none;
            animation: none;
        }

        .SaReal {
            opacity: .5;
            pointer-events: none;
        }
    }
}

.SaBanner {
    font-weight: 800;
    font-size: .8rem;
    text-transform: uppercase;
    color: var(--PureWhite);
    border: none;
    border-radius: 10px;
    padding: 16px 20px;
    cursor: pointer;
    background: linear-gradient(135deg, #ff5f6d, #ffc371);
    box-shadow: 0 10px 24px rgba(255, 95, 109, .35);
    animation: SaPulse 1.6s ease-in-out infinite;

    &:nth-of-type(2n) {
        background: linear-gradient(135deg, #f857a6, #ff5858);
        box-shadow: 0 10px 24px rgba(248, 87, 166, .35);
    }

    &:nth-of-type(3n) {
        background: linear-gradient(135deg, #ffd200, #f7971e);
        box-shadow: 0 10px 24px rgba(247, 151, 30, .35);
        color: #3a2600;
    }

    @media (prefers-reduced-motion: reduce) {animation: none;}
}

@keyframes SaPulse {
    0%, 100% {transform: scale(1);}
    50% {transform: scale(1.035);}
}

.SaReal {
    font-size: .82rem;
    font-weight: 600;
    color: var(--Muted);
    background: #eceae6;
    border: 1px solid var(--Borders);
    border-radius: 6px;
    padding: 9px 18px;
    cursor: pointer;

    &:hover {
        border-color: var(--Primary);
        color: var(--Primary);
    }
}

.SaCounter {
    margin-top: 18px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--MinMuted);
}

/* ==========================================================================
   # Biais cognitif
========================================================================== */
.BcList {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.BcRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 4px;
    border-bottom: 1px solid rgba(var(--PureBlackRGB), 0.07);
    cursor: pointer;

    &:last-child {border-bottom: none;}

    span {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    strong {
        font-size: .92rem;
        color: var(--Charcoal);
    }

    small {
        font-size: .78rem;
        color: var(--MinMuted);
        font-weight: 500;
    }
}

.BcToggle {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 26px;
    border-radius: 50px;
    background: var(--Borders);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s ease;

    &::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--PureWhite);
        box-shadow: 0 1px 4px rgba(var(--PureBlackRGB), .25);
        transition: transform .2s ease;
    }

    &:checked {
        background: var(--Primary);

        &::before {transform: translateX(18px);}
    }
}

/* ==========================================================================
   # Charge cognitive
========================================================================== */
.CcStage {margin-top: 24px;}

.CcTimer {
    font-size: .85rem;
    font-weight: 800;
    color: var(--Primary);
    margin-bottom: 14px;
}

.CcGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;

    &.clean {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 16px;

        .CcTile {
            background: var(--PureWhite);
            box-shadow: 0 6px 20px rgba(var(--PureBlackRGB), 0.07);
            padding: 20px;
            font-size: .85rem;
            border: none;
            border-radius: 14px;

            &.more {
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--MinMuted);
                font-style: italic;
                cursor: default;
            }
        }
    }
}

.CcTile {
    background: var(--Background);
    border: 1px solid var(--Borders);
    border-radius: 8px;
    padding: 10px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--Muted);
    cursor: pointer;
    line-height: 1.4;

    &:hover {border-color: var(--Primary);}
}

/* ==========================================================================
   # Chunking
========================================================================== */
.ChkStage {
    margin-top: 24px;
    text-align: center;
    padding: 30px 20px;
    background: var(--Background);
    border-radius: 14px;
}

.ChkNumber {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: 800;
    color: var(--Charcoal);
    font-variant-numeric: tabular-nums;
}

.ChkInputRow {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

#chkInput {
    font-size: 1rem;
    padding: 12px 16px;
    border: 1.5px solid var(--Borders);
    border-radius: 10px;
    width: 220px;
    text-align: center;

    &:focus {
        border-color: var(--Primary);
        outline: none;
    }
}

/* ==========================================================================
   # Effet esthetique usabilite
========================================================================== */
.AuGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 8px;
 
    @media (max-width: 760px) {grid-template-columns: 1fr;}
}
 
.AuPanel {
    position: relative;
    border-radius: 16px;
    padding: 26px;
 
    &.picked {
        outline: 3px solid var(--Primary);
        outline-offset: 4px;
    }
}
 
.AuTag {
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--MinMuted);
}
 
#panelA {
    background: #f2f1ee;
    border: 1px solid #ccc7bd;
 
    .AuFormA {
        display: flex;
        flex-direction: column;
        font-family: "Times New Roman", Times, serif;
    }
 
    label {
        font-size: 13px;
        color: #555;
        margin-top: 10px;
        display: block;
    }
 
    input {
        font-family: inherit;
        font-size: 14px;
        padding: 3px 4px;
        border: 1px solid #999;
        border-radius: 0;
        background: #fff;
        margin-top: 3px;
        width: 100%;
        display: block;
    }
 
    button[type="submit"] {
        margin-top: 16px;
        font-family: inherit;
        font-size: 13px;
        padding: 5px 12px;
        background: #e2e2e2;
        border: 1px solid #999;
        border-radius: 0;
        cursor: pointer;
        color: #333;
 
        &:hover {background: #d5d5d5;}
    }
}
 
#panelB {
    background: var(--PureWhite);
    box-shadow: 0 8px 30px rgba(var(--PureBlackRGB), 0.08);
    border: 1px solid rgba(var(--PureBlackRGB), 0.06);
 
    .AuFormB {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-top: 8px;
    }
 
    label {
        font-size: .78rem;
        font-weight: 700;
        color: var(--Charcoal);
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
 
    input {
        font-size: .88rem;
        padding: 11px 14px;
        border: 1.5px solid var(--Borders);
        border-radius: 10px;
        background: #faf9f7;
        transition: border-color .2s ease;
 
        &:focus {
            border-color: var(--Primary);
            outline: none;
        }
    }
 
    button[type="submit"] {
        margin-top: 6px;
        font-size: .8rem;
        font-weight: 800;
        text-transform: uppercase;
        padding: 13px;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        color: var(--PureWhite);
        background: linear-gradient(135deg, var(--Primary) 0%, var(--DarkPrimary) 100%);
        box-shadow: 0 8px 20px rgba(var(--PrimaryRGB), 0.25);
        transition: transform .15s ease;
 
        &:hover {transform: translateY(-2px);}
    }
}
 
.AuMsg {
    font-size: .78rem;
    font-weight: 700;
    margin-top: 10px;
    min-height: 1.2em;
 
    &.error {color: var(--Danger);}
    &.success {color: var(--Success);}
}
 
.AuVote {margin-top: 18px;}

/* ==========================================================================
   # Effet de gradient d'objectif
========================================================================== */
.GgCard {margin-top: 20px;}

.GgStamps {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.GgSlot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px dashed var(--Borders);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--LightMuted);
    transition: all .2s ease;

    &.filled {
        border-style: solid;
        border-color: var(--Primary);
        background: rgba(var(--PrimaryRGB), .12);
        color: var(--Primary);
    }

    @media (prefers-reduced-motion: reduce) {transition: none;}
}

/* ==========================================================================
   # Effet de position sérielle
========================================================================== */
.DemoReview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.DemoWordChip {
    font-size: .82rem;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--Background);
    color: var(--MinMuted);

    &.hit {
        background: rgba(var(--PrimaryRGB), .12);
        color: var(--Primary);
    }
}

/* ==========================================================================
   # Effet Von Restorff
========================================================================== */
.VrGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
    padding: 26px 20px;
    background: var(--Background);
    border-radius: 14px;
}

.VrItem {
    background: var(--PureWhite);
    border-radius: 10px;
    padding: 14px 18px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--Muted);
    box-shadow: 0 2px 8px rgba(var(--PureBlackRGB), .05);

    &.odd {
        background: linear-gradient(135deg, var(--Primary) 0%, var(--DarkPrimary) 100%);
        color: var(--PureWhite);
        font-size: 1.1rem;
        box-shadow: 0 8px 20px rgba(var(--PrimaryRGB), .35);
    }
}

/* ==========================================================================
   # Effet Zeigarnik
========================================================================== */
.ZgGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 20px;

  @media (max-width: 600px) {grid-template-columns: 1fr;}
}

.ZgList {
    background: var(--Background);
    border-radius: 14px;
    padding: 20px;
}

.ZgLabel {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--Primary);
    margin-bottom: 10px;
}

.ZgItem {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--Charcoal);
    padding: 6px 0;
    cursor: pointer;

    input {
        width: 16px;
        height: 16px;
        accent-color: var(--Primary);
        cursor: pointer;
    }

    &.ZgItem--locked {
        opacity: .55;
        cursor: not-allowed;

        input {cursor: not-allowed;}
    }
}

.ZgAsk {margin-top: 24px;}

.ZgAskLabel {
    font-size: .9rem;
    font-weight: 700;
    color: var(--Charcoal);
    margin-bottom: 12px;
}

/* ==========================================================================
   # Flow
========================================================================== */
.FlArena {margin-top: 20px;}

.FlStatus {
    font-size: .85rem;
    font-weight: 800;
    color: var(--Primary);
    margin-bottom: 10px;
}

.FlZone {
    position: relative;
    height: 180px;
    background: var(--Background);
    border-radius: 14px;
    overflow: hidden;
}

.FlTarget {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--Primary) 0%, var(--DarkPrimary) 100%);
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(var(--PrimaryRGB), .35);
    border: none;
}

/* ==========================================================================
   # Loi de connexion uniforme
========================================================================== */
.UcRow {
    position: relative;
    display: flex;
    gap: 24px;
    padding: 30px 20px;
    background: var(--Background);
    border-radius: 14px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.UcItem {
    font-size: 1.6rem;
    color: var(--Primary);
    position: relative;
    z-index: 2;
}

.UcGroupBg {
    position: absolute;
    top: 14px;
    bottom: 14px;
    border-radius: 12px;
    background: rgba(var(--PrimaryRGB), .14);
    border: 2px solid var(--Primary);
    z-index: 1;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;

    &.on {opacity: 1;}

    @media (prefers-reduced-motion: reduce) {transition: none;}
}

/* ==========================================================================
   # Loi de Fitts
========================================================================== */
.FtZone {margin-top: 20px;}

.FtStatus {
    font-size: .85rem;
    font-weight: 800;
    color: var(--Primary);
    margin-bottom: 10px;
}

.FtArea {
    position: relative;
    height: 200px;
    background: var(--Background);
    border-radius: 14px;
    overflow: hidden;
}

.FtBtn {
    position: absolute;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--Primary) 0%, var(--DarkPrimary) 100%);
    color: var(--PureWhite);
    font-weight: 800;
    font-size: .72rem;
    box-shadow: 0 8px 20px rgba(var(--PrimaryRGB), .35);
}

/* ==========================================================================
   # Loi de Hick
========================================================================== */
.HkZone {margin-top: 20px;}

.HkStatus {
    font-size: .85rem;
    font-weight: 800;
    color: var(--Primary);
    margin-bottom: 14px;
}

.HkRow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.HkBtn {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    border: 1.5px solid var(--Borders);
    background: var(--PureWhite);
    cursor: pointer;
    transition: background .1s ease, border-color .1s ease;

    &.lit {
        background: linear-gradient(135deg, var(--Primary) 0%, var(--DarkPrimary) 100%);
        border-color: var(--Primary);
        box-shadow: 0 8px 20px rgba(var(--PrimaryRGB), .35);
    }

    @media (prefers-reduced-motion: reduce) {transition: none;}
}

/* ==========================================================================
   # Loi de Jakob
========================================================================== */
.JkRow {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 20px;
    padding: 24px;
    background: var(--Background);
    border-radius: 14px;
}

.JkIcon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 1.5px solid var(--Borders);
    background: var(--PureWhite);
    font-size: 1.5rem;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;

    &:hover {
        border-color: var(--Primary);
        transform: translateY(-2px);
    }

    &.picked {
        border-color: var(--Primary);
        background: rgba(var(--PrimaryRGB), .12);
    }

    &:disabled {cursor: not-allowed;}

    @media (prefers-reduced-motion: reduce) {transition: none;}
}

/* ==========================================================================
   # Loi de Miller
========================================================================== */
.MlStage {
    margin-top: 20px;
    text-align: center;
    padding: 30px 20px;
    background: var(--Background);
    border-radius: 14px;
}

.MlLevel {
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--Primary);
    margin-bottom: 10px;
}

.MlNumber {
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    font-weight: 800;
    color: var(--Charcoal);
    font-variant-numeric: tabular-nums;
}

.MlInputRow {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

#mlInput {
    font-size: 1rem;
    padding: 12px 16px;
    border: 1.5px solid var(--Borders);
    border-radius: 10px;
    width: 220px;
    text-align: center;

    &:focus {
        border-color: var(--Primary);
        outline: none;
    }
}

/* ==========================================================================
   # Loi de Parkinson
========================================================================== */
.PkStage {margin-top: 20px;}

.PkPrompt {
    font-size: .9rem;
    font-weight: 700;
    color: var(--Charcoal);
    margin-bottom: 12px;
}

/* ==========================================================================
   # Loi de Postel
========================================================================== */
.PoField {
    margin-top: 20px;

    input {
        width: 100%;
        font-size: .9rem;
        padding: 12px 14px;
        border: 1.5px solid var(--Borders);
        border-radius: 10px;
        background: #faf9f7;

        &:focus {
            border-color: var(--Primary);
            outline: none;
        }
    }
}

.PoLabel {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    color: var(--Charcoal);
    margin-bottom: 8px;
}

.PoMsg {
    font-size: .78rem;
    font-weight: 700;
    margin-top: 8px;
    min-height: 1.2em;

    &.error {color: var(--Danger);}
    &.success {color: var(--Success);}
}

/* ==========================================================================
   # Loi de Prägnanz
========================================================================== */
.PgStage {
    margin-top: 20px;
    padding: 20px;
    background: var(--Background);
    border-radius: 14px;
    text-align: center;

    svg {
        max-width: 280px;
        width: 100%;
        height: auto;
    }
}

.PgAskLabel {
    font-size: .9rem;
    font-weight: 700;
    color: var(--Charcoal);
    margin-top: 20px;
    margin-bottom: 4px;
}

/* ==========================================================================
   # Loi de proximité
========================================================================== */
.PxRow {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    padding: 34px clamp(14px, 3vw, 20px);
    background: var(--Background);
    border-radius: 14px;
    margin-top: 20px;

    &.grouped .PxDot:nth-child(2n) {margin-right: clamp(14px, 4.4vw, 38px);}
}

.PxDot {
    width: clamp(12px, 4vw, 28px);
    height: clamp(12px, 4vw, 28px);
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--Primary);
    margin-right: clamp(5px, 1.6vw, 14px);
    transition: margin .4s ease;

    &:last-child {margin-right: 0;}

    @media (prefers-reduced-motion: reduce) {transition: none;}
}

/* ==========================================================================
   # Loi de similarité
========================================================================== */
.SiText {
    margin-top: 20px;
    font-size: .95rem;
    line-height: 1.9;
    color: var(--Charcoal);
    text-align: justify;
}

.SiLink {
    color: #2563eb;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;

    &.picked {
        background: rgba(var(--PrimaryRGB), .18);
        border-radius: 4px;
    }
}

.SiDecoy {
    color: #c2410c;
    font-weight: 800;
    cursor: pointer;

    &.picked {
        background: rgba(var(--PrimaryRGB), .18);
        border-radius: 4px;
    }
}

/* ==========================================================================
   # Loi de Tesler
========================================================================== */
.TlBox {
    margin-top: 20px;
    padding: 20px;
    background: var(--Background);
    border-radius: 14px;
}

.TlLabel {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: var(--Charcoal);
    margin-bottom: 10px;

    code {
        background: rgba(var(--PureBlackRGB), .08);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: .85em;
    }
}

.TlInputRow {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;

    input {
        font-size: .9rem;
        padding: 10px 14px;
        border: 1.5px solid var(--Borders);
        border-radius: 10px;
        background: var(--PureWhite);

        &:focus {
            border-color: var(--Primary);
            outline: none;
        }
    }
}

.TlSelectRow {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;

    select {
        font-size: .9rem;
        padding: 10px 14px;
        border: 1.5px solid var(--Borders);
        border-radius: 10px;
        background: var(--PureWhite);

        &:focus {
            border-color: var(--Primary);
          outline: none;
        }
    }
}

/* ==========================================================================
   # Loi de la région commune
========================================================================== */
.RcGrid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding: 34px;
    background: var(--Background);
    border-radius: 14px;
    margin-top: 20px;
    max-width: 340px;
}

.RcItem {
    font-size: 1.8rem;
    color: var(--Primary);
    text-align: center;
}

.RcBoxOutline {
    position: absolute;
    border-radius: 12px;
    border: 2px solid var(--Primary);
    background: rgba(var(--PrimaryRGB), .1);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;

    &.on {opacity: 1;}

    @media (prefers-reduced-motion: reduce) {transition: none;}
}

/* ==========================================================================
   # Mémoire de travail
========================================================================== */
.WmChips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 18px;
}

.WmChip {
    font-size: .85rem;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 50px;
    border: 1.5px solid var(--Borders);
    background: var(--PureWhite);
    color: var(--Charcoal);
    cursor: pointer;

    &.picked {
        border-color: var(--Primary);
        background: rgba(var(--PrimaryRGB), .12);
        color: var(--Primary);
    }
}

/* ==========================================================================
   # Modèle mental
========================================================================== */
.MmDesk {
    position: relative;
    height: 180px;
    background: var(--Background);
    border-radius: 14px;
    margin-top: 20px;
    overflow: hidden;
}

.MmFile {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 84px;
    text-align: center;
    font-size: 2.2rem;
    cursor: grab;
    user-select: none;
    touch-action: none;

    span {
        display: block;
        font-size: .65rem;
        font-weight: 700;
        color: var(--Charcoal);
        margin-top: 4px;
    }

    &.dragging {
        cursor: grabbing;
        opacity: .85;
        z-index: 5;
    }
}

.MmTrash {
    position: absolute;
    bottom: 20px;
    right: 28px;
    font-size: 2.6rem;
    transition: transform .15s ease;

    &.hover {transform: scale(1.2);}

    @media (prefers-reduced-motion: reduce) {transition: none;}
}

/* ==========================================================================
   # Paradoxe de l'utilisateur actif
========================================================================== */
.PaInstructions {
    padding: 18px 20px;
    background: var(--Background);
    border-radius: 12px;
    margin-top: 20px;

    p {
        font-size: .86rem;
        line-height: 1.6;
        color: var(--Charcoal);
        font-weight: 600;
        margin: 0;
    }
}

.PaBtn {
    font-size: .85rem;
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    border-radius: 50px;
    padding: 14px 30px;
    cursor: pointer;
    color: var(--PureWhite);
    box-shadow: 0 8px 20px rgba(var(--PureBlackRGB), .18);
    transition: transform .15s ease, opacity .15s ease;

    &:hover {transform: translateY(-2px);}
    &:disabled {
        opacity: .4;
        cursor: not-allowed;
        transform: none;
    }

    &.PaBtn--blue {background: #2563eb;}
    &.PaBtn--green {background: #16a34a;}
}

/* ==========================================================================
   # Principe de Pareto
========================================================================== */
.PrGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.PrCard {
    background: var(--Background);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    position: relative;
}

.PrName {
    display: block;
    font-size: .76rem;
    font-weight: 700;
    color: var(--Charcoal);
    margin-bottom: 10px;
}

.PrPoints {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--Primary);
    margin-bottom: 10px;
}

.PrPlus {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--Primary);
    color: var(--PureWhite);
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    line-height: 1;

    &:disabled {
        opacity: .35;
        cursor: not-allowed;
    }
}

.PrBudget {
    margin-top: 16px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--Charcoal);
}

.PrUsageBar {
    height: 8px;
    border-radius: 4px;
    background: var(--Borders);
    margin-top: 10px;
    overflow: hidden;

    > span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--Primary), var(--DarkPrimary));
    }
}

/* ==========================================================================
   # Rasoir d'Occam
========================================================================== */
.OcPreview {
    margin-top: 20px;
    padding: 30px;
    background: var(--Background);
    border-radius: 14px;
    text-align: center;
}

.OcButton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: .95rem;
    padding: 16px 28px;
    border-radius: 50px;
    cursor: default;
    color: var(--PureWhite);
    background: linear-gradient(135deg, var(--Primary), var(--DarkPrimary), #f7971e);
    border: 4px solid #ffd200;
    box-shadow: 0 14px 30px rgba(var(--PrimaryRGB), .4);
    position: relative;

    &.no-shadow {box-shadow: none;}
    &.no-gradient {background: var(--Primary);}
    &.no-border {
        border-color: transparent;
        border-width: 0;
    }

    @media (prefers-reduced-motion: reduce) {transition: none;}
}

.OcBadge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--Danger);
    color: var(--PureWhite);
    font-size: .6rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
}

.OcSubtitle {
    margin-top: 12px;
    font-size: .78rem;
    color: var(--MinMuted);
    font-weight: 600;
}

.OcToggles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 20px;
}

.OcToggleRow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--Charcoal);
    cursor: pointer;

    input {
        width: 15px;
        height: 15px;
        accent-color: var(--Primary);
        cursor: pointer;
    }
}

/* ==========================================================================
   # Règle du pic et de la fin
========================================================================== */
.PeStage {margin-top: 20px;}

.PeLabel {
    font-size: .85rem;
    font-weight: 800;
    color: var(--Primary);
    margin-bottom: 10px;
}

.PeBarTrack {
    height: 120px;
    background: var(--Background);
    border-radius: 14px;
    display: flex;
    align-items: flex-end;
    padding: 10px;
    overflow: hidden;
}

.PeBar {
    width: 100%;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, var(--Danger), #ff9d5c);
    transition: height .35s ease;

    @media (prefers-reduced-motion: reduce) {transition: none;}
}

.PeAsk {margin-top: 24px;}

.PeAskLabel {
    font-size: .9rem;
    font-weight: 700;
    color: var(--Charcoal);
    margin-bottom: 12px;
}

/* ==========================================================================
   # Seuil de Doherty
========================================================================== */
.DtStage {
    margin-top: 20px;
    height: 100px;
    background: var(--Background);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.DtSpinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid var(--Borders);
    border-top-color: var(--Primary);
    animation: DtSpin .7s linear infinite;

    @media (prefers-reduced-motion: reduce) {animation: none;}
}

@keyframes DtSpin {to {transform: rotate(360deg);}}

.DtAsk {margin-top: 24px;}
.DtAskLabel {
    font-size: .9rem;
    font-weight: 700;
    color: var(--Charcoal);
    margin-bottom: 12px;
}

/* ==========================================================================
   # Surcharge de choix
========================================================================== */
.ScStage {margin-top: 20px;}

.ScTimer {
    font-size: .85rem;
    font-weight: 800;
    color: var(--Primary);
    margin-bottom: 14px;
}

.ScGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.ScDish {
    background: var(--Background);
    border: 1px solid var(--Borders);
    border-radius: 8px;
    padding: 12px 8px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--Muted);
    cursor: pointer;
    text-align: center;

    &:hover {
        border-color: var(--Primary);
        color: var(--Primary);
    }
}

.PoField input,
.TlInputRow input,
.TlSelectRow select,
#panelA input,
#panelB input {font-size: 16px;}

@media (max-width: 768px) {
    .SiText {text-align: left;}
    .AuPanel {padding: 22px 18px;}
    .AuTag {position: static; display: block; margin-bottom: 8px;}
    .TlInputRow input, .TlSelectRow select {flex: 1 1 140px; min-width: 0;}
    #chkInput, #mlInput {width: 100%; max-width: 260px;}
}

@media (max-width: 480px) {
    .CcGrid {grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));}
    .CcGrid.clean {grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));}
    .ScGrid {grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));}
    .RcGrid {padding: 20px; gap: 16px;}
    .ChkStage, .MlStage {padding: 24px 14px;}
    .VrGrid {padding: 20px 12px;}
    .OcPreview {padding: 24px 16px;}
    .PaBtn {padding: 14px 24px;}
    .UcRow {gap: 18px; padding: 24px 16px;}
}

@media (hover: none), (pointer: coarse) {
    .DemoBtn, .PaBtn, .SaReal, .WmChip, .CcTile, .ScDish {min-height: 44px;}
    .SaBanner {min-height: 44px;}
    .PrPlus {width: 44px; height: 44px;}
    .ZgItem {min-height: 44px; padding: 8px 0;}
    .ZgItem input {width: 22px; height: 22px;}
    .OcToggleRow {min-height: 44px;}
    .OcToggleRow input {width: 22px; height: 22px;}
    .BcRow {min-height: 56px;}
}