@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@500;600;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
    color-scheme: light;
    --ink: #102a23;
    --muted: #63716c;
    --line: #dce7e2;
    --surface: #ffffff;
    --surface-soft: #f4f8f6;
    --green: #138a5b;
    --green-dark: #0d6945;
    --green-soft: #e4f5ed;
    --danger: #b33a3a;
    --shadow: 0 24px 70px rgba(17, 55, 43, .12);
    --radius-xl: 30px;
    --radius-lg: 22px;
    --radius-md: 16px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #edf5f1;
}

body {
    min-height: 100vh;
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

button,
input,
a {
    font: inherit;
}

a {
    color: inherit;
}

.patient-page {
    background:
        radial-gradient(circle at 10% 0%, rgba(29, 158, 104, .14), transparent 34rem),
        linear-gradient(160deg, #f8fbfa 0%, #eaf4ef 100%);
}

.shell {
    width: min(100%, 760px);
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    place-items: center;
    padding:
        max(24px, env(safe-area-inset-top))
        18px
        max(24px, env(safe-area-inset-bottom));
}

.app-card {
    width: 100%;
    padding: clamp(24px, 5vw, 42px);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.brand-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.brand-mark {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: var(--green);
    color: #fff;
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
    box-shadow: 0 12px 28px rgba(19, 138, 91, .25);
}

.eyebrow {
    margin: 0 0 4px;
    color: var(--green);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 0;
    font-size: clamp(28px, 7vw, 42px);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.intro {
    margin: 0 0 26px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

.upload-grid {
    display: grid;
    gap: 14px;
}

.upload-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 16px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.upload-card.has-file {
    border-color: rgba(19, 138, 91, .6);
    background: var(--green-soft);
    box-shadow: 0 10px 24px rgba(19, 138, 91, .08);
}

.upload-icon,
.document-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #fff;
    font-size: 24px;
    box-shadow: 0 7px 18px rgba(18, 55, 43, .08);
}

.upload-copy h2,
.document-heading h2 {
    margin: 0 0 3px;
    font-size: 19px;
}

.upload-copy p,
.document-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.file-button {
    grid-column: 1 / -1;
    min-height: 52px;
    display: grid;
    place-items: center;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--green-dark);
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}

.file-button:active {
    transform: scale(.99);
}

.file-selection {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .8);
}

.file-selection[hidden] {
    display: none;
}

.file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
}

.remove-file {
    border: 0;
    background: transparent;
    color: var(--danger);
    font-weight: 800;
    cursor: pointer;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.validation-message {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff0f0;
    color: var(--danger);
    font-size: 14px;
    font-weight: 700;
}

.presence-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 22px 0 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    cursor: pointer;
}

.presence-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox-ui {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 2px solid #9eafa8;
    border-radius: 8px;
    background: #fff;
    transition: .2s ease;
}

.presence-card input:checked + .checkbox-ui {
    border-color: var(--green);
    background: var(--green);
}

.presence-card input:checked + .checkbox-ui::after {
    content: "✓";
    color: #fff;
    font-weight: 900;
}

.presence-card input:focus-visible + .checkbox-ui {
    outline: 3px solid rgba(19, 138, 91, .25);
    outline-offset: 3px;
}

.presence-card strong,
.presence-card small {
    display: block;
}

.presence-card strong {
    margin-bottom: 5px;
    font-size: 16px;
}

.presence-card small {
    color: var(--muted);
    line-height: 1.4;
}

.primary-button,
.treated-button {
    width: 100%;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 18px;
    background: var(--green);
    color: #fff;
    font-size: 17px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 13px 28px rgba(19, 138, 91, .24);
    cursor: pointer;
    touch-action: manipulation;
}

.primary-button:hover,
.treated-button:hover {
    background: var(--green-dark);
}

.primary-button:disabled {
    cursor: wait;
    opacity: .8;
}

.button-loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

.primary-button.is-loading .button-loader {
    display: block;
}

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

.privacy-note {
    margin: 16px 4px 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
}

.result-card {
    text-align: center;
}

.result-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 36px;
    font-weight: 900;
}

.result-icon.success {
    background: var(--green-soft);
    color: var(--green);
}

.result-icon.error {
    background: #fff0f0;
    color: var(--danger);
}

.result-card h1 {
    margin-bottom: 14px;
}

.result-copy {
    max-width: 520px;
    margin: 0 auto 22px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

.link-button {
    margin-top: 10px;
}

.reference-panel {
    width: min(100%, 360px);
    margin: 22px auto;
    padding: 18px;
    border-radius: 20px;
    background: var(--green-soft);
}

.reference-panel span,
.reference-panel strong {
    display: block;
}

.reference-panel span {
    margin-bottom: 5px;
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.reference-panel strong {
    font-size: clamp(44px, 14vw, 68px);
    line-height: 1;
    letter-spacing: .08em;
}

.qr-code {
    width: 292px;
    max-width: 100%;
    min-height: 292px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
}

.qr-code img,
.qr-code canvas {
    max-width: 100%;
    height: auto !important;
}

.qr-help {
    margin: 16px auto 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.document-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.document-summary span,
.status-pill {
    padding: 9px 13px;
    border-radius: 999px;
    background: var(--surface-soft);
    font-size: 13px;
    font-weight: 800;
}

.pharmacist-page {
    background: #edf3f0;
}

.dashboard-shell {
    width: min(100%, 1040px);
    margin: 0 auto;
    padding:
        max(22px, env(safe-area-inset-top))
        18px
        max(28px, env(safe-area-inset-bottom));
}

.dossier-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 20px;
    padding: clamp(22px, 5vw, 34px);
    border-radius: 28px;
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow);
}

.dossier-header .eyebrow {
    color: #8fe0bc;
}

.dossier-header h1 {
    font-size: clamp(42px, 10vw, 72px);
    letter-spacing: .06em;
}

.dossier-meta {
    margin: 10px 0 0;
    color: #bed1c9;
}

.status-pill {
    flex: 0 0 auto;
    background: #dff6eb;
    color: var(--green-dark);
}

.document-list {
    display: grid;
    gap: 16px;
}

.document-tile {
    padding: clamp(20px, 4vw, 28px);
    border: 1px solid var(--line);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(17, 55, 43, .08);
}

.document-heading {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 20px;
}

.document-heading h2 {
    font-size: 22px;
}

.action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.action-button {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
    background: var(--surface-soft);
    color: var(--ink);
    font-weight: 850;
    text-decoration: none;
    text-align: center;
    touch-action: manipulation;
}

.action-button.view {
    background: var(--green-soft);
    color: var(--green-dark);
}

.action-button.download {
    background: #eef2ff;
    color: #38488f;
}

.action-button.print {
    background: #f5f0ff;
    color: #65409a;
}

.treated-form {
    margin-top: 18px;
    padding: 20px;
    border-radius: 24px;
    background: #fff;
    text-align: center;
}

.treated-button {
    background: var(--ink);
    box-shadow: none;
}

.treated-button:hover {
    background: #081c16;
}

.treated-form p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.print-page {
    margin: 0;
    background: #dfe6e2;
}

.print-toolbar {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    background: var(--ink);
    color: #fff;
}

.print-toolbar strong,
.print-toolbar span {
    display: block;
}

.print-toolbar span {
    margin-top: 3px;
    color: #bcd0c7;
    font-size: 13px;
}

.print-toolbar button {
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    font-weight: 850;
    cursor: pointer;
}

.print-document {
    height: calc(100vh - 74px);
    padding: 12px;
}

.print-document iframe,
.print-document img {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    object-fit: contain;
}

@media (min-width: 680px) {
    .upload-grid {
        grid-template-columns: 1fr 1fr;
    }

    .upload-card {
        align-content: start;
    }
}

@media (max-width: 620px) {
    .shell {
        align-items: start;
        padding-left: 12px;
        padding-right: 12px;
    }

    .app-card {
        border-radius: 24px;
    }

    .brand-header {
        align-items: flex-start;
    }

    .brand-mark {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        font-size: 30px;
    }

    .action-grid {
        grid-template-columns: 1fr;
    }

    .dossier-header {
        flex-direction: column;
    }

    .status-pill {
        align-self: flex-start;
    }

    .print-toolbar {
        position: sticky;
        top: 0;
        z-index: 10;
    }
}

@media print {
    .print-toolbar {
        display: none !important;
    }

    .print-document {
        height: auto;
        padding: 0;
    }

    .print-document iframe,
    .print-document img {
        width: 100%;
        height: auto;
        max-height: none;
    }
}

/* V1.1 — aperçu intégré, PDF multipage et impression */
.preview-note {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .78);
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.document-preview {
    position: relative;
    width: 100%;
    min-height: 320px;
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background:
        linear-gradient(45deg, #eef3f0 25%, transparent 25%),
        linear-gradient(-45deg, #eef3f0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eef3f0 75%),
        linear-gradient(-45deg, transparent 75%, #eef3f0 75%),
        #f8faf9;
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

.document-preview.is-pdf {
    height: min(72vh, 780px);
    min-height: 520px;
    background: #dfe6e2;
}

.document-preview iframe,
.document-preview img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.document-preview img {
    max-height: 72vh;
    object-fit: contain;
}

.document-preview > a {
    display: block;
    width: 100%;
    height: 100%;
}

.preview-unavailable {
    min-height: 320px;
    display: grid;
    place-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    color: var(--muted);
}

.preview-unavailable > span {
    font-size: 42px;
}

.preview-unavailable strong {
    color: var(--ink);
}

.preview-unavailable p {
    margin: 0;
}

.print-toolbar button:disabled {
    opacity: .45;
    cursor: wait;
}

.print-document {
    position: relative;
}

.print-loading {
    position: absolute;
    inset: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    color: var(--muted);
    font-weight: 800;
}

.print-loading[hidden] {
    display: none;
}

.print-unavailable {
    min-height: 60vh;
    background: #fff;
    border-radius: 16px;
}

@media (max-width: 620px) {
    .document-preview {
        min-height: 260px;
        border-radius: 16px;
    }

    .document-preview.is-pdf {
        height: 62vh;
        min-height: 420px;
    }

    .document-preview img {
        max-height: 62vh;
    }
}


/* ============================================================
   V1.2 — Ajout successif de fichiers + aperçu pleine largeur
   ============================================================ */

.dynamic-inputs,
.dynamic-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.file-collection {
    align-content: start;
}

.selected-files {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
}

.selected-files:empty {
    display: none;
}

.selected-file-row {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(19, 138, 91, .18);
    border-radius: 14px;
    background: rgba(255, 255, 255, .88);
}

.selected-file-icon {
    font-size: 20px;
}

.selected-file-info {
    min-width: 0;
}

.selected-file-info strong,
.selected-file-info small {
    display: block;
}

.selected-file-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.selected-file-info small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.selected-file-remove {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    background: #fff0f0;
    color: var(--danger);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.file-button {
    border: 0;
}

.file-button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.full-width-document-preview {
    width: 100%;
    max-width: none;
    min-height: 180px;
    overflow: visible;
    border: 0;
    background: transparent;
}

.responsive-document-image {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    object-fit: contain;
    background: #fff;
}

.pdf-viewer {
    width: 100%;
    max-width: none;
    display: grid;
    gap: 14px;
    overflow: visible;
}

.pdf-page {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(17, 55, 43, .12);
}

.pdf-page canvas {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0;
    background: #fff;
}

.pdf-page-number {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(16, 42, 35, .82);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    pointer-events: none;
}

.pdf-loading {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    border-radius: 16px;
    background: #f5f8f6;
    color: var(--muted);
    font-weight: 750;
}

.pdf-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(19, 138, 91, .2);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

.viewer-page {
    min-height: 100vh;
    margin: 0;
    background: #dfe7e3;
}

.viewer-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: max(10px, env(safe-area-inset-top)) 14px 10px;
    background: rgba(16, 42, 35, .97);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.viewer-title strong,
.viewer-title span {
    display: block;
}

.viewer-title span {
    margin-top: 3px;
    color: #bcd0c7;
    font-size: 13px;
}

.viewer-actions {
    display: flex;
    gap: 8px;
}

.viewer-actions a {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 13px;
    background: #fff;
    color: var(--ink);
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
}

.viewer-document {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px;
}

.viewer-pdf,
.viewer-image {
    width: 100%;
    max-width: none;
}

.viewer-unavailable {
    min-height: calc(100vh - 100px);
}

.print-page {
    min-height: 100vh;
    background: #dfe7e3;
}

.print-document {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: calc(100vh - 74px);
    padding: 10px;
}

.print-pdf,
.print-image {
    width: 100%;
    max-width: none;
}

@media (max-width: 620px) {
    .viewer-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .viewer-actions {
        width: 100%;
    }

    .viewer-actions a {
        flex: 1;
        justify-content: center;
    }

    .viewer-document,
    .print-document {
        padding: 6px;
    }

    .pdf-viewer {
        gap: 8px;
    }

    .pdf-page {
        border-radius: 6px;
    }
}

@media print {
    @page {
        size: auto;
        margin: 8mm;
    }

    html,
    body.print-page {
        width: 100%;
        margin: 0;
        padding: 0;
        background: #fff !important;
    }

    .print-toolbar {
        display: none !important;
    }

    .print-document {
        width: 100%;
        min-height: 0;
        padding: 0;
        background: #fff;
    }

    .print-document .pdf-viewer {
        display: block;
    }

    .print-document .pdf-page {
        width: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        break-after: page;
        page-break-after: always;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-document .pdf-page:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .print-document .pdf-page canvas,
    .print-image {
        display: block;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
    }

    .pdf-page-number {
        display: none !important;
    }
}

/* Neutralise les anciennes hauteurs fixes des aperçus V1.1. */
.full-width-document-preview > a {
    display: block;
    width: 100%;
    height: auto;
}

.full-width-document-preview .responsive-document-image,
.print-document .responsive-document-image {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
}

/* V1.3 — État explicite du bouton de transmission */
.primary-button:disabled:not(.is-loading) {
    background: #c8d0cd;
    color: #6d7974;
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}

.primary-button:disabled:not(.is-loading):hover {
    background: #c8d0cd;
}

/* ================================================================
   V1.4 — Carrousels tactiles, modale et impression groupée
   ================================================================ */

.document-group-list {
    gap: 22px;
}

.document-group-card {
    overflow: hidden;
}

.group-heading {
    margin-bottom: 18px;
}

.gallery-instructions {
    margin-bottom: 18px;
}

.document-carousel {
    position: relative;
    width: 100%;
    min-width: 0;
}

.carousel-stage {
    width: 100%;
    min-height: 320px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #e7eeea;
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    outline: none;
}

.carousel-stage.is-swiping {
    cursor: grabbing;
}

.carousel-stage.is-swiping .carousel-rendered-page,
.carousel-stage.is-swiping .carousel-unavailable {
    will-change: transform, opacity;
}

.carousel-stage:focus-visible {
    outline: 3px solid rgba(19, 138, 91, .3);
    outline-offset: 3px;
}

.carousel-rendered-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    place-items: center;
    background: #fff;
}

.carousel-rendered-page canvas,
.carousel-document-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    background: #fff;
}

.carousel-document-image {
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 50%;
    background: rgba(16, 42, 35, .88);
    color: #fff;
    font-size: 42px;
    font-weight: 300;
    line-height: 1;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
    transform: translateY(-50%);
    cursor: pointer;
    touch-action: manipulation;
    backdrop-filter: blur(12px);
}

.carousel-arrow-left {
    left: 14px;
}

.carousel-arrow-right {
    right: 14px;
}

.carousel-arrow:hover:not(:disabled) {
    background: var(--green);
}

.carousel-arrow:disabled {
    opacity: .2;
    cursor: default;
}

.carousel-arrow[hidden] {
    display: none;
}

.carousel-information {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 4px 4px;
    color: var(--muted);
    font-size: 14px;
}

.carousel-information strong {
    flex: 0 0 auto;
    color: var(--ink);
}

.carousel-information span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

.group-action-grid {
    margin-top: 15px;
}

.action-button.is-disabled,
.modal-footer-button.is-disabled {
    opacity: .45;
    pointer-events: none;
}

.document-modal[hidden] {
    display: none;
}

.document-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 18px;
    opacity: 0;
    transition: opacity .16s ease;
}

.document-modal.is-visible {
    opacity: 1;
}

.document-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 17, 13, .78);
    backdrop-filter: blur(12px);
}

.document-modal-panel {
    position: relative;
    width: min(96vw, 1420px);
    max-height: 96vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 28px;
    background: #f1f5f3;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .4);
    transform: translateY(10px) scale(.99);
    transition: transform .16s ease;
}

.document-modal.is-visible .document-modal-panel {
    transform: translateY(0) scale(1);
}

.document-modal-header {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px 16px 24px;
    background: var(--ink);
    color: #fff;
}

.document-modal-header .eyebrow {
    color: #8fe0bc;
}

.document-modal-header h2 {
    margin: 0;
    font-size: clamp(24px, 4vw, 34px);
}

.document-modal-close {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 40px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

.document-modal-close:hover {
    background: rgba(255, 255, 255, .22);
}

.document-modal-body {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: clamp(12px, 2.4vw, 28px);
}

.modal-gallery-view,
.modal-print-view {
    width: min(100%, 1260px);
    margin: 0 auto;
}

.modal-carousel-stage {
    min-height: min(72vh, 900px);
    background: #cfd9d4;
}

.modal-carousel-stage .carousel-rendered-page {
    align-self: start;
}

.modal-carousel-information {
    padding-inline: 8px;
}

.document-modal-footer {
    min-height: 78px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    background: #fff;
}

.modal-footer-button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border: 0;
    border-radius: 15px;
    background: var(--green);
    color: #fff;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
}

.modal-secondary-button,
.modal-download-button {
    background: var(--surface-soft);
    color: var(--ink);
}

.modal-print-button {
    min-width: 220px;
}

.modal-print-button:disabled {
    opacity: .45;
    cursor: wait;
}

.modal-print-note {
    margin: 0 0 16px;
    color: var(--muted);
    text-align: center;
}

.modal-print-stack {
    display: grid;
    gap: 22px;
}

.print-sequence-sheet {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(17, 55, 43, .08);
}

.print-sequence-label {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.print-sequence-content,
.print-rendered-page {
    width: 100%;
    display: grid;
    place-items: center;
    background: #fff;
}

.print-rendered-page canvas,
.print-sequence-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.carousel-unavailable {
    min-height: 320px;
}

body.document-modal-open {
    overflow: hidden;
}

@media (max-width: 720px) {
    .document-modal {
        padding: 0;
    }

    .document-modal-panel {
        width: 100vw;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
    }

    .document-modal-header {
        padding-top: max(14px, env(safe-area-inset-top));
    }

    .document-modal-footer {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .document-modal-footer .modal-footer-button {
        flex: 1 1 100%;
    }

    .carousel-arrow {
        width: 50px;
        height: 50px;
        font-size: 36px;
    }

    .carousel-arrow-left {
        left: 8px;
    }

    .carousel-arrow-right {
        right: 8px;
    }

    .carousel-information {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .carousel-information span {
        width: 100%;
        text-align: left;
    }

    .modal-carousel-stage {
        min-height: 55vh;
    }
}

@media print {
    body.print-modal-active {
        background: #fff !important;
    }

    body.print-modal-active > main {
        display: none !important;
    }

    body.print-modal-active .document-modal {
        position: static !important;
        display: block !important;
        padding: 0 !important;
        opacity: 1 !important;
    }

    body.print-modal-active .document-modal-backdrop,
    body.print-modal-active .document-modal-header,
    body.print-modal-active .document-modal-footer,
    body.print-modal-active .modal-print-note,
    body.print-modal-active .modal-gallery-view {
        display: none !important;
    }

    body.print-modal-active .document-modal-panel {
        width: 100% !important;
        max-height: none !important;
        display: block !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        background: #fff !important;
    }

    body.print-modal-active .document-modal-body,
    body.print-modal-active .modal-print-view,
    body.print-modal-active .modal-print-stack {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.print-modal-active .print-sequence-sheet {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        break-after: page;
        page-break-after: always;
    }

    body.print-modal-active .print-sequence-sheet:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    body.print-modal-active .print-sequence-label {
        display: none !important;
    }

    body.print-modal-active .print-sequence-content,
    body.print-modal-active .print-rendered-page {
        display: block !important;
        width: 100% !important;
    }

    body.print-modal-active .print-rendered-page canvas,
    body.print-modal-active .print-sequence-image {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }
}

/* =========================================================
   ORDO V1.5 — vue intégrale, impression automatique et PDF
   ========================================================= */

.dossier-header-copy {
    min-width: 0;
}

.dossier-header-actions {
    min-width: min(100%, 370px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

.print-all-button {
    width: 100%;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 18px;
    background: #fff;
    color: var(--ink);
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
    cursor: pointer;
    touch-action: manipulation;
}

.print-all-button:hover {
    background: #e9f7f0;
}

.print-all-button:disabled,
.action-button:disabled {
    opacity: .45;
    cursor: wait;
}

.document-modal-panel {
    grid-template-rows: auto minmax(0, 1fr);
}

.modal-sequence-stack {
    width: min(100%, 1280px);
    margin: 0 auto;
    display: grid;
    gap: clamp(14px, 2.5vw, 28px);
}

.sequence-sheet {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(17, 55, 43, .10);
}

.sequence-content,
.sequence-rendered-page {
    width: 100%;
    display: grid;
    place-items: center;
    background: #fff;
}

.sequence-rendered-page canvas,
.sequence-document-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    background: #fff;
}

.document-modal[data-mode="large"] .document-modal-body {
    background: #d4ddd8;
}

.document-modal[data-mode="print"] .document-modal-body {
    background: #d4ddd8;
}

.group-action-grid .action-button {
    border: 0;
}

@media (max-width: 760px) {
    .dossier-header-actions {
        width: 100%;
        min-width: 0;
        align-items: stretch;
    }

    .dossier-header-actions .status-pill {
        align-self: flex-start;
    }

    .print-all-button {
        min-height: 66px;
    }

    .modal-sequence-stack {
        gap: 12px;
    }

    .sequence-sheet {
        border-radius: 12px;
    }
}

@media print {
    @page {
        margin: 8mm;
    }

    body.print-modal-active {
        background: #fff !important;
    }

    body.print-modal-active > main {
        display: none !important;
    }

    body.print-modal-active .document-modal {
        position: static !important;
        display: block !important;
        padding: 0 !important;
        opacity: 1 !important;
    }

    body.print-modal-active .document-modal-backdrop,
    body.print-modal-active .document-modal-header {
        display: none !important;
    }

    body.print-modal-active .document-modal-panel {
        width: 100% !important;
        max-height: none !important;
        display: block !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        background: #fff !important;
    }

    body.print-modal-active .document-modal-body,
    body.print-modal-active .modal-sequence-stack {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
    }

    body.print-modal-active .sequence-sheet {
        width: 100% !important;
        height: calc(100vh - 16mm) !important;
        min-height: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        break-after: page;
        page-break-after: always;
    }

    body.print-modal-active .sequence-sheet:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    body.print-modal-active .sequence-content,
    body.print-modal-active .sequence-rendered-page {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    body.print-modal-active .sequence-rendered-page canvas,
    body.print-modal-active .sequence-document-image {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }
}


/* ================================================================
   ORDO V1.8 — carrousel natif fluide + actions dans la grande vue
   ================================================================ */

.carousel-native-stage {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x pan-y pinch-zoom;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}

.carousel-native-stage::-webkit-scrollbar {
    display: none;
}

.carousel-native-stage:active {
    cursor: grabbing;
}

.carousel-track {
    width: 100%;
    display: flex;
    align-items: stretch;
}

.carousel-slide {
    min-width: 100%;
    flex: 0 0 100%;
    display: grid;
    place-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    background: #fff;
}

.carousel-slide > .carousel-rendered-page,
.carousel-slide > .carousel-unavailable,
.carousel-slide > .pdf-loading {
    width: 100%;
    min-width: 100%;
}

.carousel-slide .carousel-rendered-page {
    height: 100%;
}

.document-modal-heading {
    min-width: 0;
    flex: 1 1 auto;
}

.document-modal-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.modal-header-tool {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 15px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-weight: 850;
    cursor: pointer;
    touch-action: manipulation;
}

.modal-header-tool:hover:not(:disabled) {
    background: rgba(255, 255, 255, .23);
}

.modal-header-tool:disabled {
    opacity: .45;
    cursor: wait;
}

.modal-header-tool[hidden] {
    display: none;
}

.modal-header-download {
    background: rgba(143, 224, 188, .16);
}

.document-modal[data-mode="print"] .modal-header-tool {
    display: none;
}

@media (max-width: 760px) {
    .document-modal-header {
        min-height: 0;
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 15px;
    }

    .document-modal-heading {
        width: 100%;
        flex-basis: 100%;
    }

    .document-modal-header-actions {
        width: 100%;
        justify-content: stretch;
    }

    .modal-header-tool {
        min-width: 0;
        flex: 1 1 0;
        padding-left: 10px;
        padding-right: 10px;
    }

    .document-modal-close {
        width: 50px;
        height: 50px;
    }
}


/* Les écrans d’état utilisent désormais assets/components.css (ORDO 3.17). */

/* ================================================================
   ORDO V2.2 — Dossier pharmacien compact sur grand écran
   - Ordonnance à gauche, mutuelle à droite
   - Aperçus contenus en hauteur
   - Une seule rubrique centrée lorsqu'elle est seule
   ================================================================ */

@media (min-width: 980px) {
    .dashboard-shell {
        width: min(100%, 1500px);
    }

    .document-group-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 22px;
    }

    .document-group-card {
        min-width: 0;
        padding: 22px;
    }

    .document-group-card:only-child {
        grid-column: 1 / -1;
        width: min(100%, 760px);
        justify-self: center;
    }

    .document-group-card .carousel-stage,
    .document-group-card .carousel-slide {
        height: clamp(420px, 52vh, 620px);
        min-height: 0;
    }

    .document-group-card .carousel-slide {
        align-content: center;
    }

    .document-group-card .carousel-rendered-page {
        width: 100%;
        height: 100%;
        align-content: center;
        justify-content: center;
        overflow: hidden;
    }

    .document-group-card .carousel-rendered-page canvas,
    .document-group-card .carousel-document-image {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: clamp(400px, 50vh, 600px) !important;
        object-fit: contain;
        margin: auto;
    }

    .document-group-card .group-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 980px) and (max-height: 760px) {
    .document-group-card .carousel-stage,
    .document-group-card .carousel-slide {
        height: 400px;
    }

    .document-group-card .carousel-rendered-page canvas,
    .document-group-card .carousel-document-image {
        max-height: 380px !important;
    }
}


/* ==================================================================
   ORDO V2.3 — PASSE GRAPHIQUE PHARMACIE DE LA GARE
   Direction : interface actuelle conservée, charte plus affirmée,
   Comfortaa pour les titres, Montserrat pour l'interface,
   pictogrammes SVG locaux à la place des émojis.
   ================================================================== */

:root {
    --ink: #111713;
    --muted: #58635e;
    --line: #cfdad5;
    --surface: #ffffff;
    --surface-soft: #f1f5f3;
    --green: #00ad4f;
    --green-dark: #006b3f;
    --green-deep: #074a34;
    --green-soft: #dff4e7;
    --lime: #bdd83d;
    --lime-soft: #eff6c8;
    --charcoal: #1c1a1a;
    --page-blue: #e8eef1;
    --danger: #ae3535;
    --shadow: 0 25px 72px rgba(7, 74, 52, .13);
    --radius-xl: 31px;
    --radius-lg: 23px;
    --radius-md: 16px;
}

body {
    font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
}

h1,
h2,
h3,
.brand-title,
.reference-panel strong,
.admin-dossier-card h2 {
    font-family: "Comfortaa", "Montserrat", sans-serif;
    font-weight: 700;
}

button,
input,
a {
    font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
}

.ui-icon,
.button-icon,
.summary-icon,
.badge-icon {
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.18em;
}

.brand-mark .ui-icon,
.result-icon .ui-icon,
.admin-empty-icon .ui-icon {
    width: 58%;
    height: 58%;
    stroke-width: 1.65;
}

.patient-page {
    background:
        radial-gradient(circle at 4% -8%, rgba(0, 173, 79, .22), transparent 35rem),
        radial-gradient(circle at 96% 105%, rgba(189, 216, 61, .17), transparent 34rem),
        linear-gradient(155deg, #f7faf9 0%, var(--page-blue) 100%);
}

.app-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .965);
    box-shadow:
        0 25px 72px rgba(7, 74, 52, .13),
        inset 0 1px rgba(255,255,255,.8);
}

.app-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 7px;
    background: linear-gradient(90deg, var(--green-dark), var(--green), var(--lime));
}

.brand-header {
    align-items: flex-start;
    margin-bottom: 20px;
}

.brand-mark {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--green-dark), var(--green));
    box-shadow: 0 14px 30px rgba(0, 107, 63, .23);
}

.eyebrow {
    color: var(--green-dark);
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

h1 {
    font-size: clamp(29px, 7vw, 43px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.intro {
    color: var(--muted);
    font-weight: 500;
}

.upload-card {
    overflow: hidden;
    border: 1px solid #d6e1dc;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,248,247,.98));
    box-shadow: 0 10px 26px rgba(17, 23, 19, .055);
}

.upload-card::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--green);
    opacity: .22;
    transition: opacity .2s ease;
}

.upload-card.has-file::after {
    opacity: 1;
}

.upload-card.has-file {
    border-color: rgba(0, 173, 79, .55);
    background: linear-gradient(180deg, #fff, #eefaf3);
    box-shadow: 0 14px 34px rgba(0, 107, 63, .11);
}

.upload-icon,
.document-icon {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    background: var(--green-soft);
    color: var(--green-dark);
    box-shadow: none;
}

.upload-icon.mutual-icon,
.document-group-card[data-gallery-title="Carte de mutuelle"] .document-icon {
    background: var(--lime-soft);
    color: #647900;
}

.upload-copy h2,
.document-heading h2 {
    font-size: 19px;
    letter-spacing: -.02em;
}

.file-button {
    gap: 8px;
    border-color: #cddbd4;
    background: #fff;
    color: var(--green-dark);
    box-shadow: 0 7px 18px rgba(7, 74, 52, .06);
}

.file-button:hover {
    border-color: var(--green);
    background: #f6fcf8;
}

.selected-file-icon {
    color: var(--green-dark);
}

.presence-card {
    border-color: #cfdbd5;
    background: linear-gradient(180deg, #fff, #f8faf9);
    box-shadow: 0 9px 24px rgba(17, 23, 19, .045);
}

.checkbox-ui {
    border-color: #8b9b93;
}

.presence-card input:checked + .checkbox-ui {
    border-color: var(--green);
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(0, 173, 79, .12);
}

.primary-button,
.treated-button {
    border-radius: 17px;
    background: linear-gradient(105deg, var(--green-dark), var(--green));
    font-weight: 800;
    box-shadow: 0 15px 30px rgba(0, 107, 63, .22);
}

.primary-button:hover,
.treated-button:hover {
    background: linear-gradient(105deg, #005b35, #009b47);
}

.primary-button:disabled {
    background: #aebbb5;
    color: #eef2f0;
    box-shadow: none;
}

.result-icon.success {
    background: linear-gradient(145deg, var(--green-soft), #f5fbf7);
    color: var(--green-dark);
    box-shadow: 0 10px 28px rgba(0, 107, 63, .10);
}

.reference-panel {
    border: 1px solid rgba(0, 173, 79, .20);
    background:
        linear-gradient(145deg, rgba(223,244,231,.95), rgba(239,246,200,.75));
}

.reference-panel strong {
    color: var(--charcoal);
    font-weight: 700;
}

.qr-code {
    border: 1px solid #d2ddd7;
    box-shadow: 0 15px 38px rgba(17, 23, 19, .08);
}

.document-summary span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #d4dfd9;
    background: #f6f8f7;
}

.summary-icon {
    color: var(--green-dark);
}

.pharmacist-page {
    background:
        radial-gradient(circle at 4% 0%, rgba(0, 173, 79, .12), transparent 36rem),
        linear-gradient(160deg, #eef3f1 0%, #e5ecef 100%);
}

.dossier-header {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 95% -10%, rgba(189, 216, 61, .20), transparent 19rem),
        linear-gradient(125deg, #161a18 0%, #073d2d 68%, #006b3f 100%);
    box-shadow: 0 22px 58px rgba(10, 38, 29, .22);
}

.dossier-header::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 6px;
    background: linear-gradient(90deg, var(--green), var(--lime));
}

.dossier-header .eyebrow {
    color: #a8e8c0;
}

.dossier-meta {
    color: #d0ddd7;
    font-weight: 500;
}

.status-pill {
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(223, 244, 231, .95);
    color: var(--green-dark);
}

.preview-note {
    border-color: #d2ddd7;
    background: rgba(255,255,255,.72);
}

.document-tile {
    border-color: #d2ddd7;
    background: rgba(255,255,255,.97);
    box-shadow: 0 16px 42px rgba(11, 54, 39, .08);
}

.document-group-card {
    position: relative;
    overflow: hidden;
}

.document-group-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--green-dark), var(--green));
}

.document-group-card[data-gallery-title="Carte de mutuelle"]::before {
    background: linear-gradient(90deg, #768900, var(--lime));
}

.carousel-arrow {
    border-color: #ccd8d2 !important;
    background: rgba(255,255,255,.95) !important;
    color: var(--green-dark) !important;
    box-shadow: 0 8px 22px rgba(7, 74, 52, .10);
}

.action-button,
.modal-header-tool,
.print-all-button {
    gap: 8px;
    font-weight: 800;
}

.action-button.view {
    background: var(--green-soft);
    color: var(--green-dark);
}

.action-button.download {
    background: #edf2ef;
    color: #28342e;
}

.action-button.print {
    background: var(--lime-soft);
    color: #536600;
}

.print-all-button {
    border: 1px solid rgba(255,255,255,.28) !important;
    background: rgba(255,255,255,.13) !important;
    color: #fff !important;
    backdrop-filter: blur(10px);
}

.print-all-button:hover {
    background: rgba(255,255,255,.21) !important;
}

.treated-form {
    border: 1px solid #d1ddd7;
    background: rgba(255,255,255,.92);
}

.treated-button {
    background: var(--charcoal);
}

.document-modal-header {
    background:
        linear-gradient(120deg, #151a17 0%, #06442f 100%) !important;
}

.document-modal-close {
    color: #fff;
}

.print-toolbar {
    background: linear-gradient(115deg, #161a18, #06442f);
}

.print-toolbar button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


@media (max-width: 620px) {
    .app-card::before {
        height: 6px;
    }
}


/* ==================================================================
   ORDO V2.3.1 — Ajustements confirmation + homogénéité référence
   ================================================================== */

.confirmation-page .shell {
    width: min(100%, 720px);
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.confirmation-page .success-card {
    padding-block: clamp(20px, 3.5vw, 28px);
}

.confirmation-page .result-icon {
    margin-bottom: 14px;
}

.confirmation-page .result-card h1 {
    margin-bottom: 10px;
    font-size: clamp(26px, 6vw, 38px);
}

.confirmation-page .result-copy {
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.5;
}

.confirmation-page .reference-panel {
    width: min(100%, 340px);
    margin: 14px auto 12px;
    padding: 16px 18px;
}

.confirmation-page .reference-panel span {
    margin-bottom: 7px;
    font-size: 12px;
    letter-spacing: .14em;
}

.confirmation-page .reference-panel strong {
    font-size: clamp(40px, 8vw, 58px);
    line-height: 1;
    letter-spacing: .06em;
}

.confirmation-page .qr-code {
    width: min(100%, 260px);
    min-height: 260px;
    padding: 12px;
    margin-top: 0;
}

.confirmation-page .qr-help {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.45;
}

.confirmation-page .document-summary {
    margin-top: 14px;
}

@media (max-width: 620px) {
    .confirmation-page .shell {
        padding-top: max(12px, env(safe-area-inset-top));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .confirmation-page .app-card {
        border-radius: 22px;
    }

    .confirmation-page .reference-panel {
        width: min(100%, 320px);
    }

    .confirmation-page .qr-code {
        width: min(100%, 244px);
        min-height: 244px;
    }
}


/* ==================================================================
   ORDO V2.3.2 — Ajustement charte Essentiels Pharma + trèfle
   Interface claire conservée, couleurs plus franches, filigranes subtils
   ================================================================== */

:root {
    --green: #57AE31;
    --green-dark: #2F8A2F;
    --green-deep: #1D6A2A;
    --green-soft: #EAF5E4;
    --lime: #B7D63B;
    --lime-soft: #F3F8D9;
    --ink: #191817;
    --charcoal: #191817;
    --muted: #5F655F;
    --line: #D9E1DA;
    --page-blue: #EEF2F3;
    --shadow: 0 22px 54px rgba(25, 24, 23, .08);
}

.patient-page {
    background:
        radial-gradient(circle at 0% -5%, rgba(87, 174, 49, .12), transparent 34rem),
        radial-gradient(circle at 100% 100%, rgba(183, 214, 59, .10), transparent 28rem),
        linear-gradient(155deg, #F7FAF8 0%, #EEF2F3 100%);
}

.app-card {
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: var(--shadow);
}

.app-card::before {
    height: 8px;
    background: linear-gradient(90deg, var(--green-dark), var(--green), var(--lime));
}

.brand-mark {
    background: linear-gradient(145deg, var(--green-dark), var(--green));
}

.eyebrow {
    color: var(--ink);
}

.upload-card.has-file {
    border-color: rgba(87, 174, 49, .45);
    box-shadow: 0 14px 34px rgba(87, 174, 49, .10);
}

.upload-icon,
.document-icon {
    background: #F1F8ED;
    color: var(--green-dark);
}

.upload-icon.mutual-icon,
.document-group-card[data-gallery-title="Carte de mutuelle"] .document-icon {
    background: #F8FADF;
    color: #6E7F15;
}

.file-button:hover {
    border-color: var(--green);
    background: #F7FBF5;
}

.presence-card input:checked + .checkbox-ui {
    border-color: var(--green);
    background: var(--green);
}

.primary-button,
.treated-button {
    background: linear-gradient(105deg, var(--green-dark), var(--green));
}

.primary-button:hover,
.treated-button:hover {
    background: linear-gradient(105deg, #2A7C2A, #4FA42D);
}

.reference-panel {
    background: linear-gradient(145deg, #F5FAF2, #EEF7E7);
    border: 1px solid rgba(87, 174, 49, .20);
}

.reference-panel strong {
    color: var(--ink);
}

/* Filigrane trèfle subtil sur la confirmation */
.confirmation-page .app-card {
    position: relative;
}
.confirmation-page .app-card::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -34px;
    bottom: -36px;
    background: url("clover-watermark.svg") no-repeat center / contain;
    opacity: .12;
    pointer-events: none;
}

/* Bandeau du dossier patient : clair, plus moderne, sans liseré noir */
.dossier-header {
    position: relative;
    overflow: hidden;
    border: none;
    color: var(--ink);
    background:
        radial-gradient(circle at 108% -18%, rgba(183, 214, 59, .18), transparent 19rem),
        linear-gradient(180deg, #FFFFFF 0%, #F7FAF8 100%);
    box-shadow: var(--shadow);
}
.dossier-header::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -34px;
    top: 14px;
    background: url("clover-watermark.svg") no-repeat center / contain;
    opacity: .10;
    pointer-events: none;
}
.dossier-header::after {
    inset: 0 0 auto 0;
    height: 8px;
    background: linear-gradient(90deg, var(--green-dark), var(--green), var(--lime));
}
.dossier-header .eyebrow {
    color: var(--ink);
}
.dossier-header h1 {
    color: var(--ink);
}
.dossier-meta {
    color: var(--muted);
}
.status-pill {
    border: 1px solid rgba(87, 174, 49, .18);
    background: #F1F8ED;
    color: var(--green-dark);
}

.print-all-button {
    border: 1px solid rgba(87, 174, 49, .22) !important;
    background: linear-gradient(105deg, var(--green-dark), var(--green)) !important;
    color: #FFFFFF !important;
    box-shadow: 0 12px 24px rgba(87, 174, 49, .18);
}
.print-all-button:hover {
    background: linear-gradient(105deg, #2A7C2A, #4FA42D) !important;
}

.document-group-card::before {
    height: 6px;
    background: linear-gradient(90deg, var(--green-dark), var(--green));
}
.document-group-card[data-gallery-title="Carte de mutuelle"]::before {
    background: linear-gradient(90deg, #8BA619, var(--lime));
}

.action-button.view {
    background: #EFF7EA;
    color: var(--green-dark);
}
.action-button.download {
    background: #F3F5F4;
    color: #2E342F;
}
.action-button.print {
    background: #F4F8DF;
    color: #607411;
}

.carousel-arrow {
    border-color: #D8E0D9 !important;
    color: var(--green-dark) !important;
}

.document-modal-header {
    background: linear-gradient(120deg, #FFFFFF 0%, #F4F8F4 100%) !important;
    border-bottom: 1px solid #E0E5E1;
    color: var(--ink);
}
.document-modal-title .eyebrow,
.document-modal-title h2,
.document-modal-close {
    color: var(--ink) !important;
}
.modal-header-tool {
    border: 1px solid rgba(87, 174, 49, .18);
    background: #FFFFFF;
    color: var(--green-dark);
}
.modal-header-tool:hover {
    background: #F5FAF3;
}

.print-toolbar {
    background: linear-gradient(180deg, #FFFFFF 0%, #F6F9F7 100%);
    border-bottom: 1px solid #E0E5E1;
    color: var(--ink);
}
.print-toolbar span {
    color: var(--muted);
}
.print-toolbar button {
    border: 1px solid rgba(87, 174, 49, .18);
    background: linear-gradient(105deg, var(--green-dark), var(--green));
    color: #FFFFFF;
}

/* Petits ajustements mobiles */
@media (max-width: 620px) {
    .dossier-header::before {
        width: 170px;
        height: 170px;
        right: -20px;
        top: 42px;
    }

    .confirmation-page .app-card::after {
        width: 170px;
        height: 170px;
        right: -26px;
        bottom: -26px;
    }
}


/* ==================================================================
   ORDO V3.0 — GARE STABLE (design-only, functional code unchanged)
   ================================================================== */
:root {
  --ordo-green:#57AE31; --ordo-green-strong:#3F982C; --ordo-green-dark:#1F6F2E;
  --ordo-lime:#BDD83D; --ordo-ink:#191817; --ordo-text:#252724; --ordo-muted:#62685F;
  --ordo-line:#DDE5DE; --ordo-line-strong:#CBD8CE; --ordo-bg:#F6F8F6; --ordo-bg-cool:#EEF2F3;
  --ordo-card:rgba(255,255,255,.965); --ordo-radius-xl:28px; --ordo-radius-lg:22px;
  --ordo-shadow-card:0 10px 30px rgba(25,24,23,.055); --ordo-max-width:1280px;
  --ordo-page-pad:clamp(16px,3vw,36px);
}
html{background:var(--ordo-bg-cool)}
body,button,input,a,select,textarea{font-family:"Montserrat",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important}
h1,h2,h3,.reference-panel strong,.dossier-header h1,.document-heading h2,.result-card h1{font-family:"Comfortaa","Montserrat",sans-serif!important;font-weight:700}
.patient-page,.pharmacist-page{background:linear-gradient(rgba(247,250,248,.91),rgba(238,242,243,.94)),url("pharmacie-gare-bg.webp") center/cover fixed,linear-gradient(155deg,#F8FAF8,#EEF2F3)}
.brand-mark,.upload-icon,.document-icon,.result-icon,.admin-empty-icon,.selected-file-icon{box-shadow:none!important}
.shell,.dashboard-shell{width:min(100%,var(--ordo-max-width));padding:max(var(--ordo-page-pad),env(safe-area-inset-top)) var(--ordo-page-pad) max(var(--ordo-page-pad),env(safe-area-inset-bottom));gap:18px}
.shell{min-height:100vh;align-content:start}.dashboard-shell{display:grid}
.ordo-brand-header{width:100%;display:flex;align-items:center;gap:13px;margin:0 auto 2px;animation:ordoFadeIn .22s ease-out both}
.ordo-brand-emblem{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border-radius:14px;background:#fff;border:1px solid rgba(87,174,49,.22);box-shadow:none}
.ordo-brand-emblem img{width:30px;height:30px;object-fit:contain}
.ordo-brand-name{color:var(--ordo-ink);font-size:clamp(12px,2.4vw,14px);line-height:1.1;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.ordo-brand-subtitle{margin-top:3px;color:var(--ordo-green-dark);font-size:clamp(12px,2.2vw,13px);font-weight:650}
.ordo-footer{width:100%;margin:2px auto 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;padding:16px 18px;border:1px solid rgba(87,174,49,.16);border-radius:20px;background:rgba(255,255,255,.78);color:var(--ordo-text);backdrop-filter:blur(12px)}
.ordo-footer-shield{width:32px;height:32px;display:grid;place-items:center;color:var(--ordo-green-dark);background:#F2F9EF;border-radius:12px}.ordo-footer-shield .ui-icon{width:19px;height:19px}
.ordo-footer-service{margin-bottom:7px;color:var(--ordo-green-dark);font-size:12px;font-weight:800}.ordo-footer-content strong{display:block;margin:0 0 5px;color:var(--ordo-ink);font-size:13px;font-weight:800}.ordo-footer-content p{margin:0;color:var(--ordo-muted);font-size:11.5px;line-height:1.45;font-weight:500}.ordo-footer-content span{display:block;margin-top:7px;color:#7C827B;font-size:11px;font-weight:700}
.app-card,.document-tile,.document-group-card,.treated-form,.preview-note{border:1px solid var(--ordo-line)!important;background:var(--ordo-card)!important;box-shadow:var(--ordo-shadow-card)!important}
.app-card{max-width:760px;margin-inline:auto;border-radius:var(--ordo-radius-xl);animation:ordoCardEnter .24s ease-out both}.app-card::before,.document-group-card::before{height:6px!important;background:linear-gradient(90deg,var(--ordo-green-dark),var(--ordo-green),var(--ordo-lime))!important}
.eyebrow{color:var(--ordo-ink)!important;letter-spacing:.15em;font-weight:850}.intro,.result-copy,.qr-help,.privacy-note{color:var(--ordo-muted)}
.upload-card{border:1px solid var(--ordo-line)!important;background:rgba(255,255,255,.88)!important;box-shadow:none!important}.upload-card.has-file{border-color:rgba(87,174,49,.42)!important;background:#FAFDF8!important}
.upload-icon,.document-icon{background:#F3F9EF!important;color:var(--ordo-green-dark)!important;border:1px solid rgba(87,174,49,.14)}.upload-icon.mutual-icon,.document-group-card[data-gallery-title="Carte de mutuelle"] .document-icon{background:#F8FAE5!important;color:#6B7E16!important}
.file-button,.action-button,.modal-header-tool,.print-all-button,.primary-button,.treated-button{transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease}.file-button{border-color:var(--ordo-line);box-shadow:none}.file-button:active,.action-button:active,.primary-button:active,.treated-button:active,.print-all-button:active{transform:translateY(1px) scale(.995)}
.primary-button,.treated-button{background:linear-gradient(105deg,var(--ordo-green-dark),var(--ordo-green))!important;box-shadow:0 8px 20px rgba(87,174,49,.14)!important}
.confirmation-page .app-card{max-width:620px}.confirmation-page .app-card::after,.dossier-header::before{background-image:url("clover-mark.png")!important;background-size:contain!important;background-repeat:no-repeat!important;opacity:.12!important}.confirmation-page .success-card{padding-block:clamp(18px,3vw,26px)!important}.confirmation-page .result-icon{width:62px;height:62px;margin-bottom:11px!important}.confirmation-page .result-card h1{font-size:clamp(25px,5.2vw,34px)!important}.confirmation-page .reference-panel{margin:12px auto 10px!important;background:#F5FAF2!important}.confirmation-page .reference-panel strong,.admin-dossier-card h2,.dossier-header h1{letter-spacing:.06em!important}.confirmation-page .qr-code{width:min(100%,242px)!important;min-height:242px!important;padding:11px!important;box-shadow:none!important}
.dossier-header{border:1px solid var(--ordo-line)!important;color:var(--ordo-ink)!important;background:rgba(255,255,255,.95)!important;box-shadow:var(--ordo-shadow-card)!important}.dossier-header::before{width:260px!important;height:260px!important;right:-30px!important;top:18px!important}.dossier-header .eyebrow,.dossier-header h1,.document-modal-title h2,.document-modal-title .eyebrow{color:var(--ordo-ink)!important}.dossier-meta{color:var(--ordo-muted)!important}.status-pill{border:1px solid rgba(87,174,49,.18)!important;background:#F2F9EF!important;color:var(--ordo-green-dark)!important}
.print-all-button{border:0!important;background:linear-gradient(105deg,var(--ordo-green-dark),var(--ordo-green))!important;color:#fff!important;box-shadow:0 8px 20px rgba(87,174,49,.14)!important}.document-group-card[data-gallery-title="Carte de mutuelle"]::before{background:linear-gradient(90deg,#839A1A,var(--ordo-lime))!important}.carousel-arrow,.action-button,.modal-header-tool{box-shadow:none!important}.action-button.view{background:#F2F9EF!important;color:var(--ordo-green-dark)!important}.action-button.download{background:#F3F5F4!important;color:var(--ordo-ink)!important}.action-button.print{background:#F8FAE5!important;color:#667714!important}
.document-modal-header,.print-toolbar{background:rgba(255,255,255,.97)!important;color:var(--ordo-ink)!important;border-bottom:1px solid var(--ordo-line)!important}.document-modal-close{color:var(--ordo-ink)!important}
@keyframes ordoFadeIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}@keyframes ordoCardEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:620px){.shell,.dashboard-shell{padding-left:14px;padding-right:14px;gap:14px}.ordo-footer{padding:14px;border-radius:18px}.ordo-footer-content p{font-size:11px}.confirmation-page .qr-code{width:min(100%,232px)!important;min-height:232px!important}}


/* ==================================================================
   ORDO V3.0.1 — Correctifs fins
   ================================================================== */

/* Header badge: use the full icon, no crop, no extra frame */
.ordo-brand-emblem {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}
.ordo-brand-emblem img {
    width: 44px !important;
    height: 44px !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 14px !important;
}

/* Kill the remaining shadow/look under the confirmation icon */
.result-icon,
.result-icon.success,
.result-icon.error,
.result-icon .ui-icon,
.result-icon svg {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

/* The clover must not disturb the dossier header readability */
.dossier-header::before {
    display: none !important;
}

/* Slightly calmer confirmation block */
.confirmation-page .result-icon {
    background: #F3E8C7 !important;
}


/* ==================================================================
   ORDO V3.0.2 — Ajustements demandés
   ================================================================== */
.ordo-brand-emblem,
.ordo-brand-emblem img{
    width:44px !important;
    height:44px !important;
    border-radius:14px !important;
}
.ordo-brand-emblem{
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    overflow:hidden !important;
}
.ordo-brand-emblem img{
    display:block !important;
    object-fit:cover !important;
}

/* wording */
.ordo-brand-subtitle{letter-spacing:0 !important;}

/* remove any residual shadow on legacy result icons */
.result-icon,
.result-icon svg{
    box-shadow:none !important;
    filter:none !important;
    text-shadow:none !important;
}

/* improve disabled button readability on homepage */
.primary-button:disabled,
.primary-button:disabled:not(.is-loading),
.primary-button:disabled:not(.is-loading):hover{
    background:#D8DFDB !important;
    color:#44504A !important;
    border-color:#C9D2CD !important;
    box-shadow:none !important;
    opacity:1 !important;
}
.file-button:disabled{
    color:#5E6863 !important;
    background:#F1F4F2 !important;
}

/* keep dossier header clean */
.dossier-header::before{display:none !important;}


/* ==================================================================
   ORDO V3.0.3 — Raffinements interface patient
   ================================================================== */

/* Header: better logo quality and more robust alignment on mobile / paysage / tablette */
.ordo-brand-header{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    column-gap:14px !important;
}
.ordo-brand-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.ordo-brand-emblem,
.ordo-brand-emblem img{
    width:64px !important;
    height:64px !important;
    border-radius:18px !important;
}
.ordo-brand-emblem{
    overflow:hidden !important;
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
}
.ordo-brand-emblem img{
    display:block !important;
    object-fit:cover !important;
}
.ordo-brand-name{
    font-size:clamp(12px,2.2vw,18px) !important;
    line-height:1.06 !important;
}
.ordo-brand-subtitle{
    font-size:clamp(12px,2vw,15px) !important;
    line-height:1.15 !important;
    margin-top:5px !important;
}

/* Main title block: icon visually centered on the title block */
.brand-header{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    column-gap:18px !important;
}
.brand-header > div:last-child{
    min-width:0;
}
.brand-mark{
    width:72px !important;
    height:72px !important;
    border-radius:24px !important;
    align-self:center !important;
    transform:translateY(6px);
}
.brand-mark .ui-icon{
    width:38px !important;
    height:38px !important;
}

/* Upload call-to-action: pale green frame visible by default */
.file-button{
    min-height:64px !important;
    gap:8px !important;
    border:1px solid rgba(87,174,49,.22) !important;
    background:linear-gradient(180deg,#FAFDF8,#F3F8F1) !important;
    color:var(--ordo-green-dark) !important;
    box-shadow:none !important;
}
.file-button:hover{
    border-color:rgba(87,174,49,.40) !important;
    background:linear-gradient(180deg,#F8FCF6,#EEF7EB) !important;
}
.file-button .button-icon{
    width:22px !important;
    height:22px !important;
}
.file-button span[data-add-label]{
    font-weight:800 !important;
}

/* Footer: single clear heading, no double title effect */
.ordo-footer{
    margin-top:18px !important;
}
.ordo-footer-service{
    display:none !important;
}

/* Small-screen tuning */
@media (max-width: 860px){
    .ordo-brand-emblem,
    .ordo-brand-emblem img{
        width:56px !important;
        height:56px !important;
        border-radius:16px !important;
    }
    .brand-mark{
        width:70px !important;
        height:70px !important;
        border-radius:22px !important;
        transform:translateY(4px);
    }
}

@media (max-width: 620px){
    .ordo-brand-header{
        column-gap:12px !important;
    }
    .ordo-brand-emblem,
    .ordo-brand-emblem img{
        width:52px !important;
        height:52px !important;
        border-radius:15px !important;
    }
    .ordo-brand-name{
        font-size:clamp(11px,4vw,16px) !important;
        letter-spacing:.11em !important;
    }
    .ordo-brand-subtitle{
        font-size:clamp(11px,3.6vw,14px) !important;
        margin-top:4px !important;
    }
    .brand-header{
        column-gap:16px !important;
        align-items:start !important;
    }
    .brand-mark{
        width:68px !important;
        height:68px !important;
        border-radius:22px !important;
        transform:translateY(10px);
    }
    .brand-mark .ui-icon{
        width:36px !important;
        height:36px !important;
    }
    .intro{
        margin-bottom:22px !important;
    }
    .file-button{
        min-height:60px !important;
    }
}


/* ==================================================================
   ORDO V3.0.4 — Alignement en-tête patient
   ================================================================== */

/* Le bloc identitaire suit exactement la largeur de la grande carte */
.ordo-brand-header{
    width:min(100%, 760px) !important;
    max-width:760px !important;
    margin:0 auto 10px !important;
    padding-inline:0 !important;
    justify-self:center !important;
    align-items:center !important;
}

/* Réduction progressive du logo et du titre quand l'écran rétrécit */
.ordo-brand-emblem,
.ordo-brand-emblem img{
    width:clamp(42px, 7vw, 64px) !important;
    height:clamp(42px, 7vw, 64px) !important;
    border-radius:clamp(14px, 2.2vw, 18px) !important;
}

.ordo-brand-copy{
    min-width:0 !important;
    overflow:hidden !important;
}

.ordo-brand-name{
    font-size:clamp(11px, 2.6vw, 18px) !important;
    line-height:1.05 !important;
    letter-spacing:.10em !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
}

.ordo-brand-subtitle{
    font-size:clamp(11px, 2.2vw, 15px) !important;
    line-height:1.12 !important;
    white-space:normal !important;
}

/* Écrans intermédiaires / tablette paysage */
@media (max-width: 1100px){
    .ordo-brand-header{
        margin-bottom:8px !important;
    }
    .ordo-brand-name{
        font-size:clamp(11px, 2.35vw, 17px) !important;
        letter-spacing:.09em !important;
    }
    .ordo-brand-subtitle{
        font-size:clamp(11px, 2vw, 14px) !important;
    }
}

/* Mobile et petits écrans : aucun décalage ni débordement */
@media (max-width: 620px){
    .ordo-brand-header{
        width:100% !important;
        margin:0 0 8px !important;
        column-gap:10px !important;
    }
    .ordo-brand-emblem,
    .ordo-brand-emblem img{
        width:48px !important;
        height:48px !important;
        border-radius:14px !important;
    }
    .ordo-brand-name{
        font-size:clamp(10px, 4vw, 15px) !important;
        letter-spacing:.08em !important;
    }
    .ordo-brand-subtitle{
        font-size:clamp(10px, 3.6vw, 13px) !important;
        margin-top:3px !important;
    }
}


/* ==================================================================
   ORDO V3.0.5 — Header global + confirmation message
   ================================================================== */

/* Apply the corrected patient header visual on all public screens */
.ordo-brand-header{
    width:min(100%, 760px) !important;
    max-width:760px !important;
    margin:0 auto 10px !important;
    padding-inline:0 !important;
    justify-self:center !important;
    align-items:center !important;
}
.ordo-brand-emblem,
.ordo-brand-emblem img{
    width:clamp(42px, 7vw, 64px) !important;
    height:clamp(42px, 7vw, 64px) !important;
    border-radius:clamp(14px, 2.2vw, 18px) !important;
}
.ordo-brand-copy{min-width:0 !important; overflow:hidden !important;}
.ordo-brand-name{
    font-size:clamp(11px, 2.6vw, 18px) !important;
    line-height:1.05 !important;
    letter-spacing:.10em !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
}
.ordo-brand-subtitle{
    font-size:clamp(11px, 2.2vw, 15px) !important;
    line-height:1.12 !important;
    white-space:normal !important;
}
@media (max-width: 1100px){
    .ordo-brand-name{font-size:clamp(11px, 2.35vw, 17px) !important; letter-spacing:.09em !important;}
    .ordo-brand-subtitle{font-size:clamp(11px, 2vw, 14px) !important;}
}
@media (max-width: 620px){
    .ordo-brand-header{width:100% !important; margin:0 0 8px !important; column-gap:10px !important;}
    .ordo-brand-emblem,.ordo-brand-emblem img{width:48px !important; height:48px !important; border-radius:14px !important;}
    .ordo-brand-name{font-size:clamp(10px, 4vw, 15px) !important; letter-spacing:.08em !important;}
    .ordo-brand-subtitle{font-size:clamp(10px, 3.6vw, 13px) !important; margin-top:3px !important;}
}

/* Success state: white check on strong green roundel */
.result-icon.success{
    background: linear-gradient(135deg, var(--ordo-green-dark), var(--ordo-green)) !important;
    color:#FFFFFF !important;
}
.result-icon.success .ui-icon,
.result-icon.success svg{
    color:#FFFFFF !important;
    fill:none !important;
    stroke:currentColor !important;
}

/* Slightly more balanced confirmation title */
.confirmation-page .result-card h1{
    max-width: 12ch !important;
    margin-inline:auto !important;
}

/* Footer: no redundant service overtitle on patient screens */
.ordo-footer-service{display:none !important;}


/* ==================================================================
   ORDO V3.0.6 — Confirmation : alignement + titre 2 lignes
   ================================================================== */

/* On the confirmation screen, header and large card share the same left edge */
.confirmation-page .ordo-brand-header{
    width:min(100%, 620px) !important;
    max-width:620px !important;
}

/* Force the confirmation title on exactly two visual lines */
.confirmation-page .result-card h1{
    max-width:none !important;
    width:auto !important;
    margin-inline:auto !important;
    line-height:1.02 !important;
}
.confirmation-page .result-card h1 br{
    display:block !important;
}


/* ==================================================================
   ORDO V3.0.7 — Dossier patient : alignements
   ================================================================== */

/* Le bloc identitaire du haut s'aligne sur la carte du dossier */
.pharmacist-page .ordo-brand-header{
    width:100% !important;
    max-width:none !important;
    margin:0 0 10px !important;
    justify-self:stretch !important;
}

/* Alignement visuel de la référence avec le surtitre et la ligne meta */
.pharmacist-page .dossier-header .eyebrow,
.pharmacist-page .dossier-header h1,
.pharmacist-page .dossier-header .dossier-meta{
    margin-left:0 !important;
    padding-left:0 !important;
    text-indent:0 !important;
}

.pharmacist-page .dossier-header h1{
    position:relative;
    left:-0.035em; /* compense le side-bearing optique de Comfortaa */
    margin-top:4px !important;
    margin-bottom:12px !important;
    line-height:.92 !important;
}

.pharmacist-page .dossier-header .eyebrow{
    margin-bottom:8px !important;
}

.pharmacist-page .dossier-meta{
    margin-top:0 !important;
}


/* ==================================================================
   ORDO V3.0.8 — Alignement optique fin de la référence
   ================================================================== */

/* Le B de la référence possède un retrait optique dans Comfortaa.
   On le compense de façon fixe pour l'aligner avec les deux textes. */
.pharmacist-page .dossier-header h1{
    left:0 !important;
    display:inline-block !important;
    transform:translateX(-6px) !important;
}

@media (max-width: 620px){
    .pharmacist-page .dossier-header h1{
        transform:translateX(-4px) !important;
    }
}


/* ==================================================================
   ORDO V3.1.3 — Interligne du bouton de téléchargement
   ================================================================== */

/* Quand le libellé passe sur deux lignes pendant l'ouverture de la
   boîte d'enregistrement, l'interligne reste compact et le bouton
   conserve son équilibre visuel. */
.group-action-grid .action-button,
.group-action-grid .action-button [data-download-label],
.modal-header-tool [data-modal-download-label] {
    line-height: 1.08 !important;
}

.group-action-grid .action-button [data-download-label] {
    display: inline-block;
    max-width: 15ch;
}


/* ==================================================================
   ORDO V3.1.5 — Alignement de la carte d'information patient
   ================================================================== */

/* Accueil patient : la carte basse a exactement la largeur de la carte principale */
body.patient-page:not(.confirmation-page):not(.status-page) .shell > .ordo-footer{
    width:min(100%, 760px) !important;
    max-width:760px !important;
    justify-self:center !important;
}

/* Écran de confirmation / QR code : même largeur que la carte de confirmation */
.confirmation-page .shell > .ordo-footer{
    width:min(100%, 620px) !important;
    max-width:620px !important;
    justify-self:center !important;
}



/* ==================================================================
   ORDO V3.1.6 — Correctif coche présence sur PC
   ================================================================== */
.checkbox-ui{
    position:relative !important;
    overflow:visible !important;
    line-height:1 !important;
}

/* Remplace le caractère typographique ✓ par une coche CSS stable */
.presence-card input:checked + .checkbox-ui::after{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:48% !important;
    width:7px !important;
    height:13px !important;
    border:solid #fff !important;
    border-width:0 3px 3px 0 !important;
    border-radius:1px !important;
    transform:translate(-50%,-58%) rotate(45deg) !important;
    transform-origin:center !important;
    box-sizing:border-box !important;
}


/* ==================================================================
   ORDO V3.1.7 — Correction interligne descriptions sur PC
   ================================================================== */
@media (min-width: 768px) {
  .upload-copy p {
    line-height: 1.18 !important;
  }
}


/* La page de fermeture utilise désormais assets/components.css (ORDO 3.17). */

/* ==================================================================
   ORDO V3.3.3 — Mention de version sous le disclaimer
   ================================================================== */
.ordo-version-credit {
    width: 100%;
    margin: -8px auto 0;
    text-align: center;
    color: #7C827B;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: .01em;
}

body.patient-page:not(.confirmation-page):not(.status-page) .shell > .ordo-version-credit {
    width: min(100%, 760px);
    max-width: 760px;
    justify-self: center;
}

.confirmation-page .shell > .ordo-version-credit {
    width: min(100%, 620px);
    max-width: 620px;
    justify-self: center;
}

@media (max-width: 620px) {
    .ordo-version-credit {
        margin-top: -6px;
        font-size: 10.5px;
    }
}


/* ==================================================================
   ORDO V3.9.0 — Optimisation automatique de la luminosité
   ================================================================== */

.selected-file-info {
    min-width: 0;
}

.selected-file-optimization {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-top: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    color: #667069;
    background: #F3F6F4;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 750;
}

.selected-file-optimization[hidden] {
    display: none !important;
}

.selected-file-optimization.is-analysing::before {
    content: "";
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    margin-right: 6px;
    border: 2px solid rgba(87, 174, 49, .22);
    border-top-color: var(--ordo-green-dark);
    border-radius: 50%;
    animation: ordo-optimization-spin .8s linear infinite;
}

.selected-file-optimization.is-optimized {
    color: var(--ordo-green-dark);
    background: #F2F9EF;
    border: 1px solid rgba(87, 174, 49, .16);
}

.selected-file-optimization.is-optimized::before {
    content: "✓";
    margin-right: 6px;
    font-weight: 900;
}

.selected-file-row.is-optimized {
    border-color: rgba(87, 174, 49, .28);
}

.document-optimization-banner {
    width: min(100%, 760px);
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(87, 174, 49, .18);
    border-radius: 15px;
    background: #F2F9EF;
    color: var(--ordo-green-dark);
    font-size: 11.5px;
    line-height: 1.4;
    font-weight: 700;
}

.document-optimization-banner a {
    flex: 0 0 auto;
    color: var(--ordo-green-dark);
    font-weight: 850;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.document-optimization-banner.is-original {
    background: #FFF9EF;
    border-color: rgba(201, 131, 39, .24);
    color: #8C5A18;
}

.document-optimization-banner.is-original a {
    color: #8C5A18;
}

@keyframes ordo-optimization-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 560px) {
    .document-optimization-banner {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==================================================================
   ORDO V3.11.1 — Aperçu du dossier plus immédiat
   ================================================================== */

.document-group-card .carousel-slide > .pdf-loading {
    min-height: 100%;
    border-radius: 0;
    background:
        linear-gradient(
            110deg,
            #F4F7F5 8%,
            #FFFFFF 18%,
            #F4F7F5 33%
        );
    background-size: 220% 100%;
    animation: documentPreviewLoading 1.25s linear infinite;
}

@keyframes documentPreviewLoading {
    to {
        background-position-x: -220%;
    }
}


/* ==================================================================
   ORDO V3.13.0 — Interface de démonstration
   ================================================================== */

.demo-mode-banner,
.demo-result-banner,
.demo-dossier-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    border: 1px solid rgba(201, 130, 39, .30);
    border-radius: 20px;
    background: #FFF7E9;
    color: #754513;
    box-shadow: 0 18px 40px rgba(55, 71, 62, .08);
}

.demo-mode-banner {
    padding: 16px 18px;
}

.demo-mode-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #F6D9AD;
    color: #914F14;
}

.demo-mode-icon .ui-icon {
    width: 24px;
    height: 24px;
}

.demo-mode-banner > div:nth-child(2) {
    min-width: 0;
    flex: 1 1 auto;
}

.demo-mode-banner strong,
.demo-result-banner strong,
.demo-dossier-banner strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-weight: 850;
    letter-spacing: .06em;
}

.demo-mode-banner p {
    margin: 4px 0 0;
    line-height: 1.45;
}

.demo-mode-banner a {
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid rgba(145, 79, 20, .24);
    border-radius: 13px;
    background: #FFFFFF;
    color: #754513;
    font-weight: 800;
    text-decoration: none;
}

.demo-brand-mark,
.demo-primary-button {
    background: linear-gradient(145deg, #E2A24C, #B96A1D) !important;
}

.demo-presence-card {
    border-color: rgba(201, 130, 39, .26) !important;
    background: #FFF9F0 !important;
}

.demo-result-banner,
.demo-dossier-banner {
    justify-content: space-between;
    padding: 14px 18px;
}

.demo-result-banner span,
.demo-dossier-banner span {
    color: #806443;
    line-height: 1.4;
}

.demo-print-watermark {
    position: fixed;
    z-index: 20;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-32deg);
    color: rgba(170, 89, 18, .16);
    font-family: "Montserrat", sans-serif;
    font-size: clamp(48px, 10vw, 130px);
    font-weight: 900;
    letter-spacing: .08em;
    pointer-events: none;
}

@media (max-width: 720px) {
    .demo-mode-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .demo-mode-banner a {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .demo-result-banner,
    .demo-dossier-banner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media print {
    .demo-print-watermark {
        display: block !important;
    }
}


/* ==================================================================
   ORDO V3.14.3 — Alignement du bandeau démo
   ================================================================== */

.demo-patient-page .shell > .demo-mode-banner {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    margin-inline: auto !important;
    justify-self: center !important;
}


/* ==================================================================
   ORDO V3.15.0 — Avis Google et réseaux sociaux
   ================================================================== */

.confirmation-page .patient-engagement-card {
    width: min(100%, 620px);
    max-width: 620px;
    justify-self: center;
    box-sizing: border-box;
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--ordo-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--ordo-shadow-card);
}

.patient-review-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
}

.patient-review-copy {
    min-width: 0;
}

.patient-review-copy strong {
    display: block;
    color: var(--ordo-ink);
    font-size: clamp(15px, 2.7vw, 18px);
    line-height: 1.3;
    font-weight: 850;
}

.patient-review-stars {
    display: block;
    margin-bottom: 5px;
    color: #F6B500;
    font-size: 18px;
    line-height: 1;
    letter-spacing: .07em;
}

.patient-google-review-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 15px;
    box-sizing: border-box;
    border: 1px solid #DADCE0;
    border-radius: 14px;
    background: #FFFFFF;
    color: #202124;
    box-shadow: 0 5px 16px rgba(32, 33, 36, .08);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.patient-google-review-button:hover {
    border-color: #BFC3C9;
    box-shadow: 0 7px 20px rgba(32, 33, 36, .12);
    transform: translateY(-1px);
}

.patient-google-review-button:active {
    transform: translateY(1px);
}

.google-brand-icon {
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px;
    fill: initial !important;
    stroke: none !important;
    color: initial !important;
}

.google-brand-icon path {
    stroke: none !important;
}

.patient-social-divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(44, 67, 52, .18) 14%,
        rgba(44, 67, 52, .18) 86%,
        transparent
    );
}

.patient-social-section {
    display: grid;
    gap: 12px;
}

.patient-social-section > strong {
    color: var(--ordo-muted);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.patient-social-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.patient-social-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 9px 14px;
    box-sizing: border-box;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    transition:
        transform .16s ease,
        filter .16s ease,
        box-shadow .16s ease;
}

.patient-social-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.025);
}

.patient-social-button:active {
    transform: translateY(1px);
}

.patient-social-button.instagram {
    background:
        linear-gradient(
            120deg,
            #F9CE34 0%,
            #EE2A7B 42%,
            #6228D7 100%
        );
    color: #FFFFFF;
    box-shadow: 0 7px 18px rgba(196, 42, 126, .16);
}

.patient-social-button.facebook {
    background: #1877F2;
    color: #FFFFFF;
    box-shadow: 0 7px 18px rgba(24, 119, 242, .16);
}

.instagram-brand-icon {
    position: relative;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    display: block;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-radius: 7px;
}

.instagram-lens {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.instagram-dot {
    position: absolute;
    right: 3px;
    top: 3px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
}

.facebook-brand-icon {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    display: grid;
    place-items: end center;
    border-radius: 50%;
    background: #FFFFFF;
    color: #1877F2;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 900;
    line-height: 22px;
    overflow: hidden;
}

@media (max-width: 620px) {
    .confirmation-page .patient-engagement-card {
        padding: 17px;
        gap: 16px;
        border-radius: 20px;
    }

    .patient-review-section {
        grid-template-columns: 1fr;
    }

    .patient-google-review-button {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .patient-social-buttons {
        grid-template-columns: 1fr;
    }
}


/* ==================================================================
   ORDO V3.15.2 — Avis centré et graisse Bold
   ================================================================== */

.patient-review-section {
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
}

.patient-review-copy {
    width: 100%;
    text-align: center;
}

.patient-review-stars {
    text-align: center;
}

.patient-review-copy strong {
    font-weight: 700 !important;
    text-align: center;
}

.patient-review-copy strong span {
    display: block;
}

.patient-google-review-button {
    width: 100%;
    justify-self: center;
}

/* Les anciennes surcharges des pages d’état ont été retirées :
   la source unique est assets/components.css. */


/* ==================================================================
   ORDO V3.17.1 — Garde-fous du composant d’identité et du mode démo
   ================================================================== */
.ordo-brand-lockup {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
}

.ordo-brand-lockup .ordo-brand-copy {
    min-width: 0;
}

.confirmation-page .demo-result-banner {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    margin-inline: auto !important;
    justify-self: center !important;
    box-sizing: border-box !important;
}

.confirmation-page .demo-result-banner > * {
    min-width: 0;
}

.confirmation-page .demo-result-banner span {
    overflow-wrap: anywhere;
}


/* ==================================================================
   ORDO V3.17.6 — Alignement réel des écrans d’envoi sur le gabarit commun
   ================================================================== */
.upload-patient-page .shell{
    width:min(100%, 760px) !important;
    max-width:760px !important;
    min-height:100vh !important;
    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;
}

.upload-patient-page .shell > .ordo-brand-header,
.upload-patient-page .shell > .app-card,
.upload-patient-page .shell > .demo-mode-banner,
.upload-patient-page .shell > .ordo-footer,
.upload-patient-page .shell > .ordo-version-credit{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    justify-self:stretch !important;
}

/* La composition interne historique est volontairement conservée. */
.upload-patient-page .brand-header{
    text-align:left !important;
}

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