/* ===== style-legacy.css ===== */
:root {
    --white: #ffffff;
    --ink: #0f1b33;
    --muted: #596378;
    --line: #e2e7ef;
    --soft: #f5f7fb;
    --brand: #1d4ed8;
    --brand-dark: #173ea8;
    --brand-tint: #eaf0ff;
    --ok: #0e9f6e;
    --radius: 12px;
    --container: 1480px;
    --shadow: 0 1px 2px rgba(15, 27, 51, .05), 0 12px 32px -12px rgba(15, 27, 51, .14);
    --font-head: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.container { width: min(var(--container), 100% - 48px); margin-inline: auto; }
.site-header .container, .site-footer .container, .hero .container, #applications .container,
.help-hero .container, .help-content .container, .legal .container { width: 100%; padding-inline: clamp(1rem, 5vw, 4rem); }
.skip-link { position: absolute; left: 16px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip-link:focus { top: 12px; }
.icon { flex: none; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: .6rem 1.2rem; border-radius: 10px; border: 0;
    font: 500 1rem/1.6 var(--font-body); cursor: pointer; white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn-lg { padding: 14px 24px; font-size: 1rem; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost { color: var(--ink); }
.btn-ghost:hover { color: var(--brand); }
.btn-light { background: #fff; color: var(--brand-dark); }
.btn-light:hover { background: var(--brand-tint); }
.btn-ghost-light { color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); }
.btn-ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.site-header {
    --header-bg: #f3f1f8;
    --header-line: #dcd8ea;
    position: relative; z-index: 50;
    background: transparent;
}
.site-header.is-scrolled { border-color: transparent; box-shadow: none; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 1.25rem; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 1rem; }
.brand-name { font: 700 1.6rem/1.2 var(--font-head); letter-spacing: -.02em; }
.main-nav { display: flex; align-items: center; gap: 2.5rem; margin-left: auto; }
.main-nav > ul { display: flex; align-items: center; gap: 2.5rem; }
.main-nav > ul > li > a,
.menu-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0; border-radius: 0; background: none; border: 0;
    font: 500 1.1rem/1.6 var(--font-body); color: var(--ink); cursor: pointer;
}
.main-nav > ul > li > a:hover, .menu-toggle:hover { color: var(--brand); }
.menu-toggle svg { transition: transform .2s; }
.menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.has-menu { position: relative; }
.submenu {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 8px; display: none;
}
.has-menu.is-open .submenu { display: block; }
.submenu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; font-weight: 500; font-size: .95rem; }
.submenu a:hover { background: var(--brand-tint); color: var(--brand-dark); }
.submenu .icon { color: var(--brand); }
#applications, #recents, #fichiers { scroll-margin-top: 88px; }
.header-actions { display: flex; align-items: center; gap: 1.5rem; }
.header-actions .btn-outline {
    padding: .85rem 1.6rem; font-size: 1.1rem;
    border: 1px solid var(--brand); border-radius: 14px;
}
.header-actions .btn-outline:hover { background: var(--brand-tint); border-color: var(--brand-dark); color: var(--brand-dark); }
.burger { display: none; width: 44px; height: 44px; background: none; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hero { padding: clamp(2rem, 7vw, 5.5rem) 0 2rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 7vw, 5rem); line-height: 1.02; font-weight: 800; letter-spacing: -.03em; margin: 0 0 1.2rem; }
.lead { margin: 0 0 2rem; font-size: 1.15rem; color: var(--muted); max-width: 38rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; color: var(--muted); font-size: .95rem; }
.hero-points li { display: flex; align-items: center; gap: 8px; }
.hero-points li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.bench { background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.bench-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); background: var(--soft); }
.bench-title { font-weight: 600; }
.bench-status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.bench-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.bench-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.bench-tab {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--muted);
    font: 500 .88rem/1 var(--font-body);
    cursor: pointer;
    white-space: nowrap;
}
.bench-tab:hover { background: var(--soft); color: var(--ink); }
.bench-tab[aria-selected="true"] { background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; }
.bench-panel[hidden] { display: none; }
.panel-split { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; }
.panel-list { display: grid; }
.panel-list li { display: grid; padding-left: 14px; border-left: 3px solid var(--brand); }
.panel-list span { color: var(--muted); }
.panel-note { color: var(--muted); }
.scan-doc, .pdf-page {
    position: relative; background: #fff; border: 1px solid var(--line); border-radius: 6px;
    padding: 18px 16px; display: grid; gap: 9px; align-content: start; overflow: hidden;
    box-shadow: 0 8px 18px -10px rgba(15, 27, 51, .25);
}
.scan-doc { aspect-ratio: 3 / 4; transform: rotate(-2deg); }
.scan-doc b, .pdf-page b { height: 10px; width: 55%; background: var(--ink); border-radius: 3px; }
.scan-doc s, .pdf-page s { height: 6px; background: var(--line); border-radius: 3px; text-decoration: none; }
.scan-doc s.short, .pdf-page s.short { width: 62%; }
.pdf-page s.mark { background: #ffe58a; }
.pdf-page { margin: 22px auto 0; }
.pdf-page em { font: italic 600 1.15rem/1 var(--font-head); color: var(--brand); border-top: 1px dashed var(--line); }
.scan-line { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand); box-shadow: 0 0 14px 3px rgba(29, 78, 216, .45); animation: scan 2.8s ease-in-out infinite; }
@keyframes scan { 0%, 100% { top: 0; } 50% { top: calc(100% - 3px); } }
.chips { display: flex; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.jobs { display: grid; }
.jobs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.job-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-to { font-weight: 600; color: var(--brand-dark); background: var(--brand-tint); border-radius: 6px; }
.bar { grid-column: 1 / -1; background: var(--soft); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.codes { grid-template-columns: 160px minmax(0, 1fr); }
.qr { display: grid; grid-template-columns: repeat(13, 1fr); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.qr i.on { background: var(--ink); }
.barcode { background: repeating-linear-gradient(90deg, var(--ink) 0 2px, #fff 2px 4px, var(--ink) 4px 5px, #fff 5px 8px, var(--ink) 8px 11px, #fff 11px 13px, var(--ink) 13px 14px, #fff 14px 17px); border-radius: 3px; }
.barcode-num { display: block; letter-spacing: .2em; color: var(--muted); }
.visio-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.visio-live { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.visio-live i { width: 8px; height: 8px; border-radius: 50%; background: #e0342f; }
.visio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.visio-cell { position: relative; display: grid; place-items: center; background: var(--soft); border: 2px solid transparent; }
.visio-cell b { display: grid; place-items: center; border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark); font: 700 .9rem/1 var(--font-head); }
.visio-cell span { position: absolute; color: var(--muted); }
.visio-cell.is-speaking { border-color: var(--ok); }
.visio-bar { display: flex; justify-content: center; }
.visio-btn { display: grid; place-items: center; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); color: var(--ink); }
.visio-btn.is-end { background: #e0342f; border-color: #e0342f; color: #fff; }
.section { padding: 96px 0; }
.section-soft { background: var(--soft); }
.section-head { max-width: 40em; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 700; }
.section-head p { margin-top: 14px; color: var(--muted); font-size: 1.12rem; }
.view-bar { display: flex; align-items: center; gap: 12px; margin: -24px 0 1.5rem; }
.view-switch { display: flex; flex: none; margin-left: auto; }
.cat-chips { display: flex; flex-wrap: nowrap; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chip { padding: .4rem 1rem; flex: none; white-space: nowrap; border: 1.5px solid var(--line); border-radius: 99px; background: transparent; color: var(--ink); font: 400 1rem/1.6 var(--font-body); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.cat-chip:hover { color: var(--ink); border-color: var(--ink); }
.cat-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.cat-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.view-note { margin: 0 0 1rem; color: var(--muted); font-size: .92rem; }
.view-note[hidden] { display: none; }
.view-switch-inner { display: inline-flex; gap: 2px; padding: 4px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; }
.view-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 600 .9rem/1 var(--font-body); cursor: pointer; transition: background .15s, color .15s; }
.view-btn span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.view-btn:hover { color: var(--ink); }
.view-btn[aria-pressed="true"] { background: var(--white); color: var(--brand); box-shadow: 0 1px 2px rgba(15, 27, 51, .14); }
.view-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bento { display: grid; gap: 12px; }
.bento-tile { --tile: var(--brand); --span: 4; --rows: 1; --tspan: 3; --trows: 1; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, filter .2s, border-color .2s, background .2s; }
.bento-tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.bento-tile::after { content: none; }
.bento-ghost { display: none; }
.bento-name { font-family: var(--font-head); letter-spacing: 0; }
.bento-tile[data-app="editeur-pdf"]         { --tile: #e8466e; }
.bento-tile[data-app="reunions"]            { --tile: #cf6f0a; }
.bento-tile[data-app="scanner-express"]     { --tile: #139e89; }
.bento-tile[data-app="traitement-fichiers"] { --tile: #3f7be4; }
.bento-tile[data-app="qr-codes-barres"]     { --tile: #a04bd4; }
.bento-tile[data-app="bloc-notes"]          { --tile: #0e7490; }
.bento-tile[data-app="calculatrice"]        { --tile: #4f46e5; }
.bento-tile[hidden] { display: none !important; }
.bento:not([data-view="grid"]) .bento-formats, .bento:not([data-view="grid"]) .bento-go,

.bento[data-view="mosaic"] { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 250px; grid-auto-flow: row dense; }
.bento[data-view="mosaic"] .bento-tile:nth-child(1) { --span: 5; --rows: 2; }
.bento[data-view="mosaic"] .bento-tile:nth-child(2) { --span: 7; }
.bento[data-view="mosaic"] .bento-tile:nth-child(3) { --span: 3; }
.bento[data-view="mosaic"] .bento-tile:nth-child(4) { --span: 4; }
.bento[data-view="mosaic"] .bento-tile[data-trend]::before { content: "Tendance"; position: absolute; top: 22px; right: 22px; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.bento[data-view="mosaic"] .bento-tile { grid-column: span var(--span); grid-row: span var(--rows); padding: 1.3rem; color: #fff; background: var(--tile); border-radius: 24px; }
.bento[data-view="mosaic"] .bento-tile:hover, .bento[data-view="mosaic"] .bento-tile:focus-visible { transform: scale(1.015); }
.bento[data-view="mosaic"] .bento-ghost { display: block; position: absolute; right: -6%; top: 50%; z-index: -1; transform: translateY(-50%); color: #fff; opacity: .2; line-height: 0; pointer-events: none; }
.bento[data-view="mosaic"] .bento-ghost svg { width: clamp(120px, 15vw, 240px); height: auto; stroke-width: 1.3; }
.bento[data-view="mosaic"] .bento-icon { display: block; margin-bottom: auto; color: #fff; line-height: 0; }
.bento[data-view="mosaic"] .bento-icon svg { width: 32px; height: 32px; stroke-width: 1.7; }
.bento[data-view="mosaic"] .bento-name { font-size: 1.15rem; font-weight: 800; line-height: 1.15; }
.bento[data-view="mosaic"] .bento-desc { margin-top: .2rem; color: rgba(255, 255, 255, .88); font-size: .88rem; line-height: 1.35; max-width: 32em; }
.bento[data-view="mosaic"] .bento-tile.is-hero { padding: 1.3rem; }
.bento[data-view="mosaic"] .bento-tile.is-hero .bento-ghost { top: 40%; right: -10%; }
.bento[data-view="mosaic"] .bento-tile.is-hero .bento-ghost svg { width: clamp(200px, 26vw, 420px); }
.bento[data-view="mosaic"] .bento-tile.is-hero .bento-icon { display: block; }
.bento[data-view="mosaic"] .bento-tile.is-hero .bento-icon svg { width: 56px; height: 56px; }
.bento[data-view="mosaic"] .bento-tile.is-hero .bento-name { margin-top: auto; }
.bento[data-view="mosaic"] .bento-tile.is-hero .bento-name { font-size: 2.3rem; }
.bento[data-view="mosaic"] .bento-tile.is-hero .bento-desc { font-size: 1.05rem; max-width: 22rem; }
.bento[data-view="mosaic"] .bento-tile.has-bg { background-image: var(--bg); background-size: cover; background-position: right center; background-repeat: no-repeat; }
.bento[data-view="mosaic"] .bento-tile.has-bg .bento-icon, .bento[data-view="mosaic"] .bento-tile.has-bg .bento-name, .bento[data-view="mosaic"] .bento-tile.has-bg .bento-desc { text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.bento[data-view="mosaic"] .bento-tile.has-bg .bento-ghost { display: none; }
.bento[data-view="list"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.bento[data-view="list"] .bento-tile { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "icon name arrow" "icon desc arrow"; column-gap: 16px; row-gap: 2px; align-items: center; padding: 14px 18px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.bento[data-view="list"] .bento-tile::after { content: "→"; grid-area: arrow; color: var(--tile); font-size: 1.25rem; transition: transform .2s; }
.bento[data-view="list"] .bento-tile:hover, .bento[data-view="list"] .bento-tile:focus-visible { border-color: var(--tile); box-shadow: var(--shadow); }
.bento[data-view="list"] .bento-tile:hover::after { transform: translateX(4px); }
.bento[data-view="list"] .bento-icon { grid-area: icon; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--tile) 12%, #fff); color: var(--tile); }
.bento[data-view="list"] .bento-icon svg { width: 24px; height: 24px; }
.bento[data-view="list"] .bento-name { grid-area: name; font-size: 1.05rem; font-weight: 600; }
.bento[data-view="list"] .bento-desc { grid-area: desc; color: var(--muted); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bento[data-view="grid"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bento[data-view="grid"] .bento-tile { gap: 8px; min-height: 230px; padding: 22px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.bento[data-view="grid"] .bento-tile:hover, .bento[data-view="grid"] .bento-tile:focus-visible { transform: translateY(-3px); border-color: var(--tile); box-shadow: var(--shadow); }
.bento[data-view="grid"] .bento-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 14px; background: color-mix(in srgb, var(--tile) 12%, #fff); color: var(--tile); }
.bento[data-view="grid"] .bento-icon svg { width: 24px; height: 24px; }
.bento[data-view="grid"] .bento-name { font-size: 1.12rem; font-weight: 600; line-height: 1.2; }
.bento[data-view="grid"] .bento-desc { color: var(--muted); font-size: .95rem; line-height: 1.5; }
.bento[data-view="grid"] .bento-formats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.bento[data-view="grid"] .bento-formats span { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tile) 12%, #fff); color: var(--tile); font-size: .78rem; font-weight: 600; }
.bento[data-view="grid"] .bento-go { margin-top: 4px; color: var(--tile); font-size: .92rem; font-weight: 600; }
@media (max-width: 700px) {
    .bento[data-view="mosaic"] { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 210px; grid-auto-flow: row dense; }
    .bento[data-view="mosaic"] .bento-tile { grid-column: span var(--tspan); grid-row: span var(--trows); padding: 1.3rem; border-radius: 24px; }
    .bento[data-view="mosaic"] .bento-tile:nth-child(1) { --tspan: 4; --trows: 2; }
    .bento[data-view="mosaic"] .bento-tile:nth-child(2), .bento[data-view="mosaic"] .bento-tile:nth-child(3) { --tspan: 2; --trows: 1; }
    .bento[data-view="mosaic"] .bento-tile.is-hero { padding: 1.3rem; }
    .bento[data-view="mosaic"] .bento-tile.is-hero .bento-name { font-size: 1.8rem; }
    .bento[data-view="mosaic"] .bento-tile:not(.is-hero) .bento-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; }
    .bento[data-view="mosaic"] .bento-ghost svg { width: 130px; }
    .bento[data-view="mosaic"] .bento-tile.is-hero .bento-ghost svg { width: 260px; }
    .bento[data-view="mosaic"] .bento-tile[data-trend]::before { top: 16px; right: 16px; }
    .bento[data-view="list"] { grid-template-columns: minmax(0, 1fr); }
    .bento[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .view-bar { margin-top: -32px; }
    .bento[data-view="mosaic"] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
    .bento[data-view="mosaic"] .bento-tile { grid-column: 1 / -1; grid-row: auto; min-height: 180px; padding: 1.3rem; border-radius: 24px; }
    .bento[data-view="mosaic"] .bento-tile:not(.is-hero) .bento-desc { display: block; overflow: visible; font-size: .88rem; }
    .bento[data-view="mosaic"] .bento-ghost svg, .bento[data-view="mosaic"] .bento-tile.is-hero .bento-ghost svg { width: 150px; }
    .bento[data-view="mosaic"] .bento-tile.is-hero { min-height: 230px; }
    .bento[data-view="grid"] { grid-template-columns: minmax(0, 1fr); }
    .bento[data-view="grid"] .bento-tile { min-height: 0; }
}
.site-footer { padding: 2rem 0; background: transparent; }
.footer-line { margin: 0; color: var(--muted); font-size: .9rem; }
.footer-line a { color: inherit; }
.footer-line a:hover { color: var(--brand); }
.help-hero { padding: 72px 0 40px; background: var(--soft); border-bottom: 1px solid var(--line); text-align: center; }
.help-hero h1 { font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 700; }
.help-hero .lead { max-width: 36em; margin: 14px auto 0; color: var(--muted); font-size: 1.15rem; }
.help-search { position: relative; max-width: 560px; margin: 32px auto 0; }
.help-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.help-search input { width: 100%; padding: 16px 18px 16px 50px; font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); }
.help-search input:focus { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--brand); }
.help-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.help-topics a { display: inline-block; padding: 8px 16px; font-size: .95rem; font-weight: 500; color: var(--ink); text-decoration: none; background: var(--white); border: 1px solid var(--line); border-radius: 999px; transition: border-color .2s, color .2s, background .2s; }
.help-topics a:hover, .help-topics a:focus-visible { color: var(--brand); border-color: #b9c9f5; background: var(--brand-tint); }
.help-group { margin-bottom: 48px; scroll-margin-top: 90px; }
.help-group[hidden], .faq details[hidden] { display: none; }
.help-group h2 { margin-bottom: 18px; font-size: 1.5rem; font-weight: 700; }
.faq { border: 1px solid var(--line); border-radius: 16px; background: var(--white); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { position: relative; display: block; padding: 20px 56px 20px 24px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
.faq summary:hover { background: var(--soft); }
.faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.faq details p { padding: 0 24px 22px; color: var(--muted); line-height: 1.65; }
.help-empty { padding: 32px 0; text-align: center; color: var(--muted); }
.help-contact { margin-top: 16px; padding: 40px 28px; text-align: center; background: var(--brand-tint); border-radius: 20px; }
.help-contact h2 { font-size: 1.5rem; font-weight: 700; }
.help-contact p { margin-top: 8px; color: var(--muted); }
.help-contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
@media (max-width: 640px) {
    .help-hero { padding: 48px 0 28px; }
    .faq summary { padding: 18px 48px 18px 18px; }
    .faq summary::after { right: 18px; }
    .faq details p { padding: 0 18px 18px; }
}
@media (max-width: 700px) {
    .hero-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 700px) {
    .burger { display: flex; }
    .main-nav {
        position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 16px;
        background: var(--header-bg); border-bottom: 1px solid var(--header-line); padding: 16px clamp(1rem, 5vw, 4rem) 24px; display: none;
        max-height: calc(100vh - 80px); overflow-y: auto;
    }
    .main-nav.is-open { display: flex; }
    .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
    .main-nav > ul > li > a, .menu-toggle { padding: 10px 0; }
    .submenu { position: static; box-shadow: none; border: 0; padding: 0 0 0 12px; min-width: 0; }
    .header-actions { flex-direction: column; align-items: stretch; }
    .brand-name { font-size: 1.35rem; }
    .header-actions .btn-outline { text-align: center; }
}
@media (max-width: 700px) {
    .section { padding: 64px 0; }
    .panel-split, .codes { grid-template-columns: 1fr; }
    .scan-doc { max-width: 170px; margin-inline: auto; }
    .qr { max-width: 170px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .scan-line { animation: none; top: 45%; }
    * { transition: none !important; }
}
.legal { padding: 64px 0 96px; }
.legal-head { padding-bottom: 28px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.legal-head h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; }
.legal-head p { margin-top: 12px; color: var(--muted); font-size: .95rem; }
.legal h2 { font-size: 1.35rem; font-weight: 600; margin: 40px 0 12px; }
.legal p { margin-top: 12px; color: #2b3650; }
.legal ul { margin-top: 12px; padding-left: 0; }
.legal ul li { position: relative; padding-left: 22px; margin-top: 8px; color: #2b3650; }
.legal ul li::before { content: ''; position: absolute; left: 4px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.legal a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--brand-dark); }
.legal-table { margin-top: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.legal-table table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
.legal-table th, .legal-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-table th { background: var(--soft); font-weight: 600; }
.legal-table tr:last-child td { border-bottom: 0; }
html, body { max-width: 100%; overflow-x: clip; }
.container > * { min-width: 0; }
body:has(.auth) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--soft); }
body:has(.auth) > main { flex: 1; display: flex; flex-direction: column; }
body:has(.auth) .site-footer, body:has(.auth) footer { display: none; }
.auth { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; background: var(--soft); }
.auth > .container { margin-block: auto; }
.auth { --brand: #5b4bdb; --brand-dark: #4a3cc0; --brand-tint: #eeebfc; }
.auth-inner { display: flex; justify-content: center; align-items: center; }
.auth h1 { font-size: 1.75rem; letter-spacing: -.02em; }
.auth h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: 18px; }
.auth-sub { margin-top: 6px; color: var(--muted); font-size: .98rem; }
.auth-card { width: 100%; max-width: 440px; padding: 36px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.auth-card .auth-back { display: inline-block; margin-bottom: 18px; font-size: .9rem; color: var(--muted); text-decoration: none; }
.auth-card .auth-back:hover, .auth-card .auth-back:active { color: var(--brand); text-decoration: none; }
.auth-card > h1 + .auth-sub { margin-bottom: 24px; }
.auth-card .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.auth-card .btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.auth-card .btn-danger { background: #b42318; border-color: #b42318; color: #fff; }
.auth-card .btn-danger:hover { background: #912018; border-color: #912018; color: #fff; }
.auth-card form .btn-block { height: 44px; padding: 0 20px; }
.auth-card a { color: var(--brand); text-decoration: none; font-weight: 500; }
.auth-card a:hover { color: var(--brand-dark); }
.auth-note { margin: 0 0 24px; padding: 12px 14px; border-radius: 10px; background: var(--brand-tint); color: var(--ink); font-size: .93rem; line-height: 1.5; }
.field { display: grid; gap: 8px; margin-bottom: 16px; }
.field label { font-weight: 600; font-size: .93rem; }
.field input { width: 100%; height: 44px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.field input:hover { border-color: #c9d2e1; }
.field input:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.field small { color: var(--muted); font-size: .84rem; }
.check { display: flex; gap: 10px; align-items: center; margin: 0; font-size: .92rem; line-height: 1.45; color: var(--muted); cursor: pointer; }
.check input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--brand); cursor: pointer; }
.check.check-top { align-items: flex-start; }
.check.check-top input { margin-top: 2px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 24px; flex-wrap: wrap; }
.auth-row a { margin-left: auto; font-size: .92rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.auth-row a:hover { text-decoration: none; }
.auth-card form > .check { margin: 4px 0 24px; align-items: flex-start; }
.auth-card form > .check input { margin-top: 2px; }
.btn-block { width: 100%; justify-content: center; }
.auth-alt { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: .95rem; }
.auth-alt a { font-weight: 600; text-decoration: none; }
.auth-alt a:hover { text-decoration: none; }
.auth-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .8rem; margin: 20px 0 0; font-size: .82rem; color: var(--muted); }
.auth-card .auth-legal a { color: var(--muted); text-decoration: none; }
.auth-card .auth-legal a:hover { color: var(--brand); text-decoration: none; }
.btn-danger { background: #b42318; color: #fff; border: 1px solid #b42318; }
.btn-danger:hover { background: #912018; }
.alert { margin-bottom: 20px; padding: 12px 14px; border-radius: 10px; font-size: .95rem; }
.alert p + p { margin-top: 6px; }
.alert-error { background: #fef3f2; color: #912018; border: 1px solid #fecdca; }
.alert-success { background: #ecfdf3; color: #05603a; border: 1px solid #abefc6; }
.account .container { display: grid; gap: 28px; }
.account-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.account-title { margin: 0; font-size: 1.25rem; }
.account-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.account-tools a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; transition: border-color .15s; }
.account-tools a:hover { border-color: var(--brand); color: var(--brand); }
.account-tools .icon { color: var(--brand); flex: none; }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.account .auth-card { max-width: none; }
.auth-card.danger { border-color: #fecdca; }
.auth-card.danger p { margin-bottom: 16px; color: var(--muted); }
@media (max-width: 800px) {
    .account-grid { grid-template-columns: 1fr; }
    .auth-card { padding: 28px 22px; }
}
@media (min-width: 1920px) {
    :root { --container: 1760px; }
    html { font-size: 112.5%; }
}
@media (min-width: 2560px) {
    :root { --container: 2240px; }
    html { font-size: 150%; }
}
@media (min-width: 3200px) {
    :root { --container: 2960px; }
    html { font-size: 200%; }
}
.storage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.storage-head span { font-weight: 700; font-variant-numeric: tabular-nums; }
.storage-bar { border-radius: 999px; background: rgba(127,127,127,.2); overflow: hidden; }
.storage-bar i { display: block; height: 100%; border-radius: 999px; background: currentColor; opacity: .85; }
.storage-note { margin: 8px 0 0; opacity: .7; }
.dash-row { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: stretch; margin-top: 4rem; }
.dash-row > .dash-card { flex: 1 1 280px; min-width: 0; }
.dash-row > .dash-card:first-child { flex: 2 1 380px; }
.dash-card { display: flex; flex-direction: column; padding: 1.5rem; background: var(--white); border: 1.5px solid var(--line); border-radius: 14px; }
.dash-card h3 { margin: 0 0 1rem; font: 700 1.2rem/1.6 var(--font-head); letter-spacing: 0; color: var(--ink); }
.recent-list { --row: calc(1px + 1.4rem + 1.6rem); margin: 0; padding: 0; list-style: none; max-height: calc(var(--row) * 4); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.recent-list li { border-top: 1px solid var(--line); }
.recent-list a { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; color: var(--ink); text-decoration: none; }
.recent-list a:hover .recent-name { color: var(--brand); }
.recent-dot { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.recent-name { flex: 1; min-width: 0; font-size: 1rem; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-when { flex: none; font-size: smaller; color: var(--muted); }
.recent-empty { margin: 0; padding: .7rem 0; border-top: 1px solid var(--line); color: var(--muted); }
.dash-note { margin: auto 0 0; padding: 1em 0; font-size: .85rem; color: var(--muted); }
.dash-link { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--brand); font: inherit; text-decoration: underline; cursor: pointer; }
.dash-bar { height: 12px; margin-bottom: .8rem; border-radius: 99px; background: var(--line); overflow: hidden; }
.dash-bar i { display: block; height: 100%; border-radius: 99px; background: var(--brand); }
.dash-sub { margin: 0 0 1rem; font-size: 1rem; color: var(--muted); }
.type-bars { margin: 0 0 1.2rem; padding: 0; list-style: none; }
.type-bars li + li { margin-top: .8rem; }
.type-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; font-size: .9rem; }
.type-head span:last-child { color: var(--muted); }
.type-bars .dash-bar { margin-bottom: 0; }
.dash-card .btn { align-self: flex-start; }
.notes-demo { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); text-align: left; }
.notes-demo-list { display: grid; align-content: start; background: var(--soft); border-right: 1px solid var(--line); }
.notes-demo-item { display: grid; gap: 2px; border-radius: 8px; border: 1px solid transparent; min-width: 0; }
.notes-demo-item.is-active { background: var(--white); border-color: var(--line); box-shadow: 0 1px 2px rgba(15, 27, 51, .06); }
.notes-demo-item strong { font-size: .88rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-demo-item span { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-demo-item svg { vertical-align: -2px; margin-right: 4px; color: var(--brand); }
.notes-demo-edit { display: grid; align-content: start; min-width: 0; }
.notes-demo-edit h4 { margin: 0; font: 700 1.1rem/1.25 var(--font-head); color: var(--ink); }
.notes-demo-edit p { margin: 0; color: var(--muted); }
.notes-demo-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.bench-panel .calc { margin-inline: auto; display: grid; }
.bench-panel .calc-screen { position: relative; background: var(--ink); color: #fff; border-radius: 10px; text-align: right; display: grid; }
.bench-panel .calc-screen small { font-size: .88rem; opacity: .7; font-variant-numeric: tabular-nums; }
.bench-panel .calc-screen strong { font: 700 2rem/1.1 var(--font-head); font-variant-numeric: tabular-nums; }
.bench-panel .calc-mode { position: absolute; left: 14px; top: 12px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.16); }
.bench-panel .calc-keys { display: grid; grid-template-columns: repeat(5, 1fr); }
.bench-panel .calc-keys span { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); color: var(--ink); font: 600 .9rem/1 var(--font-body); }
.bench-panel .calc-keys .is-op { background: var(--brand-tint); color: var(--brand-dark); border-color: transparent; }
.bench-panel .calc-keys .is-eq { background: var(--brand); color: #fff; border-color: var(--brand); }
.announce-bar { position: relative; z-index: 51; background: var(--ink); color: #fff; font-size: .92rem; line-height: 1.45; }
.announce-bar .container { width: 100%; padding-inline: clamp(1rem, 5vw, 4rem); display: flex; align-items: center; justify-content: center; gap: 12px; padding-block: 9px; text-align: center; }
.announce-bar p { margin: 0; }
.announce-badge { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 560px) {
    .announce-bar { font-size: .85rem; }
    .announce-bar .container { flex-direction: column; gap: 6px; }
}
.bento-tile[data-app="forms"]  { --tile: #0f9d58; }
.bento-tile[data-app="projet"] { --tile: #d9480f; }
.bento-tile[data-app="mail"]   { --tile: #2563eb; }
.bonus-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
.bonus-head h3 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 700; }
.bonus-head p { margin: .3rem 0 0; color: var(--muted); font-size: .95rem; }
.bonus-nav { display: flex; gap: 8px; flex: none; }
.bonus-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); cursor: pointer; transition: border-color .15s, color .15s, opacity .15s; }
.bonus-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.bonus-btn:disabled { opacity: .35; cursor: default; }
.bonus-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 14px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.bonus-card { --tile: var(--brand); scroll-snap-align: start; display: flex; flex-direction: column; gap: .35rem; padding: 1.3rem; background: var(--white); border: 1px solid var(--line); border-radius: 20px; color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.bonus-card:hover, .bonus-card:focus-visible { transform: translateY(-3px); border-color: var(--tile); box-shadow: var(--shadow); }
.bonus-card[data-app="calculatrice"] { --tile: #4f46e5; }
.bonus-card[data-app="bloc-notes"]   { --tile: #0e7490; }
.bonus-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: .6rem; border-radius: 15px; background: color-mix(in srgb, var(--tile) 12%, #fff); color: var(--tile); }
.bonus-icon svg { width: 26px; height: 26px; }
.bonus-name { font: 700 1.15rem/1.2 var(--font-head); }
.bonus-desc { color: var(--muted); font-size: .92rem; line-height: 1.4; }
.bonus-go { margin-top: .6rem; color: var(--tile); font-weight: 600; font-size: .92rem; }
.app-rail { display: flex; height: 14px; margin: 0 0 1.5rem; border-radius: 999px; overflow: hidden; }
.app-rail i { flex: 1 1 0; background: var(--c, var(--brand)); }
.app-rail i[data-app="editeur-pdf"]         { --c: #e8466e; }
.app-rail i[data-app="reunions"],
.app-rail i[data-app="visioconference"]     { --c: #cf6f0a; }
.app-rail i[data-app="scanner-express"]     { --c: #139e89; }
.app-rail i[data-app="traitement-fichiers"] { --c: #3f7be4; }
.app-rail i[data-app="qr-codes-barres"]     { --c: #a04bd4; }
.app-rail i[data-app="forms"]               { --c: #0f9d58; }
.app-rail i[data-app="projet"]              { --c: #d9480f; }
.app-rail i[data-app="mail"]                { --c: #2563eb; }
.app-rail i[data-app="bloc-notes"]          { --c: #0e7490; }
.app-rail i[data-app="calculatrice"]        { --c: #4f46e5; }
.app-search { display: block; width: 100%; height: 54px; padding: 0 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: var(--white); color: var(--ink); font: 400 1rem/1.4 var(--font-body); -webkit-appearance: none; appearance: none; }
.app-search::placeholder { color: var(--muted); opacity: .75; }
.app-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.is-search-hidden { display: none !important; }
.apps-empty { margin: 1rem 0 0; color: var(--muted); }
.hero-rail { margin-top: 2.5rem; }
.hero-rail .app-rail { margin: 0; }
#bench { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
#bench > .bench-head { grid-row: 1; }
#bench > .bench-tabs { grid-row: 2; }
#bench > .bench-panel { grid-row: 3; grid-column: 1; }
#bench > .bench-panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.bench-panel { padding: 16px 20px; min-height: 230px; }
.bench-head { padding: 9px 16px; font-size: .84rem; }
.bench-tabs { padding: 6px; }
.bench-tab { padding: 7px 9px; font-size: .84rem; }
.panel-split { gap: 20px; }
.panel-list { gap: 8px; }
.panel-list.compact { margin-top: 10px; gap: 6px; }
.panel-list strong { font-size: .92rem; }
.panel-list span { font-size: .82rem; }
.panel-note { margin-top: 10px; font-size: .84rem; }
.scan-doc { padding: 12px; gap: 7px; }
.chips { gap: 6px; }
.chip { padding: 4px 10px; font-size: .8rem; }
.pdf-page { max-width: 280px; margin-top: 10px; padding: 14px; gap: 7px; }
.pdf-page em { margin-top: 6px; padding-top: 8px; font-size: 1rem; }
.jobs { gap: 10px; }
.jobs li { gap: 5px 12px; }
.job-name { font-size: .88rem; }
.job-to { font-size: .74rem; padding: 2px 8px; }
.bar { height: 6px; }
@media (min-width: 701px) {
    .panel-split { grid-template-columns: 130px minmax(0, 1fr); }
    .codes { grid-template-columns: 130px minmax(0, 1fr); }
}
.qr { padding: 8px; }
.barcode { height: 44px; }
.barcode-num { margin-top: 5px; font-size: .78rem; }
.visio-top { margin-bottom: 8px; font-size: .88rem; }
.visio-grid { gap: 6px; }
.visio-cell { aspect-ratio: 3.4 / 1; border-radius: 8px; }
.visio-cell b { width: 34px; height: 34px; font-size: .78rem; }
.visio-cell span { left: 8px; bottom: 5px; font-size: .72rem; }
.visio-bar { margin-top: 8px; gap: 8px; }
.visio-btn { width: 32px; height: 32px; }
.visio-btn svg { width: 15px; height: 15px; }
.storage { padding: 0 0 8px; }
.storage-head { margin-bottom: 5px; font-size: .88rem; }
.storage-bar { height: 9px; }
.storage-note { margin-top: 5px; font-size: .8rem; }
.notes-demo-list { padding: 6px; gap: 3px; }
.notes-demo-item { padding: 6px 8px; }
.notes-demo-edit { padding: 10px 12px; gap: 6px; }
.notes-demo-edit h4 { font-size: 1rem; }
.notes-demo-edit p { font-size: .82rem; line-height: 1.45; }
.bench-panel .calc { max-width: 360px; gap: 8px; }
.bench-panel .calc-screen { padding: 10px 14px 8px; gap: 2px; }
.bench-panel .calc-screen strong { font-size: 1.6rem; }
.bench-panel .calc-keys { gap: 5px; }
.bench-panel .calc-keys span { height: 30px; font-size: .84rem; }
.fd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); text-align: left; }
.fd-form { display: grid; gap: 6px; align-content: start; padding: 10px 14px; border-top: 4px solid #0f9d58; border-right: 1px solid var(--line); }
.fd-form h4 { margin: 0 0 2px; font: 700 .95rem/1.2 var(--font-head); }
.fd-q { font-size: .8rem; font-weight: 600; }
.fd-opt { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--muted); }
.fd-opt::before { content: ''; flex: none; width: 12px; height: 12px; border: 2px solid #a6aebd; border-radius: 50%; }
.fd-opt.is-on { color: var(--ink); }
.fd-opt.is-on::before { border-color: #0f9d58; background: radial-gradient(#0f9d58 42%, transparent 48%); }
.fd-rate { display: flex; gap: 5px; margin-top: 2px; }
.fd-rate span { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--line); border-radius: 7px; font: 700 .74rem/1 var(--font-head); color: var(--muted); }
.fd-rate .is-on { background: #0f9d58; border-color: #0f9d58; color: #fff; }
.fd-res { display: grid; gap: 7px; align-content: start; padding: 10px 14px; background: var(--soft); }
.fd-res-h { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--muted); }
.fd-res-h strong { color: var(--ink); font: 700 .95rem/1.2 var(--font-head); }
.fd-bar { display: grid; grid-template-columns: 82px minmax(0, 1fr) 34px; gap: 8px; align-items: center; font-size: .76rem; color: var(--muted); }
.fd-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-bar i { position: relative; display: block; height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }
.fd-bar b { position: absolute; inset: 0 auto 0 0; width: var(--w); background: #0f9d58; border-radius: 99px; }
.fd-bar em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.gd { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); text-align: left; }
.gd-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.gd-kpis div { padding: 7px 12px; background: var(--white); }
.gd-kpis b { display: block; font: 700 .98rem/1.15 var(--font-head); }
.gd-kpis span { font-size: .72rem; color: var(--muted); }
.gd-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; height: 26px; border-bottom: 1px solid var(--line); font-size: .76rem; }
.gd-row:last-child { border-bottom: 0; }
.gd-row > span { padding: 0 10px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-track { position: relative; height: 100%; border-left: 1px solid var(--line); background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), var(--line) calc(12.5% - 1px) 12.5%); }
.gd-bar { position: absolute; top: 7px; left: var(--l); width: var(--w); height: 12px; display: block; border-radius: 4px; background: #9db6f2; overflow: hidden; }
.gd-bar i { display: block; width: var(--p); height: 100%; background: var(--brand); }
.gd-bar.crit { background: #f1a3b0; }
.gd-bar.crit i { background: #d9314f; }
.gd-ms { position: absolute; top: 8px; left: var(--l); display: block; width: 10px; height: 10px; border-radius: 2px; background: var(--ink); transform: rotate(45deg); }
@media (max-width: 700px) {
    .fd { grid-template-columns: 1fr; }
    .fd-form { border-right: 0; border-bottom: 1px solid var(--line); }
    .gd-row { grid-template-columns: 88px minmax(0, 1fr); }
}
@media (min-width: 701px) {
    .bench-panel { min-height: 340px; display: flex; flex-direction: column; }
    .bench-panel > .panel-note { margin-top: auto; padding-top: 10px; }
    .bench-panel > .panel-split { flex: 1; align-items: stretch; gap: 28px; grid-template-columns: clamp(140px, 24%, 190px) minmax(0, 1fr); }
    .scan-doc { aspect-ratio: auto; align-content: space-between; padding: 18px 16px; }
    .panel-list { align-content: center; gap: 18px; }
    .panel-list strong { font-size: 1.02rem; }
    .panel-list span { font-size: .9rem; }
    .bench-panel > .panel-split.codes { grid-template-columns: clamp(150px, 36%, 240px) minmax(0, 1fr); }
    .codes .qr { align-self: center; }
    .codes-side { display: flex; flex-direction: column; justify-content: center; }
    .codes .barcode { height: 64px; }
    .codes .panel-list.compact { margin-top: 16px; gap: 10px; }
    .chips { justify-content: center; gap: 8px; }
    .chip { padding: 6px 14px; font-size: .88rem; }
    .pdf-page { flex: 1; width: 100%; max-width: 460px; margin: 14px auto 0; padding: 20px; align-content: space-between; }
    .jobs { flex: 1; align-content: space-evenly; gap: 10px; }
    .job-name { font-size: .95rem; }
    .job-to { font-size: .8rem; }
    .bar { height: 8px; }
    .storage { padding-bottom: 4px; }
    .storage-head { font-size: .95rem; }
    .storage-bar { height: 11px; }
    .visio { flex: 1; display: flex; flex-direction: column; }
    .visio-top { margin-bottom: 10px; font-size: .92rem; }
    .visio-grid { flex: 1; grid-auto-rows: 1fr; gap: 10px; }
    .visio-cell { aspect-ratio: auto; min-height: 56px; border-radius: 10px; }
    .visio-cell b { width: 44px; height: 44px; font-size: .85rem; }
    .visio-cell span { left: 10px; bottom: 7px; font-size: .78rem; }
    .visio-bar { margin-top: 10px; gap: 10px; }
    .visio-btn { width: 36px; height: 36px; }
    .visio-btn svg { width: 16px; height: 16px; }
    .notes-demo { flex: 1; }
    .notes-demo-list { grid-auto-rows: 1fr; align-content: stretch; padding: 10px; gap: 6px; }
    .notes-demo-item { align-content: center; padding: 8px 12px; }
    .notes-demo-edit { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
    .notes-demo-edit h4 { font-size: 1.15rem; }
    .notes-demo-edit p { font-size: .95rem; line-height: 1.7; }
    .notes-demo-foot { margin-top: auto; }
    .bench-panel .calc { flex: 1; width: 100%; max-width: 520px; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
    .bench-panel .calc-screen { padding: 14px 18px 12px; }
    .bench-panel .calc-screen strong { font-size: 2rem; }
    .bench-panel .calc-keys { grid-auto-rows: 1fr; gap: 8px; }
    .bench-panel .calc-keys span { height: auto; min-height: 32px; font-size: .95rem; }
    .fd { flex: 1; }
    .fd-form { align-content: space-evenly; gap: 8px; padding: 14px 18px; }
    .fd-form h4 { font-size: 1.05rem; }
    .fd-q, .fd-opt { font-size: .88rem; }
    .fd-rate span { width: 30px; height: 30px; }
    .fd-res { align-content: space-evenly; padding: 14px 18px; }
    .fd-bar { grid-template-columns: 96px minmax(0, 1fr) 38px; font-size: .82rem; }
    .fd-bar i { height: 9px; }
    .gd { flex: 1; display: flex; flex-direction: column; }
    .gd-kpis div { padding: 12px 16px; }
    .gd-kpis b { font-size: 1.2rem; }
    .gd-rows { flex: 1; display: grid; grid-auto-rows: 1fr; }
    .gd-row { height: auto; min-height: 30px; grid-template-columns: 130px minmax(0, 1fr); font-size: .84rem; }
    .gd-bar { top: 50%; height: 16px; transform: translateY(-50%); }
    .gd-ms { top: calc(50% - 6px); width: 12px; height: 12px; }
}
.bench-tabs, .recent-list, .bonus-track { scrollbar-width: none; -ms-overflow-style: none; }
.bench-tabs::-webkit-scrollbar, .recent-list::-webkit-scrollbar, .bonus-track::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Racine 16px sur tous les écrans (comme sublimeworkshop) : plus de réduction en tablette */

@media (min-width: 701px) and (max-width: 1180px) {
    .site-header .container, .site-footer .container, .hero .container, #applications .container, .help-hero .container, .help-content .container, .legal .container { width: 100%; padding-inline: clamp(1rem, 5vw, 4rem); }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: .6rem 1.2rem; border-radius: 0.625rem; border: 0; font: 500 1rem/1.6 var(--font-body); cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
    .btn-lg { padding: 0.875rem 1.5rem; font-size: 1rem; }
    .btn-primary { background: var(--brand); color: #fff; }
    .btn-primary:hover { background: var(--brand-dark); }
    .btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
    .btn-outline:hover { border-color: var(--brand); color: var(--brand); }
    .btn-ghost { color: var(--ink); }
    .btn-ghost:hover { color: var(--brand); }
    .btn-light { background: #fff; color: var(--brand-dark); }
    .btn-light:hover { background: var(--brand-tint); }
    .btn-ghost-light { color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); }
    .btn-ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
    .site-header { --header-bg: #f3f1f8; --header-line: #dcd8ea; position: relative; z-index: 50; background: transparent; }
    .site-header.is-scrolled { border-color: transparent; box-shadow: none; }
    .header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 1.25rem; gap: 1rem; }
    .brand { display: inline-flex; align-items: center; gap: 1rem; }
    .brand-name { font: 700 1.6rem/1.2 var(--font-head); letter-spacing: -.02em; }
    .main-nav { display: flex; align-items: center; margin-left: auto; }
    .main-nav > ul { display: flex; align-items: center; }
    .main-nav > ul > li > a, .menu-toggle { display: inline-flex; align-items: center; padding: 0; border-radius: 0; background: none; border: 0; font: 500 1.1rem/1.6 var(--font-body); color: var(--ink); cursor: pointer; }
    .main-nav > ul > li > a:hover, .menu-toggle:hover { color: var(--brand); }
    .menu-toggle svg { transition: transform .2s; }
    .menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
    .has-menu { position: relative; }
    .submenu { position: absolute; top: calc(100% + 0.5rem); left: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.5rem; display: none; }
    .has-menu.is-open .submenu { display: block; }
    .submenu a { display: flex; align-items: center; border-radius: 0.5rem; font-weight: 500; }
    .submenu a:hover { background: var(--brand-tint); color: var(--brand-dark); }
    .submenu .icon { color: var(--brand); }
    #applications, #recents, #fichiers { scroll-margin-top: 5.5rem; }
    .header-actions { display: flex; align-items: center; gap: 1.5rem; }
    .header-actions .btn-outline { border: 1px solid var(--brand); }
    .header-actions .btn-outline:hover { background: var(--brand-tint); border-color: var(--brand-dark); color: var(--brand-dark); }
    .burger { display: none; width: 2.75rem; height: 2.75rem; background: none; border: 1px solid var(--line); border-radius: 0.625rem; cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 0.3125rem; }
    .burger span { width: 1.25rem; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
    .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
    .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }
    .hero { padding: clamp(2rem, 7vw, 5.5rem) 0 2rem; }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
    .hero h1 { font-size: clamp(2.4rem, 7vw, 5rem); line-height: 1.02; font-weight: 800; letter-spacing: -.03em; margin: 0 0 1.2rem; }
    .lead { margin: 0 0 2rem; font-size: 1.15rem; color: var(--muted); max-width: 38rem; }
    .hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
    .hero-points { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 2rem; color: var(--muted); font-size: .95rem; }
    .hero-points li { display: flex; align-items: center; gap: 0.5rem; }
    .hero-points li::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ok); }
    .bench { background: var(--white); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow); overflow: hidden; }
    .bench-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); background: var(--soft); }
    .bench-title { font-weight: 600; }
    .bench-status { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); }
    .bench-status i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ok); }
    .bench-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
    .bench-tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; border: 0; border-radius: 0.5rem; background: none; color: var(--muted); font: 500 .88rem/1 var(--font-body); cursor: pointer; white-space: nowrap; }
    .bench-tab:hover { background: var(--soft); color: var(--ink); }
    .bench-tab[aria-selected="true"] { background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; }
    .bench-panel[hidden] { display: none; }
    .panel-split { display: grid; align-items: center; }
    .panel-list { display: grid; }
    .panel-list li { display: grid; padding-left: 0.875rem; border-left: 3px solid var(--brand); }
    .panel-list span { color: var(--muted); }
    .panel-note { color: var(--muted); }
    .scan-doc, .pdf-page { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 0.375rem; padding: 1.125rem 1rem; display: grid; gap: 0.5625rem; align-content: start; overflow: hidden; box-shadow: 0 0.5rem 1.125rem -0.625rem rgba(15, 27, 51, .25); }
    .scan-doc { transform: rotate(-2deg); }
    .scan-doc b, .pdf-page b { height: 0.625rem; width: 55%; background: var(--ink); border-radius: 3px; }
    .scan-doc s, .pdf-page s { height: 0.375rem; background: var(--line); border-radius: 3px; text-decoration: none; }
    .scan-doc s.short, .pdf-page s.short { width: 62%; }
    .pdf-page s.mark { background: #ffe58a; }
    .pdf-page em { font: italic 600 1.15rem/1 var(--font-head); color: var(--brand); border-top: 1px dashed var(--line); }
    .scan-line { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand); box-shadow: 0 0 0.875rem 3px rgba(29, 78, 216, .45); animation: scan 2.8s ease-in-out infinite; }
    .chips { display: flex; flex-wrap: wrap; }
    .chip { border: 1px solid var(--line); border-radius: 62.4375rem; color: var(--muted); }
    .chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
    .jobs { display: grid; }
    .jobs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .job-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .job-to { font-weight: 600; color: var(--brand-dark); background: var(--brand-tint); border-radius: 0.375rem; }
    .bar { grid-column: 1 / -1; background: var(--soft); border-radius: 62.4375rem; overflow: hidden; }
    .bar i { display: block; height: 100%; background: var(--brand); border-radius: 62.4375rem; }
    .qr { display: grid; grid-template-columns: repeat(13, 1fr); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 0.5rem; background: #fff; }
    .qr i.on { background: var(--ink); }
    .barcode { background: repeating-linear-gradient(90deg, var(--ink) 0 2px, #fff 2px 4px, var(--ink) 4px 0.3125rem, #fff 0.3125rem 0.5rem, var(--ink) 0.5rem 0.6875rem, #fff 0.6875rem 0.8125rem, var(--ink) 0.8125rem 0.875rem, #fff 0.875rem 1.0625rem); border-radius: 3px; }
    .barcode-num { display: block; letter-spacing: .2em; color: var(--muted); }
    .visio-top { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
    .visio-live { display: inline-flex; align-items: center; gap: 0.5rem; font-size: .85rem; color: var(--muted); }
    .visio-live i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #e0342f; }
    .visio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .visio-cell { position: relative; display: grid; place-items: center; background: var(--soft); border: 2px solid transparent; }
    .visio-cell b { display: grid; place-items: center; border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark); font: 700 .9rem/1 var(--font-head); }
    .visio-cell span { position: absolute; color: var(--muted); }
    .visio-cell.is-speaking { border-color: var(--ok); }
    .visio-bar { display: flex; justify-content: center; }
    .visio-btn { display: grid; place-items: center; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); color: var(--ink); }
    .visio-btn.is-end { background: #e0342f; border-color: #e0342f; color: #fff; }
    .section { padding: 6rem 0; }
    .section-soft { background: var(--soft); }
    .section-head { max-width: 40em; margin-bottom: 3rem; }
    .section-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 700; }
    .section-head p { margin-top: 0.875rem; color: var(--muted); font-size: 1.12rem; }
    .view-bar { display: flex; align-items: center; gap: 0.75rem; margin: -1.5rem 0 1.5rem; }
    .view-switch { display: flex; flex: none; margin-left: auto; }
    .cat-chips { display: flex; flex-wrap: nowrap; gap: 0.5rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .cat-chips::-webkit-scrollbar { display: none; }
    .cat-chip { padding: .4rem 1rem; flex: none; white-space: nowrap; border: 1.5px solid var(--line); border-radius: 6.1875rem; background: transparent; color: var(--ink); font: 400 1rem/1.6 var(--font-body); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
    .cat-chip:hover { color: var(--ink); border-color: var(--ink); }
    .cat-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
    .cat-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .view-note { margin: 0 0 1rem; color: var(--muted); font-size: .92rem; }
    .view-note[hidden] { display: none; }
    .view-switch-inner { display: inline-flex; gap: 2px; padding: 4px; background: var(--soft); border: 1px solid var(--line); border-radius: 0.75rem; }
    .view-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.25rem; padding: 0; border: 0; border-radius: 0.5625rem; background: transparent; color: var(--muted); font: 600 .9rem/1 var(--font-body); cursor: pointer; transition: background .15s, color .15s; }
    .view-btn span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .view-btn:hover { color: var(--ink); }
    .view-btn[aria-pressed="true"] { background: var(--white); color: var(--brand); box-shadow: 0 1px 2px rgba(15, 27, 51, .14); }
    .view-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .bento { display: grid; gap: 0.75rem; }
    .bento-tile { --tile: var(--brand); --span: 4; --rows: 1; --tspan: 3; --trows: 1; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, filter .2s, border-color .2s, background .2s; }
    .bento-tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
    .bento-tile::after { content: none; }
    .bento-ghost { display: none; }
    .bento-name { font-family: var(--font-head); letter-spacing: 0; }
    .bento-tile[data-app="editeur-pdf"] { --tile: #e8466e; }
    .bento-tile[data-app="reunions"] { --tile: #cf6f0a; }
    .bento-tile[data-app="scanner-express"] { --tile: #139e89; }
    .bento-tile[data-app="traitement-fichiers"] { --tile: #3f7be4; }
    .bento-tile[data-app="qr-codes-barres"] { --tile: #a04bd4; }
    .bento-tile[data-app="bloc-notes"] { --tile: #0e7490; }
    .bento-tile[data-app="calculatrice"] { --tile: #4f46e5; }
    .bento-tile[hidden] { display: none !important; }
    .bento:not([data-view="grid"]) .bento-formats, .bento:not([data-view="grid"]) .bento-go { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .bento[data-view="mosaic"] { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 15.625rem; grid-auto-flow: row dense; }
    .bento[data-view="mosaic"] .bento-tile:nth-child(1) { --span: 5; --rows: 2; }
    .bento[data-view="mosaic"] .bento-tile:nth-child(2) { --span: 7; }
    .bento[data-view="mosaic"] .bento-tile:nth-child(3) { --span: 3; }
    .bento[data-view="mosaic"] .bento-tile:nth-child(4) { --span: 4; }
    .bento[data-view="mosaic"] .bento-tile[data-trend]::before { content: "Tendance"; position: absolute; top: 1.375rem; right: 1.375rem; padding: 4px 0.6875rem; border-radius: 62.4375rem; background: rgba(255, 255, 255, .22); font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
    .bento[data-view="mosaic"] .bento-tile { grid-column: span var(--span); grid-row: span var(--rows); padding: 1.3rem; color: #fff; background: var(--tile); border-radius: 1.5rem; }
    .bento[data-view="mosaic"] .bento-tile:hover, .bento[data-view="mosaic"] .bento-tile:focus-visible { transform: scale(1.015); }
    .bento[data-view="mosaic"] .bento-ghost { display: block; position: absolute; right: 1.3rem; top: 1.3rem; z-index: -1; color: #fff; opacity: .2; line-height: 0; pointer-events: none; }
    .bento[data-view="mosaic"] .bento-ghost svg { width: clamp(5rem, 9vw, 7rem); height: auto; stroke-width: 1.3; }
    .bento[data-view="mosaic"] .bento-icon { display: block; margin-bottom: auto; color: #fff; line-height: 0; }
    .bento[data-view="mosaic"] .bento-icon svg { width: 2rem; height: 2rem; stroke-width: 1.7; }
    .bento[data-view="mosaic"] .bento-name { font-size: 1.15rem; font-weight: 800; line-height: 1.15; }
    .bento[data-view="mosaic"] .bento-desc { margin-top: .2rem; color: rgba(255, 255, 255, .88); font-size: .88rem; line-height: 1.35; max-width: 32em; }
    .bento[data-view="mosaic"] .bento-tile.is-hero { padding: 1.3rem; }
    .bento[data-view="mosaic"] .bento-tile.is-hero .bento-ghost { top: 1.3rem; right: 1.3rem; }
    .bento[data-view="mosaic"] .bento-tile.is-hero .bento-ghost svg { width: clamp(8rem, 16vw, 14rem); }
    .bento[data-view="mosaic"] .bento-tile.is-hero .bento-icon { display: block; }
    .bento[data-view="mosaic"] .bento-tile.is-hero .bento-icon svg { width: 3.5rem; height: 3.5rem; }
    .bento[data-view="mosaic"] .bento-tile.is-hero .bento-name { margin-top: auto; }
    .bento[data-view="mosaic"] .bento-tile.is-hero .bento-name { font-size: 2.3rem; }
    .bento[data-view="mosaic"] .bento-tile.is-hero .bento-desc { font-size: 1.05rem; max-width: 22rem; }
    .bento[data-view="mosaic"] .bento-tile.has-bg { background-image: var(--bg); background-size: cover; background-position: right center; background-repeat: no-repeat; }
    .bento[data-view="mosaic"] .bento-tile.has-bg .bento-icon, .bento[data-view="mosaic"] .bento-tile.has-bg .bento-name, .bento[data-view="mosaic"] .bento-tile.has-bg .bento-desc { text-shadow: 0 1px 0.375rem rgba(0, 0, 0, .55); }
    .bento[data-view="mosaic"] .bento-tile.has-bg .bento-ghost { display: none; }
    .bento[data-view="list"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; }
    .bento[data-view="list"] .bento-tile { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "icon name arrow" "icon desc arrow"; column-gap: 1rem; row-gap: 2px; align-items: center; padding: 0.875rem 1.125rem; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 0.875rem; }
    .bento[data-view="list"] .bento-tile::after { content: "→"; grid-area: arrow; color: var(--tile); font-size: 1.25rem; transition: transform .2s; }
    .bento[data-view="list"] .bento-tile:hover, .bento[data-view="list"] .bento-tile:focus-visible { border-color: var(--tile); box-shadow: var(--shadow); }
    .bento[data-view="list"] .bento-tile:hover::after { transform: translateX(4px); }
    .bento[data-view="list"] .bento-icon { grid-area: icon; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0.875rem; background: color-mix(in srgb, var(--tile) 12%, #fff); color: var(--tile); }
    .bento[data-view="list"] .bento-icon svg { width: 1.5rem; height: 1.5rem; }
    .bento[data-view="list"] .bento-name { grid-area: name; font-size: 1.05rem; font-weight: 600; }
    .bento[data-view="list"] .bento-desc { grid-area: desc; color: var(--muted); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bento[data-view="grid"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bento[data-view="grid"] .bento-tile { gap: 0.5rem; min-height: 14.375rem; padding: 1.375rem; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 1rem; }
    .bento[data-view="grid"] .bento-tile:hover, .bento[data-view="grid"] .bento-tile:focus-visible { transform: translateY(-3px); border-color: var(--tile); box-shadow: var(--shadow); }
    .bento[data-view="grid"] .bento-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 0.375rem; border-radius: 0.875rem; background: color-mix(in srgb, var(--tile) 12%, #fff); color: var(--tile); }
    .bento[data-view="grid"] .bento-icon svg { width: 1.5rem; height: 1.5rem; }
    .bento[data-view="grid"] .bento-name { font-size: 1.12rem; font-weight: 600; line-height: 1.2; }
    .bento[data-view="grid"] .bento-desc { color: var(--muted); font-size: .95rem; line-height: 1.5; }
    .bento[data-view="grid"] .bento-formats { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: auto; padding-top: 0.5rem; }
    .bento[data-view="grid"] .bento-formats span { padding: 3px 0.625rem; border-radius: 62.4375rem; background: color-mix(in srgb, var(--tile) 12%, #fff); color: var(--tile); font-size: .78rem; font-weight: 600; }
    .bento[data-view="grid"] .bento-go { margin-top: 4px; color: var(--tile); font-size: .92rem; font-weight: 600; }
    .site-footer { padding: 2rem 0; background: transparent; }
    .footer-line { margin: 0; color: var(--muted); font-size: .9rem; }
    .footer-line a { color: inherit; }
    .footer-line a:hover { color: var(--brand); }
}
@media (min-width: 701px) and (max-width: 1020px) {
    .header-inner { gap: .75rem; }
    .brand-name { font-size: 1.3rem; }
    .main-nav { gap: 1rem; }
    .main-nav > ul { gap: 1rem; }
    .main-nav > ul > li > a, .menu-toggle { font-size: .95rem; white-space: nowrap; }
    .header-actions .btn-outline { padding: .6rem 1rem; font-size: .95rem; border-radius: 0.75rem; }
}
@media (min-width: 701px) and (max-width: 1180px) {
    .btn-block { width: 100%; justify-content: center; }
    .btn-danger { background: #b42318; color: #fff; border: 1px solid #b42318; }
    .btn-danger:hover { background: #912018; }
    .storage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
    .storage-head span { font-weight: 700; font-variant-numeric: tabular-nums; }
    .storage-bar { border-radius: 62.4375rem; background: rgba(127,127,127,.2); overflow: hidden; }
    .storage-bar i { display: block; height: 100%; border-radius: 62.4375rem; background: currentColor; opacity: .85; }
    .storage-note { margin: 0.5rem 0 0; opacity: .7; }
    .dash-row { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: stretch; margin-top: 4rem; }
    .dash-row > .dash-card { flex: 1 1 17.5rem; min-width: 0; }
    .dash-row > .dash-card:first-child { flex: 2 1 23.75rem; }
    .dash-card { display: flex; flex-direction: column; padding: 1.5rem; background: var(--white); border: 1.5px solid var(--line); border-radius: 0.875rem; }
    .dash-card h3 { margin: 0 0 1rem; font: 700 1.2rem/1.6 var(--font-head); letter-spacing: 0; color: var(--ink); }
    .recent-list { --row: calc(1px + 1.4rem + 1.6rem); margin: 0; padding: 0; list-style: none; max-height: calc(var(--row) * 4); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
    .recent-list li { border-top: 1px solid var(--line); }
    .recent-list a { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; color: var(--ink); text-decoration: none; }
    .recent-list a:hover .recent-name { color: var(--brand); }
    .recent-dot { flex: none; width: 0.75rem; height: 0.75rem; border-radius: 3px; }
    .recent-name { flex: 1; min-width: 0; font-size: 1rem; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .recent-when { flex: none; font-size: smaller; color: var(--muted); }
    .recent-empty { margin: 0; padding: .7rem 0; border-top: 1px solid var(--line); color: var(--muted); }
    .dash-note { margin: auto 0 0; padding: 1em 0; font-size: .85rem; color: var(--muted); }
    .dash-link { margin-left: 0.375rem; padding: 0; border: 0; background: none; color: var(--brand); font: inherit; text-decoration: underline; cursor: pointer; }
    .dash-bar { height: 0.75rem; margin-bottom: .8rem; border-radius: 6.1875rem; background: var(--line); overflow: hidden; }
    .dash-bar i { display: block; height: 100%; border-radius: 6.1875rem; background: var(--brand); }
    .dash-sub { margin: 0 0 1rem; font-size: 1rem; color: var(--muted); }
    .type-bars { margin: 0 0 1.2rem; padding: 0; list-style: none; }
    .type-bars li + li { margin-top: .8rem; }
    .type-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; font-size: .9rem; }
    .type-head span:last-child { color: var(--muted); }
    .type-bars .dash-bar { margin-bottom: 0; }
    .dash-card .btn { align-self: flex-start; }
    .notes-demo { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 0.75rem; overflow: hidden; background: var(--white); text-align: left; }
    .notes-demo-list { display: grid; background: var(--soft); border-right: 1px solid var(--line); }
    .notes-demo-item { display: grid; gap: 2px; border-radius: 0.5rem; border: 1px solid transparent; min-width: 0; }
    .notes-demo-item.is-active { background: var(--white); border-color: var(--line); box-shadow: 0 1px 2px rgba(15, 27, 51, .06); }
    .notes-demo-item strong { font-size: .88rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .notes-demo-item span { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .notes-demo-item svg { vertical-align: -2px; margin-right: 4px; color: var(--brand); }
    .notes-demo-edit { align-content: start; min-width: 0; }
    .notes-demo-edit h4 { margin: 0; font: 700 1.1rem/1.25 var(--font-head); color: var(--ink); }
    .notes-demo-edit p { margin: 0; color: var(--muted); }
    .notes-demo-foot { display: flex; justify-content: space-between; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
    .bench-panel .calc { margin-inline: auto; display: grid; }
    .bench-panel .calc-screen { position: relative; background: var(--ink); color: #fff; border-radius: 0.625rem; text-align: right; display: grid; }
    .bench-panel .calc-screen small { font-size: .88rem; opacity: .7; font-variant-numeric: tabular-nums; }
    .bench-panel .calc-screen strong { font: 700 2rem/1.1 var(--font-head); font-variant-numeric: tabular-nums; }
    .bench-panel .calc-mode { position: absolute; left: 0.875rem; top: 0.75rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; padding: 2px 0.5rem; border-radius: 0.375rem; background: rgba(255,255,255,.16); }
    .bench-panel .calc-keys { display: grid; grid-template-columns: repeat(5, 1fr); }
    .bench-panel .calc-keys span { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--soft); color: var(--ink); font: 600 .9rem/1 var(--font-body); }
    .bench-panel .calc-keys .is-op { background: var(--brand-tint); color: var(--brand-dark); border-color: transparent; }
    .bench-panel .calc-keys .is-eq { background: var(--brand); color: #fff; border-color: var(--brand); }
    .announce-bar { position: relative; z-index: 51; background: var(--ink); color: #fff; line-height: 1.45; }
    .announce-bar .container { width: 100%; padding-inline: clamp(1rem, 5vw, 4rem); display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding-block: 0.5625rem; text-align: center; }
    .announce-bar p { margin: 0; }
    .announce-badge { flex: none; border-radius: 62.4375rem; background: var(--brand); color: #fff; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
    .bento-tile[data-app="forms"] { --tile: #0f9d58; }
    .bento-tile[data-app="projet"] { --tile: #d9480f; }
    .bonus { margin-top: 3rem; }
    .bonus-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
    .bonus-head h3 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 700; }
    .bonus-head p { margin: .3rem 0 0; color: var(--muted); font-size: .95rem; }
    .bonus-nav { display: flex; gap: 0.5rem; flex: none; }
    .bonus-btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1.5px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); cursor: pointer; transition: border-color .15s, color .15s, opacity .15s; }
    .bonus-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
    .bonus-btn:disabled { opacity: .35; cursor: default; }
    .bonus-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 0.875rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
    .bonus-card { --tile: var(--brand); flex: 0 0 clamp(15rem, 28%, 21.25rem); scroll-snap-align: start; display: flex; flex-direction: column; gap: .35rem; padding: 1.3rem; background: var(--white); border: 1px solid var(--line); border-radius: 1.25rem; color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
    .bonus-card:hover, .bonus-card:focus-visible { transform: translateY(-3px); border-color: var(--tile); box-shadow: var(--shadow); }
    .bonus-card[data-app="calculatrice"] { --tile: #4f46e5; }
    .bonus-card[data-app="bloc-notes"] { --tile: #0e7490; }
    .bonus-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: .6rem; border-radius: 0.9375rem; background: color-mix(in srgb, var(--tile) 12%, #fff); color: var(--tile); }
    .bonus-icon svg { width: 1.625rem; height: 1.625rem; }
    .bonus-name { font: 700 1.15rem/1.2 var(--font-head); }
    .bonus-desc { color: var(--muted); font-size: .92rem; line-height: 1.4; }
    .bonus-go { margin-top: .6rem; color: var(--tile); font-weight: 600; font-size: .92rem; }
    .app-rail { display: flex; height: 0.875rem; margin: 0 0 1.5rem; border-radius: 62.4375rem; overflow: hidden; }
    .app-rail i { flex: 1 1 0; background: var(--c, var(--brand)); }
    .app-rail i[data-app="editeur-pdf"] { --c: #e8466e; }
    .app-rail i[data-app="reunions"], .app-rail i[data-app="visioconference"] { --c: #cf6f0a; }
    .app-rail i[data-app="scanner-express"] { --c: #139e89; }
    .app-rail i[data-app="traitement-fichiers"] { --c: #3f7be4; }
    .app-rail i[data-app="qr-codes-barres"] { --c: #a04bd4; }
    .app-rail i[data-app="forms"] { --c: #0f9d58; }
    .app-rail i[data-app="projet"] { --c: #d9480f; }
    .app-rail i[data-app="bloc-notes"] { --c: #0e7490; }
    .app-rail i[data-app="calculatrice"] { --c: #4f46e5; }
    .app-search { display: block; width: 100%; height: 3.375rem; padding: 0 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--white); color: var(--ink); font: 400 1rem/1.4 var(--font-body); -webkit-appearance: none; appearance: none; }
    .app-search::placeholder { color: var(--muted); opacity: .75; }
    .app-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
    .is-search-hidden { display: none !important; }
    .apps-empty { margin: 1rem 0 0; color: var(--muted); }
    .hero-rail { margin-top: 2.5rem; }
    .hero-rail .app-rail { margin: 0; }
    #bench { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
    #bench > .bench-head { grid-row: 1; }
    #bench > .bench-tabs { grid-row: 2; }
    #bench > .bench-panel { grid-row: 3; grid-column: 1; }
    #bench > .bench-panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
    .bench-head { padding: 0.5625rem 1rem; font-size: .84rem; }
    .bench-tabs { padding: 0.375rem; }
    .bench-tab { padding: 0.4375rem 0.5625rem; font-size: .84rem; }
    .panel-split { gap: 1.25rem; }
    .panel-list.compact { margin-top: 0.625rem; gap: 0.375rem; }
    .panel-note { font-size: .84rem; }
    .scan-doc { gap: 0.4375rem; }
    .pdf-page { margin-top: 0.625rem; gap: 0.4375rem; }
    .pdf-page em { margin-top: 0.375rem; padding-top: 0.5rem; font-size: 1rem; }
    .jobs li { gap: 0.3125rem 0.75rem; }
    .job-to { padding: 2px 0.5rem; }
    .panel-split { grid-template-columns: 8.125rem minmax(0, 1fr); }
    .codes { grid-template-columns: 8.125rem minmax(0, 1fr); }
    .qr { padding: 0.5rem; }
    .barcode { height: 2.75rem; }
    .barcode-num { margin-top: 0.3125rem; font-size: .78rem; }
    .storage { padding: 0 0 0.5rem; }
    .storage-head { margin-bottom: 0.3125rem; }
    .storage-note { margin-top: 0.3125rem; font-size: .8rem; }
    .bench-panel .calc-screen { gap: 2px; }
    .fd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 0.75rem; overflow: hidden; background: var(--white); text-align: left; }
    .fd-form { display: grid; border-top: 4px solid #0f9d58; border-right: 1px solid var(--line); }
    .fd-form h4 { margin: 0 0 2px; font: 700 .95rem/1.2 var(--font-head); }
    .fd-q { font-size: .8rem; font-weight: 600; }
    .fd-opt { display: flex; align-items: center; gap: 0.4375rem; font-size: .8rem; color: var(--muted); }
    .fd-opt::before { content: ''; flex: none; width: 0.75rem; height: 0.75rem; border: 2px solid #a6aebd; border-radius: 50%; }
    .fd-opt.is-on { color: var(--ink); }
    .fd-opt.is-on::before { border-color: #0f9d58; background: radial-gradient(#0f9d58 42%, transparent 48%); }
    .fd-rate { display: flex; gap: 0.3125rem; margin-top: 2px; }
    .fd-rate span { display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 0.4375rem; font: 700 .74rem/1 var(--font-head); color: var(--muted); }
    .fd-rate .is-on { background: #0f9d58; border-color: #0f9d58; color: #fff; }
    .fd-res { display: grid; gap: 0.4375rem; background: var(--soft); }
    .fd-res-h { display: flex; justify-content: space-between; gap: 0.5rem; font-size: .8rem; color: var(--muted); }
    .fd-res-h strong { color: var(--ink); font: 700 .95rem/1.2 var(--font-head); }
    .fd-bar { display: grid; gap: 0.5rem; align-items: center; color: var(--muted); }
    .fd-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fd-bar i { position: relative; display: block; border-radius: 6.1875rem; background: var(--line); overflow: hidden; }
    .fd-bar b { position: absolute; inset: 0 auto 0 0; width: var(--w); background: #0f9d58; border-radius: 6.1875rem; }
    .fd-bar em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
    .gd { border: 1px solid var(--line); border-radius: 0.75rem; overflow: hidden; background: var(--white); text-align: left; }
    .gd-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
    .gd-kpis div { background: var(--white); }
    .gd-kpis b { display: block; font: 700 .98rem/1.15 var(--font-head); }
    .gd-kpis span { font-size: .72rem; color: var(--muted); }
    .gd-row { display: grid; align-items: center; border-bottom: 1px solid var(--line); }
    .gd-row:last-child { border-bottom: 0; }
    .gd-row > span { padding: 0 0.625rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gd-track { position: relative; height: 100%; border-left: 1px solid var(--line); background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), var(--line) calc(12.5% - 1px) 12.5%); }
    .gd-bar { position: absolute; left: var(--l); width: var(--w); display: block; border-radius: 4px; background: #9db6f2; overflow: hidden; }
    .gd-bar i { display: block; width: var(--p); height: 100%; background: var(--brand); }
    .gd-bar.crit { background: #f1a3b0; }
    .gd-bar.crit i { background: #d9314f; }
    .gd-ms { position: absolute; left: var(--l); display: block; border-radius: 2px; background: var(--ink); transform: rotate(45deg); }
    .bench-panel { min-height: 21.25rem; display: flex; flex-direction: column; }
    .bench-panel > .panel-note { margin-top: auto; padding-top: 0.625rem; }
    .bench-panel > .panel-split { flex: 1; align-items: stretch; gap: 1.75rem; grid-template-columns: clamp(8.75rem, 24%, 11.875rem) minmax(0, 1fr); }
    .scan-doc { aspect-ratio: auto; align-content: space-between; padding: 1.125rem 1rem; }
    .panel-list { align-content: center; gap: 1.125rem; }
    .panel-list strong { font-size: 1.02rem; }
    .panel-list span { font-size: .9rem; }
    .bench-panel > .panel-split.codes { grid-template-columns: clamp(9.375rem, 36%, 15rem) minmax(0, 1fr); }
    .codes .qr { align-self: center; }
    .codes-side { display: flex; flex-direction: column; justify-content: center; }
    .codes .barcode { height: 4rem; }
    .codes .panel-list.compact { margin-top: 1rem; gap: 0.625rem; }
    .chips { justify-content: center; gap: 0.5rem; }
    .chip { padding: 0.375rem 0.875rem; font-size: .88rem; }
    .pdf-page { flex: 1; width: 100%; max-width: 28.75rem; margin: 0.875rem auto 0; padding: 1.25rem; align-content: space-between; }
    .jobs { flex: 1; align-content: space-evenly; gap: 0.625rem; }
    .job-name { font-size: .95rem; }
    .job-to { font-size: .8rem; }
    .bar { height: 0.5rem; }
    .storage { padding-bottom: 4px; }
    .storage-head { font-size: .95rem; }
    .storage-bar { height: 0.6875rem; }
    .visio { flex: 1; display: flex; flex-direction: column; }
    .visio-top { margin-bottom: 0.625rem; font-size: .92rem; }
    .visio-grid { flex: 1; grid-auto-rows: 1fr; gap: 0.625rem; }
    .visio-cell { aspect-ratio: auto; min-height: 3.5rem; border-radius: 0.625rem; }
    .visio-cell b { width: 2.75rem; height: 2.75rem; font-size: .85rem; }
    .visio-cell span { left: 0.625rem; bottom: 0.4375rem; font-size: .78rem; }
    .visio-bar { margin-top: 0.625rem; gap: 0.625rem; }
    .visio-btn { width: 2.25rem; height: 2.25rem; }
    .visio-btn svg { width: 1rem; height: 1rem; }
    .notes-demo { flex: 1; }
    .notes-demo-list { grid-auto-rows: 1fr; align-content: stretch; padding: 0.625rem; gap: 0.375rem; }
    .notes-demo-item { align-content: center; padding: 0.5rem 0.75rem; }
    .notes-demo-edit { display: flex; flex-direction: column; gap: 0.625rem; padding: 1rem 1.125rem; }
    .notes-demo-edit h4 { font-size: 1.15rem; }
    .notes-demo-edit p { font-size: .95rem; line-height: 1.7; }
    .notes-demo-foot { margin-top: auto; }
    .bench-panel .calc { flex: 1; width: 100%; max-width: 32.5rem; grid-template-rows: auto minmax(0, 1fr); gap: 0.625rem; }
    .bench-panel .calc-screen { padding: 0.875rem 1.125rem 0.75rem; }
    .bench-panel .calc-screen strong { font-size: 2rem; }
    .bench-panel .calc-keys { grid-auto-rows: 1fr; gap: 0.5rem; }
    .bench-panel .calc-keys span { height: auto; min-height: 2rem; font-size: .95rem; }
    .fd { flex: 1; }
    .fd-form { align-content: space-evenly; gap: 0.5rem; padding: 0.875rem 1.125rem; }
    .fd-form h4 { font-size: 1.05rem; }
    .fd-q, .fd-opt { font-size: .88rem; }
    .fd-rate span { width: 1.875rem; height: 1.875rem; }
    .fd-res { align-content: space-evenly; padding: 0.875rem 1.125rem; }
    .fd-bar { grid-template-columns: 6rem minmax(0, 1fr) 2.375rem; font-size: .82rem; }
    .fd-bar i { height: 0.5625rem; }
    .gd { flex: 1; display: flex; flex-direction: column; }
    .gd-kpis div { padding: 0.75rem 1rem; }
    .gd-kpis b { font-size: 1.2rem; }
    .gd-rows { flex: 1; display: grid; grid-auto-rows: 1fr; }
    .gd-row { height: auto; min-height: 1.875rem; grid-template-columns: 8.125rem minmax(0, 1fr); font-size: .84rem; }
    .gd-bar { top: 50%; height: 1rem; transform: translateY(-50%); }
    .gd-ms { top: calc(50% - 0.375rem); width: 0.75rem; height: 0.75rem; }
    .bench-tabs, .recent-list, .bonus-track { scrollbar-width: none; -ms-overflow-style: none; }
    .bench-tabs::-webkit-scrollbar, .recent-list::-webkit-scrollbar, .bonus-track::-webkit-scrollbar { display: none; width: 0; height: 0; }
}
.bonus-card[data-app="radio-podcast"] { --tile: #c026d3; }
.bonus-card[data-app="central-news"]  { --tile: #b45309; }
.bonus-card[data-app="cloud-creatif"]  { --tile: #0891b2; }
.footer-line { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .65rem; }
.bonus { margin-top: 4rem; }
.bonus ~ .dash-row { margin-top: calc(4rem - .875rem); }
.bonus-track { overscroll-behavior-x: none; scroll-padding-inline: 2px; }
@media (min-width: 701px) {
    #bench { grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; }
}
.bonus-cover { display: block; margin-bottom: .6rem; border-radius: .9rem; overflow: hidden; aspect-ratio: 1600 / 840; background: var(--soft); }
.bonus-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bench-panel .ag { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; text-align: left; }
.ag-month { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.ag-month > strong { display: block; margin-bottom: 8px; font: 700 1rem/1.2 var(--font-head); color: var(--ink); }
.ag-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.ag-grid i { padding-bottom: 2px; font-style: normal; font-size: .7rem; color: var(--muted); }
.ag-grid span { position: relative; display: grid; place-items: center; height: 28px; border-radius: 8px; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.ag-grid span.has-ev::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--brand); }
.ag-grid span.is-today { background: var(--brand); color: #fff; font-weight: 600; }
.ag-grid span.is-today::after { background: #fff; }
.ag-list { display: grid; gap: 12px; }
.ag-list li { display: grid; min-width: 0; padding-left: 14px; border-left: 3px solid var(--c, var(--brand)); }
.ag-list strong { font-size: .95rem; }
.ag-list span { font-size: .85rem; color: var(--muted); }
@media (min-width: 701px) {
    .bench-panel > .ag { flex: 1; }
}
@media (max-width: 700px) {
    .bench-panel .ag { grid-template-columns: 1fr; }
}
.bonus-card { flex: 0 0 clamp(14rem, 30vw, 21.25rem); min-width: 0; max-width: 100%; }
.bonus-cover, .bonus-cover img { max-width: 100%; }
.bonus-name, .bonus-desc { overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .bonus-card { flex-basis: min(78vw, 18rem); padding: 1.1rem; }
}
.hero--compact { padding: clamp(1.25rem, 3vw, 2rem) 0 1rem; }
.hero--compact .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hero--compact .hero-rail { margin-top: 1.25rem; }
@media (min-width: 701px) {
    .hero-grid { align-items: stretch; }
    .hero-copy { align-self: center; }
    #bench { align-self: stretch; contain: size; min-height: 0; }
    #bench > .bench-panel { min-height: 0; overflow: hidden; }
}
@media (min-width: 701px) and (max-width: 1180px) {
    .hero-grid { gap: clamp(24px, 4vw, 48px); }
    .bench-panel { padding: 12px 16px; }
    .panel-note { margin-top: 6px; }
}
.bento-tile[data-app="stockage-fichiers"]  { --tile: #ca8a04; }
.bonus-card[data-app="traitement-fichiers"] { --tile: #3f7be4; }
.app-rail i[data-app="stockage-fichiers"]  { --c: #ca8a04; }
.bench-panel .upd-chips { justify-content: flex-start; }
.upd-chips .chip.is-active.upd-new      { background: #0f9d58; border-color: #0f9d58; }
.upd-chips .chip.is-active.upd-improved { background: var(--brand); border-color: var(--brand); }
.upd-chips .chip.is-active.upd-soon     { background: #cf6f0a; border-color: #cf6f0a; }
.upd-title { margin: 12px 0 10px; font-size: 1.1rem; }
@media (min-width: 701px) {
    .upd-title { margin: 14px 0 12px; font-size: 1.25rem; }
    .bench-panel .panel-list { align-content: start; }
}
.upd-link { color: var(--brand); font-weight: 600; white-space: nowrap; }
.upd-link:hover { color: var(--brand-dark); text-decoration: underline; }
.bonus:not([data-view="list"]) .bonus-icon { display: none; }
.bonus[data-view="list"] .bonus-nav { display: none; }
.bonus[data-view="list"] .bonus-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; overflow: visible; scroll-snap-type: none; padding: 4px 2px 0; }
.bonus[data-view="list"] .bonus-card { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "icon name arrow" "icon desc arrow"; column-gap: 1rem; row-gap: 2px; align-items: center; flex: none; padding: .875rem 1.125rem; border-radius: .875rem; }
.bonus[data-view="list"] .bonus-card:hover, .bonus[data-view="list"] .bonus-card:focus-visible { transform: none; }
.bonus[data-view="list"] .bonus-card::after { content: "→"; grid-area: arrow; color: var(--tile); font-size: 1.25rem; transition: transform .2s; }
.bonus[data-view="list"] .bonus-card[target="_blank"]::after { content: "↗"; }
.bonus[data-view="list"] .bonus-card:hover::after { transform: translateX(4px); }
.bonus[data-view="list"] .bonus-icon { grid-area: icon; display: grid; place-items: center; width: 3rem; height: 3rem; margin: 0; border-radius: .875rem; }
.bonus[data-view="list"] .bonus-icon svg { width: 1.5rem; height: 1.5rem; }
.bonus[data-view="list"] .bonus-name { grid-area: name; font-size: 1.05rem; font-weight: 600; }
.bonus[data-view="list"] .bonus-desc { grid-area: desc; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.bonus[data-view="list"] .bonus-cover, .bonus[data-view="list"] .bonus-go { display: none; }
@media (max-width: 700px) {
    .bonus[data-view="list"] .bonus-track { grid-template-columns: minmax(0, 1fr); }
}
.bench-status[data-status="done"] i     { background: var(--ok); }
.bench-status[data-status="progress"] i { background: #cf6f0a; }
.bench-status[data-status="soon"] i     { background: var(--brand); }
@media (min-width: 701px) and (max-width: 1180px) {
    .announce-bar { font-size: 14px; }
    .announce-badge { font-size: 12px; padding: 2px 10px; }
    .brand-name { font-size: 22px; }
    .main-nav { gap: 16px; }
    .main-nav > ul { gap: 16px; }
    .main-nav > ul > li > a, .menu-toggle { font-size: 15px; gap: 6px; }
    .header-actions .btn-outline { padding: 9px 16px; font-size: 15px; border-radius: 12px; }
    .submenu { min-width: 260px; }
    .submenu a { font-size: 15px; gap: 12px; padding: 10px 12px; }
}

/* Descriptions des cartes en liste : 2 lignes max (comme sublimeworkshop, qui ne tronque pas sur 1 ligne) */
.bento[data-view="list"] .bento-desc,
.bonus[data-view="list"] .bonus-desc {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
}
@media (min-width: 701px) and (max-width: 1180px) {
    /* Le panneau « Nouveautés » grandit avec son contenu au lieu de le couper */
    #bench { contain: none; }
    #bench > .bench-panel { overflow: visible; }
}

/* ===== Slider mises à jour : bouton « Voir plus » ===== */
.panel-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.panel-foot .panel-note { margin: 0; flex: 1 1 14rem; min-width: 0; }
.upd-more { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: .45rem 1rem; border: 1px solid var(--brand); border-radius: 10px; background: transparent; color: var(--brand-dark); font: 600 .88rem/1.4 var(--font-body); white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
.upd-more:hover, .upd-more:focus-visible { background: var(--brand-tint); border-color: var(--brand-dark); }
@media (min-width: 701px) {
    .panel-foot { margin-top: auto; padding-top: 10px; }
}

/* ===== Page « Mises à jour » ===== */
.maj .container { width: 100%; padding-inline: clamp(1rem, 5vw, 4rem); }
.maj { padding: 2.5rem 0 5rem; }
.maj-back { display: inline-block; margin-bottom: 1.5rem; color: var(--muted); font-weight: 500; }
.maj-back:hover { color: var(--brand); }
.maj-head h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; }
.maj-head p { margin-top: .8rem; max-width: 40rem; color: var(--muted); font-size: 1.1rem; }
.maj-list { display: grid; gap: 1.2rem; max-width: 56rem; margin-top: 2.5rem; }
.maj-item { padding: 1.5rem; background: var(--white); border: 1.5px solid var(--line); border-radius: 16px; scroll-margin-top: 88px; transition: border-color .2s, box-shadow .2s; }
.maj-item:target { border-color: var(--brand); box-shadow: var(--shadow); }
.maj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.maj-meta .chips { justify-content: flex-start; }
.maj-title { margin: .9rem 0 1rem; font-size: 1.4rem; }
.maj-item .panel-list { gap: 1rem; }
.maj-item .panel-list strong { font-size: 1.02rem; }
.maj-item .panel-list span { font-size: .92rem; }
.maj-note { margin-top: 1rem; color: var(--muted); }

/* ===== Mosaïque d'arrière-plan (connexion / inscription) ===== */
.auth-mosaic {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(6, 1fr);
    gap: 4px; opacity: .55; filter: saturate(1.05);
}
.auth-mosaic::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, var(--soft) 0%, transparent 72%);
    opacity: .85;
}
.am-tile { position: relative; overflow: hidden; border-radius: 10px; background: var(--line); }
.am-layer {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; animation: amFade infinite ease-in-out backwards;
}
@keyframes amFade { 0% { opacity: 0 } 12% { opacity: 1 } 45% { opacity: 1 } 58% { opacity: 0 } 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
    .am-layer { animation: none; opacity: 1; }
    .am-layer + .am-layer { display: none; }
}
@media (max-width: 640px) {
    .auth-mosaic { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); }
    .am-tile { grid-column: auto !important; grid-row: auto !important; }
}
/* La mosaïque ne s'applique qu'aux pages qui l'incluent (pas à compte.php) */
body:has(.auth-mosaic) .auth { position: relative; z-index: 1; background: transparent; }
body:has(.auth-mosaic) .auth-card {
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    border-color: rgba(255, 255, 255, .7);
}

/* ===== Mosaïque compacte ===== */
.bento[data-view="mosaic"] { grid-auto-rows: 170px; gap: 10px; }
.bento[data-view="mosaic"] .bento-tile,
.bento[data-view="mosaic"] .bento-tile.is-hero { padding: 1rem; border-radius: 18px; }

.bento[data-view="mosaic"] .bento-icon svg { width: 26px; height: 26px; }
.bento[data-view="mosaic"] .bento-name { font-size: 1rem; }
.bento[data-view="mosaic"] .bento-desc {
    font-size: .8rem; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Grande carte (1re) */
.bento[data-view="mosaic"] .bento-tile.is-hero .bento-icon svg { width: 40px; height: 40px; }
.bento[data-view="mosaic"] .bento-tile.is-hero .bento-name { font-size: 1.6rem; }
.bento[data-view="mosaic"] .bento-tile.is-hero .bento-desc { font-size: .9rem; max-width: 20rem; }

/* Badge « Tendance » */
.bento[data-view="mosaic"] .bento-tile[data-trend]::before { top: 14px; right: 14px; padding: 3px 9px; font-size: .7rem; }

/* Lisibilité du texte sur les images de fond */
.bento[data-view="mosaic"] .bento-tile.has-bg::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%);
}

/* Mobile */
@media (max-width: 700px) {
    .bento[data-view="mosaic"] { grid-auto-rows: 150px; }
    .bento[data-view="mosaic"] .bento-tile.is-hero .bento-name { font-size: 1.4rem; }
}
@media (max-width: 560px) {
    .bento[data-view="mosaic"] .bento-tile { min-height: 140px; }
    .bento[data-view="mosaic"] .bento-tile.is-hero { min-height: 190px; }
}

/* ===== Hero tablette portrait : slider = hauteur de la colonne de gauche ===== */
@media (min-width: 701px) and (max-width: 1180px) and (orientation: portrait) {
    #bench { contain: size; min-height: 0; align-self: stretch; }
    #bench > .bench-panel { overflow: hidden; min-height: 0; padding: 10px 16px; }
    .bench-panel { min-height: 0; }

    .bench-head { padding: 7px 14px; }
    .bench-tabs { padding: 4px; }
    .bench-tab { padding: 6px 8px; }
    .upd-title { margin: 8px 0 8px; font-size: 1.05rem; }
    .bench-panel .panel-list { gap: 8px; }
    .panel-list li { padding-left: 12px; }
    .panel-list strong { font-size: .92rem; }
    .panel-list span { font-size: .8rem; line-height: 1.3; }
    .panel-foot { margin-top: auto; padding-top: 8px; }
    .panel-note { display: none; }
    .upd-more { padding: .35rem .9rem; font-size: .82rem; }
}


/* ===== stylet.css ===== */
:root{--bg:#F4F2F8;--surface:#fff;--ink:#1F1B2E;--muted:#6A6580;--line:#DDD9E8;--accent:#5B4BDB;color-scheme:light}
@media(prefers-color-scheme:dark){:root{--bg:#17141F;--surface:#221E2E;--ink:#F1EEF8;--muted:#A29CB8;--line:#37314A;--accent:#9A8CFF;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 "DM Sans",system-ui,sans-serif}
h1,h2,.logo{font-family:"Bricolage Grotesque","DM Sans",sans-serif}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.annonce{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;padding:.55rem clamp(1rem,5vw,4rem);background:var(--accent);color:#fff;font-size:clamp(.8rem,1.8vw,.95rem);font-weight:500;text-align:center}
@media(prefers-color-scheme:dark){.annonce{color:#17141F}}
.top{position:relative;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem clamp(1rem,5vw,4rem);flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.7rem;font-weight:800;font-size:1.25rem}
.dots{display:grid;grid-template-columns:repeat(3,10px);gap:3px}
.dots i{width:10px;height:10px;border-radius:50%}
nav{display:flex;align-items:center;gap:1.5rem;font-weight:500}
nav a:not(.btn):hover{color:var(--accent)}
.btn{display:inline-block;padding:.6rem 1.2rem;border-radius:10px;background:var(--accent);color:#fff;font-weight:500}
@media(prefers-color-scheme:dark){.btn{color:#17141F}}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent)}

/* Pleine largeur : plus aucun max-width */
.hero{padding:clamp(2rem,7vw,5.5rem) clamp(1rem,5vw,4rem) 2rem}
.hero h1{font-size:clamp(2.4rem,7vw,5rem);line-height:1.02;font-weight:800;letter-spacing:-.03em;margin:0 0 1.2rem}
.hero p{color:var(--muted);font-size:1.15rem;margin:0 0 2rem}
.swatches{display:flex;height:14px;margin-bottom:2rem;border-radius:99px;overflow:hidden}
.swatches span{flex:1}
.search input{width:100%;padding:.9rem 1.1rem;font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:12px}
.apps,.recent{padding:2rem clamp(1rem,5vw,4rem)}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.filters button{font:inherit;padding:.4rem 1rem;border-radius:99px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Mosaïque : le placement est calculé par main.js selon le nombre d'applications visibles */
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(64px,12.5vw,118px);grid-auto-flow:dense;gap:clamp(6px,1.2vw,12px)}
.card{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(.6rem,1.8vw,1.3rem);border-radius:clamp(14px,2.5vw,24px);background:var(--c);color:var(--t);overflow:hidden;isolation:isolate;transition:transform .15s}
.card[hidden]{display:none}
.card:hover{transform:scale(1.015)}
.card .ic{width:clamp(20px,3.4vw,32px);height:clamp(20px,3.4vw,32px);flex:none}
.card .wm{position:absolute;z-index:-1;right:-12%;bottom:-14%;width:75%;height:auto;max-height:130%;opacity:.16}
.txt{display:flex;flex-direction:column;gap:.2rem}
.txt strong{font:800 clamp(.8rem,1.9vw,1.15rem)/1.15 "Bricolage Grotesque","DM Sans",sans-serif}
.txt span{font-size:clamp(.62rem,1.4vw,.88rem);line-height:1.3;opacity:.88}
/* Petits téléphones : descriptions masquées sauf sur la grande carte */

/* ===== Modes d'affichage (sélecteur) ===== */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.toolbar .filters{margin-bottom:0}
.views{display:flex;gap:2px;padding:3px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface)}
.views button{display:flex;align-items:center;justify-content:center;font:inherit;padding:.5rem .7rem;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer}
.views button:hover{color:var(--ink)}
.views button svg{width:18px;height:18px;flex:none}
.views button[aria-pressed=true],.views button[aria-pressed=true]:hover{background:var(--ink);color:var(--bg)}
.tag{display:none;font-size:.75rem;line-height:1.4;padding:.15rem .65rem;border:1px solid var(--line);border-radius:99px;color:var(--muted);white-space:nowrap}

/* Communs aux modes Grille / Liste / Tableau de bord */
#grid:not([data-view=mosaic]){grid-auto-rows:auto;grid-auto-flow:row}
#grid:not([data-view=mosaic]) .card{grid-area:auto;grid-column:auto;grid-row:auto;padding:1.2rem;border-radius:18px}
#grid:not([data-view=mosaic]) .card .ic{width:36px;height:36px}
#grid:not([data-view=mosaic]) .txt strong{font-size:1.1rem}
#grid:not([data-view=mosaic]) .txt span{display:block;font-size:.85rem;max-width:none}

/* Grille simple : cartes colorées de taille égale */
#grid[data-view=grid]{grid-template-columns:repeat(auto-fill,minmax(clamp(150px,22vw,240px),1fr));grid-auto-rows:minmax(170px,auto);gap:12px}

/* Liste */
#grid[data-view=list]{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#grid[data-view=list] .card{flex-direction:row;align-items:center;justify-content:flex-start;gap:1rem;padding:.9rem 1.1rem;border-radius:16px}
#grid[data-view=list] .txt{flex:1;min-width:0}
#grid[data-view=list] .tag{display:none}
#grid[data-view=list] .card::after,#communaute[data-view=list] #slider .card::after{content:"\2192";flex:none;margin-left:auto;font-size:1.4rem;line-height:1;color:var(--c)}
#grid[data-view=list] .txt strong,#grid[data-view=list] .txt span,#communaute[data-view=list] #slider .txt strong,#communaute[data-view=list] #slider .txt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* Liste : cartes claires, pastille d'icône colorée */
#grid[data-view=list] .card{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
#grid[data-view=list] .card:hover{border-color:var(--c);transform:none}
#grid[data-view=list] .wm{display:none}
#grid[data-view=list] .card .ic{width:46px;height:46px;padding:11px;border-radius:13px;background:var(--c);color:var(--t)}

/* Slider horizontal « Communauté & ressources » : cartes de même taille, une seule ligne */
.slider{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:6px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding:6px 6px 10px;margin:-6px}
.slider::-webkit-scrollbar{display:none}
#slider .card{flex:1 0 max(220px,calc((100% - 36px)/4));height:clamp(160px,16vw,190px);padding:1.2rem;border-radius:22px;scroll-snap-align:start}
#slider .card .ic{width:32px;height:32px}
/* Fonds WebP des cartes (dossier assets/img/) */
#slider .card{background-size:cover;background-position:right center;background-repeat:no-repeat}
#slider .wm{display:none}
#slider .txt strong{font-size:1.15rem}
#slider .txt span{display:block;font-size:.88rem}
.bonus h2{margin:0 0 1rem;font-size:clamp(1.2rem,2.6vw,1.6rem);font-weight:800}
/* Page en construction */
.construct{min-height:55vh}
.construct .badge{display:grid;place-items:center;width:clamp(72px,12vw,120px);aspect-ratio:1;margin-bottom:1.5rem;border-radius:28%;background:var(--accent);color:#fff}
@media(prefers-color-scheme:dark){.construct .badge{color:#17141F}}
.construct .badge svg{width:55%;height:55%}
.actions{display:flex;gap:.8rem;flex-wrap:wrap}
/* Menu déroulant « Applications » */
.menu-btn{display:flex;align-items:center;gap:.3rem;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:500;cursor:pointer}
.menu-btn:hover,.menu-btn[aria-expanded=true]{color:var(--accent)}
.menu-btn svg{width:16px;height:16px;transition:transform .15s}
.menu-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.menu-wrap{position:relative}
.menu-panel{position:absolute;top:calc(100% + .7rem);left:0;z-index:30;width:min(28rem,calc(100vw - 2rem));max-height:75vh;overflow:auto;padding:.5rem;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;box-shadow:0 18px 40px rgba(31,27,46,.18)}
.menu-panel[hidden]{display:none}
@media(max-width:700px){.menu-wrap{position:static}.menu-panel{top:100%;left:clamp(1rem,5vw,4rem);right:clamp(1rem,5vw,4rem);width:auto}}
@media(prefers-color-scheme:dark){.menu-panel{box-shadow:0 18px 40px rgba(0,0,0,.5)}}
.menu-panel ul{list-style:none;margin:0;padding:0}
.menu-panel li a,.menu-panel .all{display:flex;align-items:center;gap:.9rem;padding:.6rem .7rem;border-radius:12px}
.menu-panel li a:hover,.menu-panel .all:hover{background:var(--bg)}
.menu-panel .chip{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:var(--c);color:var(--t)}
.menu-panel .chip svg{width:22px;height:22px}
.menu-panel .mt{display:flex;flex-direction:column;min-width:0}
.menu-panel .mt strong{font:800 1rem/1.2 "Bricolage Grotesque","DM Sans",sans-serif}
.menu-panel .mt small{color:var(--muted);font-size:.82rem;line-height:1.3}
#vide{color:var(--muted)}
.recent{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:stretch}
.recent>.box{flex:1 1 280px;min-width:0}
.recent>.box:first-child{flex:2 1 380px}
.head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.head h2{margin:0}
.space{margin:0 0 1rem;color:var(--muted)}
.box{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:1.5rem}
.box h2{margin:0 0 1rem;font-size:1.2rem}
.box ul{list-style:none;margin:0;padding:0}
.box li{display:flex;align-items:center;gap:.8rem;padding:.7rem 0;border-top:1px solid var(--line)}
.box li b{width:12px;height:12px;border-radius:3px}
.box small{margin-left:auto;color:var(--muted)}
.note{font-size:.85rem;color:var(--muted)}
/* Mes fichiers : détail par type, zone défilante (la boîte garde la hauteur de « Projets récents ») */
#fichiers{display:flex;flex-direction:column}
#fichiers .btn{align-self:flex-start;margin-top:1.1rem}
.ftypes-wrap{position:relative;flex:1 1 auto;min-height:4rem}
.ftypes{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding-right:.5rem;scrollbar-width:thin}
.ft{padding-bottom:.6rem}
.ft-h{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;font-size:.88rem;line-height:1.4;margin-bottom:.25rem}
.ft-h small{margin-left:0;font-size:.82rem}
.meter.sm{height:8px;margin-bottom:0}
@media(max-width:760px){.ftypes-wrap{min-height:9.5rem}}
.meter{height:12px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:.8rem}
.meter span{display:block;height:100%;background:var(--accent)}
footer{padding:2rem clamp(1rem,5vw,4rem);color:var(--muted);font-size:.9rem}
footer a:hover{color:var(--accent)}
@media(max-width:760px){.box li{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== Adaptations HostOffice ===== */

/* Lien d'évitement */
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;padding:.6rem 1rem;border-radius:8px;background:var(--ink);color:var(--bg)}
.skip-link:focus{top:12px}

/* En-tête : le menu passe à la ligne sur petit écran */
.top nav{flex-wrap:wrap;gap:.6rem 1.5rem}
nav a[aria-current=page]{color:var(--accent)}

/* Icônes : le SVG est fourni par icon() dans un conteneur */
.card .ic{display:block}
.ic>svg,.wm>svg,.chip>svg{display:block;width:100%;height:100%}
.card .wm{aspect-ratio:1/1}
.menu-panel .chip svg{width:22px;height:22px}

/* Mosaïque : placement dynamique (6 colonnes) calculé par main.js */
#grid[data-view=mosaic] .card{grid-column:span var(--span,2);grid-row:span var(--rows,1)}
#grid[data-view=mosaic] .card.is-hero .ic{width:clamp(32px,6vw,56px);height:clamp(32px,6vw,56px)}
#grid[data-view=mosaic] .card.is-hero .txt strong{font-size:clamp(1.3rem,4vw,2.3rem)}
#grid[data-view=mosaic] .card.is-hero .txt span{font-size:clamp(.7rem,1.8vw,1.05rem);max-width:22rem;-webkit-line-clamp:4}
#grid[data-view=mosaic] .card:not(.is-hero) .txt strong{font-size:clamp(.9rem,2.2vw,1.3rem)}
#grid[data-view=mosaic] .txt span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media(max-width:600px){
  #grid[data-view=mosaic]{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(120px,auto)}
  #grid[data-view=mosaic] .card{grid-column:span 1;grid-row:span 1}
  #grid[data-view=mosaic] .card.is-hero{grid-column:span 2}
}
@media(max-width:450px){#grid[data-view=mosaic] .card:not(.is-hero) .txt span{display:none}}

/* Slider : flèches de navigation (la barre de défilement est masquée) */
.slider-wrap{position:relative}
.sl-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1.5px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.sl-btn:hover{border-color:var(--accent);color:var(--accent)}
.sl-btn:disabled{opacity:.4;cursor:default}
.sl-btn svg{width:18px;height:18px}
.sl-prev{left:-12px}
.sl-next{right:-12px}
@media(hover:none){.sl-btn{display:none}}
#slider .card[style*="background-image"] .wm{display:none}

/* Projets récents (liste cliquable) : 3 lignes visibles, puis défilement */
.recent-list{max-height:calc(3 * (3rem + 1px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:.5rem}
.recent-list li{padding:0}
.recent-list a{display:flex;align-items:center;gap:.8rem;flex:1;min-width:0;min-height:3rem;padding:.7rem 0}
.recent-list a:hover{color:var(--accent)}
.recent-list a span:first-child{flex:none;width:12px;height:12px;border-radius:3px}
.recent-list a .rn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent-list a small{margin-left:auto;color:var(--muted);white-space:nowrap}
.link-btn{padding:0;border:0;background:none;color:var(--accent);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-btn[hidden]{display:none}
.hero .lead{max-width:60ch}

/* Pied de page : séparateurs aérés */
footer{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem}
footer .sep{display:inline}
footer .copy,footer a{white-space:nowrap}

/* Applications bonus : en mode Liste, le slider devient une liste verticale */
#communaute[data-view=list] .sl-btn{display:none}
#communaute[data-view=list] .slider{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;scroll-snap-type:none;gap:10px;padding:0;margin:0}
#communaute[data-view=list] #slider .card{flex:none;height:auto;flex-direction:row;align-items:center;justify-content:flex-start;gap:1rem;padding:.9rem 1.1rem;border-radius:16px;background-image:none!important;background-color:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
#communaute[data-view=list] #slider .card:hover{border-color:var(--c);transform:none}
#communaute[data-view=list] #slider .txt{flex:1;min-width:0}
#communaute[data-view=list] #slider .card .ic{width:46px;height:46px;padding:11px;border-radius:13px;background:var(--c);color:var(--t)}

/* Hero en deux colonnes : texte à gauche, mises à jour à droite */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,38vw,480px);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.hero-main{min-width:0}
@media(max-width:600px){.hero-grid{grid-template-columns:1fr}.updates{display:none}}

.updates{display:flex;flex-direction:column;min-width:0;min-height:clamp(22rem,36vw,28rem);padding:clamp(1.1rem,2.2vw,1.6rem);background:var(--surface);border:1.5px solid var(--line);border-radius:20px}
.up-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.85rem}
.up-head h2{margin:0;font-size:1.3rem}
.up-head a{font-size:.88rem;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.up-view{flex:1;display:flex;overflow:hidden;border-radius:14px}
.up-track{display:flex;flex:1;min-width:0;transition:transform .5s ease}
.up-slide{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.8rem;padding:clamp(1.2rem,2.4vw,1.8rem);background:var(--bg);border-radius:16px}
.up-slide small{color:var(--accent);font-weight:500}
.up-slide strong{font:800 clamp(1.3rem,2.4vw,1.6rem)/1.2 "Bricolage Grotesque","DM Sans",sans-serif}
.up-slide span{color:var(--muted);font-size:1.05rem;line-height:1.5}
.up-dots{display:flex;justify-content:center;gap:.4rem;margin-top:.8rem}
.up-dots button{width:10px;height:10px;padding:0;border:0;border-radius:99px;background:var(--line);cursor:pointer;transition:width .2s,background .2s}
.up-dots button[aria-current=true]{width:26px;background:var(--accent)}
@media(prefers-reduced-motion:reduce){.up-track{transition:none}}

/* Menu Applications : onglets (style discret, soulignement) */
.menu-tabs{position:sticky;top:-.5rem;z-index:1;display:flex;gap:1.6rem;margin:-.5rem -.5rem .4rem;padding:.35rem 1.1rem 0;background:var(--surface);border-bottom:1px solid var(--line)}
.menu-tabs button{flex:none;margin-bottom:-1px;padding:.7rem .1rem .6rem;border:0;border-bottom:2.5px solid transparent;border-radius:0;background:none;color:var(--muted);font:inherit;font-size:.95rem;font-weight:500;cursor:pointer;transition:color .15s,border-color .15s}
.menu-tabs button:hover{color:var(--ink)}
.menu-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.menu-tabs button:focus-visible{outline-offset:-3px;border-radius:6px}
.menu-panel [role=tabpanel][hidden]{display:none}

/* Applications bonus, mode Mosaïque : vraie mosaïque colorée (même style que les applications), sans slider */
.thumb,.go{display:none}
#communaute[data-view=mosaic] .sl-btn{display:none}
#communaute[data-view=mosaic] .slider{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(56px,10vw,96px);grid-auto-flow:dense;gap:clamp(6px,1.2vw,12px);overflow:visible;scroll-snap-type:none;padding:0;margin:0}
#communaute[data-view=mosaic] #slider .card{flex:none;height:auto;grid-column:span 2;grid-row:span 2;justify-content:space-between;gap:0;padding:clamp(.6rem,1.8vw,1.3rem);border-radius:clamp(14px,2.5vw,24px);background:var(--c);color:var(--t);border:0;scroll-snap-align:none}
#communaute[data-view=mosaic] #slider .card:hover{transform:scale(1.015)}
#communaute[data-view=mosaic] #slider .card .ic{display:block;width:clamp(20px,3.4vw,32px);height:clamp(20px,3.4vw,32px)}
#communaute[data-view=mosaic] #slider .thumb{display:block;position:absolute;inset:0;z-index:-2;overflow:hidden;background:none!important}
#communaute[data-view=mosaic] #slider .thumb .wm{display:block;position:absolute;right:-12%;bottom:-14%;width:75%;height:auto;aspect-ratio:1/1;opacity:.16;color:inherit}
#communaute[data-view=mosaic] #slider .txt{padding:0;flex:none}
#communaute[data-view=mosaic] #slider .txt strong{font-size:clamp(.9rem,2.2vw,1.3rem);color:inherit}
#communaute[data-view=mosaic] #slider .txt span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:clamp(.62rem,1.4vw,.88rem);line-height:1.3;color:inherit;opacity:.88}
/* Motif répété tous les 5 blocs : [4 + 2] puis [2 + 2 + 2] */
#communaute[data-view=mosaic] #slider .card:nth-child(5n+1){grid-column:span 4}
#communaute[data-view=mosaic] #slider .card:nth-child(5n+1) .ic{width:clamp(32px,6vw,56px);height:clamp(32px,6vw,56px)}
#communaute[data-view=mosaic] #slider .card:nth-child(5n+1) .txt strong{font-size:clamp(1.3rem,4vw,2.3rem)}
#communaute[data-view=mosaic] #slider .card:nth-child(5n+1) .txt span{font-size:clamp(.7rem,1.8vw,1.05rem);max-width:22rem;-webkit-line-clamp:3}
/* Dernière ligne incomplète : la dernière carte comble l'espace restant */
#communaute[data-view=mosaic] #slider .card:last-child:nth-child(5n+1),
#communaute[data-view=mosaic] #slider .card:last-child:nth-child(5n+3){grid-column:span 6}
#communaute[data-view=mosaic] #slider .card:last-child:nth-child(5n+4){grid-column:span 4}
@media(max-width:600px){
  #communaute[data-view=mosaic] .slider{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(120px,auto)}
  #communaute[data-view=mosaic] #slider .card{grid-column:span 1;grid-row:span 1}
  #communaute[data-view=mosaic] #slider .card:nth-child(5n+1),
  #communaute[data-view=mosaic] #slider .card:last-child:nth-child(5n+1),
  #communaute[data-view=mosaic] #slider .card:last-child:nth-child(5n+2),
  #communaute[data-view=mosaic] #slider .card:last-child:nth-child(5n+4){grid-column:span 2}
  #communaute[data-view=mosaic] #slider .card:last-child:nth-child(5n+3){grid-column:span 1}
}
@media(max-width:450px){#communaute[data-view=mosaic] #slider .card:not(:nth-child(5n+1)) .txt span{display:none}}

/* Applications bonus, mode Grille : fond couleur + dessin SVG (sans image), texte toujours blanc */
#communaute[data-view=grid] #slider .card{color:#fff;background:var(--c)}
#communaute[data-view=grid] #slider .card .ic{color:#fff}
#communaute[data-view=grid] #slider .thumb{display:block;position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--c) none!important}
#communaute[data-view=grid] #slider .thumb .wm{display:block;position:absolute;right:-12%;bottom:-14%;width:75%;height:auto;aspect-ratio:1/1;opacity:.22;color:#fff}
#communaute[data-view=grid] #slider .card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,8,20,.55) 0%,rgba(10,8,20,.3) 55%,rgba(10,8,20,0) 100%)}
#communaute[data-view=grid] #slider .txt strong,#communaute[data-view=grid] #slider .txt span{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.65)}
#communaute[data-view=grid] #slider .txt span{opacity:.95;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* Hero : barre de couleurs et recherche pleine largeur sous le titre et les mises à jour */
.hero-tools{margin-top:clamp(1.5rem,3vw,2.5rem)}
.hero-tools .search{display:block}

/* Mode Liste : 2 colonnes (tablette et PC), 1 colonne sur téléphone */
@media(max-width:600px){#grid[data-view=list],#communaute[data-view=list] .slider{grid-template-columns:minmax(0,1fr)}}

/* ===== Mode Grille : le slider bonus a exactement les mêmes cartes que la grille ===== */
:root{--cols:2}
@media(min-width:600px){:root{--cols:3}}
@media(min-width:1100px){:root{--cols:4}}

#grid[data-view=grid]{
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
}

#communaute[data-view=grid] #slider .card{
  flex:0 0 calc((100% - (var(--cols) - 1) * 12px) / var(--cols));
  height:auto;
  min-height:170px;
  padding:1.2rem;
  border-radius:18px;
}
#communaute[data-view=grid] #slider .card .ic{width:36px;height:36px}
#communaute[data-view=grid] #slider .txt strong{font-size:1.1rem}
#communaute[data-view=grid] #slider .txt span{font-size:.85rem}

/* ===== Polish des mosaïques (applications + bonus) =====
   Profondeur (reflet + ombre colorée), icône dans une pastille, filigrane proportionné
   à la hauteur de la carte, cartes plus aérées, survol plus doux. */
#grid[data-view=mosaic] .card,
#communaute[data-view=mosaic] #slider .card{
  gap:.5rem;
  background-color:var(--c);
  background-image:
    radial-gradient(120% 100% at 0% 0%,rgba(255,255,255,.18),rgba(255,255,255,0) 55%),
    linear-gradient(to bottom,rgba(0,0,0,0) 45%,rgba(0,0,0,.1));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 14px 24px -18px color-mix(in srgb,var(--c) 85%,#000);
  transition:transform .2s ease,box-shadow .2s ease;
}
#grid[data-view=mosaic] .card:hover,
#communaute[data-view=mosaic] #slider .card:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 22px 32px -18px color-mix(in srgb,var(--c) 90%,#000);
}
#grid[data-view=mosaic] .card:active,
#communaute[data-view=mosaic] #slider .card:active{transform:translateY(-1px) scale(.99)}

/* Icône dans une pastille translucide */
#grid[data-view=mosaic] .card .ic,
#communaute[data-view=mosaic] #slider .card .ic{
  width:clamp(34px,5vw,42px);height:clamp(34px,5vw,42px);
  padding:clamp(7px,1.1vw,9px);border-radius:12px;
  background:color-mix(in srgb,var(--t) 16%,transparent);
}
#grid[data-view=mosaic] .card.is-hero .ic,
#communaute[data-view=mosaic] #slider .card:nth-child(5n+1) .ic{
  padding:clamp(10px,1.6vw,14px);border-radius:clamp(14px,2vw,18px);
}

/* Filigrane : calé sur la hauteur de la carte, légèrement incliné, jamais écrasé sur les cartes larges */
#grid[data-view=mosaic] .card .wm,
#communaute[data-view=mosaic] #slider .thumb .wm{
  width:auto;height:125%;max-height:none;aspect-ratio:1/1;
  right:-4%;bottom:-22%;opacity:.14;transform:rotate(-8deg);
}

/* Typographie */
#grid[data-view=mosaic] .txt strong,
#communaute[data-view=mosaic] #slider .txt strong{letter-spacing:-.015em;text-wrap:balance}
#grid[data-view=mosaic] .txt span,
#communaute[data-view=mosaic] #slider .txt span{text-wrap:pretty;opacity:.92}

/* Lignes un peu plus hautes pour que les petites cartes respirent (tablette / PC) */
@media(min-width:601px){
  #grid[data-view=mosaic]{grid-auto-rows:clamp(84px,15vw,136px)}
  #communaute[data-view=mosaic] .slider{grid-auto-rows:clamp(60px,11vw,104px)}
}

/* ===== Mode Grille : dessins SVG (filigrane) =====
   Entièrement visibles (plus de coupe sur les bords), alignés sur les marges de la carte :
   le haut du dessin est au niveau du haut de l'icône, son bord droit au niveau de la marge droite.
   Taille proportionnelle à la largeur de la carte, donc adaptée à chaque écran. */
#grid[data-view=grid] .card .wm,
#communaute[data-view=grid] #slider .thumb .wm{
  top:1.2rem;right:1.2rem;bottom:auto;left:auto;
  width:clamp(76px,38%,140px);height:auto;max-height:none;aspect-ratio:1/1;
  opacity:.18;transform:none;
}


/* ===== Espacement entre sections (accueil) =====
   #communaute porte les classes « apps bonus » : elle cumulait .bonus{margin-top:3/4rem}
   + padding-top de .apps + padding-bottom de #applications (≈ 8rem au lieu de 2rem). */
#communaute.bonus{margin-top:0;padding-top:0;padding-bottom:0}
#applications{padding-bottom:2rem}


/* ===== Hero : slider « mises à jour » légèrement plus compact ===== */
.hero-grid{grid-template-columns:minmax(0,1fr) clamp(250px,36vw,450px)}
.updates{min-height:clamp(20.5rem,33vw,26rem)}
.up-head a{white-space:nowrap}
.up-head h2 .t-short{display:none}

/* Tablette portrait : titre court « Mises à jour » */
@media (min-width:701px) and (max-width:1180px) and (orientation:portrait){
  .up-head h2 .t-full{display:none}
  .up-head h2 .t-short{display:inline}
}


/* ===== Bouton « Retour à l'accueil » + page Mises à jour ===== */
.mj-back{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:1.4rem;padding:.45rem .9rem;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-size:.95rem;font-weight:500;transition:border-color .15s,color .15s}
.mj-back:hover{border-color:var(--accent);color:var(--accent)}
.legal-inner > .mj-back{margin-bottom:1.8rem}

.mj-hero{padding:clamp(2rem,6vw,4rem) clamp(1rem,5vw,4rem) 1rem}
.mj-hero h1{font-size:clamp(2.2rem,5.5vw,4rem);line-height:1.05;font-weight:800;letter-spacing:-.03em;margin:0 0 1rem}
.mj-hero .lead{margin:0;max-width:40rem;color:var(--muted);font-size:1.15rem}

.mj-list{display:grid;gap:1.2rem;padding:1rem clamp(1rem,5vw,4rem) 4rem;max-width:62rem}
.mj-item{padding:1.5rem 1.6rem;background:var(--surface);border:1px solid var(--line);border-radius:16px;scroll-margin-top:1.5rem}
.mj-item:target{border-color:var(--accent)}
.mj-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin-bottom:.8rem}
.mj-type{padding:.2rem .65rem;border-radius:99px;background:var(--accent);color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.02em}
@media(prefers-color-scheme:dark){.mj-type{color:#17141F}}
.mj-date{color:var(--muted);font-size:.9rem}
.mj-status{display:inline-flex;align-items:center;gap:.4rem;margin-left:auto;color:var(--muted);font-size:.85rem;font-weight:500}
.mj-status i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.mj-status[data-status="done"] i,.mj-status[data-status="released"] i,.mj-status[data-status="available"] i{background:#28A566}
.mj-status[data-status="progress"] i,.mj-status[data-status="in-progress"] i,.mj-status[data-status="wip"] i{background:#E88A1A}
.mj-status[data-status="planned"] i,.mj-status[data-status="soon"] i{background:#3F78E0}
.mj-item h2{font-size:clamp(1.25rem,2.5vw,1.6rem);font-weight:700;margin:0 0 .9rem}
.mj-points{display:grid;gap:.6rem;margin:0;padding:0}
.mj-points li{position:relative;display:flex;flex-direction:column;gap:.1rem;padding-left:1.3rem}
.mj-points li::before{content:'';position:absolute;left:.2rem;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.mj-points strong{font-weight:600}
.mj-points span{color:var(--muted)}
.mj-note{margin:1rem 0 0;padding:.7rem .9rem;border-left:3px solid var(--accent);background:var(--bg);border-radius:0 8px 8px 0;color:var(--muted);font-size:.95rem}
@media(max-width:560px){.mj-status{margin-left:0}}

/* Le bouton retour ne doit pas hériter du style des liens de .legal (bleu + souligné) */
.legal a.mj-back{color:var(--ink);text-decoration:none}
.legal a.mj-back:hover{color:var(--accent);text-decoration:none}


/* ===== Barre de progression de lecture + bouton « haut de page » ===== */
.read-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:1000;pointer-events:none;background:transparent}
.read-progress span{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center;will-change:transform}
.to-top{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:900;display:grid;place-items:center;width:3rem;height:3rem;padding:0;border:0;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(31,27,46,.28);opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s,filter .15s}
.to-top[hidden]{display:none}
.to-top.on{opacity:1;transform:none}
.to-top:hover{filter:brightness(1.1)}
.to-top svg{width:22px;height:22px}
@media(prefers-color-scheme:dark){.to-top{color:#17141F}}
@media(prefers-reduced-motion:reduce){.to-top{transition:none}}

/* ===== Barre de couleur de l'index, sous le bouton retour (connexion / inscription) ===== */
.auth-inner > .auth-card > h1::before {
    content: "";
    display: block;
    height: 8px;
    margin-bottom: 20px;
    border-radius: 99px;
    background: linear-gradient(90deg,
        #139a85 0 14.285%,
        #e8446c 14.285% 28.571%,
        #e8891a 28.571% 42.857%,
        #3d78e0 42.857% 57.142%,
        #7a5af5 57.142% 71.428%,
        #a64bcf 71.428% 85.714%,
        #6fa31a 85.714% 100%);
}


/* ===== Mode Grille : les cartes « applications » ont le même effet que les cartes bonus =====
   Dégradé sombre en bas de carte, texte blanc avec ombre portée, dessin SVG en filigrane blanc. */
#grid[data-view=grid] .card{color:#fff;background:var(--c)}
#grid[data-view=grid] .card .ic{color:#fff}
#grid[data-view=grid] .card .wm{z-index:-2;color:#fff;opacity:.22}
#grid[data-view=grid] .card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,8,20,.55) 0%,rgba(10,8,20,.3) 55%,rgba(10,8,20,0) 100%)}
#grid[data-view=grid] .txt strong,#grid[data-view=grid] .txt span{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.65)}
#grid[data-view=grid] .txt span{opacity:.95;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}