* { box-sizing: border-box; }

:root {
    color: #243e4d;
    background: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.7;
}

body { margin: 0; }
a { color: #245675; }
a:focus-visible { outline: 3px solid #245675; outline-offset: 6px; }
.site-header, main, .site-footer { width: min(100% - 48px, 1080px); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 28px; border-bottom: 1px solid #e5ecef; }
.site-header a { flex-shrink: 0; }
.logo { display: block; width: 210px; max-width: 100%; height: auto; }
.status { font-size: .8rem; color: #52636c; text-align: right; }
.intro { max-width: 790px; padding-block: 76px 72px; }
.eyebrow { color: #52636c; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px; }
h1, h2, h3 { color: #245675; line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); letter-spacing: -.045em; margin: 0 0 26px; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -.025em; margin: 0 0 28px; }
h3 { font-size: 1.15rem; margin: 0 0 12px; }
p { margin: 0 0 18px; }
.lead { font-size: 1.3rem; line-height: 1.6; }
.intro > p:not(.eyebrow) { max-width: 670px; }
.concept-link { display: inline-block; margin-top: 8px; font-weight: 650; text-underline-offset: 5px; }
.concept-link span { margin-left: 12px; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.intro-actions .concept-link { margin-top: 0; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 28px; border-radius: 8px; background: #245675; color: #fff; font-weight: 650; text-decoration: none; }
.button:hover { background: #193e56; }
[hidden] { display: none !important; }
.link-card { padding: 24px; margin-block: 24px; border-radius: 12px; background: #f0f5f8; }
.access-link { display: block; width: 100%; margin-block: 12px 18px; padding: 12px; border: 1px solid #8299a7; border-radius: 6px; background: #fff; color: #243e4d; font: inherit; }
.button { border: 0; font: inherit; font-weight: 650; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid #245675; outline-offset: 6px; }
.operation-summary { margin-block: 32px; padding: 28px; border-radius: 16px; background: #f0f5f8; }
.operation-summary h2 { font-size: 1.4rem; margin-bottom: 20px; }
.operation-summary ul { margin: 0; padding-left: 22px; }
.operation-summary li + li { margin-top: 16px; }
.approval-form { margin-block: 28px; }
.approval-label { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; cursor: pointer; }
.approval-label input { flex-shrink: 0; width: 22px; height: 22px; margin: 3px 0 0; accent-color: #245675; }
.form-error { padding: 18px; border-left: 4px solid #a32d26; background: #fff1ef; color: #80221d; }
.form-success { padding: 24px; margin-block: 28px; background: #edf6ef; border-radius: 12px; }
.form-success h2 { font-size: 1.4rem; margin-bottom: 12px; }
.form-success p { margin: 0; }
.how-it-works { border-top: 1px solid #e5ecef; padding-block: 48px; scroll-margin-top: 24px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; list-style: none; padding: 0; margin: 0; counter-reset: steps; }
.steps li { counter-increment: steps; }
.steps li::before { content: "0" counter(steps); display: block; color: #8b4a30; font-size: .85rem; font-weight: 700; margin-bottom: 18px; }
.steps p { margin: 0; }
.access { padding-block: 24px 48px; }
.roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.role-card { padding: 32px; background: #f0f5f8; border-radius: 16px; }
.role-card-aide { background: #fcf2ec; }
.role-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.role-note { margin: 24px 0 0; font-weight: 600; }
.privacy { padding: 8px 0 48px; max-width: 800px; }
.privacy h2 { font-size: 1.3rem; margin-bottom: 14px; }
.privacy p { margin: 0; }
.site-footer { border-top: 1px solid #e5ecef; padding-block: 24px; font-size: .85rem; color: #52636c; }
.site-footer p { margin: 0; }
.skip-link { position: absolute; left: 16px; top: -200px; padding: 14px; background: #fff; color: #123d59; z-index: 10; font-weight: 700; }
.skip-link:focus { top: 12px; }

/* Écrans de l’environnement : une présentation compacte, adaptée au tactile. */
.catalogue { margin-top: 24px; scroll-margin-top: 16px; }
.catalogue-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.catalogue-heading span, .product-category { color: #52636c; font-size: .875rem; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block: 16px; }
.product-card { min-width: 0; padding: 16px; background: #fff; border: 1px solid #dce5ea; border-radius: 10px; overflow-wrap: anywhere; }
.product-category { margin-bottom: 6px; }
.product-overview { display: flex; align-items: center; gap: 12px; }
.product-overview > div { min-width: 0; }
.product-overview h3 { margin-bottom: 0; }
.product-image { width: 80px; height: 80px; flex: 0 0 80px; object-fit: contain; border-radius: 8px; background: #fff; }
.product-image-hint { font-size: .875rem; color: #52636c; margin: 0; }
.product-state { font-size: .8125rem; color: #52636c; margin: 10px 0; }
.button-secondary { background: #e5eef3; color: #245675; }
.button-secondary:hover { background: #d4e2eb; }
.category-settings { margin-bottom: 16px; padding: 0 16px 12px; border: 1px solid #dce5ea; border-radius: 10px; background: #fff; }
.category-settings > summary { min-height: 44px; padding-block: 12px; cursor: pointer; font-weight: 600; color: #245675; }
.category-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-block: 12px; border-top: 1px solid #e5ecef; }
.category-row strong { overflow-wrap: anywhere; }
.category-row img { border-radius: 6px; }
.category-row .product-state { margin: 4px 0 0; }
.category-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block: 16px; }
.category-filter select { max-width: 100%; min-width: 0; min-height: 44px; font: inherit; padding: 8px; border: 1px solid #8299a7; border-radius: 6px; }
select:focus-visible { outline: 3px solid #245675; outline-offset: 3px; }
@media (max-width: 440px) { .category-row { grid-template-columns: 48px minmax(0, 1fr); } .category-row form { grid-column: 2; } .category-filter select { width: 100%; } }
.product-editor summary, .sharing-panel summary { padding-block: 12px; min-height: 44px; cursor: pointer; color: #245675; font-weight: 600; }
summary:focus-visible { outline: 3px solid #245675; outline-offset: 3px; }
.add-product { padding: 0 16px; background: #edf3f6; border-radius: 10px; }
.product-form { display: grid; gap: 12px; padding-block: 8px 16px; }
.product-form label { display: grid; gap: 4px; font-size: .9375rem; }
.product-form input { width: 100%; min-width: 0; min-height: 44px; padding: 9px 10px; border: 1px solid #8299a7; border-radius: 6px; font: inherit; background: #fff; }
.product-form .button { justify-self: start; }
.delete-product { border-top: 1px solid #dce5ea; padding-top: 16px; }
.delete-confirm { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: .875rem; }
.delete-confirm input { width: 20px; height: 20px; flex-shrink: 0; }
.button-danger { background: #943b32; }
.button-danger:hover { background: #732a24; }
.catalogue-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding-block: 12px; }
@media (max-width: 600px) { .product-grid { grid-template-columns: 1fr; } }
.workspace { background: #f7f9fa; line-height: 1.5; }
.workspace .site-header, .workspace main { width: min(100% - 32px, 960px); }
.workspace .site-header { padding-block: 14px; gap: 12px; }
.workspace .logo { width: 144px; }
.workspace-role { font-size: .875rem; color: #52636c; text-align: right; }
.workspace .intro { max-width: none; padding-block: 24px; }
.workspace h1 { font-size: 1.5rem; letter-spacing: -.02em; margin-bottom: 10px; }
.workspace h2 { font-size: 1.15rem; margin-bottom: 12px; }
.workspace h3 { font-size: 1rem; }
.workspace-description { color: #52636c; margin-bottom: 20px; }
.workspace .link-card { padding: 16px; margin-block: 16px; border: 1px solid #dce5ea; background: #fff; border-radius: 10px; }
.workspace .access-link { margin-block: 8px 12px; padding: 10px; min-width: 0; }
.workspace .intro-actions { gap: 10px; margin-top: 12px; }
.workspace .button { min-height: 44px; padding: 10px 16px; }
.workspace .concept-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; }

@media (max-width: 420px) {
    .workspace .logo { width: 124px; }
    .workspace .intro-actions .button { flex: 1 1 auto; }
    .workspace h1 { font-size: 1.375rem; }
}

@media (max-width: 680px) {
    .site-header, main, .site-footer { width: calc(100% - 40px); }
    .site-header { gap: 16px; padding-block: 22px; }
    .logo { width: 155px; }
    .status { max-width: 110px; }
    .intro { padding-block: 48px; }
    .lead { font-size: 1.15rem; }
    .steps, .roles { grid-template-columns: 1fr; }
    .steps { gap: 28px; }
    .steps li::before { margin-bottom: 10px; }
    .role-card { padding: 24px; }
}

/* Espace aidé : une seule colonne, gros contrôles et contraste renforcé. */
.recipient-workspace { color: #162e3c; font-size: 1.125rem; background: #fff; }
.recipient-workspace .intro { padding-block: 18px; }
.recipient-workspace .catalogue { margin-top: 16px; }
.recipient-workspace h1 { font-size: 1.5rem; }
.recipient-workspace h2 { font-size: 1.375rem; }
.recipient-instructions { margin-bottom: 10px; }
.demo-notice { padding: 12px 14px; background: #fff3d1; border-left: 4px solid #785b11; color: #413209; font-size: 1rem; }
.recipient-workspace .category-filter { gap: 12px; }
.recipient-workspace .category-filter label { font-weight: 700; }
.recipient-workspace .category-filter select { flex: 1; min-height: 56px; border: 2px solid #345469; color: #162e3c; background: #fff; font-size: 1.125rem; }
.recipient-workspace .button { min-height: 56px; font-size: 1.125rem; background: #143f5a; }
.selection-summary { margin: 12px 0; font-size: 1rem; color: #263e4b; }
.recipient-products { display: grid; gap: 12px; list-style: none; padding: 0; margin: 16px 0; }
.recipient-product { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(210px, 250px); align-items: center; gap: 16px; padding: 14px; border: 2px solid #738997; border-radius: 10px; background: #fff; }
.recipient-product-label { min-width: 0; overflow-wrap: anywhere; }
.recipient-workspace .product-category { color: #374f5d; font-size: 1rem; margin: 0 0 4px; }
.recipient-workspace .recipient-product h3 { font-size: 1.375rem; line-height: 1.35; margin: 0; color: #102d3e; }
.order-choice { min-height: 64px; width: 100%; padding: 14px 16px; border: 2px solid #143f5a; border-radius: 8px; background: #143f5a; color: #fff; font: inherit; font-size: 1.25rem; line-height: 1.35; font-weight: 700; cursor: pointer; }
.order-choice:hover { background: #0b2c40; }
.order-choice:disabled { opacity: .65; cursor: default; }
.recipient-product.is-chosen { border-color: #215c35; background: #edf7ee; }
.order-choice[aria-pressed="true"] { background: #215c35; border-color: #215c35; }
.chosen-label { display: block; color: #174725; font-size: 1rem; font-weight: 750; margin-top: 6px; }
.recipient-workspace :is(button, select, a):focus-visible { outline: 4px solid #111; outline-offset: 4px; box-shadow: 0 0 0 4px #ffdf66; }
.recipient-workspace .concept-link { min-height: 56px; font-size: 1.125rem; }
.recipient-workspace .workspace-role { color: #374f5d; font-size: 1rem; }
@media (max-width: 700px) {
    .recipient-product { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 12px; }
    .order-choice { grid-column: 1 / -1; }
    .recipient-workspace .category-filter select { flex-basis: 100%; }
    .recipient-workspace .category-filter .button { width: 100%; }
}
@media (forced-colors: active) {
    .recipient-product.is-chosen { border: 4px solid Highlight; }
    .order-choice[aria-pressed="true"] { border: 4px solid Highlight; }
}