/* =====================================================================
   ORDO 3.17 — Composants communs des écrans d’état
   Source unique pour : header, carte, picto, espacements, bloc info,
   action, footer et version.
   ===================================================================== */

.ordo-component-page .ordo-component-shell {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    min-height: 100vh;
    margin: 0 auto !important;
    display: grid !important;
    place-items: initial !important;
    align-content: start !important;
    gap: 18px !important;
    padding:
        max(24px, env(safe-area-inset-top))
        18px
        max(24px, env(safe-area-inset-bottom)) !important;
}

.ordo-component-page .ordo-component-header,
.ordo-component-page .ordo-component-card,
.ordo-component-page .ordo-component-footer,
.ordo-component-page .ordo-component-version {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
}

.ordo-component-page .ordo-component-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.ordo-component-page .ordo-component-header .ordo-brand-lockup {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.ordo-component-page .ordo-component-header .ordo-brand-emblem {
    flex: 0 0 auto !important;
}

.ordo-component-page .ordo-component-header .ordo-brand-copy {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: left !important;
}

.ordo-component-page .ordo-component-header .ordo-brand-name,
.ordo-component-page .ordo-component-header .ordo-brand-subtitle {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: left !important;
}

.ordo-component-page .ordo-component-card {
    position: relative;
    margin: 0 !important;
    padding: clamp(30px, 5vw, 52px) clamp(22px, 5vw, 48px) !important;
    border-radius: var(--ordo-radius-xl, 30px) !important;
    text-align: center !important;
}

.ordo-component-page .ordo-component-icon {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 26px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid transparent !important;
    border-radius: 24px !important;
    box-shadow: none !important;
    filter: none !important;
}

.ordo-component-page .ordo-component-icon .ui-icon,
.ordo-component-page .ordo-component-icon svg {
    width: 40px !important;
    height: 40px !important;
    fill: none !important;
    stroke: currentColor !important;
    filter: none !important;
}

.ordo-component-page .ordo-component-icon--success {
    background: linear-gradient(135deg, var(--ordo-green-dark, #1F6F2E), var(--ordo-green, #3FA62F)) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
}

.ordo-component-page .ordo-component-icon--success .ui-icon,
.ordo-component-page .ordo-component-icon--success svg {
    color: #FFFFFF !important;
    stroke: currentColor !important;
}

.ordo-component-page .ordo-component-icon--closed {
    background: #F2F9EF !important;
    border-color: rgba(87, 174, 49, .18) !important;
    color: var(--ordo-green-dark, #1F6F2E) !important;
}

.ordo-component-page .ordo-component-icon--expired {
    background: #FBF7E9 !important;
    border-color: rgba(176, 133, 45, .20) !important;
    color: #A76E15 !important;
}

.ordo-component-page .ordo-component-icon--error,
.ordo-component-page .ordo-component-icon--unavailable {
    background: #FFF2F2 !important;
    border-color: rgba(179, 50, 50, .16) !important;
    color: #B33A3A !important;
}

.ordo-component-page .ordo-component-eyebrow {
    margin: 0 0 18px !important;
    color: var(--ordo-ink, #191817) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    letter-spacing: .15em !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
}

.ordo-component-page .ordo-component-title {
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 auto 24px !important;
    color: var(--ordo-ink, #191817) !important;
    font-family: "Comfortaa", sans-serif !important;
    font-size: clamp(28px, 5vw, 42px) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: -.035em !important;
    text-align: center !important;
}

.ordo-component-page .ordo-component-copy {
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 auto 20px !important;
    color: var(--ordo-muted, #66706A) !important;
    font-size: clamp(16px, 2.8vw, 19px) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

.ordo-component-page .ordo-component-reference {
    width: fit-content !important;
    min-width: 190px !important;
    margin: 20px auto !important;
    padding: 13px 20px !important;
    border: 1px solid rgba(87, 174, 49, .16) !important;
    border-radius: 18px !important;
    background: #F5FAF2 !important;
}

.ordo-component-page .ordo-component-info {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    margin: 0 auto 24px !important;
    padding: 18px !important;
    border: 1px solid var(--ordo-line, #DDE3DF) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .86) !important;
    color: var(--ordo-ink, #191817) !important;
    text-align: left !important;
    box-shadow: var(--ordo-shadow-card, 0 10px 30px rgba(25, 24, 23, .055)) !important;
}

.ordo-component-page .ordo-component-info strong {
    display: block !important;
    margin: 0 0 6px !important;
    color: var(--ordo-ink, #191817) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

.ordo-component-page .ordo-component-info p {
    margin: 0 !important;
    color: var(--ordo-muted, #66706A) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.ordo-component-page .ordo-component-info--highlight {
    border-color: rgba(87, 174, 49, .20) !important;
    background: #F7FBF4 !important;
    text-align: center !important;
    box-shadow: none !important;
}

.ordo-component-page .ordo-component-info--highlight strong,
.ordo-component-page .ordo-component-info--highlight p {
    color: var(--ordo-green-dark, #1F6F2E) !important;
    text-align: center !important;
}

.ordo-component-page .ordo-component-info--error {
    border-color: rgba(179, 50, 50, .18) !important;
    background: #FFF8F8 !important;
}

.ordo-component-page .ordo-component-action {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    min-height: 58px !important;
    margin: 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ordo-component-page .ordo-component-footer {
    margin: 0 !important;
}

.ordo-component-page .ordo-component-version {
    margin: -6px 0 0 !important;
    text-align: center !important;
}

/* La confirmation conserve ses blocs métier, mais utilise le même socle. */
.ordo-component-page.confirmation-page .ordo-component-header,
.ordo-component-page.confirmation-page .ordo-component-card,
.ordo-component-page.confirmation-page .ordo-component-footer,
.ordo-component-page.confirmation-page .ordo-component-version {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    justify-self: center !important;
}

.ordo-component-page.confirmation-page .ordo-component-icon {
    width: 62px !important;
    height: 62px !important;
    margin-bottom: 14px !important;
    border-radius: 20px !important;
}

.ordo-component-page.confirmation-page .ordo-component-icon .ui-icon {
    width: 31px !important;
    height: 31px !important;
}

.ordo-component-page.confirmation-page .ordo-component-title {
    font-size: clamp(25px, 5.2vw, 34px) !important;
}

@media (max-width: 620px) {
    .ordo-component-page .ordo-component-shell {
        gap: 14px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .ordo-component-page .ordo-component-header {
        gap: 10px !important;
    }

    .ordo-component-page .ordo-component-card {
        padding: 28px 20px 32px !important;
    }

    .ordo-component-page .ordo-component-icon {
        width: 72px !important;
        height: 72px !important;
        margin-bottom: 24px !important;
        border-radius: 22px !important;
    }

    .ordo-component-page .ordo-component-icon .ui-icon,
    .ordo-component-page .ordo-component-icon svg {
        width: 36px !important;
        height: 36px !important;
    }

    .ordo-component-page .ordo-component-eyebrow {
        margin-bottom: 17px !important;
        font-size: 12px !important;
    }

    .ordo-component-page .ordo-component-title {
        margin-bottom: 22px !important;
        font-size: clamp(27px, 8.5vw, 38px) !important;
    }

    .ordo-component-page .ordo-component-copy {
        margin-bottom: 18px !important;
        font-size: 16px !important;
    }

    .ordo-component-page .ordo-component-info {
        padding: 17px !important;
    }

    .ordo-component-page .ordo-component-action {
        min-height: 56px !important;
    }
}

.ordo-component-page .ordo-component-info--title-only strong {
    margin-bottom: 0 !important;
}