*{box-sizing:border-box}html{font-family:var(--app-font-family,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);color:#18202a;background:#f6f4ee}body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 0%,rgba(255,225,92,.18),transparent 30rem),#f7f6f1}.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(24,32,42,.08);background:rgba(255,255,255,.86);backdrop-filter:blur(16px)}.site-header-inner,.site-footer-inner{width:min(1180px,calc(100% - 36px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}.site-header-inner{min-height:78px}.brand{display:flex;align-items:center;gap:12px;color:#18202a;text-decoration:none;font-size:1.28rem;font-weight:650;letter-spacing:-.035em}.brand strong{font-weight:850}.brand-pin{position:relative;width:22px;height:22px;border-radius:50%;background:#e7372f;box-shadow:0 5px 0 #9d201c}.brand-pin:after{content:"";position:absolute;left:9px;top:18px;width:4px;height:12px;background:#c6cad1;transform:rotate(35deg);border-radius:3px}.header-actions{display:flex;align-items:center;gap:10px}.hello{margin-right:4px;color:#67717e;font-size:.92rem}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 18px;border:0;border-radius:12px;text-decoration:none;font:inherit;font-weight:760;cursor:pointer;transition:.18s ease}.button:hover{transform:translateY(-1px)}.button-dark{background:#18202a;color:#fff;box-shadow:0 7px 20px rgba(24,32,42,.16)}.button-ghost{background:#fff;color:#28313d;border:1px solid #dfe3e7}.button-primary{min-height:54px;background:linear-gradient(135deg,#f2c94c,#f5b82e);color:#28230f;box-shadow:0 12px 25px rgba(225,165,19,.25)}.button-full{width:100%}.inline-form{margin:0}.site-main{width:min(1180px,calc(100% - 36px));margin:0 auto;min-height:calc(100vh - 158px)}.flash{max-width:760px;margin:24px auto 0;padding:14px 18px;border-radius:12px;font-weight:650}.flash-success{background:#e8f7ed;color:#1e6940;border:1px solid #bfe5cc}.flash-error{background:#fff0ee;color:#a33329;border:1px solid #f2c8c3}.auth-shell{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.72fr);align-items:center;gap:clamp(42px,7vw,100px);padding:70px 0 86px}.auth-intro{padding:30px 0}.eyebrow{margin:0 0 14px;color:#6a7280;font-size:.78rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase}.auth-intro h1,.dashboard-placeholder h1{margin:0;color:#17202a;font-size:clamp(2.8rem,6vw,5.3rem);line-height:.98;letter-spacing:-.065em}.auth-intro>p:not(.eyebrow),.dashboard-placeholder>div>p:last-child{max-width:650px;margin:25px 0 0;color:#5f6976;font-size:1.08rem;line-height:1.78}.auth-card{position:relative;padding:38px;border:1px solid rgba(24,32,42,.09);border-radius:26px;background:rgba(255,255,255,.94);box-shadow:0 28px 70px rgba(41,47,55,.12)}.auth-card:before{content:"";position:absolute;left:34px;right:34px;top:-9px;height:18px;border-radius:50%;background:rgba(24,32,42,.07);filter:blur(10px);z-index:-1}.auth-card h2{margin:0;font-size:2.15rem;letter-spacing:-.045em}.auth-subtitle{margin:10px 0 27px;color:#707985;line-height:1.6}.auth-form{display:grid;gap:18px}.auth-form label:not(.check-row){display:grid;gap:8px}.auth-form label>span{font-size:.9rem;font-weight:760}.auth-form input[type=text],.auth-form input[type=email],.auth-form input[type=password]{width:100%;height:52px;padding:0 15px;border:1px solid #d8dde2;border-radius:12px;background:#fff;color:#18202a;font:inherit;outline:none;transition:.18s ease}.auth-form input:focus{border-color:#dfac1e;box-shadow:0 0 0 4px rgba(242,201,76,.2)}.check-row{display:flex;align-items:center;gap:10px;color:#606a76;font-size:.9rem}.check-row input{width:18px;height:18px;accent-color:#dba919}.form-alert{margin-bottom:20px;padding:13px 15px;border:1px solid #efc5c0;border-radius:12px;background:#fff0ee;color:#9d3128;line-height:1.45}.auth-bottom{display:flex;justify-content:center;gap:7px;margin-top:24px;padding-top:22px;border-top:1px solid #edf0f2;color:#747d88;font-size:.92rem}.auth-bottom a{color:#18202a;font-weight:800}.mini-notes{position:relative;height:160px;margin-top:42px}.mini-note{position:absolute;display:grid;place-items:center;width:145px;height:110px;border-radius:4px;font-weight:850;box-shadow:0 15px 26px rgba(27,33,40,.13)}.mini-note:before{content:"";position:absolute;top:-10px;width:22px;height:22px;border-radius:50%;background:#e83730;box-shadow:0 5px 0 #8f211e}.mini-note-yellow{left:3%;top:12px;background:#fff59a;transform:rotate(-6deg)}.mini-note-blue{left:29%;top:28px;background:#cce7ff;transform:rotate(4deg)}.mini-note-pink{left:55%;top:5px;background:#ffd5df;transform:rotate(-2deg)}.feature-list{display:grid;gap:11px;margin:30px 0 0;padding:0;list-style:none;color:#4f5966}.feature-list li{position:relative;padding-left:30px}.feature-list li:before{content:"✓";position:absolute;left:0;top:-2px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#f4d45f;color:#3c3414;font-size:.75rem;font-weight:900}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.site-footer{padding:28px 0;border-top:1px solid rgba(24,32,42,.08);background:rgba(255,255,255,.62);color:#737c87;font-size:.86rem}.site-footer p{margin:0}.site-footer nav{display:flex;flex-wrap:wrap;gap:18px}.site-footer a{color:#59636f;text-decoration:none}.dashboard-placeholder{padding:80px 0}.dashboard-placeholder h1{max-width:850px;font-size:clamp(2.8rem,5vw,4.7rem)}.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:18px;margin-top:42px}.stats-grid article{display:grid;padding:25px;border:1px solid #e2e2dc;border-radius:20px;background:#fff;box-shadow:0 15px 35px rgba(34,40,46,.07)}.stats-grid strong{font-size:2.5rem;letter-spacing:-.05em}.stats-grid span{color:#747d88}.next-step-card{display:flex;align-items:flex-start;gap:14px;max-width:650px;margin-top:35px;padding:22px;border-radius:18px;background:#fff4b8;border:1px solid #ead16a}.next-step-card p{margin:5px 0 0;color:#665d32}.status-dot{flex:0 0 12px;width:12px;height:12px;margin-top:5px;border-radius:50%;background:#43a36c;box-shadow:0 0 0 5px rgba(67,163,108,.14)}@media(max-width:850px){.auth-shell{grid-template-columns:1fr;padding:45px 0 70px}.auth-intro{text-align:center}.auth-intro>p:not(.eyebrow){margin-left:auto;margin-right:auto}.mini-notes{display:none}.feature-list{max-width:420px;margin-left:auto;margin-right:auto;text-align:left}.hello{display:none}}@media(max-width:620px){.site-header-inner,.site-footer-inner,.site-main{width:min(100% - 24px,1180px)}.site-header-inner{min-height:68px}.header-actions .button-ghost{display:none}.button{padding:0 14px}.auth-card{padding:26px 20px;border-radius:20px}.auth-intro h1{font-size:2.9rem}.form-grid{grid-template-columns:1fr}.site-footer-inner{align-items:flex-start;flex-direction:column}.stats-grid{grid-template-columns:1fr}.auth-bottom{flex-direction:column;align-items:center}}
/* =========================================================
ÉTAPE 2 — GESTIONNAIRE DE NOTES
========================================================= */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
button:disabled{cursor:not-allowed;opacity:.52;transform:none!important}
.notes-dashboard{display:grid;grid-template-columns:270px minmax(0,1fr);gap:34px;padding:42px 0 76px}
.notes-sidebar{position:sticky;top:108px;align-self:start;padding:22px;border:1px solid rgba(24,32,42,.09);border-radius:24px;background:rgba(255,255,255,.82);box-shadow:0 18px 45px rgba(34,40,46,.07)}
.sidebar-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.sidebar-heading .eyebrow{margin-bottom:5px}
.sidebar-heading h2{margin:0;font-size:1.3rem;letter-spacing:-.035em}
.icon-button{display:grid;place-items:center;width:39px;height:39px;padding:0;border:0;border-radius:12px;background:#18202a;color:#fff;font:inherit;font-size:1.5rem;cursor:pointer}
.category-navigation{display:grid;gap:5px}
.category-row{position:relative;display:flex;align-items:center}
.category-link{display:flex;align-items:center;gap:10px;min-width:0;flex:1;padding:11px 12px;border-radius:12px;color:#4b5663;text-decoration:none;font-size:.92rem;font-weight:700;transition:.16s ease}
.category-link span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-link strong{margin-left:auto;color:#8a929b;font-size:.78rem}
.category-link:hover,.category-link.is-active{background:#fff3aa;color:#29230d}
.category-link.is-active{box-shadow:inset 0 0 0 1px #ead16a}
.category-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:#f1c743;box-shadow:0 0 0 4px rgba(241,199,67,.16)}
.category-dot-all{background:#697584;box-shadow:0 0 0 4px rgba(105,117,132,.13)}
.category-delete{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;padding:0;border:0;border-radius:9px;background:transparent;color:#a0a7af;font-size:1.2rem;cursor:pointer;opacity:0;transition:.16s ease}
.category-row:hover .category-delete,.category-delete:focus{opacity:1}
.category-delete:hover{background:#fff0ee;color:#ae3429}
.sidebar-empty{margin-top:14px;padding:17px;border-radius:14px;background:#f4f2eb;color:#68717c;font-size:.86rem}
.sidebar-empty p{margin:5px 0 0;line-height:1.5}
.sidebar-tip{display:flex;align-items:flex-start;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid #ecece7;color:#7a838d;font-size:.82rem;line-height:1.5}
.sidebar-tip span{color:#d7a91e}
.sidebar-tip p{margin:0}
.notes-main{min-width:0}
.notes-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:28px}
.notes-toolbar .eyebrow{margin-bottom:8px}
.notes-toolbar h1{margin:0;color:#17202a;font-size:clamp(2.25rem,4vw,4rem);line-height:1;letter-spacing:-.06em}
.notes-toolbar>div:first-child>p:last-child{margin:11px 0 0;color:#747d88}
.toolbar-actions{display:flex;align-items:center;gap:12px}
.notes-search{display:flex;align-items:center;width:min(280px,29vw);height:48px;border:1px solid #dfe2e4;border-radius:14px;background:#fff;overflow:hidden}
.notes-search input{min-width:0;flex:1;height:100%;padding:0 0 0 15px;border:0;outline:0;background:transparent;font:inherit}
.notes-search button{width:45px;height:100%;border:0;background:transparent;color:#68727d;font-size:1.35rem;cursor:pointer}
.new-note-button{min-height:48px}
.active-search{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-10px 0 22px;padding:12px 15px;border:1px solid #e8d77e;border-radius:13px;background:#fff8cf;color:#625a31;font-size:.9rem}
.active-search a{color:#2d3540;font-weight:800}
.notes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.note-card{position:relative;min-height:255px;padding:26px 22px 18px;border:1px solid rgba(91,83,33,.13);border-radius:7px;background:var(--note-color);box-shadow:0 16px 28px rgba(36,41,47,.10);transform:rotate(-.35deg);cursor:grab;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}
.note-card:nth-child(3n+2){transform:rotate(.35deg)}
.note-card:nth-child(3n){transform:rotate(-.15deg)}
.note-card:hover{transform:translateY(-4px) rotate(0);box-shadow:0 22px 38px rgba(36,41,47,.14);z-index:2}
.note-card.is-dragging{opacity:.42;transform:scale(.98) rotate(0)}
.note-pin{position:absolute;left:50%;top:-11px;width:23px;height:23px;border-radius:50%;background:#df312a;box-shadow:0 6px 0 #91201c,0 8px 15px rgba(80,22,20,.25);transform:translateX(-50%)}
.note-pin:after{content:"";position:absolute;left:10px;top:18px;width:4px;height:13px;border-radius:3px;background:#b7bdc6;transform:rotate(28deg)}
.note-card-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.note-category{display:inline-flex;max-width:75%;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.5);color:#58533c;font-size:.72rem;font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-menu-button{width:34px;height:30px;padding:0;border:0;border-radius:9px;background:rgba(255,255,255,.38);color:#595747;font-weight:900;cursor:pointer}
.note-menu{position:absolute;right:0;top:34px;z-index:10;display:grid;min-width:130px;padding:6px;border:1px solid rgba(24,32,42,.1);border-radius:12px;background:#fff;box-shadow:0 16px 30px rgba(32,38,45,.18)}
.note-menu[hidden]{display:none}
.note-menu button{padding:9px 10px;border:0;border-radius:8px;background:transparent;text-align:left;font:inherit;font-size:.84rem;font-weight:700;cursor:pointer}
.note-menu button:hover{background:#f2f3f4}
.note-menu button.danger{color:#b4372c}
.note-content{color:#312f25;font-size:.97rem;line-height:1.62;overflow-wrap:anywhere}
.note-card-footer{display:flex;align-items:center;gap:5px;margin-top:24px;padding-top:12px;border-top:1px dashed rgba(78,72,40,.22);color:rgba(66,63,45,.55);font-size:.73rem;font-weight:750}
.drag-hint{font-size:1rem;letter-spacing:-4px}
.notes-empty{display:grid;justify-items:center;padding:70px 30px;border:1px dashed #d7d7d0;border-radius:26px;background:rgba(255,255,255,.55);text-align:center}
.notes-empty h2{max-width:620px;margin:0;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.045em}
.notes-empty>p:not(.eyebrow){max-width:520px;margin:14px 0 25px;color:#6f7883;line-height:1.65}
.empty-note-illustration{position:relative;width:105px;height:78px;margin-bottom:28px;border-radius:4px;background:#fff49b;box-shadow:0 12px 24px rgba(33,39,45,.11);transform:rotate(-5deg)}
.empty-note-illustration span{position:absolute;left:50%;top:-11px;width:22px;height:22px;border-radius:50%;background:#df312a;box-shadow:0 6px 0 #91201c;transform:translateX(-50%)}
.app-modal{width:100%;max-width:none;height:100%;max-height:none;padding:0;border:0;background:transparent}
.app-modal::backdrop{background:rgba(19,24,30,.55);backdrop-filter:blur(6px)}
.modal-backdrop{position:fixed;inset:0}
.modal-backdrop button{width:100%;height:100%;border:0;background:transparent}
.modal-card{position:relative;z-index:2;width:min(680px,calc(100% - 28px));margin:6vh auto;padding:31px;border:1px solid rgba(24,32,42,.1);border-radius:25px;background:#fff;box-shadow:0 35px 90px rgba(16,21,27,.28)}
.modal-card-small{width:min(500px,calc(100% - 28px))}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:25px}
.modal-header .eyebrow{margin-bottom:6px}
.modal-header h2{margin:0;font-size:2rem;letter-spacing:-.045em}
.modal-close{width:40px;height:40px;padding:0;border:0;border-radius:12px;background:#f1f2f3;color:#5d6671;font-size:1.45rem;cursor:pointer}
.note-form{display:grid;gap:20px}
.note-form label:not(.color-option){display:grid;gap:8px}
.note-form label>span,.color-fieldset legend{color:#38424e;font-size:.88rem;font-weight:800}
.note-form textarea,.note-form select,.note-form input[type=text]{width:100%;padding:14px;border:1px solid #d8dde2;border-radius:13px;background:#fff;color:#18202a;font:inherit;outline:none}
.note-form textarea{resize:vertical;line-height:1.55}
.note-form textarea:focus,.note-form select:focus,.note-form input:focus{border-color:#dfac1e;box-shadow:0 0 0 4px rgba(242,201,76,.2)}
.note-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.85fr);gap:18px}
.color-fieldset{margin:0;padding:0;border:0}
.color-options{display:flex;flex-wrap:wrap;gap:9px;margin-top:9px}
.color-option{display:block;cursor:pointer}
.color-option input{position:absolute;opacity:0;pointer-events:none}
.color-option span{display:block;width:33px;height:33px;border:3px solid #fff;border-radius:50%;background:var(--choice-color);box-shadow:0 0 0 1px #d9dde0;transition:.15s ease}
.color-option input:checked+span{box-shadow:0 0 0 3px #18202a;transform:scale(.9)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px;padding-top:20px;border-top:1px solid #eceff1}
@media(max-width:1050px){.notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.notes-toolbar{align-items:flex-start;flex-direction:column}.toolbar-actions{width:100%}.notes-search{width:auto;flex:1}}
@media(max-width:780px){.notes-dashboard{grid-template-columns:1fr;padding-top:24px}.notes-sidebar{position:static}.category-navigation{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar-tip{display:none}.notes-toolbar{margin-top:4px}.category-delete{opacity:1}}
@media(max-width:590px){.notes-grid{grid-template-columns:1fr}.toolbar-actions{align-items:stretch;flex-direction:column}.notes-search{width:100%}.new-note-button{width:100%}.category-navigation{grid-template-columns:1fr}.note-form-grid{grid-template-columns:1fr}.modal-card{margin:2vh auto;padding:24px 19px;max-height:96vh;overflow:auto}.modal-actions{flex-direction:column-reverse}.modal-actions .button{width:100%}.note-card{min-height:220px}.notes-toolbar h1{font-size:2.45rem}}
/* =========================================================
ÉTAPE 3 — DICTÉE VOCALE
========================================================= */
.note-editor-field {
display: grid;
gap: 9px;
}
.note-editor-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.note-editor-heading > label {
color: #38424e;
font-size: .88rem;
font-weight: 800;
}
.voice-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 38px;
padding: 8px 13px;
border: 1px solid #d7dce1;
border-radius: 12px;
background: #f7f8f9;
color: #313b46;
font: inherit;
font-size: .84rem;
font-weight: 800;
cursor: pointer;
transition:
border-color .16s ease,
background .16s ease,
color .16s ease,
transform .16s ease,
box-shadow .16s ease;
}
.voice-button:hover:not(:disabled) {
border-color: #bdc6cf;
background: #ffffff;
transform: translateY(-1px);
box-shadow: 0 7px 18px rgba(28, 35, 43, .08);
}
.voice-button:focus-visible {
outline: 3px solid rgba(223, 49, 42, .17);
outline-offset: 3px;
}
.voice-button:disabled {
opacity: .45;
}
.voice-button-icon {
position: relative;
display: grid;
place-items: center;
width: 19px;
height: 19px;
border: 2px solid currentColor;
border-radius: 10px;
color: #5f6a75;
font-size: 0;
}
.voice-button-icon::before {
content: "";
width: 5px;
height: 9px;
border-radius: 4px;
background: currentColor;
}
.voice-button-icon::after {
content: "";
position: absolute;
left: 50%;
bottom: -6px;
width: 9px;
height: 5px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
border-left: 2px solid currentColor;
border-radius: 0 0 8px 8px;
transform: translateX(-50%);
}
.voice-button.is-recording {
border-color: #e04c44;
background: #fff0ef;
color: #b92721;
box-shadow: 0 0 0 4px rgba(224, 76, 68, .11);
}
.voice-button.is-recording .voice-button-icon {
animation: voice-pulse 1.25s ease-in-out infinite;
}
.voice-panel {
display: flex;
align-items: flex-start;
gap: 13px;
padding: 13px 14px;
border: 1px solid #e0e4e8;
border-radius: 14px;
background: #f7f8f9;
}
.voice-panel[hidden] {
display: none;
}
.voice-panel.is-recording {
border-color: #f0c7c3;
background: #fff5f4;
}
.voice-panel strong {
display: block;
color: #303a45;
font-size: .88rem;
}
.voice-panel p {
margin: 4px 0 0;
color: #6c7681;
font-size: .82rem;
line-height: 1.45;
}
.voice-live-indicator {
display: flex;
align-items: center;
gap: 3px;
flex: 0 0 auto;
min-width: 26px;
height: 24px;
}
.voice-live-indicator span {
display: block;
width: 4px;
height: 8px;
border-radius: 999px;
background: #b8c0c8;
}
.voice-panel.is-recording .voice-live-indicator span {
background: #d93d35;
animation: voice-wave .85s ease-in-out infinite;
}
.voice-panel.is-recording .voice-live-indicator span:nth-child(2) {
animation-delay: .12s;
}
.voice-panel.is-recording .voice-live-indicator span:nth-child(3) {
animation-delay: .24s;
}
.voice-help {
margin: 0;
color: #858e98;
font-size: .74rem;
line-height: 1.45;
}
@keyframes voice-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.12);
}
}
@keyframes voice-wave {
0%, 100% {
height: 7px;
}
50% {
height: 20px;
}
}
@media (max-width: 520px) {
.note-editor-heading {
align-items: stretch;
flex-direction: column;
}
.voice-button {
width: 100%;
}
}
/* =========================================================
ÉTAPE 4 — AUTOSAUVEGARDE ET VOCAUX CONSERVÉS
========================================================= */
.autosave-line {
display: flex;
justify-content: flex-end;
min-height: 22px;
margin-top: -9px;
}
.autosave-status {
display: inline-flex;
align-items: center;
gap: 7px;
color: #77818c;
font-size: .76rem;
font-weight: 750;
}
.autosave-status::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #b6bdc5;
}
.autosave-status[data-state="pending"]::before {
background: #d9a91d;
}
.autosave-status[data-state="saving"]::before {
background: #3979d8;
animation: autosave-pulse 1s ease-in-out infinite;
}
.autosave-status[data-state="saved"] {
color: #44745a;
}
.autosave-status[data-state="saved"]::before {
background: #4f9a6a;
}
.autosave-status[data-state="error"] {
color: #b23930;
}
.autosave-status[data-state="error"]::before {
background: #d5473d;
}
.voice-library {
padding: 15px;
border: 1px solid #e1e5e8;
border-radius: 15px;
background: #f8f9fa;
}
.voice-library[hidden] {
display: none;
}
.voice-library-heading strong {
display: block;
color: #303a45;
font-size: .9rem;
}
.voice-library-heading p {
margin: 3px 0 0;
color: #7b858f;
font-size: .76rem;
}
.voice-library-list {
display: grid;
gap: 10px;
margin-top: 12px;
}
.voice-library-item {
padding: 10px;
border: 1px solid #dde2e6;
border-radius: 12px;
background: #ffffff;
}
.voice-library-item audio,
.note-audio-item audio {
display: block;
width: 100%;
height: 38px;
}
.voice-library-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 7px;
color: #7d8791;
font-size: .72rem;
}
.voice-delete-button {
padding: 4px 7px;
border: 0;
border-radius: 7px;
background: #fff0ee;
color: #ae352c;
font: inherit;
font-size: .7rem;
font-weight: 800;
cursor: pointer;
}
.note-audios {
display: grid;
gap: 8px;
margin-top: 18px;
padding-top: 13px;
border-top: 1px dashed rgba(78, 72, 40, .22);
}
.note-audio-item {
padding: 6px;
border-radius: 10px;
background: rgba(255, 255, 255, .42);
}
@keyframes autosave-pulse {
0%, 100% {
opacity: .35;
transform: scale(.85);
}
50% {
opacity: 1;
transform: scale(1.15);
}
}
/* =========================================================
ÉTAPE 5 — RENOMMAGE ET ÉDITION RAPIDE
========================================================= */
.category-rename {
display: grid;
place-items: center;
flex: 0 0 30px;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 9px;
background: transparent;
color: #a0a7af;
font-size: .95rem;
cursor: pointer;
opacity: 0;
transition: .16s ease;
}
.category-row:hover .category-rename,
.category-rename:focus {
opacity: 1;
}
.category-rename:hover {
background: #eef3ff;
color: #315fad;
}
.note-card::after {
content: "Double-cliquez pour modifier";
position: absolute;
right: 13px;
bottom: 12px;
color: rgba(66, 63, 45, .42);
font-size: .66rem;
font-weight: 750;
opacity: 0;
pointer-events: none;
transition: opacity .16s ease;
}
.note-card:hover::after {
opacity: 1;
}
@media (max-width: 780px) {
.category-rename {
opacity: 1;
}
.note-card::after {
display: none;
}
}
/* =========================================================
ÉTAPE 6 — REPÉRAGE DES NOTES AVEC VOCAUX
========================================================= */
.category-audio-icon {
display: grid;
place-items: center;
flex: 0 0 20px;
width: 20px;
height: 20px;
border-radius: 7px;
background: #fff0ef;
color: #bd3d35;
font-size: .68rem;
box-shadow: inset 0 0 0 1px rgba(189, 61, 53, .15);
}
.category-link-audio.is-active {
background: #fff0ef;
color: #7d2d27;
box-shadow: inset 0 0 0 1px #ecc2be;
}
.button-audio-filter {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 0 16px;
border: 1px solid #d9dde1;
border-radius: 14px;
background: #ffffff;
color: #3f4954;
text-decoration: none;
font-size: .88rem;
font-weight: 800;
transition:
border-color .16s ease,
background .16s ease,
color .16s ease,
transform .16s ease;
}
.button-audio-filter:hover {
transform: translateY(-1px);
border-color: #efc7c3;
background: #fff7f6;
color: #8f332c;
}
.button-audio-filter.is-active {
border-color: #e8b5b0;
background: #fff0ef;
color: #9b342d;
box-shadow: 0 0 0 4px rgba(211, 72, 62, .08);
}
.button-audio-filter-icon {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 8px;
background: #ffe0dd;
color: #c53e35;
font-size: .72rem;
}
.note-card-labels {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
max-width: 78%;
}
.note-card-labels .note-category {
min-width: 0;
max-width: none;
}
.note-audio-badge {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
padding: 5px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, .66);
color: #a7342d;
font-size: .68rem;
font-weight: 900;
box-shadow: inset 0 0 0 1px rgba(167, 52, 45, .13);
}
.note-audio-badge span {
font-size: .58rem;
}
@media (max-width: 590px) {
.button-audio-filter {
width: 100%;
}
}
/* =========================================================
ÉTAPE 7 — DURÉE DES VOCAUX
========================================================= */
.note-audio-badge small {
margin-left: 2px;
font-size: .62rem;
font-weight: 900;
opacity: .78;
}
.note-audio-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 5px;
padding: 0 3px;
color: rgba(63, 61, 47, .66);
font-size: .67rem;
font-weight: 750;
}
@media (max-width: 420px) {
.note-audio-meta {
align-items: flex-start;
flex-direction: column;
gap: 2px;
}
}
/* =========================================================
ÉTAPE 8 — FAVORIS ET NOTES ÉPINGLÉES
========================================================= */
.category-special-icon {
display: grid;
place-items: center;
flex: 0 0 20px;
width: 20px;
height: 20px;
border-radius: 7px;
background: #f4f0ff;
color: #6e52a8;
font-size: .68rem;
box-shadow: inset 0 0 0 1px rgba(110, 82, 168, .14);
}
.category-link-favorite.is-active {
background: #fff8d9;
color: #735e10;
box-shadow: inset 0 0 0 1px #ead579;
}
.category-link-pinned.is-active {
background: #f4f0ff;
color: #5e468d;
box-shadow: inset 0 0 0 1px #d8cbf2;
}
.note-card-header {
gap: 8px;
}
.note-card-labels {
flex: 1 1 auto;
}
.note-quick-actions {
display: flex;
align-items: center;
gap: 5px;
margin-left: auto;
}
.note-flag-button {
display: grid;
place-items: center;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 9px;
background: rgba(255, 255, 255, .38);
color: rgba(73, 70, 52, .52);
font: inherit;
font-size: .88rem;
cursor: pointer;
transition:
background .16s ease,
color .16s ease,
transform .16s ease,
box-shadow .16s ease;
}
.note-flag-button:hover {
background: rgba(255, 255, 255, .72);
transform: translateY(-1px);
}
.note-favorite-button.is-active {
background: #fff5bf;
color: #bc8d00;
box-shadow: inset 0 0 0 1px rgba(188, 141, 0, .18);
}
.note-pin-button.is-active {
background: #eee5ff;
color: #6747a4;
box-shadow: inset 0 0 0 1px rgba(103, 71, 164, .17);
}
.note-card[data-note-pinned="1"] {
box-shadow:
0 0 0 2px rgba(103, 71, 164, .23),
0 18px 34px rgba(36, 41, 47, .13);
}
@media (max-width: 590px) {
.note-quick-actions {
gap: 3px;
}
.note-flag-button {
width: 28px;
height: 28px;
}
}
/* =========================================================
ÉTAPE 9 — ARCHIVES ET CORBEILLE
========================================================= */
.category-status-icon {
display: grid;
place-items: center;
flex: 0 0 20px;
width: 20px;
height: 20px;
border-radius: 7px;
background: #eef1f4;
color: #66717c;
font-size: .72rem;
font-weight: 900;
box-shadow: inset 0 0 0 1px rgba(102, 113, 124, .13);
}
.category-link-archive.is-active {
background: #eef5ff;
color: #365f94;
box-shadow: inset 0 0 0 1px #c8d9ee;
}
.category-link-trash.is-active {
background: #fff0ee;
color: #8f342c;
box-shadow: inset 0 0 0 1px #ecc4bf;
}
.note-card.is-archived {
filter: saturate(.72);
}
.note-card.is-archived::before {
content: "Archivée";
position: absolute;
left: 18px;
top: -12px;
z-index: 3;
padding: 5px 9px;
border-radius: 999px;
background: #dfeeff;
color: #3d628c;
font-size: .68rem;
font-weight: 900;
box-shadow: 0 5px 14px rgba(45, 77, 112, .14);
}
.note-card.is-trashed {
filter: grayscale(.42) saturate(.55);
opacity: .82;
}
.note-card.is-trashed::before {
content: "Corbeille";
position: absolute;
left: 18px;
top: -12px;
z-index: 3;
padding: 5px 9px;
border-radius: 999px;
background: #ffe3df;
color: #9a3a31;
font-size: .68rem;
font-weight: 900;
box-shadow: 0 5px 14px rgba(112, 45, 38, .13);
}
.button-danger {
min-height: 48px;
padding: 0 16px;
border: 1px solid #dfb8b3;
border-radius: 14px;
background: #fff0ee;
color: #9d342c;
font: inherit;
font-size: .88rem;
font-weight: 850;
cursor: pointer;
}
.button-danger:hover {
background: #ffe3df;
}
/* =========================================================
ÉTAPE 10 — RECHERCHE INSTANTANÉE ET TRI
========================================================= */
.sort-form {
flex: 0 0 auto;
}
.sort-form select {
min-height: 48px;
padding: 0 38px 0 14px;
border: 1px solid #d9dde1;
border-radius: 14px;
background:
linear-gradient(45deg, transparent 50%, #69737d 50%)
calc(100% - 17px) 20px / 6px 6px no-repeat,
linear-gradient(135deg, #69737d 50%, transparent 50%)
calc(100% - 11px) 20px / 6px 6px no-repeat,
#ffffff;
color: #3e4853;
font: inherit;
font-size: .86rem;
font-weight: 800;
appearance: none;
cursor: pointer;
}
.sort-form select:focus {
outline: none;
border-color: #d5a522;
box-shadow: 0 0 0 4px rgba(213, 165, 34, .13);
}
.note-card[hidden] {
display: none;
}
.live-search-empty {
display: grid;
justify-items: center;
margin-top: 22px;
padding: 52px 24px;
border: 1px dashed #d8d9d4;
border-radius: 22px;
background: rgba(255, 255, 255, .55);
text-align: center;
}
.live-search-empty[hidden] {
display: none;
}
.live-search-empty h2 {
margin: 0;
font-size: 1.8rem;
letter-spacing: -.04em;
}
.live-search-empty > p:last-child {
margin: 10px 0 0;
color: #75808b;
}
@media (max-width: 1050px) {
.sort-form {
flex: 1 1 180px;
}
.sort-form select {
width: 100%;
}
}
@media (max-width: 590px) {
.sort-form {
width: 100%;
}
}
/* =========================================================
ÉTAPE 11 — DATE DES NOTES
========================================================= */
.note-date-meta {
display: grid;
gap: 3px;
margin-top: 16px;
padding-top: 11px;
border-top: 1px dashed rgba(78, 72, 40, .18);
color: rgba(66, 63, 45, .58);
font-size: .68rem;
font-weight: 720;
line-height: 1.35;
}
.note-date-meta + .note-card-footer {
margin-top: 9px;
padding-top: 0;
border-top: 0;
}
/* =========================================================
ÉTAPE 12 — COMPTE ET SÉCURITÉ
========================================================= */
.account-shell {
padding: 48px 0 80px;
}
.account-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
margin-bottom: 28px;
}
.account-heading .eyebrow {
margin-bottom: 8px;
}
.account-heading h1 {
margin: 0;
color: #17202a;
font-size: clamp(2.5rem, 5vw, 4.5rem);
line-height: 1;
letter-spacing: -.06em;
}
.account-heading > div:first-child > p:last-child {
max-width: 650px;
margin: 13px 0 0;
color: #727c87;
line-height: 1.65;
}
.account-avatar {
display: grid;
place-items: center;
flex: 0 0 92px;
width: 92px;
height: 92px;
border-radius: 28px;
background: #fff0a7;
color: #3f3515;
font-size: 2.5rem;
font-weight: 950;
box-shadow:
inset 0 0 0 1px #e8cf68,
0 18px 36px rgba(38, 43, 49, .11);
transform: rotate(2deg);
}
.account-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 15px;
margin-bottom: 24px;
}
.account-stats article {
padding: 20px;
border: 1px solid #e1e4e7;
border-radius: 18px;
background: rgba(255, 255, 255, .78);
}
.account-stats strong {
display: block;
color: #202a35;
font-size: 1.55rem;
letter-spacing: -.04em;
}
.account-stats span {
display: block;
margin-top: 5px;
color: #7b858f;
font-size: .78rem;
font-weight: 750;
}
.account-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.account-card {
padding: 26px;
border: 1px solid #e0e4e7;
border-radius: 23px;
background: rgba(255, 255, 255, .9);
box-shadow: 0 18px 42px rgba(31, 37, 43, .065);
}
.account-card-wide {
grid-column: 1 / -1;
}
.account-card header {
margin-bottom: 22px;
}
.account-card header .eyebrow {
margin-bottom: 6px;
}
.account-card h2 {
margin: 0;
color: #202a34;
font-size: 1.6rem;
letter-spacing: -.04em;
}
.account-card header > p:last-child {
margin: 8px 0 0;
color: #78828c;
font-size: .88rem;
line-height: 1.55;
}
.account-form {
display: grid;
gap: 18px;
}
.account-form label:not(.check-row),
.account-delete-form label {
display: grid;
gap: 8px;
}
.account-form label > span,
.account-delete-form label > span {
color: #3b4651;
font-size: .84rem;
font-weight: 850;
}
.account-form input,
.account-delete-form input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #d7dde2;
border-radius: 13px;
background: #ffffff;
color: #202a34;
font: inherit;
outline: none;
}
.account-form input:focus,
.account-delete-form input:focus {
border-color: #daa71b;
box-shadow: 0 0 0 4px rgba(218, 167, 27, .13);
}
.account-form small {
color: #858e97;
font-size: .72rem;
line-height: 1.45;
}
.account-password-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px;
}
.account-check-row {
align-items: flex-start;
padding: 13px;
border-radius: 13px;
background: #f6f7f8;
}
.account-form-actions {
display: flex;
justify-content: flex-end;
padding-top: 4px;
}
.account-inline-action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
padding: 17px;
border: 1px solid #e1e5e8;
border-radius: 15px;
background: #f8f9fa;
}
.account-inline-action strong,
.account-inline-action span {
display: block;
}
.account-inline-action strong {
color: #2f3944;
font-size: .9rem;
}
.account-inline-action span {
margin-top: 4px;
color: #7a848e;
font-size: .78rem;
}
.account-danger-zone {
border-color: #ebc7c2;
background: #fffafa;
}
.account-danger-zone h2 {
color: #8f342c;
}
.account-delete-form {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
align-items: end;
gap: 14px;
}
.account-created {
margin: 24px 0 0;
color: #858e98;
font-size: .76rem;
text-align: center;
}
@media (max-width: 900px) {
.account-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.account-grid {
grid-template-columns: 1fr;
}
.account-card-wide {
grid-column: auto;
}
.account-delete-form {
grid-template-columns: 1fr;
}
}
/* =========================================================
NOTE-BLOC V43.51 — ESPACES COMMUNS PLUS CLAIRS
Navigation de section, création de dossier compacte et
hiérarchie visuelle renforcée sur ordinateur et mobile.
========================================================= */
.workspace-section-nav {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
padding: 8px;
border: 1px solid rgba(219, 164, 25, .2);
border-radius: 18px;
background: linear-gradient(135deg, rgba(255, 247, 215, .92), rgba(255, 255, 255, .78));
box-shadow: 0 8px 24px rgba(31, 42, 47, .05);
}
.workspace-section-nav a {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 0;
min-height: 46px;
padding: 8px 10px;
border-radius: 13px;
color: inherit;
text-align: center;
text-decoration: none;
transition: background .15s ease, transform .15s ease;
}
.workspace-section-nav a:hover,
.workspace-section-nav a:focus-visible {
background: rgba(255, 255, 255, .88);
transform: translateY(-1px);
}
.workspace-section-nav a > span {
display: grid;
place-items: center;
flex: 0 0 30px;
width: 30px;
height: 30px;
border-radius: 10px;
background: #f8c538;
color: #4c3700;
font-size: .9rem;
font-weight: 950;
}
.workspace-section-nav strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .78rem;
}
#workspace-overview,
#workspace-categories,
#workspace-members,
#workspace-activity,
#workspace-backup {
scroll-margin-top: 88px;
}
.workspace-category-create-disclosure {
margin: 14px 0 16px;
border: 1px solid rgba(219, 164, 25, .24);
border-radius: 14px;
background: rgba(255, 248, 218, .48);
overflow: hidden;
}
.workspace-category-create-disclosure > summary {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
min-height: 50px;
padding: 8px 11px;
cursor: pointer;
list-style: none;
}
.workspace-category-create-disclosure > summary::-webkit-details-marker { display: none; }
.workspace-category-create-disclosure > summary > span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 11px;
background: #f8c538;
color: #4c3700;
font-size: 1.05rem;
font-weight: 950;
}
.workspace-category-create-disclosure > summary > strong { font-size: .86rem; }
.workspace-category-create-disclosure > summary > small { color: var(--muted, #667085); font-size: .72rem; }
.workspace-category-create-disclosure[open] > summary { border-bottom: 1px solid rgba(219, 164, 25, .18); }
.workspace-category-create-disclosure .workspace-category-create-form { margin: 0; padding: 12px; }
.workspace-category-row {
border-left: 4px solid var(--workspace-category-color, #7EA3F4);
box-shadow: 0 4px 14px rgba(31, 42, 47, .035);
}
.workspace-category-links a,
.workspace-category-manage summary {
min-height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.workspace-member-row,
.workspace-activity-row {
transition: background .15s ease;
}
.workspace-member-row:hover,
.workspace-activity-row:hover { background: rgba(116, 128, 136, .075); }
.workspace-backup-export-card {
margin-top: 6px;
border-style: dashed;
background: linear-gradient(135deg, rgba(91, 141, 239, .045), var(--surface, #fff));
}
:root[data-theme="dark"] .workspace-section-nav {
border-color: rgba(244, 197, 62, .16);
background: linear-gradient(135deg, rgba(90, 72, 18, .3), rgba(255, 255, 255, .025));
}
:root[data-theme="dark"] .workspace-section-nav a:hover,
:root[data-theme="dark"] .workspace-section-nav a:focus-visible { background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .workspace-category-create-disclosure {
border-color: rgba(244, 197, 62, .16);
background: rgba(244, 197, 62, .045);
}
:root[data-theme="dark"] .workspace-backup-export-card {
background: linear-gradient(135deg, rgba(91, 141, 239, .07), #182126);
}
@media (max-width: 620px) {
.workspace-section-nav {
position: sticky;
top: max(6px, env(safe-area-inset-top));
z-index: 15;
gap: 4px;
padding: 5px;
border-radius: 15px;
backdrop-filter: blur(14px);
}
.workspace-section-nav a {
display: grid;
justify-items: center;
align-content: center;
gap: 3px;
min-height: 54px;
padding: 4px 2px;
}
.workspace-section-nav a > span {
width: 28px;
height: 28px;
flex-basis: 28px;
border-radius: 9px;
}
.workspace-section-nav strong {
width: 100%;
font-size: .61rem;
}
.workspace-category-create-disclosure > summary {
grid-template-columns: 34px minmax(0, 1fr);
}
.workspace-category-create-disclosure > summary > small { display: none; }
.workspace-category-create-disclosure .workspace-category-create-form { padding: 10px; }
.workspace-category-row {
gap: 8px !important;
padding: 11px 10px !important;
}
.workspace-category-links {
display: grid !important;
grid-template-columns: 1fr 1fr;
width: 100%;
}
.workspace-category-links a { min-height: 38px; }
.workspace-category-manage summary { width: 100%; min-height: 38px; }
.workspace-backup-export-card { margin-top: 12px; }
}
@media (max-width: 590px) {
.account-heading {
align-items: flex-start;
}
.account-avatar {
flex-basis: 64px;
width: 64px;
height: 64px;
border-radius: 20px;
font-size: 1.8rem;
}
.account-stats {
grid-template-columns: 1fr 1fr;
}
.account-password-grid {
grid-template-columns: 1fr;
}
.account-inline-action {
align-items: stretch;
flex-direction: column;
}
.account-inline-action .button,
.account-form-actions .button,
.account-delete-form .button {
width: 100%;
}
}
/* =========================================================
ÉTAPE 13 — EXPORT TXT, IMPRESSION ET PDF
========================================================= */
.note-menu a {
display: block;
padding: 9px 10px;
border-radius: 8px;
color: #2f3944;
text-decoration: none;
font-size: .84rem;
font-weight: 700;
}
.note-menu a:hover {
background: #f2f3f4;
}
.print-note-page {
min-height: 100vh;
background: #f2f1eb;
}
.print-note-shell {
width: min(900px, calc(100% - 32px));
margin: 0 auto;
padding: 34px 0 60px;
}
.print-note-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-bottom: 22px;
}
.print-note-card {
padding: 52px;
border: 1px solid rgba(44, 50, 57, .1);
border-radius: 10px;
background: var(--print-note-color, #fff59a);
box-shadow: 0 24px 55px rgba(30, 36, 42, .12);
}
.print-note-card header {
padding-bottom: 25px;
border-bottom: 1px solid rgba(54, 52, 39, .18);
}
.print-note-card h1 {
margin: 0;
color: #25271f;
font-size: clamp(2rem, 5vw, 3.8rem);
letter-spacing: -.055em;
}
.print-note-dates {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin-top: 14px;
color: rgba(49, 50, 40, .68);
font-size: .78rem;
font-weight: 750;
}
.print-note-content {
padding: 34px 0;
color: #2c2d25;
font-size: 1.05rem;
line-height: 1.75;
overflow-wrap: anywhere;
}
.print-note-audios {
padding-top: 24px;
border-top: 1px solid rgba(54, 52, 39, .18);
}
.print-note-audios h2 {
margin: 0 0 15px;
font-size: 1.2rem;
}
.print-audio-item {
display: grid;
grid-template-columns: minmax(150px, .45fr) minmax(250px, 1fr);
align-items: center;
gap: 18px;
padding: 12px;
border-radius: 13px;
background: rgba(255, 255, 255, .42);
}
.print-audio-item + .print-audio-item {
margin-top: 10px;
}
.print-audio-item strong,
.print-audio-item span {
display: block;
}
.print-audio-item span {
margin-top: 3px;
color: rgba(49, 50, 40, .65);
font-size: .73rem;
}
.print-audio-item audio {
width: 100%;
}
.print-audio-warning {
margin: 14px 0 0;
color: rgba(49, 50, 40, .62);
font-size: .72rem;
line-height: 1.5;
}
@media (max-width: 650px) {
.print-note-card {
padding: 30px 22px;
}
.print-note-actions {
align-items: stretch;
flex-direction: column;
}
.print-note-actions .button {
width: 100%;
}
.print-audio-item {
grid-template-columns: 1fr;
}
}
@media print {
@page {
margin: 16mm;
}
.print-note-page {
background: #ffffff;
}
.print-note-shell {
width: 100%;
padding: 0;
}
.print-note-actions,
.print-note-audios audio,
.print-audio-warning {
display: none !important;
}
.print-note-card {
padding: 0;
border: 0;
background: #ffffff !important;
box-shadow: none;
}
.print-note-content {
font-size: 11pt;
line-height: 1.6;
}
.print-audio-item {
grid-template-columns: 1fr;
padding: 6px 0;
background: transparent;
}
}
/* =========================================================
ÉTAPE 14 — MODE SOMBRE
========================================================= */
:root[data-theme="dark"] {
color-scheme: dark;
}
.theme-toggle {
position: relative;
display: inline-grid;
grid-template-columns: 1fr 1fr;
align-items: center;
width: 66px;
min-width: 66px;
height: 42px;
min-height: 42px;
padding: 4px;
border: 1px solid #d8dde1;
border-radius: 12px;
background: #f2f4f5;
color: #5e6873;
font: inherit;
cursor: pointer;
box-shadow: inset 0 1px 2px rgba(24, 32, 42, .06);
transition:
border-color .18s ease,
background .18s ease,
color .18s ease,
box-shadow .18s ease;
}
.theme-toggle::before {
content: "";
position: absolute;
left: 4px;
top: 4px;
width: 32px;
height: 32px;
border-radius: 10px;
background: #ffffff;
box-shadow: 0 3px 9px rgba(31, 38, 45, .16);
transition:
transform .22s ease,
background .18s ease;
}
.theme-toggle span {
position: relative;
z-index: 1;
display: grid;
place-items: center;
font-size: .9rem;
line-height: 1;
}
.theme-toggle-moon {
opacity: .48;
}
.theme-toggle[aria-pressed="true"]::before {
transform: translateX(26px);
}
.theme-toggle[aria-pressed="true"] .theme-toggle-sun {
opacity: .48;
}
.theme-toggle[aria-pressed="true"] .theme-toggle-moon {
opacity: 1;
}
.theme-toggle:focus-visible {
outline: 3px solid rgba(213, 165, 34, .22);
outline-offset: 3px;
}
:root[data-theme="dark"] body {
background: #11161c;
color: #d9e0e7;
}
:root[data-theme="dark"] .site-header {
border-bottom-color: rgba(255, 255, 255, .08);
background: rgba(17, 22, 28, .9);
box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}
:root[data-theme="dark"] .brand {
color: #f3f5f7;
}
:root[data-theme="dark"] .hello,
:root[data-theme="dark"] .notes-toolbar > div:first-child > p:last-child,
:root[data-theme="dark"] .account-heading > div:first-child > p:last-child,
:root[data-theme="dark"] .account-card header > p:last-child,
:root[data-theme="dark"] .account-created {
color: #98a4af;
}
:root[data-theme="dark"] .button-ghost {
border-color: #39434d;
background: #20272f;
color: #e1e6eb;
}
:root[data-theme="dark"] .button-ghost:hover {
background: #29323c;
}
:root[data-theme="dark"] .button-dark {
background: #f1d15d;
color: #201d12;
}
:root[data-theme="dark"] .theme-toggle {
border-color: #46515c;
background: #252d36;
color: #e4e8ec;
}
:root[data-theme="dark"] .theme-toggle::before {
background: #485462;
box-shadow: 0 3px 10px rgba(0, 0, 0, .34);
}
:root[data-theme="dark"] .notes-sidebar,
:root[data-theme="dark"] .account-card,
:root[data-theme="dark"] .account-stats article,
:root[data-theme="dark"] .modal-card {
border-color: rgba(255, 255, 255, .09);
background: #1b222a;
box-shadow: 0 20px 48px rgba(0, 0, 0, .18);
}
:root[data-theme="dark"] .sidebar-heading h2,
:root[data-theme="dark"] .notes-toolbar h1,
:root[data-theme="dark"] .notes-empty h2,
:root[data-theme="dark"] .modal-header h2,
:root[data-theme="dark"] .account-heading h1,
:root[data-theme="dark"] .account-card h2,
:root[data-theme="dark"] .account-stats strong {
color: #eef2f5;
}
:root[data-theme="dark"] .category-link {
color: #b7c0c8;
}
:root[data-theme="dark"] .category-link:hover,
:root[data-theme="dark"] .category-link.is-active {
background: #36321f;
color: #f4db77;
box-shadow: inset 0 0 0 1px #5a512b;
}
:root[data-theme="dark"] .category-link-audio.is-active,
:root[data-theme="dark"] .category-link-trash.is-active {
background: #402724;
color: #ffc2bb;
box-shadow: inset 0 0 0 1px #70403a;
}
:root[data-theme="dark"] .category-link-favorite.is-active {
background: #3b341d;
color: #f4d66b;
box-shadow: inset 0 0 0 1px #66592d;
}
:root[data-theme="dark"] .category-link-pinned.is-active {
background: #302744;
color: #d8c5ff;
box-shadow: inset 0 0 0 1px #51406f;
}
:root[data-theme="dark"] .category-link-archive.is-active {
background: #223348;
color: #bad8ff;
box-shadow: inset 0 0 0 1px #365271;
}
:root[data-theme="dark"] .sidebar-empty,
:root[data-theme="dark"] .sidebar-tip,
:root[data-theme="dark"] .voice-help {
color: #929da7;
}
:root[data-theme="dark"] .sidebar-empty,
:root[data-theme="dark"] .account-check-row,
:root[data-theme="dark"] .account-inline-action,
:root[data-theme="dark"] .voice-library,
:root[data-theme="dark"] .voice-panel {
border-color: #333d47;
background: #202830;
}
:root[data-theme="dark"] .sidebar-tip,
:root[data-theme="dark"] .note-card-footer,
:root[data-theme="dark"] .note-date-meta,
:root[data-theme="dark"] .note-audios {
border-color: rgba(255, 255, 255, .14);
}
:root[data-theme="dark"] .notes-search,
:root[data-theme="dark"] .sort-form select,
:root[data-theme="dark"] .button-audio-filter,
:root[data-theme="dark"] .note-form textarea,
:root[data-theme="dark"] .note-form select,
:root[data-theme="dark"] .note-form input[type="text"],
:root[data-theme="dark"] .account-form input,
:root[data-theme="dark"] .account-delete-form input {
border-color: #3b4651;
background-color: #171d23;
color: #e3e8ec;
}
:root[data-theme="dark"] .notes-search input::placeholder,
:root[data-theme="dark"] textarea::placeholder,
:root[data-theme="dark"] input::placeholder {
color: #74808a;
}
:root[data-theme="dark"] .button-audio-filter:hover,
:root[data-theme="dark"] .button-audio-filter.is-active {
border-color: #72443f;
background: #382523;
color: #ffc0b9;
}
:root[data-theme="dark"] .active-search {
border-color: #655b2f;
background: #332f1d;
color: #e9da92;
}
:root[data-theme="dark"] .active-search a {
color: #f5e8ad;
}
:root[data-theme="dark"] .notes-empty,
:root[data-theme="dark"] .live-search-empty {
border-color: #3b444d;
background: rgba(27, 34, 42, .65);
}
:root[data-theme="dark"] .notes-empty > p:not(.eyebrow),
:root[data-theme="dark"] .live-search-empty > p:last-child {
color: #97a2ac;
}
:root[data-theme="dark"] .note-card {
border-color: rgba(255, 255, 255, .08);
box-shadow: 0 18px 34px rgba(0, 0, 0, .26);
}
:root[data-theme="dark"] .note-menu {
border-color: #3c4650;
background: #20272f;
box-shadow: 0 18px 38px rgba(0, 0, 0, .38);
}
:root[data-theme="dark"] .note-menu button,
:root[data-theme="dark"] .note-menu a {
color: #e0e5e9;
}
:root[data-theme="dark"] .note-menu button:hover,
:root[data-theme="dark"] .note-menu a:hover {
background: #2c3540;
}
:root[data-theme="dark"] .note-menu button.danger {
color: #ff9187;
}
:root[data-theme="dark"] .modal-close,
:root[data-theme="dark"] .note-menu-button,
:root[data-theme="dark"] .note-flag-button {
background: #2a333d;
color: #c6ced5;
}
:root[data-theme="dark"] .note-form label > span,
:root[data-theme="dark"] .color-fieldset legend,
:root[data-theme="dark"] .note-editor-heading > label,
:root[data-theme="dark"] .account-form label > span,
:root[data-theme="dark"] .account-delete-form label > span {
color: #cbd3da;
}
:root[data-theme="dark"] .voice-button {
border-color: #3c4752;
background: #252d36;
color: #d9dfe4;
}
:root[data-theme="dark"] .voice-button:hover:not(:disabled) {
background: #2d3741;
}
:root[data-theme="dark"] .voice-panel.is-recording {
border-color: #72413c;
background: #382522;
}
:root[data-theme="dark"] .voice-panel strong,
:root[data-theme="dark"] .voice-library-heading strong,
:root[data-theme="dark"] .account-inline-action strong {
color: #dbe1e6;
}
:root[data-theme="dark"] .voice-panel p,
:root[data-theme="dark"] .voice-library-heading p,
:root[data-theme="dark"] .account-inline-action span {
color: #939ea8;
}
:root[data-theme="dark"] .voice-library-item {
border-color: #3a444e;
background: #171d23;
}
:root[data-theme="dark"] .account-danger-zone {
border-color: #663b37;
background: #281d1d;
}
:root[data-theme="dark"] .account-danger-zone h2 {
color: #ffaaa2;
}
:root[data-theme="dark"] .flash-success {
border-color: #315b40;
background: #1e3828;
color: #b9e8c7;
}
:root[data-theme="dark"] .flash-error {
border-color: #713f39;
background: #3b2421;
color: #ffc2bb;
}
:root[data-theme="dark"] .site-footer {
border-top-color: rgba(255, 255, 255, .08);
color: #87939e;
}
@media (max-width: 780px) {
.theme-toggle {
order: -1;
}
}
@media print {
.theme-toggle {
display: none !important;
}
}
/* ÉTAPE 15 — TAGS */
.sidebar-tags{margin-top:22px;padding-top:18px;border-top:1px solid #ecece7}
.sidebar-tags-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.sidebar-tags-heading span{color:#59636e;font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.sidebar-tags-heading a{color:#7a838d;font-size:.72rem;font-weight:800}
.sidebar-tag-list,.note-tags{display:flex;flex-wrap:wrap;gap:7px}
.sidebar-tag{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid #e0e3e6;border-radius:999px;background:#fff;color:#59636e;text-decoration:none;font-size:.72rem;font-weight:800}
.sidebar-tag strong{color:#929aa3;font-size:.66rem}
.sidebar-tag:hover,.sidebar-tag.is-active{border-color:#d6be67;background:#fff8d2;color:#65561e}
.note-tags{margin-top:15px}
.note-tag{display:inline-flex;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.5);color:#615d43;text-decoration:none;font-size:.68rem;font-weight:850;box-shadow:inset 0 0 0 1px rgba(71,68,48,.1)}
.note-tags-editor{display:grid;gap:8px}
.note-tags-editor label{color:#38424e;font-size:.88rem;font-weight:800}
.note-tags-editor input{width:100%;min-height:48px;padding:0 14px;border:1px solid #d8dde2;border-radius:13px;background:#fff;color:#18202a;font:inherit;outline:none}
.note-tags-editor input:focus{border-color:#dfac1e;box-shadow:0 0 0 4px rgba(242,201,76,.2)}
.note-tags-editor small{color:#858e98;font-size:.72rem}
:root[data-theme="dark"] .sidebar-tags{border-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .sidebar-tag{border-color:#3b4650;background:#202830;color:#c2cad1}
:root[data-theme="dark"] .sidebar-tag:hover,:root[data-theme="dark"] .sidebar-tag.is-active{border-color:#65582d;background:#37311d;color:#f1da7a}
:root[data-theme="dark"] .note-tags-editor label{color:#cbd3da}
:root[data-theme="dark"] .note-tags-editor input{border-color:#3b4651;background:#171d23;color:#e3e8ec}
/* =========================================================
ÉTAPE 16 — PIÈCES JOINTES ET IMAGES
========================================================= */
.attachment-editor {
display: grid;
gap: 12px;
padding: 15px;
border: 1px solid #e0e4e8;
border-radius: 15px;
background: #f8f9fa;
}
.attachment-editor-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
}
.attachment-editor-heading strong,
.attachment-editor-heading p {
display: block;
}
.attachment-editor-heading strong {
color: #303a45;
font-size: .9rem;
}
.attachment-editor-heading p {
margin: 3px 0 0;
color: #7c8690;
font-size: .75rem;
}
.attachment-picker {
cursor: pointer;
white-space: nowrap;
}
.attachment-status {
min-height: 18px;
color: #78828c;
font-size: .73rem;
font-weight: 750;
}
.attachment-status[data-state="saved"] {
color: #47765b;
}
.attachment-status[data-state="error"] {
color: #b23a31;
}
.attachment-library {
display: grid;
gap: 10px;
}
.attachment-library[hidden] {
display: none;
}
.attachment-item {
display: grid;
grid-template-columns: 54px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 10px;
border: 1px solid #dfe3e6;
border-radius: 12px;
background: #ffffff;
}
.attachment-preview {
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: 10px;
background: #eef1f4;
overflow: hidden;
}
.attachment-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.attachment-file-icon {
color: #6e7882;
font-size: 1.4rem;
}
.attachment-meta {
min-width: 0;
}
.attachment-meta strong,
.attachment-meta span {
display: block;
}
.attachment-meta strong {
overflow: hidden;
color: #303a45;
font-size: .82rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.attachment-meta span {
margin-top: 4px;
color: #87919b;
font-size: .7rem;
}
.attachment-actions {
display: flex;
align-items: center;
gap: 7px;
}
.attachment-actions a,
.attachment-actions button {
padding: 6px 8px;
border: 0;
border-radius: 8px;
background: #f1f3f4;
color: #4b5661;
text-decoration: none;
font: inherit;
font-size: .7rem;
font-weight: 800;
cursor: pointer;
}
.attachment-actions button {
background: #fff0ee;
color: #a9362e;
}
.note-attachments {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
margin-top: 16px;
}
.note-attachment-image {
display: block;
aspect-ratio: 1;
border-radius: 10px;
overflow: hidden;
background: rgba(255, 255, 255, .45);
}
.note-attachment-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.note-attachment-file {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 8px 10px;
border-radius: 10px;
background: rgba(255, 255, 255, .46);
color: #4e4c3d;
text-decoration: none;
font-size: .72rem;
font-weight: 800;
}
.note-attachment-file span:last-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
:root[data-theme="dark"] .attachment-editor {
border-color: #38434e;
background: #202830;
}
:root[data-theme="dark"] .attachment-editor-heading strong,
:root[data-theme="dark"] .attachment-meta strong {
color: #dce2e7;
}
:root[data-theme="dark"] .attachment-item {
border-color: #3a4550;
background: #171d23;
}
:root[data-theme="dark"] .attachment-preview,
:root[data-theme="dark"] .attachment-actions a {
background: #29323b;
color: #d2d9df;
}
@media (max-width: 590px) {
.attachment-editor-heading {
align-items: stretch;
flex-direction: column;
}
.attachment-picker {
width: 100%;
}
.attachment-item {
grid-template-columns: 48px minmax(0, 1fr);
}
.attachment-actions {
grid-column: 1 / -1;
justify-content: flex-end;
}
}
/* =========================================================
ÉTAPE 17 — APERÇU D’IMAGE AVEC FOND FLOU
========================================================= */
.note-attachment-image {
width: 100%;
padding: 0;
border: 0;
cursor: zoom-in;
}
.image-lightbox {
width: 100%;
max-width: none;
height: 100%;
max-height: none;
padding: 0;
border: 0;
background: transparent;
overflow: hidden;
}
.image-lightbox::backdrop {
background: rgba(10, 14, 18, .55);
backdrop-filter: blur(16px);
}
.image-lightbox-backdrop {
position: fixed;
inset: 0;
background: rgba(10, 14, 18, .44);
backdrop-filter: blur(16px);
}
.image-lightbox-card {
position: relative;
z-index: 2;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
width: min(1100px, calc(100% - 34px));
height: min(88vh, 850px);
margin: 6vh auto;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 24px;
background: rgba(22, 27, 33, .82);
box-shadow: 0 35px 90px rgba(0, 0, 0, .42);
overflow: hidden;
}
.image-lightbox-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
min-width: 0;
padding: 14px 16px 14px 20px;
border-bottom: 1px solid rgba(255, 255, 255, .1);
color: #ffffff;
background: rgba(18, 22, 27, .7);
}
.image-lightbox-header strong {
overflow: hidden;
font-size: .9rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.image-lightbox-close {
display: grid;
place-items: center;
flex: 0 0 40px;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 13px;
background: rgba(255, 255, 255, .08);
color: #ffffff;
font: inherit;
font-size: 1.45rem;
cursor: pointer;
}
.image-lightbox-close:hover {
background: rgba(255, 255, 255, .16);
}
.image-lightbox-content {
display: grid;
place-items: center;
min-height: 0;
padding: 22px;
overflow: auto;
}
.image-lightbox-content img {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 14px;
box-shadow: 0 22px 60px rgba(0, 0, 0, .34);
}
@media (max-width: 650px) {
.image-lightbox-card {
width: calc(100% - 18px);
height: 92vh;
margin: 4vh auto;
border-radius: 18px;
}
.image-lightbox-content {
padding: 12px;
}
}
/* =========================================================
ÉTAPE 18 — PARTAGE PRIVÉ
========================================================= */
.note-share-badge {
display: inline-grid;
place-items: center;
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 999px;
background: rgba(255, 255, 255, .66);
color: #33715a;
font-size: .78rem;
font-weight: 950;
box-shadow: inset 0 0 0 1px rgba(51, 113, 90, .15);
}
.share-existing {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px;
border: 1px solid #d8e5dc;
border-radius: 14px;
background: #f1faf4;
}
.share-existing[hidden],
.share-result[hidden] {
display: none;
}
.share-existing-status strong,
.share-existing-status p {
display: block;
}
.share-existing-status strong {
color: #315b43;
font-size: .85rem;
}
.share-existing-status p {
margin: 4px 0 0;
color: #678071;
font-size: .72rem;
line-height: 1.45;
}
.share-result {
display: grid;
gap: 10px;
padding: 14px;
border: 1px solid #d9dde1;
border-radius: 14px;
background: #f8f9fa;
}
.share-result > strong {
color: #303a45;
font-size: .85rem;
}
.share-result > p {
margin: 0;
color: #7e8892;
font-size: .7rem;
line-height: 1.45;
}
.share-link-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
}
.share-link-row input {
min-width: 0;
padding: 0 12px;
border: 1px solid #d7dde2;
border-radius: 11px;
background: #ffffff;
color: #35404b;
font: inherit;
font-size: .76rem;
}
.share-feedback {
min-height: 18px;
color: #78828c;
font-size: .74rem;
font-weight: 750;
}
.share-feedback[data-state="saved"] {
color: #44775a;
}
.share-feedback[data-state="error"] {
color: #ae372f;
}
.public-share-page {
min-height: 100vh;
background:
radial-gradient(circle at 20% 10%, #fff9cf 0, transparent 30%),
#f2f1eb;
}
.public-share-header {
display: flex;
align-items: center;
justify-content: space-between;
width: min(1080px, calc(100% - 32px));
margin: 0 auto;
padding: 22px 0;
color: #747d87;
font-size: .78rem;
font-weight: 800;
}
.public-share-main {
width: min(900px, calc(100% - 32px));
margin: 0 auto;
padding: 24px 0 70px;
}
.public-share-message,
.public-share-password {
max-width: 620px;
margin: 8vh auto 0;
padding: 36px;
border: 1px solid #dfe3e6;
border-radius: 24px;
background: rgba(255, 255, 255, .9);
box-shadow: 0 24px 60px rgba(30, 36, 42, .1);
text-align: center;
}
.public-share-message h1,
.public-share-password h1 {
margin: 0;
color: #202a34;
font-size: clamp(2rem, 5vw, 3.5rem);
letter-spacing: -.055em;
}
.public-share-message > p:last-child,
.public-share-password > p {
margin: 14px 0 0;
color: #74808a;
line-height: 1.65;
}
.public-share-password-form {
display: grid;
gap: 16px;
max-width: 390px;
margin: 25px auto 0;
text-align: left;
}
.public-share-password-form label {
display: grid;
gap: 8px;
}
.public-share-password-form label span {
color: #3b4651;
font-size: .82rem;
font-weight: 850;
}
.public-share-password-form input {
min-height: 48px;
padding: 0 14px;
border: 1px solid #d7dde2;
border-radius: 13px;
background: #ffffff;
color: #202a34;
font: inherit;
}
.public-shared-note {
padding: 48px;
border: 1px solid rgba(50, 52, 40, .12);
border-radius: 12px;
background: var(--shared-note-color, #fff59a);
box-shadow: 0 28px 65px rgba(30, 36, 42, .13);
}
.public-shared-note > header {
padding-bottom: 24px;
border-bottom: 1px solid rgba(54, 52, 39, .18);
}
.public-shared-note h1 {
margin: 0;
color: #272820;
font-size: clamp(2rem, 5vw, 4rem);
letter-spacing: -.06em;
}
.public-share-dates {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin-top: 13px;
color: rgba(49, 50, 40, .64);
font-size: .74rem;
font-weight: 750;
}
.public-share-content {
padding: 32px 0;
color: #2f3027;
font-size: 1.02rem;
line-height: 1.75;
overflow-wrap: anywhere;
}
.public-share-section {
margin-top: 25px;
padding-top: 22px;
border-top: 1px solid rgba(54, 52, 39, .18);
}
.public-share-section h2 {
margin: 0 0 14px;
color: #313229;
font-size: 1.1rem;
}
.public-share-attachments {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.public-share-image {
display: block;
aspect-ratio: 1;
border-radius: 13px;
overflow: hidden;
background: rgba(255, 255, 255, .45);
}
.public-share-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.public-share-file {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 9px;
padding: 10px 12px;
border-radius: 11px;
background: rgba(255, 255, 255, .45);
color: #4c4b3c;
text-decoration: none;
font-size: .78rem;
font-weight: 800;
}
.public-share-audios {
display: grid;
gap: 10px;
}
.public-share-audio {
padding: 11px;
border-radius: 12px;
background: rgba(255, 255, 255, .45);
}
.public-share-audio span {
display: block;
margin-bottom: 7px;
color: #5e5b45;
font-size: .72rem;
font-weight: 800;
}
.public-share-audio audio {
width: 100%;
}
.public-share-footer {
margin-top: 28px;
padding-top: 15px;
border-top: 1px dashed rgba(54, 52, 39, .2);
color: rgba(49, 50, 40, .58);
font-size: .7rem;
text-align: center;
}
:root[data-theme="dark"] .share-existing {
border-color: #355642;
background: #203328;
}
:root[data-theme="dark"] .share-existing-status strong {
color: #bce1c8;
}
:root[data-theme="dark"] .share-existing-status p {
color: #91aa99;
}
:root[data-theme="dark"] .share-result {
border-color: #3a4550;
background: #202830;
}
:root[data-theme="dark"] .share-result > strong {
color: #dce2e7;
}
:root[data-theme="dark"] .share-link-row input {
border-color: #3a4550;
background: #171d23;
color: #dfe5ea;
}
@media (max-width: 650px) {
.share-existing {
align-items: stretch;
flex-direction: column;
}
.share-link-row {
grid-template-columns: 1fr;
}
.public-shared-note {
padding: 30px 22px;
}
.public-share-attachments {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* =========================================================
ÉTAPE 19 — APPLICATION PWA
========================================================= */
.pwa-install-button[hidden],
.pwa-update-banner[hidden] {
display: none !important;
}
.pwa-install-button {
white-space: nowrap;
}
.pwa-update-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
width: min(1180px, calc(100% - 32px));
margin: 18px auto 0;
padding: 12px 14px 12px 18px;
border: 1px solid #d8c162;
border-radius: 15px;
background: #fff7cb;
color: #5c5122;
box-shadow: 0 12px 30px rgba(72, 61, 20, .08);
font-size: .8rem;
font-weight: 800;
}
.offline-page {
min-height: 100vh;
background:
radial-gradient(circle at 50% 10%, #fff7c5 0, transparent 38%),
#f2f1eb;
}
.offline-shell {
display: grid;
justify-items: center;
width: min(560px, calc(100% - 32px));
margin: 0 auto;
padding: 13vh 0 70px;
text-align: center;
}
.offline-shell img {
border-radius: 28px;
box-shadow: 0 20px 42px rgba(37, 42, 47, .14);
}
.offline-shell .eyebrow {
margin: 26px 0 8px;
}
.offline-shell h1 {
margin: 0;
color: #202a34;
font-size: clamp(2.2rem, 7vw, 4.3rem);
line-height: 1;
letter-spacing: -.06em;
}
.offline-shell > p:not(.eyebrow) {
max-width: 500px;
margin: 18px 0 25px;
color: #707b85;
line-height: 1.65;
}
:root[data-theme="dark"] .pwa-update-banner {
border-color: #665a2d;
background: #37311d;
color: #f1dc7e;
}
@media (max-width: 760px) {
.pwa-install-button {
width: 100%;
}
.pwa-update-banner {
align-items: stretch;
flex-direction: column;
}
.pwa-update-banner .button {
width: 100%;
}
}
/* =========================================================
ÉTAPE 20 — SAUVEGARDE ET RESTAURATION
========================================================= */
.backup-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.backup-panel {
display: grid;
align-content: start;
gap: 16px;
padding: 18px;
border: 1px solid #dfe4e7;
border-radius: 16px;
background: #f8f9fa;
}
.backup-panel strong,
.backup-panel p {
display: block;
}
.backup-panel strong {
color: #303a45;
font-size: .92rem;
}
.backup-panel p {
margin: 6px 0 0;
color: #7b858f;
font-size: .76rem;
line-height: 1.55;
}
.backup-panel .button {
justify-self: start;
}
.backup-file-field {
display: grid;
gap: 8px;
}
.backup-file-field > span {
color: #3b4651;
font-size: .78rem;
font-weight: 850;
}
.backup-file-field input {
width: 100%;
padding: 10px;
border: 1px solid #d7dde2;
border-radius: 12px;
background: #ffffff;
color: #47515c;
font: inherit;
font-size: .76rem;
}
.backup-warning {
margin: 16px 0 0;
color: #8a7250;
font-size: .73rem;
font-weight: 750;
}
:root[data-theme="dark"] .backup-panel {
border-color: #39444e;
background: #202830;
}
:root[data-theme="dark"] .backup-panel strong,
:root[data-theme="dark"] .backup-file-field > span {
color: #dbe2e7;
}
:root[data-theme="dark"] .backup-panel p {
color: #96a1ab;
}
:root[data-theme="dark"] .backup-file-field input {
border-color: #3a4550;
background: #171d23;
color: #dce2e7;
}
:root[data-theme="dark"] .backup-warning {
color: #d0b778;
}
@media (max-width: 760px) {
.backup-grid {
grid-template-columns: 1fr;
}
.backup-panel .button {
width: 100%;
}
}
/* =========================================================
ÉTAPE 22 — EXPÉRIENCE MOBILE
========================================================= */
.mobile-notes-bar,
.mobile-floating-note {
display: none;
}
@media (max-width: 780px) {
body {
padding-bottom: 82px;
}
.mobile-notes-bar {
position: sticky;
top: 0;
z-index: 35;
display: grid;
grid-template-columns: 1fr 1fr auto;
align-items: stretch;
gap: 7px;
width: calc(100% - 20px);
margin: 10px auto 0;
padding: 7px;
border: 1px solid rgba(36, 43, 50, .1);
border-radius: 18px;
background: rgba(255, 255, 255, .92);
box-shadow: 0 12px 30px rgba(32, 38, 44, .12);
backdrop-filter: blur(14px);
}
.mobile-notes-tab,
.mobile-add-note {
min-height: 46px;
padding: 7px 10px;
border: 0;
border-radius: 12px;
background: transparent;
color: #65707a;
font: inherit;
font-size: .73rem;
font-weight: 850;
cursor: pointer;
}
.mobile-notes-tab {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.mobile-notes-tab > span:first-child {
font-size: 1rem;
}
.mobile-notes-tab.is-active {
background: #fff5bd;
color: #5f501b;
box-shadow: inset 0 0 0 1px #dfc85f;
}
.mobile-add-note {
display: grid;
grid-template-columns: auto auto;
align-items: center;
gap: 7px;
padding-inline: 14px;
background: #202933;
color: #ffffff;
}
.mobile-add-note > span:first-child {
font-size: 1.35rem;
line-height: 1;
}
.mobile-add-note:disabled,
.mobile-floating-note:disabled {
opacity: .45;
cursor: not-allowed;
}
.notes-dashboard {
padding-top: 12px;
}
.notes-sidebar {
position: static;
padding: 14px;
border-radius: 18px;
}
.notes-sidebar[hidden],
.notes-main[hidden] {
display: none !important;
}
.sidebar-heading {
margin-bottom: 12px;
}
.category-navigation {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.category-row {
min-width: 0;
}
.category-link {
min-width: 0;
min-height: 48px;
padding: 9px;
}
.category-link > span:nth-child(2) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.category-rename,
.category-delete {
opacity: 1;
}
.sidebar-tags {
margin-top: 16px;
padding-top: 14px;
}
.mobile-floating-note {
position: fixed;
right: 18px;
bottom: calc(18px + env(safe-area-inset-bottom));
z-index: 45;
display: grid;
place-items: center;
width: 58px;
height: 58px;
padding: 0;
border: 0;
border-radius: 20px;
background: #202933;
color: #ffffff;
box-shadow: 0 14px 34px rgba(20, 28, 36, .32);
font: inherit;
font-size: 2rem;
line-height: 1;
cursor: pointer;
}
.mobile-floating-note:active {
transform: scale(.95);
}
.toolbar-actions {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
}
.notes-search {
grid-column: 1 / -1;
}
.new-note-button {
display: none;
}
}
@media (max-width: 590px) {
.notes-dashboard {
width: calc(100% - 16px);
}
.notes-toolbar {
gap: 14px;
}
.notes-toolbar h1 {
font-size: 2.15rem;
}
.notes-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.note-card,
.note-card:nth-child(3n+2),
.note-card:nth-child(3n) {
min-width: 0;
min-height: 188px;
padding: 17px 12px 12px;
border-radius: 6px;
transform: none;
}
.note-card:hover {
transform: translateY(-2px);
}
.note-card-header {
align-items: flex-start;
gap: 5px;
margin-bottom: 10px;
}
.note-card-labels {
min-width: 0;
gap: 4px;
}
.note-category {
max-width: 100%;
overflow: hidden;
font-size: .62rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.note-card-controls {
gap: 3px;
}
.note-flag-button,
.note-menu-button {
width: 27px;
height: 27px;
font-size: .72rem;
}
.note-content {
display: -webkit-box;
overflow: hidden;
font-size: .84rem;
line-height: 1.45;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
}
.note-tags {
gap: 4px;
margin-top: 9px;
}
.note-tag {
max-width: 100%;
padding: 4px 6px;
overflow: hidden;
font-size: .58rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.note-attachments {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px;
margin-top: 10px;
}
.note-attachment-file {
padding: 6px 7px;
font-size: .6rem;
}
.note-audios {
margin-top: 10px;
padding-top: 8px;
}
.note-audio-item {
padding: 6px;
}
.note-audio-item audio {
max-width: 100%;
height: 28px;
}
.note-date-meta {
gap: 3px;
margin-top: 10px;
padding-top: 8px;
font-size: .56rem;
}
.note-card-footer {
gap: 3px;
margin-top: 10px;
padding-top: 8px;
font-size: .58rem;
}
.note-share-badge,
.note-audio-badge {
width: 22px;
height: 22px;
font-size: .62rem;
}
.mobile-notes-bar {
grid-template-columns: 1fr 1fr 48px;
}
.mobile-add-note {
grid-template-columns: 1fr;
padding: 0;
}
.mobile-add-note > span:last-child {
display: none;
}
}
:root[data-theme="dark"] .mobile-notes-bar {
border-color: rgba(255, 255, 255, .09);
background: rgba(27, 34, 42, .94);
}
:root[data-theme="dark"] .mobile-notes-tab {
color: #aeb8c1;
}
:root[data-theme="dark"] .mobile-notes-tab.is-active {
background: #37311d;
color: #f1da7a;
box-shadow: inset 0 0 0 1px #65582d;
}
:root[data-theme="dark"] .mobile-add-note,
:root[data-theme="dark"] .mobile-floating-note {
background: #f1d15d;
color: #201d12;
}
/* ÉTAPE 23 — NOTES VOCALES */
.note-card.is-audio-only {
background:
radial-gradient(circle at 85% 15%, rgba(255,255,255,.62), transparent 34%),
var(--note-color, #CCE7FF);
}
.audio-only-heading {
display:flex;
align-items:center;
gap:12px;
margin:6px 0 15px;
padding:13px;
border-radius:14px;
background:rgba(255,255,255,.38);
}
.audio-only-icon {
position:relative;
display:grid;
place-items:center;
flex:0 0 42px;
width:42px;
height:42px;
border-radius:50%;
background:#d7554d;
color:#fff;
font-size:.65rem;
box-shadow:0 0 0 6px rgba(215,85,77,.12),0 8px 18px rgba(84,51,49,.16);
}
.audio-only-heading strong,
.audio-only-heading span { display:block; }
.audio-only-heading strong {
color:#33372e;
font-size:1rem;
}
.audio-only-heading div > span {
margin-top:3px;
color:rgba(51,55,46,.66);
font-size:.7rem;
font-weight:750;
}
.note-card.is-audio-only .note-audios {
margin-top:4px;
padding-top:0;
border-top:0;
}
.note-card.is-audio-only .note-audio-item {
padding:10px;
border-radius:14px;
background:rgba(255,255,255,.48);
}
.note-card.is-audio-only .note-audio-item audio { width:100%; }
.voice-button { min-width:185px; }
:root[data-theme="dark"] .audio-only-heading,
:root[data-theme="dark"] .note-card.is-audio-only .note-audio-item {
background:rgba(17,22,28,.28);
}
@media (max-width:590px) {
.voice-button { min-width:0; }
.audio-only-heading { align-items:flex-start;gap:8px;margin-bottom:10px;padding:9px; }
.audio-only-icon { flex-basis:30px;width:30px;height:30px; }
.audio-only-heading strong { font-size:.8rem; }
.audio-only-heading div > span { font-size:.58rem; }
.note-card.is-audio-only .note-audio-item { padding:6px; }
}
/* ÉTAPE 24 — NOUVELLE NOTE / NOUVEAU VOCAL */
.new-entry-actions{display:flex;flex-wrap:wrap;gap:9px}
.button-voice{border:1px solid #d95850;background:#fff0ee;color:#a9362e}
.button-voice:hover{background:#ffe4e1}
.mobile-create-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mobile-add-vocal{min-height:46px;padding:7px 10px;border:0;border-radius:12px;background:#d7554d;color:#fff;font:inherit;font-size:.73rem;font-weight:850;cursor:pointer}
.mobile-add-vocal>span:first-child{margin-right:6px;font-size:.72rem}
.mobile-floating-actions{display:none}
@media(max-width:780px){
.mobile-notes-bar{grid-template-columns:1fr 1fr minmax(108px,auto)}
.mobile-floating-actions{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:45;display:grid;gap:9px}
.mobile-floating-note,.mobile-floating-vocal{position:static;display:grid;place-items:center;width:55px;height:55px;padding:0;border:0;border-radius:19px;color:#fff;box-shadow:0 14px 34px rgba(20,28,36,.28);font:inherit;line-height:1;cursor:pointer}
.mobile-floating-note{background:#202933;font-size:1.9rem}
.mobile-floating-vocal{background:#d7554d;font-size:.8rem}
}
@media(max-width:590px){
.mobile-notes-bar{grid-template-columns:1fr 1fr 96px}
.mobile-add-note,.mobile-add-vocal{padding:0 5px}
.mobile-add-note>span:last-child,.mobile-add-vocal>span:last-child{display:inline}
}
:root[data-theme="dark"] .button-voice{border-color:#6f403b;background:#382522;color:#ffb3ac}
:root[data-theme="dark"] .mobile-add-vocal,
:root[data-theme="dark"] .mobile-floating-vocal{background:#e5675e;color:#fff}
/* =========================================================
ÉTAPE 25 — BOUTON D’INSTALLATION MOBILE
========================================================= */
.pwa-install-icon {
display: inline-grid;
place-items: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid #d8dde1;
border-radius: 13px;
background: #f2f4f5;
color: #59636e;
font: inherit;
font-size: 1.05rem;
font-weight: 900;
cursor: pointer;
}
.pwa-install-icon:hover {
background: #e9edef;
}
.pwa-install-icon[hidden] {
display: none !important;
}
:root[data-theme="dark"] .pwa-install-icon {
border-color: #46515c;
background: #252d36;
color: #e5e9ed;
}
:root[data-theme="dark"] .pwa-install-icon:hover {
background: #303a44;
}
@media (max-width: 780px) {
.site-header-inner {
gap: 10px;
}
.header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.pwa-install-icon {
order: -2;
flex-basis: 36px;
width: 36px;
height: 36px;
border-radius: 12px;
}
.theme-toggle {
order: -1;
}
}
@media (max-width: 520px) and (orientation: portrait) {
.pwa-install-icon {
display: inline-grid;
}
}
/* =========================================================
ÉTAPE 26 — SEO ET PAGES PUBLIQUES
========================================================= */
.landing-hero {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
align-items: center;
gap: 70px;
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
padding: 88px 0 92px;
}
.landing-hero-copy h1 {
max-width: 760px;
margin: 0;
color: #202a34;
font-size: clamp(3.2rem, 7vw, 6.2rem);
line-height: .94;
letter-spacing: -.075em;
}
.landing-hero-copy h1 span {
display: block;
color: #ac8421;
}
.landing-lead {
max-width: 680px;
margin: 28px 0 0;
color: #68737d;
font-size: 1.08rem;
line-height: 1.75;
}
.landing-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.landing-main-cta {
min-height: 52px;
padding-inline: 22px;
}
.landing-trust {
display: flex;
flex-wrap: wrap;
gap: 12px 22px;
margin-top: 24px;
color: #78828c;
font-size: .75rem;
font-weight: 800;
}
.landing-demo {
overflow: hidden;
border: 1px solid rgba(38, 45, 52, .12);
border-radius: 28px;
background: #141a21;
box-shadow: 0 38px 90px rgba(31, 38, 45, .22);
transform: rotate(1.4deg);
}
.landing-demo-toolbar {
display: flex;
align-items: center;
gap: 7px;
padding: 15px 18px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.landing-demo-toolbar > span {
width: 9px;
height: 9px;
border-radius: 50%;
background: #4b5661;
}
.landing-demo-toolbar > span:first-child {
background: #df5c55;
}
.landing-demo-toolbar > span:nth-child(2) {
background: #e9c55a;
}
.landing-demo-toolbar > span:nth-child(3) {
background: #70ba80;
}
.landing-demo-toolbar strong {
margin-left: auto;
color: #dce2e7;
font-size: .76rem;
}
.landing-demo-body {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
padding: 24px;
}
.landing-note {
min-height: 170px;
padding: 20px;
border-radius: 8px;
color: #32342c;
box-shadow: 0 18px 36px rgba(0, 0, 0, .17);
}
.landing-note small,
.landing-note strong,
.landing-note p {
display: block;
}
.landing-note small {
font-size: .65rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .07em;
}
.landing-note strong {
margin-top: 28px;
font-size: 1rem;
}
.landing-note p {
margin: 10px 0 0;
font-size: .76rem;
line-height: 1.55;
}
.landing-note-yellow {
background: #fff397;
}
.landing-note-blue {
margin-top: 36px;
background: #cde8ff;
}
.landing-note-vocal {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 18px;
min-height: 118px;
background: #ffd8df;
}
.landing-vocal-dot {
flex: 0 0 52px;
width: 52px;
height: 52px;
border-radius: 50%;
background: #db5b53;
box-shadow: 0 0 0 9px rgba(219, 91, 83, .18);
}
.landing-wave {
display: block;
width: 190px;
height: 20px;
margin-top: 13px;
background:
repeating-linear-gradient(
90deg,
#9e4f4a 0 3px,
transparent 3px 8px
);
opacity: .55;
mask-image:
linear-gradient(
180deg,
transparent 0,
#000 20%,
#000 80%,
transparent 100%
);
}
.landing-section {
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
padding: 84px 0;
}
.landing-section-heading {
max-width: 720px;
margin-bottom: 38px;
}
.landing-section-heading h2,
.landing-private h2,
.landing-final-cta h2,
.features-page-hero h1 {
margin: 0;
color: #202a34;
font-size: clamp(2.3rem, 5vw, 4.5rem);
line-height: 1;
letter-spacing: -.065em;
}
.landing-section-heading > p:last-child,
.landing-private > div:first-child > p:last-child,
.features-page-hero > p {
margin: 17px 0 0;
color: #6e7983;
line-height: 1.7;
}
.landing-feature-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.landing-feature-card {
padding: 25px;
border: 1px solid #e0e4e7;
border-radius: 22px;
background: rgba(255, 255, 255, .82);
box-shadow: 0 18px 38px rgba(32, 38, 45, .055);
}
.landing-feature-icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 14px;
background: #fff1a8;
color: #62521d;
font-size: 1.05rem;
font-weight: 950;
}
.landing-feature-card h3 {
margin: 19px 0 0;
color: #28323c;
font-size: 1.18rem;
letter-spacing: -.025em;
}
.landing-feature-card p {
margin: 10px 0 0;
color: #75808a;
font-size: .86rem;
line-height: 1.65;
}
.landing-private {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, .65fr);
align-items: center;
gap: 60px;
}
.landing-private-card {
padding: 28px;
border: 1px solid #dce6df;
border-radius: 24px;
background: #f2faf4;
}
.landing-private-card > span {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 17px;
background: #dcefe2;
color: #39664a;
font-size: 1.35rem;
}
.landing-private-card strong {
display: block;
margin-top: 21px;
color: #315741;
font-size: 1.1rem;
}
.landing-private-card p {
margin: 9px 0 0;
color: #698072;
font-size: .84rem;
line-height: 1.65;
}
.landing-final-cta {
width: min(1060px, calc(100% - 32px));
margin: 35px auto 90px;
padding: 55px;
border-radius: 30px;
background: #fff0a1;
text-align: center;
}
.landing-final-cta h2 {
max-width: 790px;
margin-inline: auto;
}
.landing-final-cta .button {
margin-top: 27px;
}
.features-page-hero {
width: min(950px, calc(100% - 32px));
margin: 0 auto;
padding: 80px 0 55px;
text-align: center;
}
.features-page-hero > p {
max-width: 720px;
margin-inline: auto;
}
.features-page-hero .landing-actions {
justify-content: center;
}
.features-detail-grid {
display: grid;
gap: 18px;
width: min(1050px, calc(100% - 32px));
margin: 0 auto;
padding-bottom: 75px;
}
.features-detail-grid > article {
display: grid;
grid-template-columns: 70px minmax(0, 1fr);
gap: 24px;
padding: 27px;
border: 1px solid #e0e4e7;
border-radius: 22px;
background: rgba(255, 255, 255, .83);
}
.features-detail-grid > article > span {
color: #c49b2f;
font-size: 1.6rem;
font-weight: 950;
}
.features-detail-grid h2 {
margin: 0;
color: #27313b;
font-size: 1.45rem;
}
.features-detail-grid p {
margin: 9px 0 0;
color: #747f89;
line-height: 1.65;
}
.features-detail-grid ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px 20px;
margin: 18px 0 0;
padding-left: 18px;
color: #57626c;
font-size: .84rem;
}
:root[data-theme="dark"] .landing-hero-copy h1,
:root[data-theme="dark"] .landing-section-heading h2,
:root[data-theme="dark"] .landing-private h2,
:root[data-theme="dark"] .landing-final-cta h2,
:root[data-theme="dark"] .features-page-hero h1 {
color: #eef2f5;
}
:root[data-theme="dark"] .landing-feature-card,
:root[data-theme="dark"] .features-detail-grid > article {
border-color: #343e48;
background: #1b222a;
}
:root[data-theme="dark"] .landing-feature-card h3,
:root[data-theme="dark"] .features-detail-grid h2 {
color: #e2e7eb;
}
:root[data-theme="dark"] .landing-private-card {
border-color: #355542;
background: #203228;
}
:root[data-theme="dark"] .landing-final-cta {
background: #37311d;
}
@media (max-width: 900px) {
.landing-hero {
grid-template-columns: 1fr;
padding-top: 58px;
}
.landing-demo {
width: min(620px, 100%);
margin-inline: auto;
}
.landing-feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.landing-private {
grid-template-columns: 1fr;
}
}
@media (max-width: 650px) {
.public-nav-link {
display: none;
}
.landing-hero {
gap: 42px;
padding: 46px 0 60px;
}
.landing-hero-copy h1 {
font-size: clamp(3rem, 16vw, 4.5rem);
}
.landing-actions {
display: grid;
}
.landing-actions .button {
width: 100%;
}
.landing-demo-body {
gap: 9px;
padding: 14px;
}
.landing-note {
min-height: 145px;
padding: 14px;
}
.landing-note strong {
margin-top: 20px;
font-size: .83rem;
}
.landing-note p {
font-size: .67rem;
}
.landing-wave {
width: 110px;
}
.landing-section {
padding: 58px 0;
}
.landing-feature-grid {
grid-template-columns: 1fr;
}
.landing-final-cta {
padding: 38px 20px;
}
.features-detail-grid > article {
grid-template-columns: 1fr;
gap: 8px;
}
.features-detail-grid ul {
grid-template-columns: 1fr;
}
}
/* =========================================================
ÉTAPE 27 — MODE VOCAL DÉDIÉ
========================================================= */
.voice-timer {
display: block;
margin-top: 9px;
color: #7d514d;
font-size: .76rem;
font-variant-numeric: tabular-nums;
}
.voice-draft-actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.voice-draft-actions[hidden] {
display: none !important;
}
/*
* Le mode vocal est volontairement minimal :
* aucun champ d’écriture, pièce jointe, tag, catégorie ou couleur.
*/
.note-form.is-vocal-mode .note-editor-heading label,
.note-form.is-vocal-mode #note-text,
.note-form.is-vocal-mode .attachment-editor,
.note-form.is-vocal-mode .note-tags-editor,
.note-form.is-vocal-mode .note-form-grid,
.note-form.is-vocal-mode .note-standard-actions,
.note-form.is-vocal-mode .autosave-line,
.note-form.is-vocal-mode .voice-library {
display: none !important;
}
.note-form.is-vocal-mode .note-editor-heading {
justify-content: center;
}
.note-form.is-vocal-mode .note-editor-field {
padding: 8px 0 0;
}
.note-form.is-vocal-mode .voice-button {
min-width: min(100%, 310px);
min-height: 56px;
justify-content: center;
font-size: .96rem;
}
.note-form.is-vocal-mode .voice-panel {
align-items: center;
margin-top: 16px;
padding: 18px;
}
.note-form.is-vocal-mode .voice-help {
max-width: 540px;
margin: 13px auto 0;
text-align: center;
}
:root[data-theme="dark"] .voice-timer {
color: #e2aaa4;
}
@media (max-width: 650px) {
.voice-draft-actions {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
margin: 12px 0 0;
}
.voice-draft-actions .button {
width: 100%;
}
.note-form.is-vocal-mode .voice-panel {
align-items: stretch;
flex-direction: column;
}
}
/* CORRECTIF 27.1 — BOUTON VOCAL DESKTOP */
@media (max-width: 780px) {
.new-vocal-button {
display: none !important;
}
}
/* CORRECTIF 27.2 — ENREGISTREMENT VOCAL EN UN CLIC */
.note-form.is-vocal-mode .voice-draft-actions {
display: none !important;
}
/* =========================================================
ÉTAPE 28 — CONNEXION AVEC GOOGLE
========================================================= */
.google-login-button {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 52px;
padding: 0 16px;
border: 1px solid #d9dee3;
border-radius: 12px;
background: #fff;
color: #28313b;
text-decoration: none;
font-size: .94rem;
font-weight: 780;
box-shadow: 0 5px 15px rgba(30, 38, 46, .045);
transition: .18s ease;
}
.google-login-button:hover {
border-color: #bcc4cc;
box-shadow: 0 8px 20px rgba(30, 38, 46, .09);
transform: translateY(-1px);
}
.google-mark {
display: grid;
place-items: center;
width: 25px;
height: 25px;
border-radius: 50%;
background:
conic-gradient(
from -40deg,
#4285f4 0 25%,
#34a853 25% 48%,
#fbbc05 48% 72%,
#ea4335 72% 100%
);
color: #fff;
font-size: .82rem;
font-weight: 950;
text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.auth-separator {
display: flex;
align-items: center;
gap: 13px;
margin: 20px 0;
color: #929aa3;
font-size: .73rem;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .09em;
}
.auth-separator::before,
.auth-separator::after {
content: "";
flex: 1;
height: 1px;
background: #e5e8eb;
}
:root[data-theme="dark"] .google-login-button {
border-color: #3a444e;
background: #202832;
color: #edf1f4;
}
:root[data-theme="dark"] .auth-separator::before,
:root[data-theme="dark"] .auth-separator::after {
background: #37414a;
}
/* CORRECTIF 28.5 — VOCAL DANS UNE NOTE ÉCRITE */
.note-form:not(.is-vocal-mode) #save-voice-button {
display: none !important;
}
.note-form:not(.is-vocal-mode) .voice-draft-actions {
margin-left: auto;
}
/*
* Dans une note classique, le vocal reste en attente jusqu'à la
* validation globale de la note. Le bouton visible sert seulement
* à supprimer le vocal avant cette validation.
*/
/* =========================================================
ÉTAPE 29 — FAQ, LÉGAL, FOOTER ET COOKIES
========================================================= */
.site-footer {
margin-top: 80px;
padding: 58px 0 22px;
border-top: 1px solid rgba(24, 32, 42, .09);
background: #1b232c;
color: #bdc5cd;
}
.site-footer-grid {
display: grid;
grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(150px, 1fr));
gap: 48px;
width: min(1180px, calc(100% - 36px));
margin: 0 auto;
}
.footer-brand {
display: inline-flex;
align-items: center;
gap: 12px;
color: #fff;
text-decoration: none;
font-size: 1.3rem;
font-weight: 650;
letter-spacing: -.035em;
}
.footer-brand-block p {
max-width: 340px;
margin: 20px 0 0;
color: #9ca7b1;
font-size: .86rem;
line-height: 1.7;
}
.footer-column {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 11px;
}
.footer-column strong {
margin-bottom: 7px;
color: #fff;
font-size: .82rem;
text-transform: uppercase;
letter-spacing: .08em;
}
.footer-column a,
.footer-link-button {
padding: 0;
border: 0;
background: transparent;
color: #abb5be;
text-decoration: none;
font: inherit;
font-size: .83rem;
cursor: pointer;
text-align: left;
}
.footer-column a:hover,
.footer-link-button:hover {
color: #fff;
text-decoration: underline;
}
.site-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
width: min(1180px, calc(100% - 36px));
margin: 42px auto 0;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, .09);
color: #87939e;
font-size: .75rem;
}
.site-footer-bottom p {
margin: 0;
}
.legal-hero {
max-width: 900px;
margin: 0 auto;
padding: 75px 0 45px;
text-align: center;
}
.legal-hero h1 {
margin: 0;
color: #202a34;
font-size: clamp(2.8rem, 7vw, 5.4rem);
line-height: .96;
letter-spacing: -.07em;
}
.legal-hero > p:last-child {
margin: 20px auto 0;
color: #6d7882;
line-height: 1.7;
}
.legal-content,
.faq-list {
width: min(880px, 100%);
margin: 0 auto 90px;
}
.legal-content {
display: grid;
gap: 18px;
}
.legal-content > section,
.faq-list details {
padding: 28px;
border: 1px solid #e0e4e7;
border-radius: 20px;
background: rgba(255, 255, 255, .84);
box-shadow: 0 14px 34px rgba(32, 38, 45, .045);
}
.legal-content h2 {
margin: 0;
color: #27313b;
font-size: 1.35rem;
letter-spacing: -.03em;
}
.legal-content p,
.legal-content li {
color: #67727c;
line-height: 1.72;
}
.legal-content p:last-child {
margin-bottom: 0;
}
.legal-content a {
color: #805f0c;
font-weight: 750;
}
.legal-data {
display: grid;
gap: 0;
margin: 18px 0 0;
}
.legal-data > div {
display: grid;
grid-template-columns: minmax(180px, .65fr) minmax(0, 1fr);
gap: 24px;
padding: 13px 0;
border-top: 1px solid #e8ebed;
}
.legal-data dt {
color: #7b858e;
font-size: .78rem;
font-weight: 800;
}
.legal-data dd {
margin: 0;
color: #303a43;
font-weight: 680;
}
.legal-table-wrap {
overflow-x: auto;
margin-top: 18px;
}
.legal-table {
width: 100%;
border-collapse: collapse;
min-width: 620px;
}
.legal-table th,
.legal-table td {
padding: 13px 14px;
border: 1px solid #e2e6e9;
text-align: left;
vertical-align: top;
}
.legal-table th {
background: #f4f5f2;
color: #4b5660;
font-size: .76rem;
}
.legal-table td {
color: #67727c;
font-size: .82rem;
line-height: 1.55;
}
.faq-list {
display: grid;
gap: 12px;
}
.faq-list details {
padding: 0;
overflow: hidden;
}
.faq-list summary {
position: relative;
padding: 22px 58px 22px 23px;
color: #28323b;
font-weight: 820;
cursor: pointer;
list-style: none;
}
.faq-list summary::-webkit-details-marker {
display: none;
}
.faq-list summary::after {
content: "+";
position: absolute;
right: 23px;
top: 50%;
transform: translateY(-50%);
color: #a47d17;
font-size: 1.45rem;
}
.faq-list details[open] summary::after {
content: "−";
}
.faq-list details p {
margin: 0;
padding: 0 23px 23px;
color: #6d7780;
line-height: 1.7;
}
.cookie-banner {
position: fixed;
z-index: 100;
left: 50%;
bottom: 20px;
display: flex;
align-items: center;
gap: 30px;
width: min(980px, calc(100% - 28px));
padding: 20px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 20px;
background: rgba(24, 31, 39, .97);
color: #fff;
box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
transform: translateX(-50%);
backdrop-filter: blur(18px);
}
.cookie-banner[hidden] {
display: none !important;
}
.cookie-banner-copy {
min-width: 0;
flex: 1;
}
.cookie-banner-copy strong {
font-size: 1rem;
}
.cookie-banner-copy p {
margin: 6px 0 0;
color: #c1c9d0;
font-size: .78rem;
line-height: 1.55;
}
.cookie-banner-copy a {
color: #f6d76e;
font-weight: 750;
}
.cookie-banner-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.cookie-dialog {
width: 100%;
max-width: none;
height: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.cookie-dialog::backdrop {
background: rgba(14, 18, 23, .62);
backdrop-filter: blur(5px);
}
.cookie-dialog-backdrop {
position: fixed;
inset: 0;
}
.cookie-dialog-backdrop button {
width: 100%;
height: 100%;
border: 0;
background: transparent;
}
.cookie-dialog-card {
position: fixed;
z-index: 2;
left: 50%;
top: 50%;
width: min(620px, calc(100% - 28px));
max-height: calc(100vh - 36px);
overflow-y: auto;
padding: 28px;
border-radius: 24px;
background: #fff;
box-shadow: 0 30px 90px rgba(0, 0, 0, .28);
transform: translate(-50%, -50%);
}
.cookie-dialog-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
}
.cookie-dialog-heading h2 {
margin: 0;
color: #28323b;
font-size: 1.75rem;
letter-spacing: -.04em;
}
.cookie-setting-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
padding: 19px 0;
border-top: 1px solid #e6e9eb;
}
.cookie-setting-row strong {
color: #303a43;
}
.cookie-setting-row p {
margin: 6px 0 0;
color: #737d86;
font-size: .78rem;
line-height: 1.55;
}
.cookie-required-badge {
flex: 0 0 auto;
padding: 7px 10px;
border-radius: 999px;
background: #e8f4eb;
color: #377148;
font-size: .68rem;
font-weight: 850;
}
.cookie-setting-toggle {
cursor: pointer;
}
.cookie-setting-toggle input {
flex: 0 0 auto;
width: 46px;
height: 25px;
accent-color: #26313b;
}
.cookie-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 9px;
margin-top: 22px;
}
:root[data-theme="dark"] .legal-hero h1 {
color: #edf1f4;
}
:root[data-theme="dark"] .legal-content > section,
:root[data-theme="dark"] .faq-list details,
:root[data-theme="dark"] .cookie-dialog-card {
border-color: #36414b;
background: #1c242c;
}
:root[data-theme="dark"] .legal-content h2,
:root[data-theme="dark"] .legal-data dd,
:root[data-theme="dark"] .faq-list summary,
:root[data-theme="dark"] .cookie-dialog-heading h2,
:root[data-theme="dark"] .cookie-setting-row strong {
color: #e8edf0;
}
:root[data-theme="dark"] .legal-table th {
background: #252e36;
}
:root[data-theme="dark"] .legal-table th,
:root[data-theme="dark"] .legal-table td,
:root[data-theme="dark"] .legal-data > div,
:root[data-theme="dark"] .cookie-setting-row {
border-color: #37424c;
}
@media (max-width: 900px) {
.site-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cookie-banner {
align-items: stretch;
flex-direction: column;
gap: 16px;
}
.cookie-banner-actions {
justify-content: stretch;
}
.cookie-banner-actions .button {
flex: 1;
}
}
@media (max-width: 620px) {
.site-footer {
margin-top: 55px;
padding-top: 42px;
}
.site-footer-grid {
grid-template-columns: 1fr;
gap: 30px;
width: min(100% - 28px, 1180px);
}
.site-footer-bottom {
align-items: flex-start;
flex-direction: column;
width: min(100% - 28px, 1180px);
}
.legal-hero {
padding: 52px 0 32px;
}
.legal-content > section {
padding: 21px;
}
.legal-data > div {
grid-template-columns: 1fr;
gap: 5px;
}
.cookie-banner {
bottom: 10px;
padding: 16px;
border-radius: 17px;
}
.cookie-banner-actions {
display: grid;
grid-template-columns: 1fr 1fr;
}
.cookie-banner-actions .button:last-child {
grid-column: 1 / -1;
}
.cookie-dialog-card {
padding: 22px 18px;
}
.cookie-setting-row {
align-items: flex-start;
flex-direction: column;
gap: 12px;
}
.cookie-dialog-actions {
display: grid;
grid-template-columns: 1fr;
}
}
/* CORRECTIF 29.2 — RETOUR SUR LA NOTE MODIFIÉE */
.note-card:target {
scroll-margin-top: 110px;
animation: note-return-highlight 1.5s ease;
}
@keyframes note-return-highlight {
0% {
outline: 4px solid rgba(202, 159, 42, .75);
outline-offset: 5px;
transform: translateY(-3px) rotate(0);
}
100% {
outline: 0 solid transparent;
outline-offset: 0;
}
}
/* =========================================================
ÉTAPE 30.2 — TUTORIEL INTERACTIF CORRIGÉ
========================================================= */
.tour-help-button {
min-width: 38px;
padding-inline: 12px;
font-weight: 950;
}
.tour-dialog {
position: fixed;
inset: 0;
z-index: 10000;
pointer-events: none;
}
.tour-dialog[hidden] {
display: none !important;
}
.tour-dialog.is-open {
display: block;
}
.tour-overlay {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(12, 16, 22, .58);
backdrop-filter: blur(2px);
pointer-events: auto;
}
.tour-card {
position: fixed;
z-index: 10002;
width: min(380px, calc(100vw - 28px));
padding: 24px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 22px;
background: #fff;
box-shadow: 0 28px 90px rgba(0, 0, 0, .32);
pointer-events: auto;
}
.tour-card.is-centered {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.tour-progress {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
color: #8b959e;
font-size: .71rem;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .08em;
}
.tour-close {
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: #eef1f2;
color: #4e5963;
font-size: 1.2rem;
cursor: pointer;
}
.tour-card h2 {
margin: 18px 0 0;
color: #26313a;
font-size: 1.55rem;
letter-spacing: -.04em;
}
.tour-card p {
margin: 11px 0 0;
color: #6c7781;
font-size: .88rem;
line-height: 1.65;
}
.tour-actions {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 24px;
}
.tour-highlight {
position: relative !important;
z-index: 10001 !important;
outline: 5px solid rgba(246, 205, 67, .98);
outline-offset: 5px;
border-radius: 14px;
box-shadow: 0 18px 46px rgba(0, 0, 0, .3) !important;
isolation: isolate;
}
:root[data-theme="dark"] .tour-card {
border-color: #39434d;
background: #1c242c;
}
:root[data-theme="dark"] .tour-card h2 {
color: #eef2f4;
}
:root[data-theme="dark"] .tour-close {
background: #2a333c;
color: #dce2e6;
}
@media (max-width: 700px) {
.tour-card,
.tour-card.is-centered {
left: 14px !important;
right: 14px !important;
bottom: 14px !important;
top: auto !important;
width: auto;
transform: none !important;
}
.tour-actions {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
/* CORRECTIF 30.3 — CATÉGORIES ET ACCÈS AU TUTORIEL */
.notes-sidebar.tour-highlight {
border-radius: 24px;
outline-width: 6px;
outline-offset: 7px;
}
.footer-link-button#start-site-tour {
text-align: left;
}
/* CORRECTIF 30.4 — SPOTLIGHT INDÉPENDANT */
.tour-spotlight {
position: fixed;
z-index: 10001;
display: none;
border: 5px solid rgba(246, 205, 67, .98);
border-radius: 20px;
box-shadow:
0 0 0 4px rgba(16, 22, 29, .82),
0 18px 46px rgba(0, 0, 0, .34);
pointer-events: none;
transition:
left .18s ease,
top .18s ease,
width .18s ease,
height .18s ease;
}
.tour-spotlight.is-visible {
display: block;
}
.tour-highlight {
outline: none !important;
box-shadow: none !important;
z-index: auto !important;
}
.notes-sidebar.tour-highlight {
outline: none !important;
}
/* ÉTAPE 31 — SUPPRESSION DES COMPTES GOOGLE */
.account-google-confirmation {
padding: 16px 18px;
border: 1px solid rgba(66, 133, 244, .24);
border-radius: 14px;
background: rgba(66, 133, 244, .08);
}
.account-google-confirmation strong {
display: block;
color: inherit;
}
.account-google-confirmation p {
margin: 6px 0 0;
color: var(--muted, #6c7781);
line-height: 1.55;
}
/* =========================================================
ÉTAPE 32 — DISCUSSION ET RÉUNION SUR NOTE PARTAGÉE
========================================================= */
.share-collaboration {
display: grid;
gap: 18px;
margin-top: 26px;
padding-top: 24px;
border-top: 1px solid rgba(38, 49, 58, .14);
}
.share-collaboration-heading h2 {
margin: 4px 0 0;
font-size: 1.25rem;
}
.share-meeting-card,
.share-discussion {
border: 1px solid rgba(38, 49, 58, .14);
border-radius: 18px;
background: rgba(255, 255, 255, .72);
box-shadow: 0 12px 34px rgba(31, 40, 48, .08);
}
.share-meeting-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 18px;
}
.share-meeting-card p,
.share-discussion-header p {
margin: 5px 0 0;
color: #6c7781;
font-size: .84rem;
line-height: 1.5;
}
.share-meeting-actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
flex: 0 0 auto;
}
.share-discussion {
overflow: hidden;
}
.share-discussion-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 18px;
border-bottom: 1px solid rgba(38, 49, 58, .12);
}
.share-discussion-count {
flex: 0 0 auto;
padding: 6px 10px;
border-radius: 999px;
background: rgba(38, 49, 58, .08);
color: #59636d;
font-size: .72rem;
font-weight: 800;
}
.share-discussion-messages {
display: grid;
gap: 10px;
max-height: 420px;
padding: 16px 18px;
overflow-y: auto;
}
.share-discussion-empty {
margin: 8px 0;
color: #7a858e;
text-align: center;
}
.share-discussion-message {
padding: 12px 14px;
border-radius: 14px;
background: rgba(38, 49, 58, .06);
}
.share-discussion-message header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.share-discussion-message time {
color: #7d8790;
font-size: .7rem;
}
.share-discussion-message p {
margin: 7px 0 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
line-height: 1.55;
}
.share-discussion-form {
display: grid;
gap: 13px;
padding: 18px;
border-top: 1px solid rgba(38, 49, 58, .12);
}
.share-discussion-form label {
display: grid;
gap: 7px;
}
.share-discussion-form label > span {
font-size: .78rem;
font-weight: 800;
}
.share-discussion-form input,
.share-discussion-form textarea {
width: 100%;
border: 1px solid rgba(38, 49, 58, .2);
border-radius: 12px;
background: rgba(255, 255, 255, .88);
}
.share-discussion-submit {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.share-discussion-submit .share-feedback {
margin: 0;
}
.share-discussion-submit .share-feedback.is-error {
color: #a62d2d;
}
@media (max-width: 700px) {
.share-meeting-card {
align-items: stretch;
flex-direction: column;
}
.share-meeting-actions {
display: grid;
grid-template-columns: 1fr;
}
.share-meeting-actions .button {
width: 100%;
justify-content: center;
}
.share-discussion-header,
.share-discussion-submit {
align-items: stretch;
flex-direction: column;
}
.share-discussion-count {
align-self: flex-start;
}
.share-discussion-submit .button {
width: 100%;
}
}
/* CORRECTIF 32.1 — AUTHENTIFICATION SUR PAGE PARTAGÉE */
.share-auth-gate {
display: grid;
gap: 14px;
margin-top: 26px;
padding: 22px;
border: 1px solid rgba(38, 49, 58, .14);
border-radius: 18px;
background: rgba(255, 255, 255, .78);
box-shadow: 0 12px 34px rgba(31, 40, 48, .08);
}
.share-auth-gate h2,
.share-auth-gate p {
margin: 0;
}
.share-auth-gate > p:not(.eyebrow) {
color: #6c7781;
line-height: 1.6;
}
.share-auth-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.share-auth-actions .google-login-button {
margin: 0;
}
@media (max-width: 700px) {
.share-auth-actions {
display: grid;
grid-template-columns: 1fr;
}
.share-auth-actions .button,
.share-auth-actions .google-login-button {
width: 100%;
justify-content: center;
}
}
/* CORRECTIF 32.2 — AUTHENTIFICATION ENTIÈREMENT INTÉGRÉE */
.share-auth-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 5px;
border-radius: 14px;
background: rgba(38, 49, 58, .07);
}
.share-auth-tab {
min-height: 42px;
border: 0;
border-radius: 10px;
background: transparent;
color: #65717b;
font-weight: 800;
cursor: pointer;
}
.share-auth-tab.is-active {
background: #fff;
color: #26313a;
box-shadow: 0 5px 16px rgba(31, 40, 48, .1);
}
.share-inline-auth-form {
display: none;
gap: 13px;
}
.share-inline-auth-form.is-active {
display: grid;
}
.share-inline-auth-form label {
display: grid;
gap: 7px;
}
.share-inline-auth-form label > span {
font-size: .78rem;
font-weight: 800;
}
.share-inline-auth-form input[type="text"],
.share-inline-auth-form input[type="email"],
.share-inline-auth-form input[type="password"] {
width: 100%;
}
.share-auth-gate .google-login-button {
width: 100%;
justify-content: center;
}
@media (max-width: 700px) {
.share-auth-gate {
padding: 18px;
}
.share-auth-tabs {
grid-template-columns: 1fr;
}
}
/* CORRECTIF 32.3 — PAGE DE NOTE PARTAGÉE PLUS SOIGNÉE */
.public-share-page {
background:
radial-gradient(circle at top left, rgba(255, 223, 95, .45), transparent 26%),
radial-gradient(circle at 100% 0, rgba(196, 222, 255, .34), transparent 20%),
linear-gradient(180deg, #f8f6ef 0%, #f1efe7 100%);
}
.public-share-header {
position: sticky;
top: 0;
z-index: 20;
width: min(1120px, calc(100% - 32px));
margin-top: 14px;
padding: 14px 18px;
border: 1px solid rgba(255,255,255,.72);
border-radius: 18px;
background: rgba(255,255,255,.72);
backdrop-filter: blur(14px);
box-shadow: 0 16px 40px rgba(31, 40, 48, .08);
}
.public-share-header > span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(24, 32, 42, .06);
color: #55616d;
font-size: .74rem;
letter-spacing: .05em;
text-transform: uppercase;
}
.public-share-main {
width: min(1040px, calc(100% - 32px));
padding: 28px 0 80px;
}
.public-shared-note {
position: relative;
overflow: hidden;
padding: 34px;
border: 1px solid rgba(66, 64, 49, .12);
border-radius: 28px;
background:
linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.06)),
var(--shared-note-color, #fff59a);
box-shadow: 0 30px 70px rgba(30, 36, 42, .15);
}
.public-shared-note::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,.20), transparent 22%);
pointer-events: none;
}
.public-shared-note > header,
.public-share-content,
.public-share-section,
.share-auth-gate,
.share-collaboration,
.public-share-footer {
position: relative;
z-index: 1;
}
.public-shared-note > header {
padding: 0 0 28px;
border-bottom: 1px solid rgba(54, 52, 39, .16);
}
.public-share-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 10px;
}
.public-share-private-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,.58);
color: #4a5349;
font-size: .75rem;
font-weight: 900;
box-shadow: inset 0 0 0 1px rgba(83, 89, 57, .08);
}
.public-share-intro {
max-width: 760px;
margin: 12px 0 0;
color: rgba(49, 50, 40, .76);
line-height: 1.65;
}
.public-share-stats {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.public-share-stats span {
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,.52);
color: #494936;
font-size: .78rem;
font-weight: 800;
box-shadow: inset 0 0 0 1px rgba(78, 75, 47, .08);
}
.public-share-dates {
margin-top: 18px;
}
.public-share-dates span {
display: inline-flex;
align-items: center;
padding: 8px 11px;
border-radius: 999px;
background: rgba(255,255,255,.38);
}
.public-share-content {
margin-top: 26px;
padding: 28px;
border-radius: 22px;
background: rgba(255,255,255,.46);
box-shadow: inset 0 0 0 1px rgba(76, 72, 43, .08);
font-size: 1.03rem;
line-height: 1.82;
}
.public-share-section {
margin-top: 22px;
padding: 24px;
border: 1px solid rgba(76, 72, 43, .08);
border-radius: 22px;
background: rgba(255,255,255,.42);
}
.public-share-section h2 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
font-size: 1.08rem;
letter-spacing: -.02em;
}
.public-share-attachments {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.public-share-image,
.public-share-file,
.public-share-audio {
border: 1px solid rgba(71, 70, 50, .08);
background: rgba(255,255,255,.58);
box-shadow: 0 10px 20px rgba(31, 40, 48, .05);
}
.public-share-image {
aspect-ratio: 1 / 1;
transition: transform .18s ease, box-shadow .18s ease;
}
.public-share-image:hover {
transform: translateY(-2px);
box-shadow: 0 15px 28px rgba(31, 40, 48, .11);
}
.public-share-file {
min-height: 54px;
padding: 14px 15px;
border-radius: 14px;
font-size: .82rem;
}
.public-share-audio {
padding: 14px;
border-radius: 16px;
}
.share-auth-gate,
.share-collaboration {
margin-top: 24px;
padding: 26px;
border: 1px solid rgba(76, 72, 43, .09);
border-radius: 24px;
background: rgba(255,255,255,.6);
box-shadow: 0 14px 30px rgba(31, 40, 48, .06);
}
.share-auth-gate h2,
.share-collaboration-heading h2 {
letter-spacing: -.03em;
}
.share-meeting-card,
.share-discussion {
border-radius: 20px;
background: rgba(255,255,255,.72);
}
.share-discussion-messages {
background: rgba(255,255,255,.36);
}
.public-share-footer {
margin-top: 24px;
padding-top: 18px;
font-size: .73rem;
}
@media (max-width: 700px) {
.public-share-header {
position: static;
margin-top: 10px;
padding: 12px 14px;
border-radius: 16px;
}
.public-share-main {
width: min(100% - 22px, 1040px);
padding: 20px 0 50px;
}
.public-shared-note {
padding: 22px 16px;
border-radius: 22px;
}
.public-share-topline {
align-items: flex-start;
flex-direction: column;
}
.public-share-content,
.public-share-section,
.share-auth-gate,
.share-collaboration {
padding: 18px;
border-radius: 18px;
}
.public-share-attachments {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* CORRECTIF 32.4 — DÉCONNEXION SUR LA NOTE PARTAGÉE */
.public-share-header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 9px;
}
.public-share-link-label,
.public-share-user {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 11px;
border-radius: 999px;
font-size: .72rem;
font-weight: 850;
}
.public-share-link-label {
background: rgba(24, 32, 42, .06);
color: #55616d;
letter-spacing: .05em;
text-transform: uppercase;
}
.public-share-user {
max-width: 180px;
overflow: hidden;
background: rgba(245, 211, 83, .22);
color: #51471d;
text-overflow: ellipsis;
white-space: nowrap;
}
.public-share-logout-form {
margin: 0;
}
.public-share-logout {
min-height: 36px;
padding-inline: 12px;
border-radius: 999px;
font-size: .76rem;
}
@media (max-width: 700px) {
.public-share-header {
align-items: flex-start;
}
.public-share-header-actions {
align-items: flex-end;
flex-direction: column;
}
.public-share-user {
display: none;
}
.public-share-link-label {
min-height: 30px;
padding-inline: 9px;
font-size: .65rem;
}
.public-share-logout {
min-height: 34px;
font-size: .72rem;
}
}
/* =========================================================
CORRECTIF 32.5 — CONNEXION PREMIUM ET PRÉSENCE
========================================================= */
.share-auth-gate {
padding: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .72);
background: rgba(255, 255, 255, .7);
box-shadow:
0 24px 55px rgba(31, 40, 48, .11),
inset 0 1px 0 rgba(255, 255, 255, .8);
}
.share-auth-layout {
display: grid;
grid-template-columns:
minmax(250px, .82fr)
minmax(360px, 1.18fr);
min-height: 550px;
}
.share-auth-copy {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
padding: clamp(28px, 4vw, 44px);
overflow: hidden;
background:
radial-gradient(
circle at 8% 0,
rgba(255, 238, 154, .95),
transparent 46%
),
linear-gradient(
155deg,
rgba(255, 248, 206, .98),
rgba(241, 230, 164, .72)
);
}
.share-auth-copy::after {
content: "";
position: absolute;
right: -75px;
bottom: -100px;
width: 235px;
height: 235px;
border-radius: 50%;
background: rgba(255, 255, 255, .35);
}
.share-auth-icon {
position: relative;
width: 64px;
height: 64px;
margin-bottom: 27px;
border: 1px solid rgba(76, 69, 26, .08);
border-radius: 20px;
background: rgba(255, 255, 255, .74);
box-shadow: 0 14px 30px rgba(97, 80, 11, .11);
}
.share-auth-icon::before {
content: "";
position: absolute;
left: 19px;
top: 29px;
width: 23px;
height: 18px;
border: 3px solid #31362d;
border-radius: 7px;
}
.share-auth-icon::after {
content: "";
position: absolute;
left: 22px;
top: 14px;
width: 17px;
height: 18px;
border: 3px solid #31362d;
border-bottom: 0;
border-radius: 12px 12px 0 0;
}
.share-auth-copy h2 {
max-width: 390px;
margin: 0;
color: #282c25;
font-size: clamp(2rem, 3.4vw, 3rem);
line-height: 1.03;
letter-spacing: -.055em;
}
.share-auth-description {
max-width: 410px;
margin-top: 18px !important;
color: rgba(49, 51, 42, .74) !important;
line-height: 1.7 !important;
}
.share-auth-benefits {
display: grid;
gap: 12px;
width: 100%;
margin: 28px 0 0;
padding: 0;
list-style: none;
}
.share-auth-benefits li {
position: relative;
padding: 12px 13px 12px 44px;
border: 1px solid rgba(75, 70, 39, .07);
border-radius: 14px;
background: rgba(255, 255, 255, .5);
color: #41463c;
font-size: .87rem;
font-weight: 780;
}
.share-auth-benefits li::before {
content: "✓";
position: absolute;
left: 13px;
top: 50%;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #26302a;
color: #fff;
font-size: .7rem;
transform: translateY(-50%);
}
.share-auth-reassurance {
position: relative;
z-index: 1;
margin: auto 0 0 !important;
padding-top: 28px;
color: rgba(61, 61, 46, .63) !important;
font-size: .78rem;
line-height: 1.55 !important;
}
.share-auth-panel {
display: flex;
flex-direction: column;
padding: clamp(26px, 4vw, 42px);
background: rgba(255, 255, 255, .82);
}
.share-auth-panel-heading {
display: grid;
gap: 5px;
margin-bottom: 22px;
}
.share-auth-panel-heading > span {
color: #8a939c;
font-size: .7rem;
font-weight: 900;
letter-spacing: .11em;
text-transform: uppercase;
}
.share-auth-panel-heading strong {
color: #25303a;
font-size: 1.18rem;
letter-spacing: -.025em;
}
.share-auth-panel .google-login-button {
min-height: 56px;
border-radius: 15px;
}
.share-auth-panel .auth-separator {
margin: 18px 0;
}
.share-auth-panel .share-auth-tabs {
margin-bottom: 20px;
padding: 6px;
border-radius: 15px;
}
.share-auth-panel .share-auth-tab {
min-height: 46px;
border-radius: 11px;
}
.share-inline-auth-form {
gap: 16px;
}
.share-inline-auth-form label > span {
color: #3c4751;
font-size: .8rem;
}
.share-inline-auth-form input[type="text"],
.share-inline-auth-form input[type="email"],
.share-inline-auth-form input[type="password"] {
min-height: 52px;
padding: 0 15px;
border: 1px solid #d9dfe4;
border-radius: 13px;
background: #fff;
color: #202a34;
font: inherit;
outline: none;
transition: .16s ease;
}
.share-inline-auth-form input:focus {
border-color: #d5a71f;
box-shadow: 0 0 0 4px rgba(242, 201, 76, .18);
}
.share-inline-auth-form .button-full {
min-height: 54px;
margin-top: 3px;
border-radius: 14px;
}
.share-presence {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 13px;
padding: 14px 16px;
border: 1px solid rgba(67, 135, 91, .18);
border-radius: 17px;
background:
linear-gradient(
135deg,
rgba(235, 248, 239, .92),
rgba(255, 255, 255, .78)
);
}
.share-presence-indicator {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(65, 155, 95, .13);
}
.share-presence-indicator span {
width: 10px;
height: 10px;
border-radius: 50%;
background: #3da767;
box-shadow:
0 0 0 6px rgba(61, 167, 103, .12),
0 0 16px rgba(61, 167, 103, .48);
}
.share-presence-copy {
min-width: 0;
}
.share-presence-copy strong {
display: block;
color: #2f503b;
font-size: .87rem;
}
.share-presence-copy p {
margin: 4px 0 0;
color: #62736a;
font-size: .77rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.share-presence-refresh {
min-height: 36px;
padding-inline: 12px;
border-radius: 999px;
background: rgba(255, 255, 255, .78);
font-size: .73rem;
}
@media (max-width: 760px) {
.share-auth-layout {
grid-template-columns: 1fr;
}
.share-auth-copy {
min-height: auto;
padding: 26px 20px;
}
.share-auth-reassurance {
margin-top: 24px !important;
}
.share-auth-panel {
padding: 24px 18px;
}
}
@media (max-width: 560px) {
.share-presence {
grid-template-columns: auto minmax(0, 1fr);
}
.share-presence-refresh {
grid-column: 1 / -1;
width: 100%;
}
.share-auth-copy h2 {
font-size: 2.05rem;
}
}
/* =========================================================
ÉTAPE 33 — MÉDIAS DE DISCUSSION ET ESPACE DES PARTAGES
========================================================= */
.share-media-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 13px;
border: 1px solid rgba(38, 49, 58, .16);
border-radius: 12px;
background: rgba(255, 255, 255, .8);
color: #43505a;
font: inherit;
font-size: .78rem;
font-weight: 850;
cursor: pointer;
}
.share-media-button input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.share-media-button.is-recording {
border-color: #e28b85;
background: #fff0ef;
color: #ae2e27;
box-shadow: 0 0 0 4px rgba(226, 87, 75, .1);
}
.share-media-button.is-danger {
color: #a42f29;
}
.share-image-preview {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 9px;
}
.share-image-preview figure {
min-width: 0;
margin: 0;
}
.share-image-preview img {
display: block;
width: 100%;
aspect-ratio: 1;
border-radius: 12px;
object-fit: cover;
}
.share-image-preview figcaption {
margin-top: 5px;
color: #75808a;
font-size: .68rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.share-audio-draft {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 14px;
border: 1px solid rgba(197, 78, 69, .18);
border-radius: 13px;
background: rgba(255, 239, 237, .72);
}
.share-audio-draft strong {
color: #7e332e;
font-size: .8rem;
}
.share-audio-draft span {
color: #9c4b45;
font-size: .78rem;
font-weight: 850;
}
.share-message-media-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-top: 11px;
}
.share-message-image {
display: block;
overflow: hidden;
border-radius: 12px;
}
.share-message-image img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.share-message-audio {
grid-column: 1 / -1;
padding: 10px;
border-radius: 12px;
background: rgba(255, 255, 255, .68);
}
.share-message-audio span {
display: block;
margin-bottom: 6px;
color: #69747d;
font-size: .7rem;
font-weight: 850;
}
.share-message-audio audio {
width: 100%;
}
.shared-notes-page {
padding: 46px 0 78px;
}
.shared-notes-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 26px;
margin-bottom: 28px;
}
.shared-notes-heading h1 {
margin: 0;
font-size: clamp(2.5rem, 5vw, 4.8rem);
letter-spacing: -.065em;
}
.shared-notes-heading > div > p:last-child {
max-width: 670px;
margin: 14px 0 0;
color: #6c7781;
line-height: 1.65;
}
.shared-notes-layout {
display: grid;
grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
gap: 22px;
}
.shared-notes-list {
display: grid;
align-content: start;
gap: 10px;
}
.shared-note-row {
display: grid;
gap: 9px;
padding: 17px;
border: 1px solid rgba(38, 49, 58, .1);
border-radius: 17px;
background: rgba(255, 255, 255, .78);
color: inherit;
text-decoration: none;
box-shadow: 0 9px 24px rgba(31, 40, 48, .05);
transition: .16s ease;
}
.shared-note-row:hover,
.shared-note-row.is-active {
border-color: rgba(213, 167, 31, .36);
background: #fff9d8;
transform: translateY(-1px);
}
.shared-note-row-heading,
.shared-note-row-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.shared-note-row-heading strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.shared-note-row-heading span,
.shared-note-row-meta span {
color: #78828b;
font-size: .7rem;
font-weight: 800;
}
.shared-note-row p {
margin: 0;
color: #65707a;
font-size: .82rem;
line-height: 1.5;
}
.shared-notes-conversation {
min-height: 550px;
padding: 24px;
border: 1px solid rgba(38, 49, 58, .1);
border-radius: 24px;
background: rgba(255, 255, 255, .82);
box-shadow: 0 18px 45px rgba(31, 40, 48, .07);
}
.shared-notes-placeholder,
.shared-notes-empty {
display: grid;
place-items: center;
min-height: 420px;
padding: 35px;
text-align: center;
}
.shared-conversation-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
padding-bottom: 19px;
border-bottom: 1px solid #eceff1;
}
.shared-conversation-heading h2 {
margin: 0;
font-size: 1.8rem;
letter-spacing: -.04em;
}
.shared-conversation-note-preview {
margin-top: 18px;
padding: 17px;
border-radius: 15px;
background: #fff8bf;
color: #494735;
line-height: 1.62;
}
.shared-conversation-messages {
display: grid;
gap: 12px;
margin-top: 18px;
}
.shared-owner-message {
padding: 15px;
border: 1px solid #e6e9eb;
border-radius: 15px;
background: #fff;
}
.shared-owner-message header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
}
.shared-owner-message time {
color: #87909a;
font-size: .68rem;
}
.shared-owner-message p {
margin: 8px 0 0;
line-height: 1.58;
}
.shared-owner-media {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-top: 11px;
}
.shared-owner-media img {
display: block;
width: 100%;
aspect-ratio: 1;
border-radius: 11px;
object-fit: cover;
}
.shared-owner-media audio {
grid-column: 1 / -1;
width: 100%;
}
@media (max-width: 850px) {
.shared-notes-layout {
grid-template-columns: 1fr;
}
.shared-notes-heading {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 620px) {
.share-image-preview,
.share-message-media-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.share-message-tools {
display: grid;
grid-template-columns: 1fr;
}
.share-media-button {
width: 100%;
}
.shared-notes-page {
padding-top: 28px;
}
.shared-notes-conversation {
padding: 17px;
border-radius: 19px;
}
.shared-conversation-heading {
flex-direction: column;
}
.shared-owner-media {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* =========================================================
CORRECTIF 33.5 — COOKIES ET CONFIDENTIALITÉ SUR MOBILE
========================================================= */
.legal-hero,
.legal-content {
min-width: 0;
}
.legal-content > section {
overflow: hidden;
}
.legal-content ul {
margin: 15px 0 0;
padding-left: 22px;
}
.legal-content li + li {
margin-top: 9px;
}
.legal-content strong {
overflow-wrap: anywhere;
}
.legal-table-wrap {
max-width: 100%;
border-radius: 15px;
}
@media (max-width: 620px) {
.legal-hero {
width: 100%;
padding: 34px 0 24px;
text-align: left;
}
.legal-hero .eyebrow {
margin-bottom: 9px;
}
.legal-hero h1 {
max-width: 100%;
font-size: clamp(2.05rem, 11vw, 3.05rem);
line-height: 1.02;
letter-spacing: -.055em;
overflow-wrap: anywhere;
}
.legal-hero > p:last-child {
margin-top: 12px;
font-size: .82rem;
line-height: 1.5;
}
.legal-content,
.faq-list {
width: 100%;
margin-bottom: 55px;
gap: 12px;
}
.legal-content > section {
padding: 19px 16px;
border-radius: 17px;
box-shadow: 0 9px 24px rgba(32, 38, 45, .04);
}
.legal-content h2 {
font-size: 1.16rem;
line-height: 1.25;
}
.legal-content p,
.legal-content li {
font-size: .9rem;
line-height: 1.65;
}
.legal-content ul {
padding-left: 19px;
}
.legal-table-wrap {
margin: 16px 0 0;
overflow: visible;
}
.legal-table {
display: block;
min-width: 0;
border-collapse: separate;
}
.legal-table thead {
display: none;
}
.legal-table tbody,
.legal-table tr,
.legal-table td {
display: block;
width: 100%;
}
.legal-table tr {
margin-bottom: 12px;
overflow: hidden;
border: 1px solid #e2e6e9;
border-radius: 14px;
background: #fff;
}
.legal-table tr:last-child {
margin-bottom: 0;
}
.legal-table td {
display: grid;
grid-template-columns: minmax(100px, .75fr) minmax(0, 1.25fr);
gap: 12px;
padding: 12px 13px;
border: 0;
border-bottom: 1px solid #e9ecee;
font-size: .82rem;
overflow-wrap: anywhere;
}
.legal-table td:last-child {
border-bottom: 0;
}
.legal-table td::before {
content: attr(data-label);
color: #3e4851;
font-size: .7rem;
font-weight: 900;
letter-spacing: .035em;
text-transform: uppercase;
}
.legal-content .button {
width: 100%;
min-height: 48px;
margin-top: 4px;
}
.cookie-dialog-card {
left: 10px;
right: 10px;
top: auto;
bottom: 10px;
width: auto;
max-height: calc(100dvh - 20px);
padding: 20px 16px;
border-radius: 20px;
transform: none;
}
.cookie-dialog-heading h2 {
font-size: 1.45rem;
}
.cookie-dialog-actions {
grid-template-columns: 1fr;
}
.cookie-dialog-actions .button {
width: 100%;
}
}
@media (max-width: 390px) {
.legal-table td {
grid-template-columns: 1fr;
gap: 5px;
}
.legal-content > section {
padding-inline: 14px;
}
}
:root[data-theme="dark"] .legal-table tr {
border-color: #37424c;
background: #202830;
}
:root[data-theme="dark"] .legal-table td::before {
color: #cfd6dc;
}
/* =========================================================
ÉTAPE 34 — DEADLINES SUR LES NOTES IMPORTANTES
========================================================= */
.deadline-editor {
padding: 18px;
border: 1px solid rgba(50, 62, 72, .11);
border-radius: 17px;
background:
linear-gradient(
145deg,
rgba(255, 250, 224, .9),
rgba(255, 255, 255, .88)
);
}
.deadline-editor-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.deadline-editor-heading strong {
color: #343c43;
font-size: .92rem;
}
.deadline-editor-heading p {
margin: 5px 0 0;
color: #727c85;
font-size: .78rem;
line-height: 1.5;
}
.deadline-toggle {
position: relative;
flex: 0 0 auto;
cursor: pointer;
}
.deadline-toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.deadline-toggle span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 0 14px;
border: 1px solid #d8dde1;
border-radius: 999px;
background: #fff;
color: #56616b;
font-size: .76rem;
font-weight: 850;
transition: .16s ease;
}
.deadline-toggle input:checked + span {
border-color: #dcab20;
background: #f5d353;
color: #3f3512;
box-shadow: 0 7px 18px rgba(208, 158, 18, .18);
}
.deadline-fields {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 12px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(50, 62, 72, .09);
}
.deadline-fields label {
display: grid;
gap: 7px;
}
.deadline-fields label span {
color: #3d4750;
font-size: .78rem;
font-weight: 850;
}
.deadline-fields input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #d7dde2;
border-radius: 12px;
background: #fff;
color: #26313a;
font: inherit;
outline: none;
}
.deadline-fields input:focus {
border-color: #d5a71f;
box-shadow: 0 0 0 4px rgba(242, 201, 76, .18);
}
.deadline-clear {
min-height: 48px;
}
.note-deadline {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 16px;
padding: 9px 11px;
border: 1px solid rgba(57, 107, 75, .16);
border-radius: 12px;
background: rgba(239, 249, 242, .72);
color: #3d644b;
font-size: .72rem;
}
.note-deadline strong {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .035em;
}
.note-deadline time {
font-weight: 850;
}
.note-deadline.is-soon {
border-color: rgba(203, 139, 25, .24);
background: rgba(255, 243, 203, .82);
color: #805b13;
}
.note-deadline.is-overdue {
border-color: rgba(190, 62, 52, .24);
background: rgba(255, 231, 228, .85);
color: #9a3028;
}
.note-card.has-deadline {
box-shadow:
0 16px 28px rgba(36, 41, 47, .1),
inset 0 0 0 2px rgba(75, 133, 91, .13);
}
.note-card.is-deadline-soon {
box-shadow:
0 16px 28px rgba(36, 41, 47, .1),
inset 0 0 0 2px rgba(221, 163, 35, .28);
}
.note-card.is-deadline-overdue {
box-shadow:
0 16px 28px rgba(36, 41, 47, .1),
inset 0 0 0 2px rgba(202, 66, 56, .28);
}
@media (max-width: 620px) {
.deadline-editor-heading,
.deadline-fields {
align-items: stretch;
grid-template-columns: 1fr;
}
.deadline-editor-heading {
flex-direction: column;
}
.deadline-toggle,
.deadline-toggle span,
.deadline-clear {
width: 100%;
}
}
/* CORRECTIF 34.1 — MODIFICATION DIRECTE DE LA DEADLINE */
.deadline-editor-heading {
align-items: flex-start;
}
.deadline-editor-heading > div {
max-width: 620px;
}
.deadline-fields {
margin-top: 14px;
}
.deadline-fields input[type="datetime-local"] {
cursor: pointer;
}
.deadline-clear {
white-space: nowrap;
}
@media (max-width: 620px) {
.deadline-fields {
display: grid;
grid-template-columns: 1fr;
}
}
/* CORRECTIF 34.2 — CHAMPS DATE ET HEURE SÉPARÉS */
.deadline-fields {
grid-template-columns: minmax(0, 1fr) auto;
}
.deadline-date-time-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(130px, .75fr);
gap: 12px;
}
.deadline-date-time-grid input[type="date"],
.deadline-date-time-grid input[type="time"] {
width: 100%;
min-height: 49px;
padding: 0 14px;
border: 1px solid #d7dde2;
border-radius: 12px;
background: #fff;
color: #26313a;
font: inherit;
outline: none;
cursor: pointer;
}
.deadline-date-time-grid input:focus {
border-color: #d5a71f;
box-shadow: 0 0 0 4px rgba(242, 201, 76, .18);
}
@media (max-width: 620px) {
.deadline-fields,
.deadline-date-time-grid {
grid-template-columns: 1fr;
}
.deadline-clear {
width: 100%;
}
}
/* CORRECTIF 34.3 — CHAMPS DEADLINE ET ERREUR JSON */
.deadline-date-time-grid input[type="date"],
.deadline-date-time-grid input[type="time"] {
color-scheme: light;
}
:root[data-theme="dark"]
.deadline-date-time-grid input[type="date"],
:root[data-theme="dark"]
.deadline-date-time-grid input[type="time"] {
border-color: #3a4651;
background: #202830;
color: #eef2f5;
color-scheme: dark;
}
:root[data-theme="dark"] .deadline-editor {
border-color: #36414b;
background:
linear-gradient(
145deg,
rgba(58, 50, 24, .34),
rgba(31, 39, 47, .94)
);
}
:root[data-theme="dark"] .deadline-editor-heading strong,
:root[data-theme="dark"] .deadline-date-time-grid label span {
color: #e4e9ed;
}
:root[data-theme="dark"] .deadline-editor-heading p {
color: #9ca6af;
}
/* CORRECTIF 34.4 — DEADLINES ÉPINGLÉES ET COMPTEURS */
.category-row .category-link strong {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 25px;
min-height: 22px;
margin-left: auto;
padding: 0 7px;
border-radius: 999px;
background: rgba(105, 117, 132, .09);
color: #6d7781;
font-size: .7rem;
font-weight: 900;
}
.category-row .category-link:hover strong,
.category-row .category-link.is-active strong {
background: rgba(255, 255, 255, .74);
color: #554716;
}
.note-card.has-deadline .note-pin {
background: #e8ad24;
box-shadow:
0 6px 0 #9b6911,
0 8px 15px rgba(115, 76, 9, .25);
}
.note-card.has-deadline .note-pin::after {
background: #c5aa62;
}
@media (max-width: 590px) {
.category-row .category-link strong {
min-width: 23px;
min-height: 21px;
padding-inline: 6px;
}
}
/* CORRECTIF 34.5 — COMPTEURS UNIFORMES DANS LES CATÉGORIES */
.category-navigation .category-link strong {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 25px;
min-height: 22px;
margin-left: auto;
padding: 0 7px;
border-radius: 999px;
background: rgba(105, 117, 132, .09);
color: #6d7781;
font-size: .7rem;
font-weight: 900;
line-height: 1;
}
.category-navigation .category-link:hover strong,
.category-navigation .category-link.is-active strong {
background: rgba(255, 255, 255, .76);
color: #554716;
box-shadow: 0 3px 9px rgba(70, 61, 20, .08);
}
:root[data-theme="dark"]
.category-navigation .category-link strong {
background: rgba(255, 255, 255, .08);
color: #c9d0d6;
}
:root[data-theme="dark"]
.category-navigation .category-link:hover strong,
:root[data-theme="dark"]
.category-navigation .category-link.is-active strong {
background: rgba(245, 211, 83, .18);
color: #f4d96f;
}
@media (max-width: 590px) {
.category-navigation .category-link strong {
min-width: 23px;
min-height: 21px;
padding-inline: 6px;
}
}
/* CORRECTIF 34.6 — MÊME COMPTEUR QUE LES CATÉGORIES PERSONNELLES */
/*
* Les liens spéciaux sont des enfants directs de .category-navigation,
* alors que les catégories personnelles sont contenues dans
* .category-row. On applique désormais exactement le même badge.
*/
.category-navigation > .category-link strong,
.category-navigation .category-row .category-link strong {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
min-width: 25px !important;
height: 22px !important;
min-height: 22px !important;
margin: 0 0 0 auto !important;
padding: 0 7px !important;
border: 0 !important;
border-radius: 999px !important;
background: #303943 !important;
color: #dce2e7 !important;
font-size: .7rem !important;
font-weight: 900 !important;
line-height: 1 !important;
box-shadow: none !important;
}
/* Le compteur garde le même style, même sur le lien actif. */
.category-navigation > .category-link:hover strong,
.category-navigation > .category-link.is-active strong,
.category-navigation .category-row .category-link:hover strong,
.category-navigation .category-row .category-link.is-active strong {
background: #303943 !important;
color: #dce2e7 !important;
box-shadow: none !important;
}
/* Mode clair */
:root:not([data-theme="dark"])
.category-navigation > .category-link strong,
:root:not([data-theme="dark"])
.category-navigation .category-row .category-link strong {
background: #e7eaed !important;
color: #59636d !important;
}
/* Le texte des liens spéciaux conserve toute la place disponible. */
.category-navigation > .category-link > span:nth-child(2),
.category-navigation .category-row .category-link > span:nth-child(2) {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 590px) {
.category-navigation > .category-link strong,
.category-navigation .category-row .category-link strong {
min-width: 23px !important;
height: 21px !important;
min-height: 21px !important;
padding: 0 6px !important;
}
}
/* =========================================================
CORRECTIF 34.7 — NAVIGATION TOTALEMENT HARMONISÉE
========================================================= */
.category-navigation {
display: grid;
gap: 5px;
}
.category-navigation .category-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
width: 100%;
min-width: 0;
}
.category-navigation .category-row-system {
grid-template-columns: minmax(0, 1fr);
}
.category-navigation .category-row .category-link {
display: grid;
grid-template-columns: 20px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
width: 100%;
min-width: 0;
min-height: 43px;
padding: 10px 11px;
}
.category-navigation .category-row .category-link > span:first-child {
display: grid;
place-items: center;
flex: none;
width: 20px;
height: 20px;
margin: 0;
}
.category-navigation .category-row .category-link > span:nth-child(2) {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.category-navigation .category-row .category-link strong {
justify-self: end;
min-width: 25px !important;
height: 22px !important;
min-height: 22px !important;
margin: 0 !important;
padding: 0 7px !important;
}
.category-navigation .category-audio-icon,
.category-navigation .category-special-icon,
.category-navigation .category-status-icon {
border-radius: 7px;
font-size: .72rem;
line-height: 1;
}
.category-navigation .category-row-system
+ .category-row:not(.category-row-system) {
margin-top: 8px;
}
.category-navigation .category-row-system .category-link,
.category-navigation .category-row:not(.category-row-system) .category-link {
border-radius: 12px;
}
.category-navigation .category-row-system .category-link.is-active,
.category-navigation .category-row:not(.category-row-system) .category-link.is-active {
padding-left: 11px;
}
.category-navigation .category-rename,
.category-navigation .category-delete {
flex: none;
}
@media (max-width: 590px) {
.category-navigation .category-row .category-link {
grid-template-columns: 20px minmax(0, 1fr) auto;
min-height: 42px;
padding: 9px 10px;
}
}
/* =========================================================
CORRECTIF 34.8 — NOMS DE CATÉGORIES ENTIERS
========================================================= */
/*
* Les boutons Renommer et Supprimer occupaient deux colonnes permanentes,
* même lorsqu’ils étaient invisibles. Cela réduisait inutilement la place
* disponible pour le nom de la catégorie.
*/
.notes-dashboard {
grid-template-columns: 300px minmax(0, 1fr);
}
.category-navigation .category-row {
position: relative;
display: block;
width: 100%;
min-width: 0;
}
.category-navigation .category-row .category-link {
display: grid;
grid-template-columns: 20px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
width: 100%;
min-width: 0;
padding: 10px 11px;
}
/* Les noms peuvent désormais s’afficher entièrement sur plusieurs lignes. */
.category-navigation .category-row .category-link > span:nth-child(2) {
min-width: 0;
overflow: visible;
text-overflow: clip;
white-space: normal;
line-height: 1.3;
overflow-wrap: anywhere;
}
/* Les actions flottent au-dessus de la ligne au lieu de prendre de la place. */
.category-navigation .category-row:not(.category-row-system)
.category-rename,
.category-navigation .category-row:not(.category-row-system)
.category-delete {
position: absolute;
top: 50%;
z-index: 3;
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
margin: 0;
border-radius: 9px;
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
}
.category-navigation .category-row:not(.category-row-system)
.category-rename {
right: 37px;
}
.category-navigation .category-row:not(.category-row-system)
.category-delete {
right: 5px;
}
.category-navigation .category-row:not(.category-row-system):hover
.category-rename,
.category-navigation .category-row:not(.category-row-system):hover
.category-delete,
.category-navigation .category-row:not(.category-row-system):focus-within
.category-rename,
.category-navigation .category-row:not(.category-row-system):focus-within
.category-delete {
opacity: 1;
pointer-events: auto;
}
/* Quand les actions apparaissent, elles disposent d’un fond lisible. */
.category-navigation .category-row:not(.category-row-system):hover
.category-link,
.category-navigation .category-row:not(.category-row-system):focus-within
.category-link {
padding-right: 74px;
}
/* Les compteurs restent alignés sur la même colonne. */
.category-navigation .category-row .category-link strong {
align-self: center;
justify-self: end;
}
/* Sur mobile, les actions restent accessibles sans réduire le nom. */
@media (max-width: 780px) {
.notes-dashboard {
grid-template-columns: 1fr;
}
.category-navigation .category-row:not(.category-row-system)
.category-rename,
.category-navigation .category-row:not(.category-row-system)
.category-delete {
opacity: 1;
pointer-events: auto;
}
.category-navigation .category-row:not(.category-row-system)
.category-link {
padding-right: 74px;
}
}
/* =========================================================
ÉTAPE 35 — NOTIFICATIONS LÉGÈRES ET GOOGLE AGENDA
========================================================= */
.notification-settings-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
}
.notification-settings-heading header,
.notification-settings-heading div {
min-width: 0;
}
.notification-choice-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 11px;
margin-top: 20px;
}
.notification-choice-grid label {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 14px;
border: 1px solid #e1e5e8;
border-radius: 14px;
background: #fafbf9;
cursor: pointer;
}
.notification-choice-grid input {
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: #dcae25;
}
.notification-choice-grid span {
display: grid;
gap: 4px;
}
.notification-choice-grid strong {
color: #313b44;
font-size: .84rem;
}
.notification-choice-grid small {
color: #76808a;
font-size: .74rem;
line-height: 1.45;
}
.notification-settings-status {
margin: 14px 0 0;
color: #707a83;
font-size: .78rem;
}
.notification-settings-status[data-state="success"] {
color: #3d7954;
}
.notification-settings-status[data-state="error"] {
color: #aa3931;
}
.deadline-actions {
display: flex;
align-items: center;
gap: 9px;
}
.deadline-calendar-link[hidden] {
display: none;
}
.deadline-calendar-link {
white-space: nowrap;
}
@media (max-width: 760px) {
.notification-settings-heading {
align-items: stretch;
flex-direction: column;
}
.notification-settings-heading .button {
width: 100%;
}
.notification-choice-grid {
grid-template-columns: 1fr;
}
.deadline-actions {
display: grid;
grid-template-columns: 1fr;
}
.deadline-actions .button {
width: 100%;
}
}
:root[data-theme="dark"] .notification-choice-grid label {
border-color: #37424c;
background: #202830;
}
:root[data-theme="dark"] .notification-choice-grid strong {
color: #e5eaee;
}
:root[data-theme="dark"] .notification-choice-grid small {
color: #9ca6af;
}
/* CORRECTIF 36.5 — HEURE DE DEADLINE PAR DÉFAUT */
#note-deadline-time:placeholder-shown {
color: #7b858e;
}
/* =========================================================
CORRECTIF 36.6 — ENREGISTRER AU-DESSUS D’UNE NOTE MODIFIÉE
========================================================= */
.note-edit-save-bar {
display: flex;
justify-content: flex-end;
margin: 0 0 13px;
}
.note-edit-save-bar[hidden] {
display: none !important;
}
.note-edit-save-bar .button {
min-width: 180px;
}
@media (max-width: 620px) {
.note-edit-save-bar {
position: sticky;
top: 7px;
z-index: 15;
}
.note-edit-save-bar .button {
width: 100%;
min-width: 0;
box-shadow: 0 8px 22px rgba(20, 28, 35, .2);
}
/* Conservation du correctif « Mon compte » en portrait. */
.header-actions a[href="profile.php"],
.header-actions a[href$="/profile.php"] {
display: inline-flex !important;
min-width: 44px;
min-height: 42px;
padding: 0 12px;
white-space: nowrap;
}
.header-actions {
flex: 0 0 auto;
gap: 7px;
}
.site-header-inner {
gap: 10px;
}
.brand {
min-width: 0;
}
}
@media (max-width: 390px) {
.header-actions a[href="profile.php"],
.header-actions a[href$="/profile.php"] {
max-width: 112px;
padding-inline: 10px;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* =========================================================
ÉTAPE 37 — COULEURS PERSONNALISABLES PAR CATÉGORIE
========================================================= */
.category-row-colored .category-dot {
background: var(--category-color);
border-color: color-mix(
in srgb,
var(--category-color) 68%,
#202830
);
box-shadow:
0 0 0 4px color-mix(
in srgb,
var(--category-color) 18%,
transparent
);
}
.category-row-colored .category-link {
border-left: 3px solid transparent;
}
.category-row-colored .category-link:hover {
border-left-color: var(--category-color);
background:
color-mix(
in srgb,
var(--category-color) 9%,
transparent
);
}
.category-row-colored .category-link.is-active {
border-left-color: var(--category-color);
background:
color-mix(
in srgb,
var(--category-color) 18%,
#252d34
);
}
.category-row-colored .category-link.is-active strong {
background:
color-mix(
in srgb,
var(--category-color) 25%,
#303943
) !important;
color: #fff !important;
}
.category-color-field {
margin: 0;
padding: 0;
border: 0;
}
.category-color-field legend {
margin-bottom: 9px;
color: #3d4750;
font-size: .79rem;
font-weight: 850;
}
.category-color-control {
display: flex;
align-items: center;
gap: 13px;
}
.category-color-control input[type="color"] {
flex: 0 0 auto;
width: 50px;
height: 44px;
padding: 4px;
border: 1px solid #d8dee3;
border-radius: 12px;
background: #fff;
cursor: pointer;
}
.category-color-presets {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.category-color-preset {
width: 27px;
height: 27px;
padding: 0;
border: 3px solid transparent;
border-radius: 999px;
background: var(--preset-color);
cursor: pointer;
box-shadow: 0 0 0 1px rgba(30, 39, 46, .12);
transition:
transform .15s ease,
border-color .15s ease;
}
.category-color-preset:hover {
transform: scale(1.1);
}
.category-color-preset.is-selected {
border-color: #fff;
box-shadow:
0 0 0 2px #27323b,
0 4px 12px rgba(25, 32, 38, .2);
}
:root[data-theme="dark"] .category-color-field legend {
color: #dfe5e9;
}
:root[data-theme="dark"]
.category-color-control input[type="color"] {
border-color: #3a4651;
background: #202830;
}
@media (max-width: 520px) {
.category-color-control {
align-items: flex-start;
flex-direction: column;
}
.category-color-presets {
gap: 9px;
}
.category-color-preset {
width: 30px;
height: 30px;
}
}
/* =========================================================
CORRECTIF 37.6 — NOUVELLE NOTE ET NOUVEAU VOCAL
========================================================= */
.toolbar-actions .new-entry-actions {
display: grid;
grid-template-columns: repeat(2, minmax(145px, 1fr));
align-items: stretch;
gap: 9px;
}
.toolbar-actions .new-entry-actions .button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
margin: 0;
white-space: nowrap;
}
@media (max-width: 780px) {
/*
* Sur mobile, les deux commandes compactes déjà présentes restent
* côte à côte. Les boutons du bandeau principal restent masqués
* pour éviter les doublons.
*/
.mobile-create-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
}
/* CORRECTIF 37.7 — SUPPRESSION DÉFINITIVE DU BOUTON « AVEC VOCAUX » */
.toolbar-actions .button-audio-filter {
display: none !important;
}
.toolbar-actions .new-entry-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(145px, 1fr)) !important;
gap: 9px !important;
}
/* =========================================================
CORRECTIF 37.8 — ÉTATS FAVORI ET ÉPINGLÉ PLUS VISIBLES
========================================================= */
/* État inactif : bouton volontairement neutre et discret. */
.note-favorite-button:not(.is-active),
.note-pin-button:not(.is-active) {
background: rgba(255, 255, 255, .42);
color: rgba(73, 79, 86, .58);
box-shadow:
inset 0 0 0 1px rgba(67, 74, 82, .10);
}
/* Favori actif : jaune chaud. */
.note-favorite-button.is-active {
background: #ffd64d;
color: #5b4300;
box-shadow:
inset 0 0 0 1px rgba(116, 82, 0, .18),
0 4px 10px rgba(191, 142, 0, .22);
}
/* Épinglé actif : violet franc. */
.note-pin-button.is-active {
background: #8063c9;
color: #fff;
box-shadow:
inset 0 0 0 1px rgba(61, 37, 117, .20),
0 4px 10px rgba(103, 71, 164, .25);
}
.note-favorite-button:not(.is-active):hover {
background: #fff3bd;
color: #a77800;
}
.note-pin-button:not(.is-active):hover {
background: #eee7ff;
color: #6747a4;
}
.note-favorite-button.is-active:hover {
background: #f3c42c;
}
.note-pin-button.is-active:hover {
background: #6f50b7;
}
/* Focus clavier bien visible. */
.note-flag-button:focus-visible {
outline: 3px solid rgba(38, 48, 57, .38);
outline-offset: 2px;
}
:root[data-theme="dark"]
.note-favorite-button:not(.is-active),
:root[data-theme="dark"]
.note-pin-button:not(.is-active) {
background: rgba(255, 255, 255, .08);
color: #a7b0b8;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .08);
}
:root[data-theme="dark"]
.note-favorite-button.is-active {
background: #e2b72d;
color: #2f2606;
}
:root[data-theme="dark"]
.note-pin-button.is-active {
background: #8f73d6;
color: #fff;
}
/* =========================================================
CORRECTIF 37.9 — TEXTE LONG DÉPLIABLE SUR MOBILE
========================================================= */
@media (max-width: 620px) {
.note-content.is-collapsible {
position: relative;
padding-bottom: 24px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.note-content.is-collapsible::after {
content: "Afficher la suite";
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: flex-end;
justify-content: center;
min-height: 42px;
padding-top: 18px;
background: linear-gradient(
to bottom,
transparent,
var(--note-background, #fff59a) 48%
);
color: rgba(47, 45, 36, .72);
font-size: .7rem;
font-weight: 900;
line-height: 1;
text-align: center;
}
.note-content.is-collapsible.is-expanded {
display: block;
max-height: none;
overflow: visible;
padding-bottom: 24px;
-webkit-line-clamp: unset;
}
.note-content.is-collapsible.is-expanded::after {
content: "Réduire";
min-height: 20px;
padding-top: 6px;
background: transparent;
}
.note-content.is-collapsible:focus-visible {
outline: 3px solid rgba(42, 51, 59, .35);
outline-offset: 4px;
border-radius: 8px;
}
}
/* =========================================================
ÉTAPE 39 — LIEN DE PARTAGE CONSERVÉ SUR LA NOTE
========================================================= */
.note-share-link,
.note-share-link-missing {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 25px;
padding: 4px 8px;
border: 0;
border-radius: 999px;
background: #dfeafa;
color: #315f91;
font: inherit;
font-size: .67rem;
font-weight: 900;
line-height: 1;
text-decoration: none;
cursor: pointer;
}
.note-share-link:hover {
background: #cbdff7;
color: #244e7d;
}
.note-share-link-missing {
background: #f3ead0;
color: #79601e;
}
:root[data-theme="dark"] .note-share-link {
background: rgba(91, 141, 239, .2);
color: #b9d0ff;
}
:root[data-theme="dark"] .note-share-link-missing {
background: rgba(218, 174, 61, .16);
color: #e7ca76;
}
@media (max-width: 620px) {
.note-share-link,
.note-share-link-missing {
min-height: 28px;
padding-inline: 9px;
}
}
/* CORRECTIF 39.1 — LIEN PARTAGÉ DIRECTEMENT DANS LA NOTE */
.note-share-inside {
margin: 12px 0 3px;
}
.note-share-inside-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 100%;
min-height: 38px;
padding: 8px 11px;
border: 0;
border-radius: 11px;
background: rgba(223, 234, 250, .92);
color: #315f91;
font: inherit;
font-size: .73rem;
font-weight: 900;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
}
.note-share-inside-link:hover {
background: #cbdff7;
color: #244e7d;
}
.note-share-inside .note-share-link-missing {
background: #f3ead0;
color: #79601e;
}
:root[data-theme="dark"] .note-share-inside-link {
background: rgba(91, 141, 239, .2);
color: #b9d0ff;
}
:root[data-theme="dark"]
.note-share-inside .note-share-link-missing {
background: rgba(218, 174, 61, .16);
color: #e7ca76;
}
@media (max-width: 620px) {
.note-share-inside-link {
min-height: 42px;
font-size: .75rem;
}
}
/* =========================================================
CORRECTIF 37.15 — DEADLINE RESPONSIVE SANS CHEVAUCHEMENT
========================================================= */
/*
* Le bloc deadline ne repose plus sur une colonne automatique
* trop étroite. Les champs et les actions occupent deux lignes
* distinctes et peuvent toujours revenir proprement à la ligne.
*/
.deadline-fields {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
gap: 14px;
min-width: 0;
}
.deadline-date-time-grid {
display: grid;
grid-template-columns:
minmax(180px, 1.25fr)
minmax(135px, .75fr);
gap: 12px;
width: 100%;
min-width: 0;
}
.deadline-date-time-grid label {
min-width: 0;
}
.deadline-date-time-grid input[type="date"],
.deadline-date-time-grid input[type="time"] {
box-sizing: border-box;
width: 100%;
min-width: 0;
max-width: 100%;
}
.deadline-actions {
display: grid;
grid-template-columns:
repeat(2, minmax(190px, 1fr));
gap: 12px;
width: 100%;
min-width: 0;
}
.deadline-actions .button,
.deadline-actions a,
.deadline-actions button {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
min-height: 49px;
margin: 0;
padding: 10px 14px;
white-space: normal;
line-height: 1.25;
text-align: center;
}
.deadline-actions [hidden] {
display: none !important;
}
/* Tablettes et petites fenêtres */
@media (max-width: 760px) {
.deadline-date-time-grid,
.deadline-actions {
grid-template-columns: minmax(0, 1fr);
}
.deadline-editor {
padding: 15px;
}
}
/* Téléphones étroits */
@media (max-width: 420px) {
.deadline-editor {
padding: 13px;
border-radius: 14px;
}
.deadline-editor-heading p {
font-size: .74rem;
}
.deadline-date-time-grid input[type="date"],
.deadline-date-time-grid input[type="time"],
.deadline-actions .button,
.deadline-actions a,
.deadline-actions button {
min-height: 46px;
}
}
/* =========================================================
CORRECTIF 37.17 — GOOGLE AGENDA ET NOTE PARTAGÉE
========================================================= */
/* -------------------------
GOOGLE AGENDA
------------------------- */
.google-calendar-card {
position: relative;
overflow: hidden;
padding: clamp(22px, 3vw, 34px);
border: 1px solid rgba(111, 132, 159, .2);
border-radius: 24px;
background:
radial-gradient(
circle at 100% 0,
rgba(82, 126, 236, .15),
transparent 28rem
),
linear-gradient(
145deg,
rgba(26, 35, 46, .98),
rgba(23, 31, 41, .98)
);
box-shadow:
0 22px 55px rgba(7, 12, 19, .2),
inset 0 1px 0 rgba(255, 255, 255, .035);
}
.google-calendar-card::before {
content: "";
position: absolute;
top: 0;
left: 34px;
width: 115px;
height: 4px;
border-radius: 0 0 999px 999px;
background: linear-gradient(90deg, #4285f4, #34a853, #fbbc05, #ea4335);
}
.google-calendar-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
margin-bottom: 26px;
}
.google-calendar-heading-copy {
display: flex;
align-items: flex-start;
gap: 17px;
min-width: 0;
}
.google-calendar-icon {
position: relative;
display: grid;
place-items: center;
flex: 0 0 52px;
width: 52px;
height: 52px;
margin-top: 2px;
border-radius: 16px;
background:
linear-gradient(135deg, #4285f4 0 50%, #34a853 50% 100%);
box-shadow:
0 10px 24px rgba(38, 88, 183, .28),
inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.google-calendar-icon::before {
content: "";
width: 25px;
height: 25px;
border-radius: 7px;
background: #fff;
box-shadow: inset 0 -7px 0 #fbbc05;
}
.google-calendar-icon span {
position: absolute;
top: 13px;
width: 20px;
height: 4px;
border-radius: 99px;
background: #ea4335;
}
.google-calendar-heading .eyebrow {
margin-bottom: 7px;
color: #91a2ba;
}
.google-calendar-heading h2 {
margin: 0;
color: #fff;
font-size: clamp(1.65rem, 3vw, 2.15rem);
line-height: 1.08;
letter-spacing: -.04em;
}
.google-calendar-heading p:not(.eyebrow) {
max-width: 650px;
margin: 9px 0 0;
color: #b9c4d2;
line-height: 1.65;
}
.google-calendar-connected {
display: inline-flex;
align-items: center;
gap: 9px;
flex: 0 0 auto;
min-height: 38px;
padding: 0 14px;
border: 1px solid rgba(74, 197, 116, .24);
border-radius: 999px;
background: rgba(56, 173, 96, .12);
color: #9be5b2;
font-size: .83rem;
font-weight: 850;
}
.google-calendar-connected > span {
width: 9px;
height: 9px;
border-radius: 50%;
background: #57d382;
box-shadow: 0 0 0 5px rgba(87, 211, 130, .12);
}
.google-calendar-connect {
flex: 0 0 auto;
}
.google-calendar-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 13px;
margin-bottom: 22px;
}
.google-calendar-summary article {
display: grid;
align-content: center;
min-height: 92px;
padding: 17px 18px;
border: 1px solid rgba(147, 164, 187, .15);
border-radius: 17px;
background: rgba(255, 255, 255, .035);
}
.google-calendar-summary-label {
margin-bottom: 7px;
color: #8f9caf;
font-size: .73rem;
font-weight: 800;
letter-spacing: .055em;
text-transform: uppercase;
}
.google-calendar-summary strong {
color: #f6f8fb;
font-size: .95rem;
line-height: 1.35;
}
.google-calendar-error {
display: grid;
gap: 5px;
margin: 0 0 20px;
border-color: rgba(239, 95, 84, .25);
background: rgba(216, 64, 55, .1);
color: #ffc0ba;
}
.google-calendar-error span {
font-weight: 500;
line-height: 1.5;
}
.google-calendar-control-panel {
padding: 20px;
border: 1px solid rgba(147, 164, 187, .14);
border-radius: 19px;
background: rgba(8, 14, 22, .18);
}
.google-calendar-control-heading {
margin-bottom: 16px;
}
.google-calendar-control-heading strong {
color: #fff;
font-size: 1rem;
}
.google-calendar-control-heading p {
margin: 5px 0 0;
color: #8f9cad;
font-size: .82rem;
line-height: 1.5;
}
.google-calendar-settings {
display: grid;
grid-template-columns:
minmax(190px, 1fr)
minmax(190px, 1fr)
minmax(145px, auto);
gap: 13px;
align-items: end;
}
.google-calendar-settings label {
display: grid;
gap: 8px;
min-width: 0;
}
.google-calendar-settings label > span {
color: #d4dce7;
font-size: .78rem;
font-weight: 800;
}
.google-calendar-settings select {
width: 100%;
min-width: 0;
min-height: 48px;
padding: 0 42px 0 14px;
border: 1px solid rgba(153, 170, 192, .2);
border-radius: 13px;
background-color: #202b38;
color: #f4f7fb;
font: inherit;
font-weight: 700;
outline: 0;
}
.google-calendar-settings select:focus {
border-color: rgba(245, 201, 65, .72);
box-shadow: 0 0 0 4px rgba(245, 201, 65, .12);
}
.google-calendar-save {
min-height: 48px;
white-space: nowrap;
}
.google-calendar-actions {
display: flex;
flex-wrap: wrap;
gap: 11px;
margin-top: 16px;
}
.google-calendar-actions form {
margin: 0;
}
.google-calendar-actions .button {
min-height: 45px;
}
.google-calendar-disconnect {
border: 1px solid rgba(238, 111, 101, .24);
background: rgba(213, 62, 52, .08);
color: #ffb9b2;
}
.google-calendar-disconnect:hover {
background: rgba(213, 62, 52, .14);
}
.google-calendar-note {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 21px;
padding: 15px 17px;
border: 1px solid rgba(91, 133, 221, .18);
border-radius: 16px;
background: rgba(55, 91, 169, .09);
}
.google-calendar-note-icon {
display: grid;
place-items: center;
flex: 0 0 25px;
width: 25px;
height: 25px;
border-radius: 50%;
background: rgba(104, 147, 240, .16);
color: #a9c4ff;
font-size: .76rem;
font-weight: 900;
}
.google-calendar-note p {
margin: 1px 0 0;
color: #b8c4d3;
font-size: .83rem;
line-height: 1.58;
}
.google-calendar-note strong {
color: #eef3fb;
}
.google-calendar-empty {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
border: 1px dashed rgba(152, 168, 188, .24);
border-radius: 18px;
background: rgba(255, 255, 255, .025);
}
.google-calendar-empty > span {
display: grid;
place-items: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
border-radius: 15px;
background: #fff;
color: #4285f4;
font-size: 1.35rem;
font-weight: 900;
}
.google-calendar-empty strong {
color: #fff;
}
.google-calendar-empty p {
margin: 5px 0 0;
color: #9ba8b9;
font-size: .84rem;
line-height: 1.55;
}
/* -------------------------
NOTE PARTAGÉE
------------------------- */
.note-share-editor {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
padding: 18px;
overflow: hidden;
border: 1px solid rgba(79, 127, 226, .2);
border-radius: 17px;
background:
radial-gradient(
circle at 100% 0,
rgba(75, 124, 229, .16),
transparent 17rem
),
linear-gradient(
135deg,
rgba(30, 42, 56, .98),
rgba(25, 34, 46, .98)
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .035),
0 12px 28px rgba(8, 14, 22, .11);
}
.note-share-editor[hidden] {
display: none;
}
.note-share-editor::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: linear-gradient(#6a9cff, #7b6ee5);
}
.note-share-editor-main {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.note-share-editor-icon {
display: grid;
place-items: center;
flex: 0 0 43px;
width: 43px;
height: 43px;
border-radius: 14px;
background: rgba(91, 139, 239, .15);
color: #aec8ff;
font-size: 1.15rem;
font-weight: 900;
box-shadow: inset 0 0 0 1px rgba(120, 159, 242, .15);
}
.note-share-editor-copy {
min-width: 0;
}
.note-share-editor-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
}
.note-share-editor-title > strong {
color: #fff;
font-size: .92rem;
}
.note-share-editor-title > span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 8px;
border-radius: 999px;
background: rgba(58, 178, 99, .11);
color: #99dfaf;
font-size: .66rem;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .04em;
}
.note-share-editor-title > span > span {
width: 7px;
height: 7px;
border-radius: 50%;
background: #55d17f;
}
.note-share-editor-copy p {
margin: 6px 0 0;
color: #aeb9c8;
font-size: .76rem;
line-height: 1.5;
}
.note-share-editor-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 43px;
padding: 0 15px;
border: 1px solid rgba(123, 160, 239, .2);
border-radius: 12px;
background: rgba(87, 130, 224, .13);
color: #dce8ff;
font-size: .78rem;
font-weight: 850;
text-decoration: none;
white-space: nowrap;
}
.note-share-editor-button:hover {
background: rgba(87, 130, 224, .22);
color: #fff;
}
/* -------------------------
RESPONSIVE
------------------------- */
@media (max-width: 820px) {
.google-calendar-summary {
grid-template-columns: 1fr;
}
.google-calendar-settings {
grid-template-columns: 1fr 1fr;
}
.google-calendar-save {
grid-column: 1 / -1;
}
}
@media (max-width: 620px) {
.google-calendar-heading {
align-items: stretch;
flex-direction: column;
}
.google-calendar-heading-copy {
gap: 13px;
}
.google-calendar-icon {
flex-basis: 45px;
width: 45px;
height: 45px;
border-radius: 14px;
}
.google-calendar-connected,
.google-calendar-connect {
align-self: flex-start;
}
.google-calendar-settings {
grid-template-columns: 1fr;
}
.google-calendar-save {
grid-column: auto;
width: 100%;
}
.google-calendar-actions {
display: grid;
grid-template-columns: 1fr;
}
.google-calendar-actions form,
.google-calendar-actions .button {
width: 100%;
}
.note-share-editor {
grid-template-columns: 1fr;
gap: 14px;
}
.note-share-editor-button {
width: 100%;
}
}
@media (max-width: 420px) {
.google-calendar-card {
padding: 19px 16px;
border-radius: 20px;
}
.google-calendar-heading-copy {
align-items: center;
}
.google-calendar-heading h2 {
font-size: 1.55rem;
}
.google-calendar-control-panel {
padding: 15px;
}
.note-share-editor {
padding: 15px;
}
.note-share-editor-main {
align-items: flex-start;
}
}
/* =========================================================
CORRECTIF 37.18 — CATÉGORIES MOBILE RESTAURÉES
========================================================= */
/*
* Sur mobile, les catégories repassent sur une seule colonne.
* Le nom garde toute la largeur disponible et les boutons d'action
* restent alignés à droite sans écraser le texte.
*/
@media (max-width: 780px) {
.notes-sidebar .category-navigation {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 7px !important;
}
.notes-sidebar .category-row {
display: grid !important;
grid-template-columns:
minmax(0, 1fr)
32px
32px !important;
align-items: center !important;
gap: 6px !important;
width: 100% !important;
min-width: 0 !important;
}
.notes-sidebar .category-row-system {
grid-template-columns: minmax(0, 1fr) !important;
}
.notes-sidebar .category-link {
display: grid !important;
grid-template-columns:
24px
minmax(0, 1fr)
auto !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
min-width: 0 !important;
padding: 11px 12px !important;
}
.notes-sidebar .category-link > span:nth-child(2) {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
.notes-sidebar .category-link strong {
flex: 0 0 auto !important;
margin-left: 0 !important;
white-space: nowrap !important;
}
.notes-sidebar .category-dot,
.notes-sidebar .category-audio-icon,
.notes-sidebar .category-special-icon,
.notes-sidebar .category-status-icon {
flex: 0 0 auto !important;
}
.notes-sidebar .category-rename,
.notes-sidebar .category-delete {
position: static !important;
display: grid !important;
place-items: center !important;
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
}
}
/* Téléphones étroits : la sidebar prend toute la largeur disponible. */
@media (max-width: 520px) {
.notes-sidebar {
padding: 18px !important;
}
.notes-sidebar .category-link {
font-size: .9rem !important;
}
.notes-sidebar .category-row {
grid-template-columns:
minmax(0, 1fr)
30px
30px !important;
gap: 4px !important;
}
.notes-sidebar .category-rename,
.notes-sidebar .category-delete {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
}
}
/* =========================================================
CORRECTIF 37.19 — « AFFICHER LA SUITE » PLUS DISCRET
========================================================= */
@media (max-width: 620px) {
.note-content.is-collapsible {
position: relative;
padding-bottom: 34px !important;
cursor: pointer;
}
.note-content.is-collapsible::after {
content: "Afficher la suite";
position: absolute;
left: 50%;
bottom: 4px;
right: auto;
width: auto;
min-width: 126px;
min-height: 30px;
padding: 7px 14px;
border: 1px solid rgba(58, 54, 35, .14);
border-radius: 999px;
background: rgba(255, 255, 255, .68);
color: rgba(55, 51, 34, .78);
box-shadow:
0 4px 12px rgba(44, 39, 18, .08),
inset 0 1px 0 rgba(255, 255, 255, .65);
font-size: .69rem;
font-weight: 850;
line-height: 1;
text-align: center;
transform: translateX(-50%);
backdrop-filter: blur(5px);
}
.note-content.is-collapsible::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 26px;
height: 34px;
pointer-events: none;
background: linear-gradient(
to bottom,
transparent,
var(--note-color, #fff59a)
);
}
.note-content.is-collapsible.is-expanded {
max-height: none !important;
overflow: visible !important;
padding-bottom: 32px !important;
-webkit-line-clamp: unset !important;
}
.note-content.is-collapsible.is-expanded::before {
display: none;
}
.note-content.is-collapsible.is-expanded::after {
content: "Réduire";
min-width: 86px;
background: rgba(255, 255, 255, .56);
}
}
/* =========================================================
CORRECTIF 37.20 — « AFFICHER LA SUITE » PLUS ÉLÉGANT
========================================================= */
@media (max-width: 620px) {
.note-content.is-collapsible {
padding-bottom: 28px !important;
}
.note-content.is-collapsible::before {
right: 0;
bottom: 20px;
height: 28px;
background: linear-gradient(
to bottom,
transparent,
color-mix(
in srgb,
var(--note-color, #fff59a) 92%,
transparent
)
);
}
.note-content.is-collapsible::after {
content: "Afficher la suite";
left: 0;
right: auto;
bottom: 0;
min-width: 0;
min-height: 0;
width: auto;
padding: 5px 0;
border: 0;
border-radius: 0;
background: transparent;
color: rgba(66, 62, 42, .68);
box-shadow: none;
font-size: .66rem;
font-weight: 850;
line-height: 1.1;
letter-spacing: .01em;
text-decoration: underline;
text-decoration-color: rgba(66, 62, 42, .22);
text-underline-offset: 3px;
transform: none;
backdrop-filter: none;
}
.note-content.is-collapsible::after {
content: "Afficher la suite ↓";
}
.note-content.is-collapsible.is-expanded {
padding-bottom: 26px !important;
}
.note-content.is-collapsible.is-expanded::after {
content: "Réduire ↑";
min-width: 0;
padding: 5px 0;
background: transparent;
}
}
/* =========================================================
CORRECTIF 37.21 — AFFICHER LA SUITE, VERSION PROPRE
========================================================= */
@media (max-width: 620px) {
/*
* Les anciens pseudo-éléments sont désactivés.
* Le bouton est désormais un vrai élément situé sous le texte.
*/
.note-content.is-collapsible::before,
.note-content.is-collapsible::after {
content: none !important;
display: none !important;
}
.note-content.is-collapsible {
display: -webkit-box !important;
max-height: none !important;
padding-bottom: 0 !important;
overflow: hidden !important;
cursor: default !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 7 !important;
}
.note-content.is-collapsible.is-expanded {
display: block !important;
max-height: none !important;
overflow: visible !important;
-webkit-line-clamp: unset !important;
}
.note-expand-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
margin: 9px 0 0;
padding: 5px 11px;
border: 1px solid rgba(69, 64, 40, .13);
border-radius: 999px;
background: rgba(255, 255, 255, .42);
color: rgba(55, 51, 35, .72);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .42);
font: inherit;
font-size: .64rem;
font-weight: 850;
line-height: 1;
cursor: pointer;
transition:
background .16s ease,
border-color .16s ease,
transform .16s ease;
}
.note-expand-toggle::after {
content: "↓";
margin-left: 6px;
font-size: .7rem;
}
.note-expand-toggle[aria-expanded="true"]::after {
content: "↑";
}
.note-expand-toggle:hover,
.note-expand-toggle:focus-visible {
border-color: rgba(69, 64, 40, .22);
background: rgba(255, 255, 255, .62);
}
.note-expand-toggle:active {
transform: scale(.98);
}
}
/* =========================================================
CORRECTIF 37.22 — PAGE PARTAGÉE PLUS PREMIUM
========================================================= */
.public-share-page {
min-height: 100vh;
background:
radial-gradient(
circle at 8% 0,
rgba(248, 210, 71, .22),
transparent 28rem
),
radial-gradient(
circle at 96% 8%,
rgba(89, 139, 237, .16),
transparent 30rem
),
linear-gradient(180deg, #f7f4eb 0%, #ece9df 100%);
}
.public-share-header {
border: 1px solid rgba(255, 255, 255, .72);
background: rgba(255, 255, 255, .78);
box-shadow:
0 18px 42px rgba(31, 40, 48, .09),
inset 0 1px 0 rgba(255, 255, 255, .85);
}
.public-share-main {
width: min(1080px, calc(100% - 32px));
}
.public-shared-note {
border-radius: 30px;
box-shadow:
0 34px 80px rgba(30, 36, 42, .16),
inset 0 1px 0 rgba(255, 255, 255, .34);
}
.public-share-content {
border: 1px solid rgba(76, 72, 43, .09);
background: rgba(255, 255, 255, .55);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .62),
0 12px 26px rgba(42, 45, 39, .04);
}
.share-collaboration {
padding: clamp(20px, 3vw, 30px);
border: 1px solid rgba(76, 72, 43, .1);
background:
linear-gradient(
145deg,
rgba(255, 255, 255, .72),
rgba(255, 255, 255, .58)
);
box-shadow:
0 18px 38px rgba(31, 40, 48, .07),
inset 0 1px 0 rgba(255, 255, 255, .66);
}
.share-presence {
border: 1px solid rgba(78, 133, 103, .13);
background: rgba(241, 251, 245, .68);
}
.share-meeting-card {
border: 1px solid rgba(91, 126, 197, .12);
background:
radial-gradient(
circle at 100% 0,
rgba(102, 147, 240, .12),
transparent 18rem
),
rgba(255, 255, 255, .76);
box-shadow:
0 12px 28px rgba(42, 56, 78, .05);
}
.share-discussion {
overflow: hidden;
border: 1px solid rgba(64, 76, 91, .11);
border-radius: 24px;
background: rgba(255, 255, 255, .78);
box-shadow:
0 18px 38px rgba(31, 40, 48, .07);
}
.share-discussion-header {
padding: 21px 22px;
border-bottom: 1px solid rgba(38, 49, 58, .1);
background:
linear-gradient(
180deg,
rgba(247, 249, 252, .94),
rgba(242, 245, 248, .82)
);
}
.share-discussion-header strong {
color: #202a35;
}
.share-discussion-header p {
margin: 6px 0 0;
color: #6f7b87;
line-height: 1.55;
}
.share-discussion-count {
border: 1px solid rgba(65, 79, 94, .08);
background: #fff;
color: #5e6975;
box-shadow: 0 6px 16px rgba(35, 44, 53, .05);
}
.share-discussion-messages {
min-height: 180px;
max-height: 460px;
padding: 20px 22px;
background:
linear-gradient(
180deg,
rgba(248, 249, 250, .54),
rgba(243, 245, 247, .36)
);
}
.share-discussion-message {
padding: 14px 16px;
border: 1px solid rgba(59, 72, 86, .08);
border-radius: 16px;
background: rgba(255, 255, 255, .9);
box-shadow: 0 8px 18px rgba(35, 44, 53, .04);
}
.share-discussion-form {
gap: 16px;
padding: 22px;
border-top: 1px solid rgba(38, 49, 58, .09);
background:
linear-gradient(
180deg,
rgba(252, 252, 252, .98),
rgba(246, 247, 248, .96)
);
}
.share-message-composer {
display: grid;
gap: 9px;
}
.share-message-composer-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.share-message-composer-heading label {
color: #27313c;
font-size: .83rem;
font-weight: 850;
}
.share-message-composer-heading span {
color: #8a949e;
font-size: .69rem;
font-weight: 700;
}
.share-message-textarea-wrap {
position: relative;
}
.share-message-textarea-wrap textarea {
display: block;
width: 100%;
min-height: 150px;
max-height: 360px;
padding: 17px 18px 40px;
resize: vertical;
border: 1px solid #d9dee4;
border-radius: 17px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, .98),
rgba(250, 251, 252, .98)
);
color: #202a35;
box-shadow:
inset 0 1px 2px rgba(31, 41, 51, .035),
0 8px 22px rgba(38, 48, 58, .045);
font: inherit;
font-size: .96rem;
line-height: 1.65;
outline: none;
transition:
border-color .18s ease,
box-shadow .18s ease,
background .18s ease;
}
.share-message-textarea-wrap textarea::placeholder {
color: #9ba4ad;
}
.share-message-textarea-wrap textarea:hover {
border-color: #c8d0d9;
background: #fff;
}
.share-message-textarea-wrap textarea:focus {
border-color: #d9aa26;
background: #fff;
box-shadow:
0 0 0 4px rgba(235, 190, 59, .14),
0 14px 30px rgba(38, 48, 58, .07);
}
.share-message-textarea-decoration {
position: absolute;
right: 15px;
bottom: 13px;
display: flex;
align-items: flex-end;
gap: 3px;
pointer-events: none;
}
.share-message-textarea-decoration span {
display: block;
width: 3px;
border-radius: 999px;
background: #d8b443;
}
.share-message-textarea-decoration span:nth-child(1) {
height: 7px;
}
.share-message-textarea-decoration span:nth-child(2) {
height: 11px;
}
.share-message-textarea-decoration span:nth-child(3) {
height: 15px;
}
.share-message-tools {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.share-media-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 39px;
padding: 0 13px;
border: 1px solid #dde2e7;
border-radius: 11px;
background: #fff;
color: #47525e;
box-shadow: 0 6px 14px rgba(38, 48, 58, .035);
font: inherit;
font-size: .76rem;
font-weight: 800;
cursor: pointer;
transition:
transform .16s ease,
border-color .16s ease,
background .16s ease;
}
.share-media-button:hover {
transform: translateY(-1px);
border-color: #cbd2da;
background: #fbfcfd;
}
.share-media-button.is-danger {
border-color: #f0cbc7;
background: #fff6f5;
color: #ad3d34;
}
.share-discussion-submit {
padding-top: 4px;
}
.share-discussion-submit-copy {
display: grid;
gap: 3px;
min-width: 0;
}
.share-discussion-submit-copy small {
color: #9099a2;
font-size: .69rem;
}
.share-send-button {
min-width: 130px;
min-height: 46px;
border-radius: 13px;
box-shadow: 0 10px 22px rgba(24, 32, 42, .14);
}
.share-send-button span:last-child {
font-size: 1rem;
transition: transform .16s ease;
}
.share-send-button:hover span:last-child {
transform: translateX(3px);
}
.share-audio-draft,
.share-image-preview {
border-radius: 14px;
}
@media (max-width: 700px) {
.public-share-main {
width: min(100% - 20px, 1080px);
}
.public-shared-note {
padding: 20px 14px;
border-radius: 22px;
}
.share-discussion {
border-radius: 18px;
}
.share-discussion-header,
.share-discussion-form {
padding: 17px;
}
.share-discussion-messages {
padding: 16px 17px;
}
.share-message-composer-heading {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
.share-message-textarea-wrap textarea {
min-height: 138px;
padding: 15px 15px 38px;
border-radius: 15px;
}
.share-message-tools {
display: grid;
grid-template-columns: 1fr;
}
.share-media-button {
width: 100%;
}
.share-discussion-submit {
align-items: stretch;
flex-direction: column;
}
.share-send-button {
width: 100%;
}
}
/* =========================================================
CORRECTIF 37.23 — DESIGN DE MES NOTES PARTAGÉES
========================================================= */
.shared-notes-page {
padding: 48px 0 78px;
}
.shared-notes-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 28px;
margin-bottom: 26px;
padding: 28px;
border: 1px solid rgba(101, 123, 151, .18);
border-radius: 24px;
background:
radial-gradient(
circle at 100% 0,
rgba(88, 133, 230, .14),
transparent 26rem
),
linear-gradient(
145deg,
rgba(27, 37, 49, .98),
rgba(22, 30, 40, .98)
);
box-shadow:
0 22px 55px rgba(10, 16, 24, .16),
inset 0 1px 0 rgba(255, 255, 255, .035);
}
.shared-notes-heading-copy {
display: flex;
align-items: flex-start;
gap: 17px;
min-width: 0;
}
.shared-notes-heading-icon {
display: grid;
place-items: center;
flex: 0 0 52px;
width: 52px;
height: 52px;
border-radius: 16px;
background: rgba(88, 137, 240, .14);
color: #b7ceff;
font-size: 1.25rem;
font-weight: 900;
box-shadow:
inset 0 0 0 1px rgba(110, 153, 243, .17),
0 10px 24px rgba(18, 33, 56, .18);
}
.shared-notes-heading .eyebrow {
margin-bottom: 7px;
color: #91a3ba;
}
.shared-notes-heading h1 {
margin: 0;
color: #fff;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1;
letter-spacing: -.055em;
}
.shared-notes-heading p:not(.eyebrow) {
max-width: 680px;
margin: 11px 0 0;
color: #b9c4d2;
line-height: 1.65;
}
.shared-notes-back {
flex: 0 0 auto;
border-color: rgba(151, 169, 192, .18);
background: rgba(255, 255, 255, .055);
color: #eef4ff;
}
.shared-notes-back:hover {
background: rgba(255, 255, 255, .09);
}
.shared-notes-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-bottom: 22px;
}
.shared-notes-stats article {
display: grid;
gap: 8px;
padding: 18px 20px;
border: 1px solid rgba(83, 96, 112, .1);
border-radius: 18px;
background: rgba(255, 255, 255, .78);
box-shadow: 0 12px 28px rgba(38, 48, 58, .055);
}
.shared-notes-stats span {
color: #7a8591;
font-size: .74rem;
font-weight: 800;
letter-spacing: .045em;
text-transform: uppercase;
}
.shared-notes-stats strong {
color: #202a35;
font-size: 1.7rem;
letter-spacing: -.04em;
}
.shared-notes-layout {
display: grid;
grid-template-columns: minmax(280px, .78fr) minmax(0, 1.6fr);
gap: 20px;
align-items: start;
}
.shared-notes-list {
display: grid;
gap: 11px;
min-width: 0;
}
.shared-note-row {
display: grid;
gap: 11px;
padding: 17px;
border: 1px solid rgba(77, 92, 108, .1);
border-radius: 17px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, .92),
rgba(249, 250, 251, .9)
);
color: #24303b;
text-decoration: none;
box-shadow:
0 9px 22px rgba(38, 48, 58, .045),
inset 0 1px 0 rgba(255, 255, 255, .85);
transition:
transform .16s ease,
border-color .16s ease,
box-shadow .16s ease,
background .16s ease;
}
.shared-note-row:hover {
transform: translateY(-2px);
border-color: rgba(76, 121, 216, .24);
box-shadow: 0 16px 30px rgba(38, 48, 58, .08);
}
.shared-note-row.is-active {
border-color: rgba(76, 121, 216, .34);
background:
linear-gradient(
145deg,
rgba(237, 244, 255, .98),
rgba(247, 250, 255, .96)
);
box-shadow:
0 16px 34px rgba(71, 108, 188, .12),
inset 4px 0 0 #5f8fe8;
}
.shared-note-row-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.shared-note-row-heading strong {
min-width: 0;
overflow: hidden;
color: #202a35;
text-overflow: ellipsis;
white-space: nowrap;
}
.shared-note-row-status {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
padding: 5px 8px;
border-radius: 999px;
background: rgba(59, 176, 99, .1);
color: #4b9b67;
font-size: .63rem;
font-weight: 850;
letter-spacing: .035em;
text-transform: uppercase;
}
.shared-note-row-status > span {
width: 7px;
height: 7px;
border-radius: 50%;
background: #54c978;
box-shadow: 0 0 0 4px rgba(84, 201, 120, .1);
}
.shared-note-row > p {
display: -webkit-box;
margin: 0;
overflow: hidden;
color: #67727e;
font-size: .83rem;
line-height: 1.55;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.shared-note-row-meta {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.shared-note-row-meta span {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 8px;
border-radius: 9px;
background: #f0f3f6;
color: #75808a;
font-size: .67rem;
font-weight: 700;
}
.shared-note-row-meta strong {
color: #37424e;
}
.shared-notes-conversation {
min-width: 0;
overflow: hidden;
border: 1px solid rgba(77, 92, 108, .1);
border-radius: 22px;
background: rgba(255, 255, 255, .82);
box-shadow:
0 18px 40px rgba(38, 48, 58, .07),
inset 0 1px 0 rgba(255, 255, 255, .75);
}
.shared-notes-placeholder {
display: grid;
place-items: center;
min-height: 460px;
padding: 40px;
text-align: center;
}
.shared-notes-placeholder::before {
content: "↗";
display: grid;
place-items: center;
width: 58px;
height: 58px;
margin-bottom: 16px;
border-radius: 18px;
background: rgba(91, 139, 239, .1);
color: #6e95e4;
font-size: 1.3rem;
font-weight: 900;
}
.shared-notes-placeholder h2 {
margin: 0;
color: #26313d;
font-size: 1.5rem;
}
.shared-notes-placeholder p {
margin: 8px 0 0;
color: #7d8792;
}
.shared-conversation-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
padding: 22px;
border-bottom: 1px solid rgba(55, 70, 84, .09);
background:
linear-gradient(
180deg,
rgba(247, 249, 251, .95),
rgba(242, 245, 248, .88)
);
}
.shared-conversation-heading .eyebrow {
margin-bottom: 6px;
}
.shared-conversation-heading h2 {
margin: 0;
color: #202a35;
font-size: 1.55rem;
letter-spacing: -.035em;
}
.shared-conversation-note-preview {
margin: 20px 22px 0;
padding: 18px;
border: 1px solid rgba(120, 102, 32, .1);
border-radius: 16px;
background:
linear-gradient(
180deg,
rgba(255, 248, 182, .9),
rgba(255, 244, 157, .82)
);
color: #4d4729;
line-height: 1.65;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .56),
0 10px 24px rgba(58, 51, 20, .045);
}
.shared-conversation-messages {
display: grid;
gap: 12px;
max-height: 620px;
padding: 22px;
overflow-y: auto;
}
.shared-owner-message {
display: grid;
gap: 10px;
padding: 16px;
border: 1px solid rgba(65, 79, 94, .09);
border-radius: 16px;
background: #fff;
box-shadow: 0 9px 20px rgba(38, 48, 58, .045);
}
.shared-owner-message header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.shared-owner-message header strong {
color: #25303c;
}
.shared-owner-message time {
color: #9099a3;
font-size: .68rem;
}
.shared-owner-message > p {
margin: 0;
color: #4d5864;
line-height: 1.6;
}
.shared-owner-media {
display: grid;
gap: 10px;
}
.shared-owner-media img {
display: block;
width: 100%;
max-height: 360px;
object-fit: cover;
border-radius: 13px;
}
.shared-owner-media audio {
width: 100%;
}
.shared-conversation-empty {
margin: 0;
padding: 22px;
border: 1px dashed rgba(78, 92, 106, .14);
border-radius: 16px;
background: #f7f9fb;
color: #7c8791;
text-align: center;
}
.shared-notes-empty {
display: grid;
justify-items: center;
max-width: 680px;
margin: 0 auto;
padding: 56px 30px;
border: 1px dashed rgba(81, 96, 111, .18);
border-radius: 24px;
background: rgba(255, 255, 255, .72);
text-align: center;
box-shadow: 0 18px 38px rgba(38, 48, 58, .06);
}
.shared-notes-empty-icon {
display: grid;
place-items: center;
width: 62px;
height: 62px;
margin-bottom: 18px;
border-radius: 19px;
background: rgba(91, 139, 239, .11);
color: #6d95e6;
font-size: 1.4rem;
font-weight: 900;
}
.shared-notes-empty h2 {
margin: 0;
color: #26313d;
font-size: clamp(1.7rem, 4vw, 2.4rem);
letter-spacing: -.04em;
}
.shared-notes-empty > p:not(.eyebrow) {
max-width: 520px;
margin: 12px 0 22px;
color: #747f8a;
line-height: 1.65;
}
@media (max-width: 900px) {
.shared-notes-layout {
grid-template-columns: 1fr;
}
.shared-notes-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.shared-notes-conversation {
min-height: 420px;
}
}
@media (max-width: 680px) {
.shared-notes-page {
padding-top: 26px;
}
.shared-notes-heading {
align-items: stretch;
flex-direction: column;
padding: 22px 19px;
border-radius: 20px;
}
.shared-notes-heading-copy {
gap: 13px;
}
.shared-notes-heading-icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 14px;
}
.shared-notes-back {
width: 100%;
}
.shared-notes-stats {
grid-template-columns: 1fr;
}
.shared-notes-list {
grid-template-columns: 1fr;
}
.shared-conversation-heading {
align-items: stretch;
flex-direction: column;
padding: 18px;
}
.shared-conversation-heading .button {
width: 100%;
}
.shared-conversation-note-preview {
margin: 16px 16px 0;
}
.shared-conversation-messages {
padding: 16px;
}
.shared-owner-message header {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
}
/* =========================================================
CORRECTIF 37.24 — CATÉGORIE « MES NOTES PARTAGÉES »
========================================================= */
.category-shared-icon {
display: grid;
place-items: center;
flex: 0 0 20px;
width: 20px;
height: 20px;
border-radius: 7px;
background: rgba(91, 139, 239, .14);
color: #668ee2;
font-size: .72rem;
font-weight: 900;
box-shadow:
inset 0 0 0 1px rgba(91, 139, 239, .16);
}
.category-link-shared {
color: #50698f;
}
.category-link-shared:hover {
background: rgba(91, 139, 239, .1);
color: #365f9e;
}
:root[data-theme="dark"] .category-shared-icon {
background: rgba(108, 150, 241, .16);
color: #aac3fb;
}
:root[data-theme="dark"] .category-link-shared {
color: #c1cee0;
}
:root[data-theme="dark"] .category-link-shared:hover {
background: rgba(91, 139, 239, .12);
color: #dbe7ff;
}
/* =========================================================
CORRECTIF 37.25 — GESTION DES LIENS DE PARTAGE
========================================================= */
.shared-conversation-heading-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 9px;
}
.shared-link-manager {
display: grid;
gap: 17px;
margin: 20px 22px 0;
padding: 20px;
border: 1px solid rgba(77, 119, 205, .17);
border-radius: 18px;
background:
radial-gradient(
circle at 100% 0,
rgba(84, 131, 229, .11),
transparent 18rem
),
linear-gradient(
145deg,
rgba(246, 249, 255, .98),
rgba(239, 244, 252, .94)
);
box-shadow:
0 12px 28px rgba(48, 70, 109, .065),
inset 0 1px 0 rgba(255, 255, 255, .85);
}
.shared-link-manager-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.shared-link-manager-heading .eyebrow {
margin-bottom: 5px;
color: #70819a;
}
.shared-link-manager-heading h3 {
margin: 0;
color: #233044;
font-size: 1.15rem;
letter-spacing: -.025em;
}
.shared-link-manager-heading p:not(.eyebrow) {
margin: 6px 0 0;
color: #6f7c8e;
font-size: .79rem;
line-height: 1.55;
}
.shared-link-active {
display: inline-flex;
align-items: center;
gap: 7px;
flex: 0 0 auto;
padding: 7px 10px;
border-radius: 999px;
background: rgba(57, 173, 96, .11);
color: #438b5c;
font-size: .67rem;
font-weight: 900;
letter-spacing: .045em;
text-transform: uppercase;
}
.shared-link-active > span {
width: 7px;
height: 7px;
border-radius: 50%;
background: #50c976;
box-shadow: 0 0 0 4px rgba(80, 201, 118, .11);
}
.shared-link-field {
display: grid;
gap: 8px;
}
.shared-link-field > label {
color: #374559;
font-size: .75rem;
font-weight: 850;
}
.shared-link-field > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 9px;
}
.shared-link-field input {
width: 100%;
min-width: 0;
min-height: 45px;
padding: 0 13px;
border: 1px solid rgba(102, 122, 151, .2);
border-radius: 12px;
background: rgba(255, 255, 255, .9);
color: #465469;
font: inherit;
font-size: .79rem;
outline: 0;
}
.shared-link-field input:focus {
border-color: rgba(76, 121, 216, .58);
box-shadow: 0 0 0 4px rgba(76, 121, 216, .1);
}
.shared-link-actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.shared-link-actions form {
margin: 0;
}
.shared-link-rotate {
border: 1px solid rgba(75, 116, 202, .2);
background: rgba(78, 124, 222, .11);
color: #3e65ab;
}
.shared-link-rotate:hover {
background: rgba(78, 124, 222, .18);
}
.shared-link-revoke {
border: 1px solid rgba(216, 74, 62, .2);
background: rgba(216, 74, 62, .08);
color: #b6463d;
}
.shared-link-revoke:hover {
background: rgba(216, 74, 62, .14);
}
/*
* Garantit le même design avec ou sans paramètre ?share=,
* même si une ancienne navigation a été conservée par le navigateur.
*/
.shared-notes-page,
.shared-notes-page * {
box-sizing: border-box;
}
@media (max-width: 760px) {
.shared-conversation-heading-actions {
display: grid;
grid-template-columns: 1fr;
width: 100%;
}
.shared-conversation-heading-actions .button {
width: 100%;
}
.shared-link-manager {
margin: 16px 16px 0;
padding: 17px;
}
.shared-link-manager-heading {
align-items: flex-start;
flex-direction: column;
}
.shared-link-field > div {
grid-template-columns: 1fr;
}
.shared-link-field .button {
width: 100%;
}
.shared-link-actions {
display: grid;
grid-template-columns: 1fr;
}
.shared-link-actions form,
.shared-link-actions .button {
width: 100%;
}
}
/* ÉTAPE 40 — LISTES D’ACHATS */
.category-shopping-icon{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border-radius:7px;background:#e9f7ee;color:#31915a;font-size:.72rem;font-weight:900}
.category-link-shopping:hover{background:#edf9f1;color:#277548}
.button-list{min-height:48px;background:#e9f7ee;color:#28794a;border:1px solid #ccebd7}
.shopping-page{padding:42px 0 78px}
.shopping-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:24px;padding:27px;border-radius:24px;background:linear-gradient(145deg,#1d2a25,#17211d);color:#fff}
.shopping-heading h1{margin:0;font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.055em}
.shopping-heading p:not(.eyebrow){max-width:690px;color:#b9c9c0;line-height:1.65}
.shopping-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px}
.shopping-sidebar,.shopping-editor{border:1px solid rgba(59,75,66,.1);border-radius:22px;background:rgba(255,255,255,.84);box-shadow:0 18px 40px rgba(35,48,40,.07)}
.shopping-sidebar{padding:18px;align-self:start}
.shopping-new-list{display:grid;gap:8px;padding-bottom:16px;border-bottom:1px solid #e7ebe8}
.shopping-new-list label{font-size:.78rem;font-weight:850}.shopping-new-list>div{display:grid;gap:8px}
.shopping-new-list input,.shopping-title-input,.shopping-add-item input,.shopping-item input{width:100%;min-width:0;border:1px solid #dce3df;border-radius:12px;background:#fff;font:inherit;outline:0}
.shopping-new-list input,.shopping-add-item input,.shopping-item input{min-height:44px;padding:0 13px}
.shopping-list-nav{display:grid;gap:8px;margin-top:15px}
.shopping-list-nav a{display:flex;justify-content:space-between;gap:10px;padding:13px;border-radius:13px;color:#35443c;text-decoration:none}
.shopping-list-nav a.is-active,.shopping-list-nav a:hover{background:#eaf7ef}
.shopping-list-nav span{display:grid;min-width:0}.shopping-list-nav strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shopping-list-nav small{color:#7c8982}.shopping-list-nav b{color:#6d7b73}
.shopping-editor{padding:24px}
.shopping-editor-heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.shopping-title-input{padding:6px 0;border:0;background:transparent;font-size:1.7rem;font-weight:850;letter-spacing:-.04em}
.shopping-delete-list{background:#fff1ef;color:#ae433a;border:1px solid #f1d0cc}
.shopping-progress{display:grid;grid-template-columns:auto minmax(100px,1fr) auto;gap:14px;align-items:center;margin:20px 0;padding:15px;border-radius:15px;background:#f3f8f5}
.shopping-progress>div:first-child{display:grid}.shopping-progress span{color:#78867e;font-size:.74rem}.shopping-progress-track{height:9px;border-radius:99px;background:#dce8e0;overflow:hidden}.shopping-progress-track span{display:block;height:100%;background:#42a669;border-radius:inherit}
.shopping-add-item{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:9px;margin-bottom:18px}
.shopping-item{display:grid;grid-template-columns:38px minmax(0,1fr) 130px 36px;gap:9px;align-items:center;padding:10px;border:1px solid #e0e6e2;border-radius:14px;background:#fff}
.shopping-check{width:34px;height:34px;border:1px solid #cddbd2;border-radius:10px;background:#f7faf8;color:#fff;font-weight:900;cursor:pointer}
.shopping-item.is-completed{opacity:.65;background:#f4f6f5}.shopping-item.is-completed .shopping-check{background:#42a669;border-color:#42a669}
.shopping-item-delete{width:34px;height:34px;border:0;border-radius:9px;background:#fff1ef;color:#ad4038;font-size:1.2rem;cursor:pointer}
.shopping-footer-actions{margin-top:16px;text-align:right}.shopping-empty{display:grid;place-items:center;min-height:380px;text-align:center}.shopping-empty>span{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#e7f6ec;color:#34945b;font-size:1.4rem;font-weight:900}
@media(max-width:820px){.shopping-layout{grid-template-columns:1fr}.shopping-heading{flex-direction:column}.shopping-add-item{grid-template-columns:1fr}.shopping-item{grid-template-columns:38px minmax(0,1fr) 36px}.shopping-item-quantity{grid-column:2/3}.shopping-progress{grid-template-columns:1fr}.shopping-editor-heading{flex-direction:column}.shopping-delete-list{width:100%}}
/* =========================================================
CORRECTIF 40.2 — NOUVELLE PALETTE POUR LES LISTES
========================================================= */
.shopping-page {
--shopping-ink: #1f2933;
--shopping-muted: #6f7a84;
--shopping-border: #e7dfcf;
--shopping-surface: #fffdf8;
--shopping-soft: #f7f1e6;
--shopping-accent: #f2c84b;
--shopping-accent-strong: #d7a91f;
--shopping-green: #4ca66a;
--shopping-green-soft: #eaf7ef;
--shopping-danger: #b9473e;
--shopping-danger-soft: #fff0ed;
}
.shopping-page {
background:
radial-gradient(
circle at 0 0,
rgba(242, 200, 75, .08),
transparent 28rem
);
}
.shopping-heading {
border: 1px solid rgba(255, 255, 255, .06);
background:
radial-gradient(
circle at 100% 0,
rgba(242, 200, 75, .16),
transparent 24rem
),
linear-gradient(145deg, #17212b, #101820);
box-shadow:
0 22px 50px rgba(16, 24, 32, .18),
inset 0 1px 0 rgba(255, 255, 255, .04);
}
.shopping-heading .eyebrow {
color: #d7b84e;
}
.shopping-heading p:not(.eyebrow) {
color: #c6ced6;
}
.shopping-sidebar,
.shopping-editor {
border-color: var(--shopping-border);
background: var(--shopping-surface);
box-shadow:
0 18px 38px rgba(63, 50, 28, .07),
inset 0 1px 0 rgba(255, 255, 255, .9);
}
.shopping-sidebar {
background:
linear-gradient(
180deg,
#fffdf8 0%,
#faf6ee 100%
);
}
.shopping-new-list {
border-bottom-color: #ece4d5;
}
.shopping-new-list label {
color: #5c5140;
}
.shopping-new-list input,
.shopping-title-input,
.shopping-add-item input,
.shopping-item input {
border-color: #e3daca;
background: #fff;
color: var(--shopping-ink);
}
.shopping-new-list input:focus,
.shopping-add-item input:focus,
.shopping-item input:focus {
border-color: var(--shopping-accent-strong);
box-shadow: 0 0 0 4px rgba(242, 200, 75, .16);
}
.shopping-new-list .button-dark,
.shopping-add-item .button-primary {
border-color: #e2b928;
background:
linear-gradient(
180deg,
#f7d760,
#efc13a
);
color: #2e2715;
box-shadow: 0 8px 18px rgba(215, 169, 31, .18);
}
.shopping-new-list .button-dark:hover,
.shopping-add-item .button-primary:hover {
background:
linear-gradient(
180deg,
#f8dc72,
#eeba28
);
}
.shopping-list-nav a {
color: #4c4437;
}
.shopping-list-nav a:hover {
background: #f8f1e5;
}
.shopping-list-nav a.is-active {
border: 1px solid #eadfca;
background:
linear-gradient(
145deg,
#fff7df,
#fbf1d6
);
box-shadow:
0 8px 18px rgba(91, 69, 27, .06),
inset 3px 0 0 var(--shopping-accent);
}
.shopping-list-nav small,
.shopping-list-nav b {
color: #8a7f6e;
}
.shopping-editor-heading .eyebrow {
color: #7a6d57;
}
.shopping-title-input {
color: #2d3136;
}
.shopping-delete-list {
border-color: #efc9c4;
background: var(--shopping-danger-soft);
color: var(--shopping-danger);
}
.shopping-delete-list:hover {
background: #ffe5e1;
}
.shopping-progress {
border: 1px solid #e8dfce;
background:
linear-gradient(
180deg,
#fffaf0,
#f8f2e7
);
}
.shopping-progress strong {
color: #413a2f;
}
.shopping-progress span {
color: #8a7f6e;
}
.shopping-progress-track {
background: #e8e0d3;
}
.shopping-progress-track span {
background:
linear-gradient(
90deg,
#e8ba2f,
#f3cf58
);
}
.shopping-progress > b {
color: #9a7420;
}
.shopping-item {
border-color: #ebe3d7;
background: #fffefb;
box-shadow: 0 7px 16px rgba(60, 49, 29, .035);
}
.shopping-item:hover {
border-color: #dfd3bf;
background: #fff;
}
.shopping-check {
border-color: #d9cfbe;
background: #fbf7ef;
color: transparent;
}
.shopping-check:hover {
border-color: #d5ac2e;
background: #fff8df;
}
.shopping-item.is-completed {
opacity: 1;
border-color: #d9e9de;
background: var(--shopping-green-soft);
}
.shopping-item.is-completed .shopping-check {
border-color: var(--shopping-green);
background: var(--shopping-green);
color: #fff;
}
.shopping-item.is-completed .shopping-item-label {
color: #6f8175;
text-decoration-color: #83a58e;
}
.shopping-item-delete {
background: var(--shopping-danger-soft);
color: var(--shopping-danger);
}
.shopping-item-delete:hover {
background: #ffe2dd;
}
.shopping-footer-actions .button-ghost {
border-color: #e6dccd;
background: #fffaf2;
color: #655947;
}
.shopping-footer-actions .button-ghost:hover {
background: #f7efe3;
}
.shopping-empty > span {
background: #fff4cc;
color: #b88c13;
}
.category-shopping-icon {
background: #fff2bd;
color: #a77c0d;
}
.category-link-shopping {
color: #6e5b2b;
}
.category-link-shopping:hover {
background: #fff7db;
color: #8e6a0f;
}
.button-list {
border-color: #ecd16b;
background:
linear-gradient(
180deg,
#fff4be,
#f9e58d
);
color: #69531a;
}
.button-list:hover {
background:
linear-gradient(
180deg,
#fff7ca,
#f6df72
);
}
:root[data-theme="dark"] .shopping-sidebar,
:root[data-theme="dark"] .shopping-editor {
border-color: #2c3641;
background: #161d24;
}
:root[data-theme="dark"] .shopping-sidebar {
background:
linear-gradient(
180deg,
#182027,
#141b21
);
}
:root[data-theme="dark"] .shopping-new-list {
border-bottom-color: #2d3640;
}
:root[data-theme="dark"] .shopping-new-list label,
:root[data-theme="dark"] .shopping-title-input,
:root[data-theme="dark"] .shopping-progress strong {
color: #edf1f4;
}
:root[data-theme="dark"] .shopping-new-list input,
:root[data-theme="dark"] .shopping-add-item input,
:root[data-theme="dark"] .shopping-item input {
border-color: #35404b;
background: #111820;
color: #eef2f5;
}
:root[data-theme="dark"] .shopping-list-nav a {
color: #d9e0e5;
}
:root[data-theme="dark"] .shopping-list-nav a:hover {
background: #202932;
}
:root[data-theme="dark"] .shopping-list-nav a.is-active {
border-color: #5e4f28;
background:
linear-gradient(
145deg,
#2b271b,
#252116
);
}
:root[data-theme="dark"] .shopping-progress {
border-color: #37372f;
background:
linear-gradient(
180deg,
#22241f,
#1b1e1b
);
}
:root[data-theme="dark"] .shopping-progress-track {
background: #343730;
}
:root[data-theme="dark"] .shopping-item {
border-color: #303a44;
background: #171f27;
}
:root[data-theme="dark"] .shopping-item:hover {
border-color: #3d4954;
background: #1b242d;
}
:root[data-theme="dark"] .shopping-item.is-completed {
border-color: #294536;
background: #182a20;
}
:root[data-theme="dark"] .shopping-check {
border-color: #46515c;
background: #202932;
}
/* =========================================================
CORRECTIF 40.3 — LISTES CLAIRES MÊME EN MODE SOMBRE
========================================================= */
/*
* La page des listes conserve volontairement une identité claire,
* même lorsque le reste du site utilise le thème sombre.
*/
:root[data-theme="dark"] .shopping-page {
color-scheme: light;
}
:root[data-theme="dark"] .shopping-heading {
border-color: rgba(53, 69, 88, .14);
background:
radial-gradient(
circle at 100% 0,
rgba(244, 196, 54, .18),
transparent 24rem
),
linear-gradient(145deg, #1f2b38, #17212b);
}
:root[data-theme="dark"] .shopping-heading h1 {
color: #ffffff;
}
:root[data-theme="dark"] .shopping-heading .eyebrow {
color: #f2ca4d;
}
:root[data-theme="dark"] .shopping-heading p:not(.eyebrow) {
color: #d5dde5;
}
:root[data-theme="dark"] .shopping-heading .button-ghost {
border-color: rgba(255, 255, 255, .16);
background: rgba(255, 255, 255, .07);
color: #ffffff;
}
:root[data-theme="dark"] .shopping-sidebar,
:root[data-theme="dark"] .shopping-editor {
border-color: #e5dccd;
background:
linear-gradient(
180deg,
#fffdf8 0%,
#faf6ee 100%
);
color: #29323b;
box-shadow:
0 20px 45px rgba(0, 0, 0, .18),
inset 0 1px 0 rgba(255, 255, 255, .9);
}
:root[data-theme="dark"] .shopping-new-list {
border-bottom-color: #e9dfd0;
}
:root[data-theme="dark"] .shopping-new-list label,
:root[data-theme="dark"] .shopping-editor-heading .eyebrow,
:root[data-theme="dark"] .shopping-progress strong,
:root[data-theme="dark"] .shopping-title-input {
color: #3a342c;
}
:root[data-theme="dark"] .shopping-new-list input,
:root[data-theme="dark"] .shopping-add-item input,
:root[data-theme="dark"] .shopping-item input {
border-color: #e1d7c7;
background: #ffffff;
color: #26313b;
}
:root[data-theme="dark"] .shopping-new-list input::placeholder,
:root[data-theme="dark"] .shopping-add-item input::placeholder,
:root[data-theme="dark"] .shopping-item input::placeholder {
color: #938a7d;
}
:root[data-theme="dark"] .shopping-list-nav a {
color: #3d3932;
}
:root[data-theme="dark"] .shopping-list-nav a:hover {
background: #f8f0df;
}
:root[data-theme="dark"] .shopping-list-nav a.is-active {
border-color: #ead59b;
background:
linear-gradient(
145deg,
#fff8df,
#f9edca
);
color: #3a3120;
box-shadow:
0 10px 20px rgba(94, 72, 23, .08),
inset 4px 0 0 #f0bf2e;
}
:root[data-theme="dark"] .shopping-list-nav small,
:root[data-theme="dark"] .shopping-list-nav b {
color: #7f7566;
}
:root[data-theme="dark"] .shopping-progress {
border-color: #e7dcc8;
background:
linear-gradient(
180deg,
#fffaf0,
#f7f0e4
);
}
:root[data-theme="dark"] .shopping-progress span {
color: #7f7567;
}
:root[data-theme="dark"] .shopping-progress-track {
background: #e6dece;
}
:root[data-theme="dark"] .shopping-progress-track span {
background:
linear-gradient(
90deg,
#e4af1f,
#f3cf58
);
}
:root[data-theme="dark"] .shopping-progress > b {
color: #9a7315;
}
:root[data-theme="dark"] .shopping-item {
border-color: #e6ddcf;
background: #ffffff;
color: #2a333b;
box-shadow: 0 8px 18px rgba(57, 45, 25, .05);
}
:root[data-theme="dark"] .shopping-item:hover {
border-color: #dbcdb7;
background: #fffdfa;
}
:root[data-theme="dark"] .shopping-item.is-completed {
border-color: #d3e8d9;
background: #edf8f0;
}
:root[data-theme="dark"] .shopping-item.is-completed .shopping-item-label {
color: #6c7c71;
}
:root[data-theme="dark"] .shopping-check {
border-color: #d5c9b7;
background: #faf6ee;
}
:root[data-theme="dark"] .shopping-item.is-completed .shopping-check {
border-color: #4da56a;
background: #4da56a;
color: #ffffff;
}
:root[data-theme="dark"] .shopping-item-delete {
border: 1px solid #f0c9c3;
background: #fff0ed;
color: #b8473d;
}
:root[data-theme="dark"] .shopping-delete-list {
border-color: #efc9c4;
background: #fff0ed;
color: #b8473d;
}
:root[data-theme="dark"] .shopping-footer-actions .button-ghost {
border-color: #e4d8c8;
background: #fffaf1;
color: #655947;
}
:root[data-theme="dark"] .shopping-empty h2,
:root[data-theme="dark"] .shopping-empty p {
color: #34404a;
}
/* ÉTAPE 41 — ADMINISTRATION */
.button-admin-link{border:1px solid rgba(91,139,239,.22);background:rgba(91,139,239,.11);color:#587dc4}
.admin-shell{display:grid;grid-template-columns:245px minmax(0,1fr);width:min(1420px,calc(100% - 34px));min-height:calc(100vh - 130px);margin:30px auto 70px;overflow:hidden;border:1px solid rgba(73,88,105,.12);border-radius:26px;background:#f3f5f7;box-shadow:0 28px 70px rgba(28,38,48,.12)}
.admin-sidebar{padding:22px 16px;background:radial-gradient(circle at 0 0,rgba(91,139,239,.18),transparent 18rem),#17212c;color:#fff}
.admin-sidebar-brand{display:flex;align-items:center;gap:12px;padding:4px 8px 24px}.admin-sidebar-brand>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.08);color:#bad0ff;font-size:1.15rem}.admin-sidebar-brand div{display:grid}.admin-sidebar-brand small{color:#8fa0b3}
.admin-sidebar nav{display:grid;gap:7px}.admin-sidebar nav a{display:flex;align-items:center;gap:11px;min-height:44px;padding:0 12px;border-radius:12px;color:#b9c4cf;text-decoration:none;font-size:.82rem;font-weight:800}.admin-sidebar nav a:hover,.admin-sidebar nav a.is-active{background:rgba(255,255,255,.09);color:#fff}
.admin-main{min-width:0;padding:30px}.admin-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}.admin-heading h1{margin:0;color:#1f2a35;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.055em}.admin-heading p:not(.eyebrow){max-width:690px;margin:9px 0 0;color:#75808b;line-height:1.6}
.admin-secure-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:#e8f6ed;color:#438c5e;font-size:.68rem;font-weight:900;text-transform:uppercase}.admin-secure-pill span{width:7px;height:7px;border-radius:50%;background:#4dc474}
.admin-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}.admin-stat-grid article{display:grid;gap:7px;padding:19px;border:1px solid #e1e5e9;border-radius:17px;background:#fff;box-shadow:0 10px 24px rgba(41,51,61,.045)}.admin-stat-grid span{color:#78838e;font-size:.71rem;font-weight:850;text-transform:uppercase}.admin-stat-grid strong{color:#1e2934;font-size:1.9rem}.admin-stat-grid small,.admin-stat-grid a{color:#84909b;font-size:.72rem;text-decoration:none}
.admin-dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.admin-panel,.admin-users-table,.admin-user-detail{overflow:hidden;border:1px solid #e0e5e9;border-radius:19px;background:#fff;box-shadow:0 12px 28px rgba(41,51,61,.05)}.admin-panel>header{display:flex;justify-content:space-between;gap:14px;padding:18px 20px;border-bottom:1px solid #edf0f2;background:#fafbfc}.admin-panel h2{margin:0}.admin-panel>header>a{color:#5f7fb8;font-size:.76rem;font-weight:800;text-decoration:none}
.admin-user-list,.admin-note-list{display:grid}.admin-user-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;padding:13px 18px;border-bottom:1px solid #eff1f3;color:inherit;text-decoration:none}.admin-user-row:hover{background:#f8fafc}
.admin-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:#eaf0fb;color:#5b7dbb;font-weight:900}.admin-avatar-large{width:58px;height:58px;border-radius:17px;font-size:1.25rem}.admin-user-copy{display:grid;min-width:0}.admin-user-copy small{overflow:hidden;color:#84909a;text-overflow:ellipsis;white-space:nowrap}.admin-user-metrics{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.admin-user-metrics b{padding:5px 7px;border-radius:8px;background:#f0f3f6;color:#67737e;font-size:.62rem}
.admin-note-list article{padding:14px 18px;border-bottom:1px solid #eff1f3}.admin-note-list article>div{display:flex;justify-content:space-between;gap:12px}.admin-note-list span{color:#8a949d;font-size:.68rem}.admin-note-list p{display:-webkit-box;margin:8px 0 0;overflow:hidden;color:#626e78;font-size:.78rem;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.admin-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;margin-bottom:18px}.admin-search input{min-height:46px;padding:0 14px;border:1px solid #dce2e7;border-radius:13px;background:#fff;font:inherit}
.admin-users-layout{display:grid;grid-template-columns:minmax(320px,.95fr) minmax(0,1.05fr);gap:18px;align-items:start}.admin-users-table-heading{display:flex;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid #edf0f2;background:#fafbfc}.admin-users-table-heading span{color:#8a949d;font-size:.7rem}
.admin-account-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;padding:13px 16px;border-bottom:1px solid #eff1f3;color:inherit;text-decoration:none}.admin-account-row:hover,.admin-account-row.is-active{background:#f1f6ff}.admin-account-row>span:nth-child(2){display:grid;min-width:0}.admin-account-row small{overflow:hidden;color:#87919a;text-overflow:ellipsis;white-space:nowrap}.admin-account-row em{padding:3px 6px;border-radius:999px;background:#fff1bd;color:#8d6a0d;font-size:.58rem;font-style:normal}.admin-account-row>b{color:#74808a;font-size:.7rem}
.admin-user-detail{min-height:420px;padding:22px}.admin-user-placeholder{display:grid;place-items:center;min-height:370px;text-align:center}.admin-user-placeholder>span{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#eaf0fb;color:#6182bd;font-size:1.3rem}.admin-user-placeholder h2{margin:14px 0 0}.admin-user-placeholder p{margin:7px 0 0;color:#7f8a94}.admin-user-detail>header{display:flex;gap:14px;align-items:center;padding-bottom:19px;border-bottom:1px solid #edf0f2}.admin-user-detail h2{margin:0}.admin-user-detail header p:not(.eyebrow){margin:5px 0 0;color:#7f8a94}
.admin-user-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}.admin-user-stat-grid article{display:grid;gap:4px;padding:14px;border-radius:13px;background:#f4f6f8}.admin-user-stat-grid strong{font-size:1.35rem}.admin-user-stat-grid span{color:#7b8791;font-size:.7rem}.admin-user-status{display:flex;justify-content:space-between;margin-top:17px;padding:14px;border:1px solid #e2e6e9;border-radius:13px}
@media(max-width:980px){.admin-shell{grid-template-columns:1fr}.admin-sidebar nav{grid-template-columns:repeat(4,minmax(0,1fr))}.admin-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-dashboard-grid,.admin-users-layout{grid-template-columns:1fr}}
@media(max-width:650px){.admin-shell{width:min(100% - 18px,1420px);margin-top:16px;border-radius:20px}.admin-main{padding:20px 15px}.admin-sidebar nav{grid-template-columns:1fr 1fr}.admin-heading{flex-direction:column}.admin-stat-grid{grid-template-columns:1fr}.admin-user-row{grid-template-columns:42px minmax(0,1fr)}.admin-user-metrics{grid-column:2;justify-content:flex-start}.admin-search{grid-template-columns:1fr}.admin-account-row{grid-template-columns:42px minmax(0,1fr)}.admin-account-row>b{grid-column:2}.admin-user-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* =========================================================
CORRECTIF 41.1 — PRIORITÉ ET CHARGEMENT DU DESIGN ADMIN
========================================================= */
body .admin-shell {
display: grid !important;
grid-template-columns: 245px minmax(0, 1fr) !important;
overflow: hidden;
}
body .admin-sidebar {
display: block;
}
body .admin-sidebar nav {
display: grid;
}
body .admin-main {
display: block;
min-width: 0;
}
body .admin-stat-grid,
body .admin-dashboard-grid,
body .admin-users-layout,
body .admin-user-stat-grid {
display: grid;
}
body .admin-user-row,
body .admin-account-row {
display: grid;
}
@media (max-width: 980px) {
body .admin-shell {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 650px) {
body .admin-stat-grid,
body .admin-dashboard-grid,
body .admin-users-layout {
grid-template-columns: 1fr !important;
}
}
/* =========================================================
ÉTAPE 42 — ADMINISTRATION DANS LES CATÉGORIES
+ SECTIONS ET TRI DES LISTES
========================================================= */
.category-row-admin {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(82, 96, 111, .1);
}
.category-link-admin {
border: 1px solid rgba(91, 139, 239, .18);
background:
linear-gradient(
145deg,
rgba(235, 242, 255, .92),
rgba(245, 248, 255, .88)
);
color: #496da9;
}
.category-link-admin:hover {
border-color: rgba(91, 139, 239, .3);
background: #eaf1ff;
color: #355d9f;
}
.category-link-admin > strong {
color: #6686bd;
font-size: .6rem;
letter-spacing: .055em;
text-transform: uppercase;
}
.category-admin-icon {
display: grid;
place-items: center;
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 8px;
background: rgba(91, 139, 239, .14);
color: #5e82c2;
font-size: .75rem;
}
.shopping-add-item {
grid-template-columns:
minmax(210px, 1fr)
minmax(105px, 140px)
minmax(150px, 190px)
auto;
}
.shopping-add-item select,
.shopping-item-section,
.shopping-sort-toolbar select {
width: 100%;
min-width: 0;
min-height: 44px;
padding: 0 38px 0 13px;
border: 1px solid #e1d7c7;
border-radius: 12px;
background: #fff;
color: #35404a;
font: inherit;
outline: none;
}
.shopping-add-item select:focus,
.shopping-item-section:focus,
.shopping-sort-toolbar select:focus {
border-color: #d7a91f;
box-shadow: 0 0 0 4px rgba(242, 200, 75, .15);
}
.shopping-sort-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
padding: 14px 15px;
border: 1px solid #e8dfd0;
border-radius: 15px;
background: #fbf7ef;
}
.shopping-sort-toolbar > div {
display: grid;
gap: 3px;
}
.shopping-sort-toolbar strong {
color: #3d372e;
font-size: .82rem;
}
.shopping-sort-toolbar span {
color: #847a6c;
font-size: .7rem;
}
.shopping-sort-toolbar form {
display: grid;
grid-template-columns: auto minmax(170px, 210px);
align-items: center;
gap: 9px;
}
.shopping-sort-toolbar label {
color: #716756;
font-size: .72rem;
font-weight: 850;
}
.shopping-section-heading {
display: flex;
align-items: center;
gap: 9px;
margin: 15px 2px 7px;
color: #4b4438;
}
.shopping-section-heading:first-child {
margin-top: 0;
}
.shopping-section-heading strong {
font-size: .72rem;
letter-spacing: .07em;
text-transform: uppercase;
}
.shopping-section-dot {
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(91, 98, 105, .07);
}
.shopping-section-dot-sec {
background: #d7a52b;
}
.shopping-section-dot-frais {
background: #54a974;
}
.shopping-section-dot-fruits-legumes {
background: #e87b38;
}
.shopping-section-dot-surgeles {
background: #4e9cc9;
}
.shopping-section-dot-non-alimentaire {
background: #8672c8;
}
.shopping-section-dot-autres {
background: #8a9299;
}
.shopping-item {
grid-template-columns:
38px
minmax(150px, 1fr)
minmax(90px, 120px)
minmax(145px, 180px)
36px;
}
.shopping-item-section {
min-height: 40px;
font-size: .77rem;
}
:root[data-theme="dark"] .category-link-admin {
border-color: rgba(103, 145, 232, .2);
background:
linear-gradient(
145deg,
rgba(42, 57, 82, .94),
rgba(32, 44, 63, .92)
);
color: #c9d9f8;
}
:root[data-theme="dark"] .shopping-add-item select,
:root[data-theme="dark"] .shopping-item-section,
:root[data-theme="dark"] .shopping-sort-toolbar select {
border-color: #e1d7c7;
background: #fff;
color: #35404a;
}
:root[data-theme="dark"] .shopping-sort-toolbar {
border-color: #e8dfd0;
background: #fbf7ef;
}
:root[data-theme="dark"] .shopping-sort-toolbar strong,
:root[data-theme="dark"] .shopping-section-heading {
color: #4b4438;
}
:root[data-theme="dark"] .shopping-sort-toolbar span,
:root[data-theme="dark"] .shopping-sort-toolbar label {
color: #7f7567;
}
@media (max-width: 1050px) {
.shopping-add-item {
grid-template-columns: minmax(0, 1fr) 130px;
}
.shopping-add-item select {
grid-column: 1;
}
.shopping-add-item .button {
grid-column: 2;
grid-row: 2;
}
.shopping-item {
grid-template-columns:
38px
minmax(0, 1fr)
minmax(115px, 150px)
36px;
}
.shopping-item-quantity {
grid-column: 2;
}
.shopping-item-section {
grid-column: 3;
}
}
@media (max-width: 700px) {
.shopping-add-item {
grid-template-columns: 1fr;
}
.shopping-add-item select,
.shopping-add-item .button {
grid-column: auto;
grid-row: auto;
}
.shopping-sort-toolbar {
align-items: stretch;
flex-direction: column;
}
.shopping-sort-toolbar form {
grid-template-columns: 1fr;
}
.shopping-item {
grid-template-columns: 38px minmax(0, 1fr) 36px;
}
.shopping-item-label {
grid-column: 2;
}
.shopping-item-quantity,
.shopping-item-section {
grid-column: 2 / 4;
}
}
/* =========================================================
CORRECTIF 42.1 — MONTER / DESCENDRE LES PRODUITS
========================================================= */
.shopping-item {
grid-template-columns:
38px
minmax(150px, 1fr)
minmax(90px, 120px)
minmax(145px, 180px)
68px
36px;
}
.shopping-item-order {
display: grid;
grid-template-columns: repeat(2, 30px);
gap: 5px;
justify-content: center;
}
.shopping-item-move {
display: grid;
place-items: center;
width: 30px;
height: 32px;
padding: 0;
border: 1px solid #ddd3c3;
border-radius: 9px;
background: #fffaf1;
color: #655947;
font: inherit;
font-size: .83rem;
font-weight: 900;
cursor: pointer;
transition:
transform .15s ease,
border-color .15s ease,
background .15s ease;
}
.shopping-item-move:hover {
transform: translateY(-1px);
border-color: #d4b653;
background: #fff3c6;
color: #765b0d;
}
.shopping-item-move:active {
transform: translateY(0);
}
:root[data-theme="dark"] .shopping-item-move {
border-color: #ddd3c3;
background: #fffaf1;
color: #655947;
}
@media (max-width: 1150px) {
.shopping-item {
grid-template-columns:
38px
minmax(0, 1fr)
minmax(115px, 150px)
68px
36px;
}
.shopping-item-quantity {
grid-column: 2;
}
.shopping-item-section {
grid-column: 3;
}
}
@media (max-width: 700px) {
.shopping-item {
grid-template-columns:
38px
minmax(0, 1fr)
68px
36px;
}
.shopping-item-label {
grid-column: 2;
}
.shopping-item-quantity,
.shopping-item-section {
grid-column: 2 / 5;
}
.shopping-item-order {
grid-column: 3;
grid-row: 1;
}
.shopping-item-delete {
grid-column: 4;
grid-row: 1;
}
}
/* =========================================================
CORRECTIF 42.2 — DÉPLACEMENT SANS RECHARGEMENT
========================================================= */
.shopping-item {
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease,
background .18s ease;
}
.shopping-item.is-just-moved {
border-color: #d8b23e;
background: #fff9e5;
box-shadow:
0 0 0 4px rgba(242, 200, 75, .14),
0 12px 24px rgba(72, 56, 19, .08);
}
.shopping-item-move:disabled {
opacity: .45;
cursor: wait;
transform: none;
}
:root[data-theme="dark"] .shopping-item.is-just-moved {
border-color: #d8b23e;
background: #fff9e5;
}
/* NOTE-BLOC.FR — V48 : recherche globale */
.global-search-page{width:min(1180px,calc(100% - 32px));margin:34px auto 70px}.global-search-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px}.global-search-heading h1{margin:3px 0 8px;font-size:clamp(2.2rem,5vw,4rem);line-height:1}.global-search-heading p:last-child{max-width:680px;color:#68727d}.global-search-form{padding:20px;border:1px solid #e1e5e8;border-radius:22px;background:#fff;box-shadow:0 16px 45px rgba(30,40,50,.07)}.global-search-form>label{display:block;margin-bottom:10px;font-weight:800}.global-search-fields{display:grid;grid-template-columns:minmax(0,1fr) 170px auto;gap:10px}.global-search-fields input,.global-search-fields select{min-height:50px;padding:0 15px;border:1px solid #d8dde1;border-radius:14px;background:#fff;font:inherit}.global-search-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:28px 0 16px;padding:13px 17px;border-radius:14px;background:#fff4b7}.global-search-summary span{color:#655f42}.global-result-section{margin-top:30px}.global-result-section>header{display:flex;align-items:center;gap:10px;margin-bottom:13px}.global-result-section>header h2{margin:0}.global-result-section>header span{display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:#252d36;color:#fff;font-weight:800}.global-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.global-result-card{display:block;min-height:165px;padding:19px;border:1px solid #e0e5e8;border-radius:18px;background:#fff;color:inherit;text-decoration:none;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.global-result-card:hover{transform:translateY(-2px);border-color:#d2b62c;box-shadow:0 14px 35px rgba(30,40,50,.08)}.global-result-card h3{margin:13px 0 7px;font-size:1.2rem}.global-result-card p{margin:13px 0;color:#4f5964;line-height:1.55}.global-result-card small{color:#7b848d}.global-result-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px}.global-result-meta span,.global-result-meta b,.global-result-meta em{padding:5px 9px;border-radius:999px;font-size:.76rem;font-style:normal}.global-result-meta span{background:#252d36;color:#fff;font-weight:800}.global-result-meta b{background:#eef1f3;color:#4b5660}.global-result-meta em{background:#fff3aa;color:#645b22;font-weight:700}.global-search-empty{margin-top:28px;padding:52px 24px;text-align:center;border:1px dashed #d5dadd;border-radius:22px;background:#fff}.global-search-empty>span{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 16px;border-radius:20px;background:#fff1a7;font-size:2rem}.global-search-empty h2{margin:0 0 8px}.global-search-empty p{margin:0;color:#727b84}:root[data-theme="dark"] .global-search-form,:root[data-theme="dark"] .global-result-card,:root[data-theme="dark"] .global-search-empty{border-color:#3b444d;background:#242b32}:root[data-theme="dark"] .global-search-fields input,:root[data-theme="dark"] .global-search-fields select{border-color:#46505a;background:#1e252b;color:#f4f6f7}:root[data-theme="dark"] .global-result-card p,:root[data-theme="dark"] .global-search-heading p:last-child{color:#bec5cb}:root[data-theme="dark"] .global-result-meta b{background:#39434c;color:#e7ebee}:root[data-theme="dark"] .global-search-summary{background:#4d4622;color:#fff}:root[data-theme="dark"] .global-search-summary span{color:#e4dcaa}@media(max-width:760px){.global-search-page{width:min(100% - 18px,1180px);margin-top:18px}.global-search-heading{flex-direction:column}.global-search-fields{grid-template-columns:1fr}.global-result-grid{grid-template-columns:1fr}.global-search-summary{align-items:flex-start;flex-direction:column;gap:3px}}
/* =========================================================
V49 — FAVORIS NOTES ET LISTES
========================================================= */
.favorite-inline-star{margin-right:7px;color:#a8adb3}.favorite-inline-star.is-active,.global-favorite-badge{color:#e2a900}.shopping-title-row{display:flex;align-items:center;gap:10px}.shopping-favorite-button{flex:0 0 auto;width:44px;height:44px;border:1px solid #d9dde1;border-radius:13px;background:#fff;color:#a2a8af;font-size:1.45rem;cursor:pointer}.shopping-favorite-button.is-active{border-color:#efd46d;background:#fff8d7;color:#dba900}.favorites-page{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:42px 0 70px}.favorites-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px}.favorites-heading h1{margin:0;font-size:clamp(2.2rem,5vw,4rem);letter-spacing:-.055em}.favorites-heading p:not(.eyebrow){max-width:650px;color:#6c7580}.favorites-filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}.favorites-filters a{padding:10px 14px;border:1px solid #dfe3e6;border-radius:999px;background:#fff;color:#4c5661;font-weight:800}.favorites-filters a.is-active{border-color:#e1bd35;background:#fff3b5;color:#2a3138}.favorite-section{margin-top:34px}.favorite-section>header{display:flex;align-items:center;gap:10px;margin-bottom:15px}.favorite-section>header h2{margin:0}.favorite-section>header span{display:grid;place-items:center;min-width:28px;height:28px;border-radius:999px;background:#eceff1;font-weight:850}.favorite-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.favorite-card{display:block;padding:20px;border:1px solid #e0e3e6;border-radius:18px;background:#fff;color:#242c35;box-shadow:0 13px 30px rgba(28,34,40,.07);transition:.18s ease}.favorite-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(28,34,40,.11)}.favorite-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}.favorite-card-meta strong{color:#c99500}.favorite-card-meta span,.favorite-card-meta em{padding:4px 8px;border-radius:999px;background:#f1f3f4;font-size:.72rem;font-style:normal;font-weight:800}.favorite-card h3{margin:4px 0 10px}.favorite-card p{color:#59636e;line-height:1.55}.favorite-card small{color:#89919a}.favorites-empty{display:grid;justify-items:center;padding:65px 25px;border:1px dashed #d6dadd;border-radius:22px;text-align:center}.favorites-empty>span{font-size:3rem;color:#d6aa13}[data-theme="dark"] .favorites-filters a,[data-theme="dark"] .favorite-card,[data-theme="dark"] .shopping-favorite-button{border-color:#414953;background:#232a32;color:#e8edf2}[data-theme="dark"] .favorites-filters a.is-active,[data-theme="dark"] .shopping-favorite-button.is-active{border-color:#8d7621;background:#413817;color:#ffd95b}[data-theme="dark"] .favorite-card p,[data-theme="dark"] .favorites-heading p:not(.eyebrow){color:#b8c0c8}[data-theme="dark"] .favorite-card-meta span,[data-theme="dark"] .favorite-card-meta em,[data-theme="dark"] .favorite-section>header span{background:#333b44;color:#dce2e8}@media(max-width:900px){.favorite-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.favorites-page{width:min(100% - 22px,1180px);padding-top:24px}.favorites-heading{flex-direction:column}.favorites-heading .button{width:100%}.favorites-filters{display:grid;grid-template-columns:1fr}.favorites-filters a{text-align:center}.favorite-grid{grid-template-columns:1fr}.shopping-title-row{align-items:stretch}.shopping-favorite-button{height:auto;min-height:46px}}
/* =========================================================
V50 — RAPPELS NOTES ET LISTES
========================================================= */
.shopping-heading-actions{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}.shopping-reminder-field{display:grid;gap:5px}.shopping-reminder-field span{font-size:.75rem;font-weight:850;color:#69737d}.shopping-reminder-field input{min-height:44px;padding:0 12px;border:1px solid #d9dde1;border-radius:12px;background:#fff;color:#252d35;font:inherit}.shopping-reminder-field input.is-saved{border-color:#4fa46a;box-shadow:0 0 0 3px rgba(79,164,106,.14)}.reminders-page{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:42px 0 70px}.reminders-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px}.reminders-heading h1{margin:0;font-size:clamp(2.2rem,5vw,4rem);letter-spacing:-.055em}.reminders-heading p:not(.eyebrow){max-width:650px;color:#6c7580}.reminders-filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:12px}.reminders-status-filters{margin-bottom:30px}.reminders-filters a{padding:10px 14px;border:1px solid #dfe3e6;border-radius:999px;background:#fff;color:#4c5661;font-weight:800}.reminders-filters a.is-active{border-color:#e1bd35;background:#fff3b5;color:#2a3138}.reminder-section{margin-top:34px}.reminder-section>header{display:flex;align-items:center;gap:10px;margin-bottom:15px}.reminder-section>header h2{margin:0}.reminder-section>header span{display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:#eceff1;font-weight:850}.reminder-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.reminder-card{position:relative;display:block;padding:20px;border:1px solid #e0e3e6;border-left:5px solid #7d9bb3;border-radius:18px;background:#fff;color:#242c35;box-shadow:0 13px 30px rgba(28,34,40,.07);transition:.18s ease}.reminder-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(28,34,40,.11)}.reminder-card.is-soon{border-left-color:#e2a900}.reminder-card.is-past{border-left-color:#d06161;opacity:.82}.reminder-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}.reminder-card-meta strong{color:#b18600}.reminder-card-meta span{padding:4px 8px;border-radius:999px;background:#f1f3f4;font-size:.72rem;font-weight:800}.reminder-card h3{margin:4px 0 14px;line-height:1.4}.reminder-card time{color:#6d7781;font-size:.86rem;font-weight:800}.reminders-empty{display:grid;justify-items:center;padding:65px 25px;border:1px dashed #d6dadd;border-radius:22px;text-align:center}.reminders-empty>span{font-size:3rem}[data-theme="dark"] .shopping-reminder-field input,[data-theme="dark"] .reminders-filters a,[data-theme="dark"] .reminder-card{border-color:#414953;background:#232a32;color:#e8edf2}[data-theme="dark"] .reminders-filters a.is-active{border-color:#8d7621;background:#413817;color:#ffd95b}[data-theme="dark"] .reminder-card-meta span,[data-theme="dark"] .reminder-section>header span{background:#333b44;color:#dce2e8}[data-theme="dark"] .reminders-heading p:not(.eyebrow),[data-theme="dark"] .reminder-card time{color:#b8c0c8}[data-theme="dark"] .shopping-reminder-field span{color:#b8c0c8}@media(max-width:900px){.reminder-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.reminders-page{width:min(100% - 22px,1180px);padding-top:24px}.reminders-heading{flex-direction:column}.reminders-heading .button{width:100%}.reminders-filters{display:grid;grid-template-columns:1fr}.reminders-filters a{text-align:center}.reminder-grid{grid-template-columns:1fr}.shopping-heading-actions{width:100%;align-items:stretch}.shopping-reminder-field{width:100%}.shopping-reminder-field input,.shopping-heading-actions .button{width:100%}}
/* NOTE-BLOC.FR — V51 : ADMINISTRATION AVANCÉE */
.admin-filter-bar{display:grid;grid-template-columns:minmax(220px,1fr) 190px 170px auto;gap:10px;margin-bottom:18px}.admin-filter-bar input,.admin-filter-bar select{min-height:46px;padding:0 13px;border:1px solid #dce2e7;border-radius:13px;background:#fff;color:#26313b;font:inherit}.admin-content-panel{overflow:hidden;border:1px solid #e0e5e9;border-radius:19px;background:#fff;box-shadow:0 12px 28px rgba(41,51,61,.05)}.admin-content-panel>header{display:flex;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid #edf0f2;background:#fafbfc}.admin-content-panel>header span{color:#87919a;font-size:.7rem}.admin-content-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:13px;align-items:center;padding:15px 18px;border-bottom:1px solid #edf0f2}.admin-content-row:last-child{border-bottom:0}.admin-content-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#edf3ff;color:#5b7fbd;font-weight:900}.admin-content-copy{min-width:0}.admin-content-copy>div{display:flex;align-items:center;gap:8px}.admin-content-copy strong{display:block;overflow:hidden;color:#25303a;text-overflow:ellipsis;white-space:nowrap}.admin-content-copy em{flex:0 0 auto;padding:3px 7px;border-radius:999px;background:#fff4c6;color:#8a6800;font-size:.62rem;font-style:normal;font-weight:850}.admin-content-copy p{margin:5px 0 0;color:#77838e;font-size:.75rem}.admin-content-copy small{display:block;margin-top:4px;color:#98a1aa}.admin-content-meta{display:grid;justify-items:end;gap:4px}.admin-content-meta b{color:#5d7eb8;font-size:.68rem;text-transform:uppercase}.admin-content-meta span{color:#66727d;font-size:.72rem}.admin-content-meta small{color:#9ba4ac}.admin-empty-state{display:grid;place-items:center;padding:58px 20px;text-align:center}.admin-empty-state>span{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#edf3ff;color:#6383bd;font-size:1.35rem}.admin-empty-state h2{margin:14px 0 0}.admin-empty-state p{margin:7px 0 0;color:#7f8a94}.admin-period-switch{display:flex;gap:5px;padding:4px;border:1px solid #dce2e7;border-radius:12px;background:#fff}.admin-period-switch a{padding:8px 11px;border-radius:9px;color:#72808c;font-size:.72rem;font-weight:850;text-decoration:none}.admin-period-switch a.is-active{background:#1f2b37;color:#fff}.admin-stat-grid-five{grid-template-columns:repeat(5,minmax(0,1fr))}.admin-activity-panel>header>span{align-self:center;color:#87919a;font-size:.72rem}.admin-activity-chart{display:flex;align-items:flex-end;gap:5px;height:270px;padding:28px 20px 16px;overflow-x:auto}.admin-activity-day{display:grid;grid-template-rows:1fr auto;flex:1;min-width:10px;height:100%;gap:7px;align-items:end;text-align:center}.admin-activity-bar{display:block;width:100%;min-height:4px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#668de0,#95afe8);box-shadow:0 4px 10px rgba(91,126,198,.18)}.admin-activity-bar i{display:block;width:100%;height:26%;border-radius:0 0 2px 2px;background:rgba(33,45,58,.2)}.admin-activity-day small{color:#9aa3ab;font-size:.56rem;white-space:nowrap}.admin-activity-panel>footer{display:flex;gap:18px;padding:13px 20px;border-top:1px solid #edf0f2;color:#72808b;font-size:.72rem}.admin-activity-panel>footer span{display:flex;align-items:center;gap:6px}.admin-activity-panel>footer i{width:9px;height:9px;border-radius:3px}.admin-legend-note{background:#668de0}.admin-legend-list{background:#52606e}
@media(max-width:1180px){.admin-stat-grid-five{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-filter-bar{grid-template-columns:1fr 1fr}.admin-filter-bar input{grid-column:1/-1}}
@media(max-width:650px){.admin-filter-bar{grid-template-columns:1fr}.admin-filter-bar input{grid-column:auto}.admin-content-row{grid-template-columns:42px minmax(0,1fr)}.admin-content-meta{grid-column:2;justify-items:start;grid-template-columns:auto auto auto;align-items:center;gap:8px}.admin-stat-grid-five{grid-template-columns:1fr}.admin-activity-chart{gap:3px;padding-inline:12px}.admin-activity-day small{display:none}.admin-period-switch{width:100%;justify-content:space-between}.admin-period-switch a{flex:1;text-align:center}}
@media(prefers-color-scheme:dark){body:not([data-theme="light"]) .admin-filter-bar input,body:not([data-theme="light"]) .admin-filter-bar select,body:not([data-theme="light"]) .admin-content-panel,body:not([data-theme="light"]) .admin-period-switch{border-color:#374552;background:#202b35;color:#e8edf2}body:not([data-theme="light"]) .admin-content-panel>header{border-color:#34414c;background:#26323d}body:not([data-theme="light"]) .admin-content-row{border-color:#34414c}body:not([data-theme="light"]) .admin-content-copy strong{color:#f0f4f7}body:not([data-theme="light"]) .admin-content-icon{background:#2d3d55;color:#a9c6ff}body:not([data-theme="light"]) .admin-period-switch a.is-active{background:#dce7f3;color:#1f2a34}}
body[data-theme="dark"] .admin-filter-bar input,body[data-theme="dark"] .admin-filter-bar select,body[data-theme="dark"] .admin-content-panel,body[data-theme="dark"] .admin-period-switch{border-color:#374552;background:#202b35;color:#e8edf2}body[data-theme="dark"] .admin-content-panel>header{border-color:#34414c;background:#26323d}body[data-theme="dark"] .admin-content-row{border-color:#34414c}body[data-theme="dark"] .admin-content-copy strong{color:#f0f4f7}body[data-theme="dark"] .admin-content-icon{background:#2d3d55;color:#a9c6ff}body[data-theme="dark"] .admin-period-switch a.is-active{background:#dce7f3;color:#1f2a34}
/* V52 — Listes de courses intelligentes */
.shopping-smart-suggestions,
.shopping-bulk-add {
margin: 1rem 0;
padding: 1rem;
border: 1px solid var(--border-color, rgba(120, 120, 140, .22));
border-radius: 16px;
background: var(--surface-soft, rgba(127, 127, 127, .06));
}
.shopping-smart-suggestions > div:first-child {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .75rem;
margin-bottom: .75rem;
}
.shopping-smart-suggestions span,
.shopping-bulk-add p { opacity: .72; font-size: .88rem; }
.shopping-suggestion-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.shopping-suggestion-chip {
border: 1px solid var(--border-color, rgba(120, 120, 140, .25));
border-radius: 999px;
padding: .55rem .8rem;
background: var(--surface, #fff);
color: inherit;
cursor: pointer;
font: inherit;
}
.shopping-suggestion-chip:hover { transform: translateY(-1px); }
.shopping-suggestion-chip:disabled { opacity: .55; cursor: progress; }
.shopping-bulk-add summary { cursor: pointer; font-weight: 700; }
.shopping-bulk-add form { display: grid; gap: .7rem; margin-top: 1rem; }
.shopping-bulk-add textarea {
width: 100%;
min-height: 130px;
resize: vertical;
border-radius: 12px;
padding: .8rem;
font: inherit;
color: inherit;
background: var(--surface, #fff);
border: 1px solid var(--border-color, rgba(120, 120, 140, .25));
}
.shopping-footer-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
@media (max-width: 720px) {
.shopping-smart-suggestions > div:first-child { align-items: flex-start; flex-direction: column; }
.shopping-suggestion-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }
.shopping-suggestion-chip { flex: 0 0 auto; }
.shopping-footer-actions .button { width: 100%; }
}
@media (prefers-color-scheme: dark) {
.shopping-suggestion-chip,
.shopping-bulk-add textarea { background: rgba(255,255,255,.06); }
}
/* V53 — Modèles de notes et de listes */
.templates-page{display:grid;gap:24px}.templates-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.templates-heading h1{margin:0 0 8px}.templates-layout{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:24px;align-items:start}.template-form-card,.template-card,.templates-empty{background:var(--surface,#fff);border:1px solid var(--border-color,#ddd);border-radius:20px;box-shadow:0 12px 35px rgba(0,0,0,.06)}.template-form-card{padding:22px;position:sticky;top:92px}.template-form-card h2{margin-top:0}.template-form{display:grid;gap:15px}.template-form label{display:grid;gap:7px;font-weight:700}.template-form input,.template-form select,.template-form textarea{width:100%;box-sizing:border-box}.template-form textarea{resize:vertical;min-height:120px}.template-form small{display:block;line-height:1.5;color:var(--muted-text,#666)}.templates-content{min-width:0}.template-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.template-filters a{padding:9px 14px;border-radius:999px;border:1px solid var(--border-color,#ddd);text-decoration:none;color:inherit;background:var(--surface,#fff)}.template-filters a.is-active{background:var(--text-color,#202020);color:var(--surface,#fff);border-color:transparent}.template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.template-card{padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}.template-card header{display:grid;gap:8px}.template-card h2{margin:0;font-size:1.12rem;overflow-wrap:anywhere}.template-card p{margin:0;white-space:pre-line;overflow-wrap:anywhere}.template-card>small{color:var(--muted-text,#666)}.template-type-badge{width:max-content;padding:3px 8px;border-radius:999px;background:rgba(245,211,83,.24);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.template-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px}.template-card-actions form{margin:0}.template-delete{background:transparent;border-color:#c43c3c;color:#b42323}.templates-empty{padding:48px 24px;text-align:center}.templates-empty span{font-size:2rem}.templates-empty h2{margin:10px 0 6px}
@media(max-width:900px){.templates-layout{grid-template-columns:1fr}.template-form-card{position:static}.template-grid{grid-template-columns:1fr}}
@media(max-width:640px){.templates-heading{display:grid}.templates-heading .button{width:100%;box-sizing:border-box;text-align:center}.template-form-card,.template-card{border-radius:16px}.template-card-actions>*{flex:1}.template-card-actions .button{width:100%}}
html[data-theme="dark"] .template-form-card,html[data-theme="dark"] .template-card,html[data-theme="dark"] .templates-empty,html[data-theme="dark"] .template-filters a{background:#202226;border-color:#3a3d43}html[data-theme="dark"] .template-filters a.is-active{background:#f5d353;color:#1b1b1b}html[data-theme="dark"] .template-type-badge{background:rgba(245,211,83,.16);color:#f6dc72}
/* =========================================================
CORRECTIF V55.1 — HEADER RESPONSIVE ET NAVIGATION COMPLÈTE
========================================================= */
.site-header-inner {
padding-top: 10px;
padding-bottom: 10px;
}
.brand {
flex: 0 0 auto;
}
.header-actions {
min-width: 0;
flex: 1 1 auto;
justify-content: flex-end;
flex-wrap: wrap;
}
.header-actions .inline-form {
flex: 0 0 auto;
}
@media (max-width: 1180px) {
.site-header-inner {
width: min(100% - 24px, 1180px);
gap: 12px;
}
.header-actions {
gap: 7px;
}
.header-actions .hello {
display: none;
}
.header-actions .button {
min-height: 40px;
padding-inline: 13px;
font-size: .88rem;
}
}
@media (max-width: 940px) {
.site-header-inner {
align-items: center;
flex-wrap: wrap;
}
.header-actions {
flex: 1 1 100%;
justify-content: flex-start;
padding-top: 8px;
border-top: 1px solid rgba(24, 32, 42, .08);
}
.header-actions .inline-form {
margin-left: auto;
}
}
@media (max-width: 620px) {
.site-header-inner {
min-height: 68px;
padding-top: 8px;
padding-bottom: 8px;
flex-wrap: nowrap;
}
.header-actions {
flex: 0 1 auto;
flex-wrap: nowrap;
justify-content: flex-end;
padding-top: 0;
border-top: 0;
}
.header-actions .inline-form {
margin-left: 0;
}
.header-actions .button-dark {
min-height: 38px;
padding-inline: 11px;
font-size: .8rem;
}
}
@media (max-width: 390px) {
.brand {
gap: 8px;
font-size: 1.05rem;
}
.brand-pin {
transform: scale(.86);
transform-origin: center;
}
.header-actions {
gap: 5px;
}
.theme-toggle,
.pwa-install-icon {
flex-basis: 34px;
width: 34px;
height: 34px;
}
.header-actions .button-dark {
padding-inline: 9px;
font-size: .75rem;
}
}
:root[data-theme="dark"] .header-actions {
border-top-color: rgba(255, 255, 255, .09);
}
/* Historique des versions des notes */
.note-history-panel {
margin: 0 0 1rem;
padding: 1rem;
border: 1px solid var(--border-color, #dfe3e8);
border-radius: 14px;
background: var(--surface-soft, rgba(255, 255, 255, 0.55));
}
.note-history-heading,
.note-history-meta,
.note-history-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.note-history-heading p,
.note-history-item p {
margin: .25rem 0 0;
}
.note-history-content {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color, #dfe3e8);
}
.note-history-list {
display: grid;
gap: .75rem;
}
.note-history-item {
align-items: flex-start;
padding: .85rem;
border-radius: 12px;
background: var(--surface, #fff);
}
.note-history-item-main {
min-width: 0;
}
.note-history-meta {
justify-content: flex-start;
flex-wrap: wrap;
gap: .4rem .75rem;
}
.note-history-meta span,
.note-history-status {
font-size: .85rem;
opacity: .72;
}
.note-history-item p {
overflow-wrap: anywhere;
white-space: pre-line;
}
.note-history-status[data-state="error"] {
color: #a32323;
}
.note-history-status[data-state="success"] {
color: #237a3b;
}
@media (max-width: 680px) {
.note-history-heading,
.note-history-item {
align-items: stretch;
flex-direction: column;
}
.note-history-heading .button,
.note-history-restore {
width: 100%;
}
}
/* =========================================================
HISTORIQUE DES VERSIONS DE NOTES
========================================================= */
.note-edit-save-bar {
gap: 0.65rem;
justify-content: flex-end;
}
.note-history-status {
margin-bottom: 1rem;
color: var(--text-soft, #667085);
}
.note-history-list {
display: grid;
gap: 0.9rem;
max-height: min(60vh, 620px);
overflow-y: auto;
padding-right: 0.25rem;
}
.note-history-item {
border: 1px solid var(--border-color, rgba(15, 23, 42, 0.12));
border-radius: 16px;
padding: 1rem;
background: var(--surface, #fff);
}
.note-history-item-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.note-history-item-heading > div {
display: grid;
gap: 0.15rem;
}
.note-history-item-heading span {
color: var(--text-soft, #667085);
font-size: 0.82rem;
}
.note-history-item p {
margin: 0.8rem 0;
line-height: 1.5;
}
.note-history-item details {
border-top: 1px solid var(--border-color, rgba(15, 23, 42, 0.1));
padding-top: 0.75rem;
}
.note-history-item summary {
cursor: pointer;
font-weight: 700;
}
.note-history-item pre {
margin: 0.75rem 0 0;
max-height: 250px;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
font: inherit;
line-height: 1.55;
background: rgba(15, 23, 42, 0.045);
border-radius: 12px;
padding: 0.85rem;
}
@media (max-width: 620px) {
.note-history-item-heading {
align-items: stretch;
flex-direction: column;
}
.note-history-item-heading .button {
width: 100%;
}
}
/* Mode focus et raccourcis de l’éditeur */
.note-editor-shortcuts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:10px;color:#747d88;font-size:.78rem}.note-editor-shortcuts span{display:inline-flex;align-items:center;gap:4px}.note-editor-shortcuts button{padding:0;border:0;background:none;color:#28313d;font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}kbd{display:inline-grid;place-items:center;min-width:25px;min-height:23px;padding:2px 6px;border:1px solid #d5d9de;border-bottom-width:2px;border-radius:6px;background:#fff;color:#3d4651;font:700 .72rem/1 Inter,ui-sans-serif,system-ui,sans-serif;box-shadow:0 1px 0 rgba(24,32,42,.05)}.shortcuts-card{max-width:620px}.shortcuts-list{display:grid;gap:0;margin:0;padding:0 4px}.shortcuts-list>div{display:grid;grid-template-columns:minmax(155px,.75fr) 1fr;align-items:center;gap:20px;padding:17px 0;border-bottom:1px solid #eceff1}.shortcuts-list>div:last-child{border-bottom:0}.shortcuts-list dt,.shortcuts-list dd{margin:0}.shortcuts-list dt{display:flex;align-items:center;gap:5px}.shortcuts-list dd{color:#66717d;line-height:1.45}.note-modal.is-focus-mode,.note-focus-active{overflow:hidden}.note-modal.is-focus-mode{padding:0}.note-modal.is-focus-mode .modal-backdrop{background:#f7f6f1}.note-modal.is-focus-mode .modal-card{width:100%;max-width:none;height:100vh;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none;overflow:auto}.note-modal.is-focus-mode .modal-header{position:sticky;top:0;z-index:4;background:rgba(255,255,255,.94);backdrop-filter:blur(14px)}.note-modal.is-focus-mode .note-form{width:min(900px,calc(100% - 36px));margin:0 auto;padding-bottom:70px}.note-modal.is-focus-mode .note-editor-field{margin-top:25px}.note-modal.is-focus-mode #note-text{min-height:52vh;font-size:1.08rem;line-height:1.75}.note-modal.is-focus-mode .attachment-editor,.note-modal.is-focus-mode .note-tags-editor,.note-modal.is-focus-mode .note-share-editor,.note-modal.is-focus-mode .deadline-editor{opacity:.45;transition:opacity .18s ease}.note-modal.is-focus-mode .attachment-editor:hover,.note-modal.is-focus-mode .note-tags-editor:hover,.note-modal.is-focus-mode .note-share-editor:hover,.note-modal.is-focus-mode .deadline-editor:hover,.note-modal.is-focus-mode .attachment-editor:focus-within,.note-modal.is-focus-mode .note-tags-editor:focus-within,.note-modal.is-focus-mode .note-share-editor:focus-within,.note-modal.is-focus-mode .deadline-editor:focus-within{opacity:1}@media(max-width:700px){.note-editor-shortcuts{display:none}.note-focus-toggle{display:none}.shortcuts-list>div{grid-template-columns:1fr;gap:8px}.note-modal.is-focus-mode .note-form{width:min(100% - 24px,900px)}}
/* Liens entre notes */
.note-relations-card { width: min(720px, calc(100vw - 32px)); }
.note-relations-list { display: grid; gap: 8px; max-height: min(52vh, 520px); overflow: auto; padding: 4px; }
.note-relation-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border-color, #dfe3e8); border-radius: 12px; cursor: pointer; }
.note-relation-row:hover { background: rgba(127, 127, 127, .07); }
.note-relation-row input { width: 18px; height: 18px; }
.note-relation-row span { min-width: 0; display: grid; gap: 3px; }
.note-relation-row strong, .note-relation-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-relation-row small { opacity: .72; }
.note-relation-row a { text-decoration: none; font-size: 1.1rem; }
.empty-state-compact { text-align: center; opacity: .7; padding: 24px 12px; }
/* Étape 34 — quota et suivi du stockage */
.sidebar-storage {
margin-top: 1rem;
padding: .9rem;
border: 1px solid var(--border-color, rgba(127, 127, 127, .18));
border-radius: 14px;
background: var(--surface-soft, rgba(127, 127, 127, .06));
}
.sidebar-storage-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
margin-bottom: .55rem;
font-size: .83rem;
}
.sidebar-storage-heading span {
font-weight: 700;
}
.sidebar-storage-heading strong {
font-size: .78rem;
font-variant-numeric: tabular-nums;
}
.sidebar-storage-track {
overflow: hidden;
height: 7px;
border-radius: 999px;
background: rgba(127, 127, 127, .18);
}
.sidebar-storage-track > span {
display: block;
width: var(--storage-progress, 0%);
height: 100%;
border-radius: inherit;
background: currentColor;
transition: width .25s ease;
}
.sidebar-storage p {
margin: .55rem 0 .15rem;
font-size: .77rem;
line-height: 1.35;
}
.sidebar-storage small {
display: block;
opacity: .72;
font-size: .68rem;
line-height: 1.35;
}
/* Administration — santé du système */
.health-global-pill{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 14px;border:1px solid currentColor;border-radius:999px;font-size:.84rem;font-weight:800;white-space:nowrap}
.health-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}
.health-summary{display:flex;align-items:center;justify-content:space-between;min-height:92px;padding:20px;border:1px solid var(--border-color,rgba(128,128,128,.2));border-radius:18px;background:var(--card-bg,rgba(255,255,255,.04))}
.health-summary span{font-weight:700;opacity:.78}.health-summary strong{font-size:2rem;line-height:1}.health-ok{color:#209765}.health-warn{color:#b47608}.health-error{color:#c84747}
.health-panel{overflow:hidden}.health-check-list{display:grid}.health-check{display:grid;grid-template-columns:38px minmax(0,1fr);gap:13px;align-items:center;padding:16px 20px;border-top:1px solid var(--border-color,rgba(128,128,128,.16))}.health-check:first-child{border-top:0}
.health-check-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid currentColor;border-radius:50%;font-weight:900}.health-check strong{color:var(--text-color,inherit)}.health-check p{margin:4px 0 0;color:var(--muted-color,#777);line-height:1.45;overflow-wrap:anywhere}.health-footnote{margin:15px 2px 0;color:var(--muted-color,#777);font-size:.86rem}
@media(max-width:760px){.health-summary-grid{grid-template-columns:1fr}.health-summary{min-height:72px}.health-global-pill{white-space:normal;text-align:center}}
/* ==========================================================================
NOTE-BLOC — MODULE LISTES V3 (refonte structurelle)
========================================================================== */
.shopping-page-v3{--sl-yellow:#f7c83f;--sl-yellow-dark:#d99b06;--sl-ink:#111c29;--sl-muted:#6e7785;--sl-border:#e8decd;--sl-cream:#fffaf1;--sl-panel:#fffdfa;--sl-danger:#d84439;max-width:1500px;margin:0 auto;padding:20px 18px 70px;color:var(--sl-ink)}
.shopping-page-v3 *{box-sizing:border-box}
.shopping-page-v3 .shopping-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 34px;margin-bottom:24px;border:1px solid #26313b;border-radius:26px;background:linear-gradient(120deg,#111d2a 0%,#18222d 62%,#27291f 100%);color:#fff;box-shadow:0 18px 46px rgba(17,28,41,.13)}
.shopping-hero-copy{display:flex;align-items:center;gap:20px}.shopping-hero-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:rgba(247,200,63,.16);font-size:30px}.shopping-page-v3 .shopping-hero h1{margin:3px 0 4px;color:#fff;font-size:clamp(30px,4vw,46px);line-height:1}.shopping-page-v3 .shopping-hero p{margin:0;color:#d9e0e7}.shopping-page-v3 .eyebrow{color:#ffd252!important;font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.shopping-back-link{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:#fff;color:#172230!important;font-weight:800;text-decoration:none;white-space:nowrap}
.shopping-app-shell{display:grid;grid-template-columns:minmax(270px,330px) minmax(0,1fr);gap:24px;align-items:start}.shopping-page-v3 .shopping-sidebar,.shopping-page-v3 .shopping-editor{border:1px solid var(--sl-border);border-radius:26px;background:var(--sl-panel);box-shadow:0 15px 40px rgba(60,49,29,.07)}.shopping-page-v3 .shopping-sidebar{position:sticky;top:20px;padding:24px}.shopping-sidebar-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.shopping-sidebar-heading h2{margin:2px 0 0;font-size:25px}.shopping-sidebar-kicker{font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:#9b721e}.shopping-list-total{display:grid;place-items:center;min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:#fff0bb;color:#8c6200;font-weight:900}
.shopping-new-list{padding:16px;border:1px solid #f0e3c9;border-radius:19px;background:#fff9ea}.shopping-new-list label,.shopping-list-tags-form>label{display:block;margin-bottom:8px;font-weight:850}.shopping-create-row{display:grid;grid-template-columns:1fr 48px;gap:8px}.shopping-create-row input{min-width:0;height:48px;padding:0 14px;border:1px solid #ded4c4;border-radius:13px;background:#fff;font-size:15px}.shopping-create-button{border:0;border-radius:13px;background:linear-gradient(135deg,#ffd85b,#efb820);color:#1a1a16;font-size:28px;font-weight:700;cursor:pointer;box-shadow:0 8px 18px rgba(225,163,0,.18)}
.shopping-filter-block{margin:22px 0 14px}.shopping-filter-title{display:block;margin-bottom:9px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:#8c8170}.shopping-tag-filters{display:flex;flex-wrap:wrap;gap:7px}.shopping-tag-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border:1px solid #e4dacb;border-radius:999px;background:#fff;color:#595449!important;font-size:12px;text-decoration:none}.shopping-tag-chip b{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#f2ede5}.shopping-tag-chip.is-active{border-color:#efb81f;background:#fff4cc;color:#765000!important}
.shopping-list-nav{display:grid;gap:10px}.shopping-list-card{display:flex;gap:12px;padding:14px;border:1px solid transparent;border-radius:18px;color:inherit!important;text-decoration:none;transition:.2s ease}.shopping-list-card:hover{transform:translateY(-1px);background:#fffaf0}.shopping-list-card.is-active{border-color:#f2c642;background:linear-gradient(135deg,#fff8dc,#fff3cc);box-shadow:0 9px 22px rgba(210,156,14,.10)}.shopping-list-card-icon{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:14px;background:#fff0b5;font-size:20px}.shopping-list-card-content{min-width:0;flex:1}.shopping-list-card-top{display:flex;gap:8px;justify-content:space-between}.shopping-list-card-top strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shopping-list-card-top b{color:#a27000}.shopping-list-card-meta{display:block;margin-top:3px;color:#776f63;font-size:12px}.shopping-list-mini-progress{display:block;height:5px;margin-top:9px;overflow:hidden;border-radius:999px;background:#ece5d9}.shopping-list-mini-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#efb815,#ffd65b)}.shopping-nav-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}.shopping-nav-tags em{padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.8);font-size:10px;font-style:normal;color:#796a4d}.shopping-sidebar-tip{display:flex;gap:12px;margin-top:22px;padding:15px;border-radius:18px;background:linear-gradient(135deg,#f6f1ff,#fff)}.shopping-sidebar-tip>span{font-size:23px}.shopping-sidebar-tip strong{font-size:14px}.shopping-sidebar-tip p{margin:3px 0 0;color:#706a7c;font-size:12px;line-height:1.45}
.shopping-page-v3 .shopping-editor{padding:28px}.shopping-editor-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.shopping-active-heading{min-width:0;flex:1}.shopping-active-badge{display:block;margin-bottom:7px;color:#9a7116;font-size:11px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.shopping-title-input{display:block;width:100%;padding:0!important;border:0!important;background:transparent!important;color:var(--sl-ink)!important;font-size:clamp(28px,4vw,42px)!important;font-weight:900!important;line-height:1.1!important;box-shadow:none!important}.shopping-autosave-hint{display:block;margin-top:7px;color:#9299a2;font-size:12px}.shopping-delete-list{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;border:1px solid #f3c5c0;border-radius:13px;background:#fff5f3;color:var(--sl-danger);font-weight:800;cursor:pointer}
.shopping-list-tags-form{margin-bottom:22px}.shopping-tags-input-row{display:flex;align-items:center;gap:9px;min-height:52px;padding:6px 7px 6px 14px;border:1px solid #ded7cc;border-radius:15px;background:#fff}.shopping-tag-input-icon{font-size:17px}.shopping-tags-input-row input{min-width:0;flex:1;border:0!important;background:transparent!important;box-shadow:none!important}.shopping-tags-input-row button{height:39px;padding:0 15px;border:0;border-radius:11px;background:#f4f0e9;color:#342f28;font-weight:800;cursor:pointer}.shopping-list-tags-form small{display:block;margin-top:7px;color:#7c7d81}
.shopping-progress-panel{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) 90px;align-items:center;gap:24px;margin-bottom:22px;padding:23px 25px;overflow:hidden;border:1px solid #f0dfba;border-radius:22px;background:linear-gradient(125deg,#fff9e9,#fffdf8);box-shadow:inset 0 1px 0 #fff}.shopping-progress-ring{--p:calc(var(--progress)*1%);display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:conic-gradient(#f4bf2f var(--p),#f1eadc 0);position:relative}.shopping-progress-ring:before{content:"";position:absolute;inset:9px;border-radius:50%;background:#fffdf7}.shopping-progress-ring span{position:relative;font-size:19px;font-weight:900}.shopping-progress-copy>div:first-child{display:flex;align-items:baseline;gap:8px}.shopping-progress-copy strong{font-size:24px}.shopping-progress-copy span{color:#666d75}.shopping-progress-track{height:10px;margin:13px 0 8px;overflow:hidden;border-radius:999px;background:#eee9df}.shopping-progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#efb815,#ffd866)}.shopping-progress-copy p{margin:0;color:#b47400;font-weight:800}.shopping-progress-illustration{font-size:54px;opacity:.22;text-align:center}
.shopping-add-panel{margin-bottom:28px;border:1px solid #e8e0d6;border-radius:22px;background:#fff;overflow:hidden}.shopping-add-item{display:block;padding:17px}.shopping-add-main label,.shopping-add-details label{display:block;margin:0 0 6px;color:#77736c;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.shopping-add-main input{width:100%;height:54px;padding:0 16px;border:1px solid #ddd6cc;border-radius:14px;font-size:17px}.shopping-add-details{display:grid;grid-template-columns:minmax(140px,170px) minmax(180px,1fr) minmax(150px,170px);gap:10px;margin-top:10px;align-items:end}.shopping-add-details input,.shopping-add-details select{width:100%;height:50px;padding:0 13px;border:1px solid #ddd6cc;border-radius:13px;background:#fff}.shopping-add-details>button{width:100%;height:50px;border:0;border-radius:13px;background:linear-gradient(135deg,#ffd75a,#f1b91e);color:#191810;font-size:16px;font-weight:900;cursor:pointer}.shopping-add-details>button span{font-size:21px;margin-right:4px}.shopping-smart-suggestions{padding:17px;border-top:1px solid #ece6dc;background:#fcfaf6}.shopping-suggestions-heading{display:flex;align-items:center;gap:9px;margin-bottom:13px}.shopping-suggestions-heading>span{font-size:20px}.shopping-suggestions-heading strong,.shopping-suggestions-heading small{display:block}.shopping-suggestions-heading small{margin-top:2px;color:#818181}.shopping-suggestion-chips{display:flex;flex-wrap:wrap;gap:8px}.shopping-suggestion-chip{padding:9px 12px;border:1px solid #ded8ce;border-radius:999px;background:#fff;color:#2e333a;font-weight:650;cursor:pointer}.shopping-bulk-add{border-top:1px solid #ece6dc}.shopping-bulk-add summary{display:flex;justify-content:space-between;padding:17px;cursor:pointer;font-weight:800}.shopping-bulk-add form{padding:0 17px 17px}.shopping-bulk-add textarea{width:100%;padding:13px;border:1px solid #ddd6cc;border-radius:13px}
.shopping-items-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.shopping-items-toolbar h2{display:inline;margin:0 9px 0 0;font-size:23px}.shopping-items-toolbar>div span{color:#7a8189}.shopping-items-toolbar form{display:flex;align-items:center;gap:8px}.shopping-items-toolbar label{font-size:12px;font-weight:800}.shopping-items-toolbar select{height:40px;padding:0 34px 0 12px;border:1px solid #ddd5c8;border-radius:12px;background:#fff}.shopping-items{display:grid;gap:9px}.shopping-section-heading{display:flex;align-items:center;gap:9px;margin:15px 0 2px;padding:0 4px;color:#5d6269}.shopping-section-heading span{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#fff1bc}.shopping-item{display:grid;grid-template-columns:42px 48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px;border:1px solid #e7e0d7;border-radius:17px;background:#fff;box-shadow:0 5px 14px rgba(37,31,21,.035);transition:.18s ease}.shopping-item:hover{border-color:#e3c873;box-shadow:0 8px 20px rgba(37,31,21,.07)}.shopping-check{display:grid;place-items:center;width:36px;height:36px;border:2px solid #d6cdbd;border-radius:12px;background:#fff;color:#fff;font-weight:900;cursor:pointer}.shopping-item-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#fff6d9;font-size:21px}.shopping-item-fields{min-width:0}.shopping-item-label{width:100%;padding:2px 0!important;border:0!important;background:transparent!important;color:#1e2834!important;font-size:16px!important;font-weight:800!important;box-shadow:none!important}.shopping-item-meta-fields{display:flex;gap:8px;margin-top:5px}.shopping-item-quantity,.shopping-item-section{height:30px!important;padding:0 8px!important;border:1px solid #eee7dd!important;border-radius:8px!important;background:#faf8f4!important;color:#72767c!important;font-size:12px!important;box-shadow:none!important}.shopping-item-quantity{width:110px}.shopping-item-section{max-width:180px}.shopping-item-actions{display:flex;gap:4px}.shopping-item-actions button{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:9px;background:#f5f2ec;color:#67645e;cursor:pointer}.shopping-item-actions .shopping-item-delete{color:#c94a42;background:#fff1ef}.shopping-item.is-completed{opacity:.62;background:#f7f7f5}.shopping-item.is-completed .shopping-check{border-color:#52a66a;background:#52a66a}.shopping-item.is-completed .shopping-item-label{text-decoration:line-through}.shopping-items-empty{padding:45px 20px;border:1px dashed #ded5c8;border-radius:18px;text-align:center;color:#777}.shopping-items-empty span{display:block;font-size:40px}.shopping-items-empty strong{display:block;margin-top:8px;color:#303741}.shopping-items-empty p{margin:4px 0 0}.shopping-footer-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.shopping-footer-actions button{padding:10px 13px;border:1px solid #ded8cd;border-radius:11px;background:#fff;color:#585751;font-weight:750;cursor:pointer}.shopping-footer-actions button:last-child{color:#c5443c}.shopping-empty{padding:90px 24px;text-align:center}.shopping-empty>span{font-size:55px}.shopping-empty h2{margin:14px 0 6px}
@media(max-width:980px){.shopping-app-shell{grid-template-columns:1fr}.shopping-page-v3 .shopping-sidebar{position:static}.shopping-list-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.shopping-sidebar-tip{display:none}}
@media(max-width:700px){.shopping-page-v3{padding:10px 10px 55px}.shopping-page-v3 .shopping-hero{padding:20px;border-radius:20px}.shopping-hero-icon{display:none}.shopping-back-link{min-height:40px;padding:0 12px;font-size:13px}.shopping-page-v3 .shopping-sidebar,.shopping-page-v3 .shopping-editor{padding:16px;border-radius:20px}.shopping-list-nav{grid-template-columns:1fr}.shopping-editor-heading{align-items:center}.shopping-delete-list span{display:none}.shopping-title-input{font-size:29px!important}.shopping-progress-panel{grid-template-columns:72px minmax(0,1fr);gap:15px;padding:17px}.shopping-progress-ring{width:68px;height:68px}.shopping-progress-illustration{display:none}.shopping-add-details{grid-template-columns:1fr 1fr}.shopping-add-details>button{grid-column:1/-1}.shopping-item{grid-template-columns:38px 1fr auto}.shopping-item-icon{display:none}.shopping-item-fields{grid-column:2}.shopping-item-actions{grid-column:3;grid-row:1}.shopping-item-actions button[data-move-item]{display:none}.shopping-item-meta-fields{flex-wrap:wrap}.shopping-items-toolbar{align-items:flex-start;flex-direction:column}.shopping-items-toolbar form{width:100%}.shopping-items-toolbar select{flex:1}.shopping-tags-input-row{flex-wrap:wrap}.shopping-tags-input-row input{flex-basis:70%}}
@media(max-width:430px){.shopping-page-v3 .shopping-hero{align-items:flex-start;flex-direction:column}.shopping-back-link{width:100%}.shopping-add-details{grid-template-columns:1fr}.shopping-add-details>button{grid-column:auto}.shopping-progress-copy>div:first-child{display:block}.shopping-progress-copy strong,.shopping-progress-copy span{display:block}.shopping-list-card{padding:12px}.shopping-page-v3 .shopping-editor{padding:13px}}
html[data-theme="dark"] .shopping-page-v3{--sl-ink:#f4f0e8;--sl-muted:#aaa;--sl-border:#373b40;--sl-panel:#20252b;--sl-cream:#252a30}html[data-theme="dark"] .shopping-page-v3 .shopping-sidebar,html[data-theme="dark"] .shopping-page-v3 .shopping-editor,html[data-theme="dark"] .shopping-add-panel,html[data-theme="dark"] .shopping-item,html[data-theme="dark"] .shopping-tags-input-row{background:#20252b;border-color:#3a4047}html[data-theme="dark"] .shopping-new-list,html[data-theme="dark"] .shopping-progress-panel{background:#282a25;border-color:#4b4533}html[data-theme="dark"] .shopping-create-row input,html[data-theme="dark"] .shopping-add-main input,html[data-theme="dark"] .shopping-add-details input,html[data-theme="dark"] .shopping-add-details select,html[data-theme="dark"] .shopping-items-toolbar select,html[data-theme="dark"] .shopping-tags-input-row input{background:#171b20!important;color:#eee!important;border-color:#454b52!important}html[data-theme="dark"] .shopping-item-label{color:#f1eee8!important}html[data-theme="dark"] .shopping-smart-suggestions{background:#1d2227}html[data-theme="dark"] .shopping-suggestion-chip,html[data-theme="dark"] .shopping-footer-actions button{background:#292f35;color:#eee;border-color:#444a50}
/* =========================================================
Notes : listes de courses intégrées + création favori/épingle
========================================================= */
.notes-shopping-widget {
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid rgba(37, 40, 44, .12);
}
.notes-shopping-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.notes-shopping-heading h3 { margin: 2px 0 0; font-size: 1rem; }
.notes-shopping-heading > a {
display: grid;
width: 34px;
height: 34px;
place-items: center;
border: 1px solid rgba(37, 40, 44, .14);
border-radius: 11px;
text-decoration: none;
background: rgba(255,255,255,.7);
}
.notes-shopping-lists { display: grid; gap: 9px; }
.notes-shopping-list {
overflow: hidden;
border: 1px solid rgba(37, 40, 44, .12);
border-radius: 15px;
background: rgba(255,255,255,.58);
}
.notes-shopping-list > summary {
display: grid;
grid-template-columns: 30px minmax(0,1fr) auto;
align-items: center;
gap: 9px;
padding: 11px;
cursor: pointer;
list-style: none;
}
.notes-shopping-list > summary::-webkit-details-marker { display: none; }
.notes-shopping-icon {
display: grid;
width: 30px;
height: 30px;
place-items: center;
border-radius: 10px;
background: rgba(242,196,56,.22);
font-weight: 900;
}
.notes-shopping-summary-copy { min-width: 0; }
.notes-shopping-summary-copy strong,
.notes-shopping-summary-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-shopping-summary-copy strong { font-size: .88rem; }
.notes-shopping-summary-copy small { margin-top: 2px; color: var(--muted, #717171); font-size: .72rem; }
.notes-shopping-summary-copy i {
display: block;
height: 4px;
margin-top: 7px;
overflow: hidden;
border-radius: 99px;
background: rgba(37,40,44,.09);
}
.notes-shopping-summary-copy i b { display: block; height: 100%; border-radius: inherit; background: #f2c438; transition: width .25s ease; }
.notes-shopping-percent { font-size: .72rem; font-weight: 800; }
.notes-shopping-items { display: grid; gap: 6px; padding: 0 9px 8px; }
.notes-shopping-item {
display: grid;
grid-template-columns: 27px minmax(0,1fr) 26px;
align-items: center;
gap: 7px;
padding: 7px;
border-radius: 10px;
background: rgba(255,255,255,.82);
transition: opacity .2s ease, box-shadow .2s ease;
}
.notes-shopping-item.is-completed { opacity: .58; }
.notes-shopping-item.is-completed [data-quick-label] { text-decoration: line-through; }
.notes-shopping-item.is-saving { box-shadow: inset 0 0 0 1px #f2c438; }
.notes-shopping-item.is-saved { box-shadow: inset 0 0 0 1px #55b99d; }
.notes-shopping-item > button {
width: 26px;
height: 26px;
padding: 0;
border: 1px solid rgba(37,40,44,.16);
border-radius: 8px;
background: transparent;
cursor: pointer;
}
.notes-shopping-item > div { min-width: 0; }
.notes-shopping-item input {
width: 100%;
min-width: 0;
padding: 2px 3px;
border: 0;
outline: 0;
background: transparent;
font: inherit;
}
.notes-shopping-item [data-quick-label] { font-size: .8rem; font-weight: 700; }
.notes-shopping-item [data-quick-quantity] { color: var(--muted, #717171); font-size: .7rem; }
.notes-shopping-add { display: grid; grid-template-columns: 1fr 34px; gap: 7px; padding: 0 9px 9px; }
.notes-shopping-add input { min-width: 0; padding: 9px 10px; border: 1px solid rgba(37,40,44,.14); border-radius: 10px; background: rgba(255,255,255,.82); }
.notes-shopping-add button { border: 0; border-radius: 10px; background: #f2c438; font-size: 1.1rem; font-weight: 900; cursor: pointer; }
.notes-shopping-open { display: block; padding: 8px 10px 10px; color: inherit; font-size: .72rem; font-weight: 800; text-align: center; }
.note-create-flags {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 0;
padding: 0;
border: 0;
}
.note-create-flags legend { margin-bottom: 8px; font-weight: 800; }
.note-create-flag {
position: relative;
display: grid;
grid-template-columns: 34px 1fr;
align-items: center;
gap: 10px;
min-width: 0;
padding: 13px;
border: 1px solid rgba(37,40,44,.14);
border-radius: 15px;
cursor: pointer;
background: rgba(255,255,255,.62);
}
.note-create-flag input { position: absolute; opacity: 0; pointer-events: none; }
.note-create-flag > span:first-of-type { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: rgba(37,40,44,.07); font-size: 1.1rem; }
.note-create-flag strong, .note-create-flag small { display: block; }
.note-create-flag small { margin-top: 2px; color: var(--muted, #717171); }
.note-create-flag:has(input:checked) { border-color: #d8aa16; background: rgba(242,196,56,.14); box-shadow: inset 0 0 0 1px rgba(242,196,56,.35); }
.note-create-flag:has(input:checked) > span:first-of-type { background: #f2c438; color: #171717; }
.shopping-editor { scroll-margin-top: 18px; }
.shopping-editor:focus { outline: none; }
@media (max-width: 700px) {
.note-create-flags { grid-template-columns: 1fr; }
.notes-shopping-widget { margin-top: 16px; }
}
/* =========================================================
NOTE-BLOC V4 — TABLEAU DE BORD DE L'ESPACE NOTES
========================================================= */
.workspace-overview {
width: min(1480px, calc(100% - 32px));
margin: 22px auto 24px;
padding: 24px;
border: 1px solid rgba(37, 40, 44, .10);
border-radius: 28px;
background:
radial-gradient(circle at 82% 14%, rgba(245, 211, 83, .30), transparent 28%),
linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(250, 247, 238, .92));
box-shadow: 0 20px 52px rgba(37, 40, 44, .08);
}
.workspace-overview-main {
display: grid;
grid-template-columns: minmax(260px, 1fr) minmax(520px, auto);
align-items: end;
gap: 24px;
}
.workspace-overview-copy h1 {
margin: 4px 0 8px;
font-size: clamp(1.75rem, 3vw, 2.65rem);
line-height: 1.05;
letter-spacing: -.045em;
}
.workspace-overview-copy > p:last-child {
max-width: 650px;
margin: 0;
color: var(--muted, #696d73);
line-height: 1.55;
}
.workspace-quick-actions {
display: grid;
grid-template-columns: repeat(3, minmax(150px, 1fr));
gap: 10px;
}
.workspace-action {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
align-items: center;
gap: 10px;
min-height: 68px;
padding: 11px 13px;
border: 1px solid rgba(37, 40, 44, .11);
border-radius: 17px;
background: rgba(255, 255, 255, .78);
color: inherit;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.workspace-action:hover {
transform: translateY(-2px);
border-color: rgba(197, 146, 0, .46);
box-shadow: 0 10px 24px rgba(37, 40, 44, .08);
}
.workspace-action > span:first-child {
display: grid;
width: 42px;
height: 42px;
place-items: center;
border-radius: 13px;
background: rgba(37, 40, 44, .07);
font-size: 1.25rem;
font-weight: 900;
}
.workspace-action strong,
.workspace-action small { display: block; }
.workspace-action strong { font-size: .88rem; }
.workspace-action small {
margin-top: 2px;
color: var(--muted, #717171);
font-size: .7rem;
}
.workspace-action-primary {
border-color: rgba(206, 158, 15, .46);
background: linear-gradient(145deg, #f8d75a, #f2c438);
}
.workspace-action-primary > span:first-child {
background: rgba(255, 255, 255, .52);
}
.workspace-action-primary small { color: rgba(23, 23, 23, .67); }
.workspace-overview-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
margin-top: 20px;
}
.workspace-stat {
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
padding: 13px 14px;
border: 1px solid rgba(37, 40, 44, .08);
border-radius: 16px;
background: rgba(255, 255, 255, .58);
color: inherit;
text-decoration: none;
transition: background .18s ease, transform .18s ease;
}
.workspace-stat:hover { transform: translateY(-2px); background: rgba(255,255,255,.94); }
.workspace-stat-icon {
display: grid;
flex: 0 0 auto;
width: 35px;
height: 35px;
place-items: center;
border-radius: 11px;
background: rgba(245, 211, 83, .23);
font-weight: 900;
}
.workspace-stat strong,
.workspace-stat small { display: block; }
.workspace-stat strong { font-size: 1.04rem; line-height: 1; }
.workspace-stat small {
margin-top: 4px;
overflow: hidden;
color: var(--muted, #717171);
font-size: .7rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.workspace-current-list {
display: grid;
grid-template-columns: 46px minmax(180px, 1fr) minmax(170px, 34%) auto 30px;
align-items: center;
gap: 14px;
margin-top: 12px;
padding: 12px 14px;
border: 1px solid rgba(218, 174, 43, .25);
border-radius: 17px;
background: rgba(255, 249, 224, .74);
color: inherit;
text-decoration: none;
}
.workspace-current-list-icon {
display: grid;
width: 46px;
height: 46px;
place-items: center;
border-radius: 14px;
background: rgba(245, 211, 83, .28);
font-size: 1.3rem;
}
.workspace-current-list-copy small,
.workspace-current-list-copy strong,
.workspace-current-list-copy span { display: block; }
.workspace-current-list-copy small {
color: #9b7410;
font-size: .64rem;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.workspace-current-list-copy strong { margin-top: 2px; font-size: .9rem; }
.workspace-current-list-copy span { margin-top: 3px; color: var(--muted, #717171); font-size: .72rem; }
.workspace-current-list-progress {
height: 8px;
overflow: hidden;
border-radius: 999px;
background: rgba(37, 40, 44, .09);
}
.workspace-current-list-progress i {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #f2c438, #e7ab18);
}
.workspace-current-list > b { font-size: .82rem; }
.workspace-current-list-arrow { font-size: 1.2rem; font-weight: 900; }
html[data-theme="dark"] .workspace-overview {
border-color: rgba(255,255,255,.08);
background:
radial-gradient(circle at 82% 14%, rgba(245, 211, 83, .16), transparent 28%),
linear-gradient(145deg, rgba(30, 34, 39, .98), rgba(22, 25, 29, .96));
}
html[data-theme="dark"] .workspace-action,
html[data-theme="dark"] .workspace-stat { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .workspace-action-primary { background: linear-gradient(145deg, #f8d75a, #eabb29); color: #171717; }
html[data-theme="dark"] .workspace-current-list { background: rgba(245, 211, 83, .08); border-color: rgba(245,211,83,.18); }
@media (max-width: 1100px) {
.workspace-overview-main { grid-template-columns: 1fr; align-items: stretch; }
.workspace-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.workspace-overview {
width: calc(100% - 20px);
margin: 12px auto 18px;
padding: 18px;
border-radius: 22px;
}
.workspace-quick-actions { grid-template-columns: 1fr; }
.workspace-action { min-height: 60px; }
.workspace-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.workspace-current-list {
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: 10px;
}
.workspace-current-list-progress { grid-column: 1 / -1; grid-row: 2; }
.workspace-current-list > b { grid-column: 3; grid-row: 1; }
.workspace-current-list-arrow { display: none; }
}
@media (max-width: 430px) {
.workspace-overview-grid { grid-template-columns: 1fr 1fr; }
.workspace-stat { padding: 11px; }
.workspace-stat-icon { width: 32px; height: 32px; }
}
/* =========================================================
NOTE-BLOC V4 — ÉTAPE 2 : CARTES DE NOTES PREMIUM
========================================================= */
.notes-grid {
grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
gap: 18px;
}
.note-card,
.note-card:nth-child(3n+2),
.note-card:nth-child(3n) {
min-height: 280px;
padding: 18px;
overflow: visible;
border: 1px solid color-mix(in srgb, var(--note-color) 52%, #69706c 18%);
border-radius: 22px;
background:
linear-gradient(145deg, rgba(255,255,255,.70), rgba(255,255,255,.24)),
var(--note-color);
box-shadow:
0 1px 1px rgba(35, 42, 39, .04),
0 12px 30px rgba(35, 42, 39, .09);
transform: none;
cursor: default;
isolation: isolate;
}
.note-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(125deg, rgba(255,255,255,.46), transparent 44%);
}
.note-card::after {
display: none !important;
}
.note-card:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--note-color) 45%, #526b5b 35%);
box-shadow:
0 2px 3px rgba(35, 42, 39, .04),
0 20px 44px rgba(35, 42, 39, .14);
}
.note-card.is-dragging {
opacity: .55;
transform: scale(.985);
}
.note-pin {
display: none;
}
.note-card-header {
align-items: flex-start;
min-height: 38px;
margin-bottom: 14px;
padding-right: 42px;
}
.note-card-labels {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.note-card-kind-icon {
display: inline-grid;
width: 34px;
height: 34px;
place-items: center;
flex: 0 0 auto;
border: 1px solid rgba(37, 50, 43, .10);
border-radius: 11px;
background: rgba(255,255,255,.58);
color: #385847;
font-size: .95rem;
font-weight: 900;
box-shadow: 0 5px 14px rgba(45, 59, 51, .07);
}
.note-category {
min-height: 30px;
display: inline-flex;
align-items: center;
padding: 5px 10px;
border: 1px solid rgba(38, 50, 43, .08);
border-radius: 999px;
background: rgba(255,255,255,.50);
color: #44554c;
font-size: .72rem;
font-weight: 850;
letter-spacing: .015em;
}
.note-audio-badge {
min-height: 30px;
border-radius: 999px;
}
.note-quick-actions {
position: absolute;
top: 0;
right: 46px;
gap: 5px;
opacity: .82;
transition: opacity .18s ease, transform .18s ease;
}
.note-card:hover .note-quick-actions,
.note-card:focus-within .note-quick-actions {
opacity: 1;
}
.note-flag-button,
.note-menu-button {
display: inline-grid;
width: 34px;
height: 34px;
place-items: center;
border: 1px solid rgba(39, 50, 43, .10);
border-radius: 11px;
background: rgba(255,255,255,.58);
color: #69736d;
box-shadow: none;
transition: transform .16s ease, background .16s ease, color .16s ease;
}
.note-flag-button:hover,
.note-menu-button:hover {
transform: translateY(-1px);
background: rgba(255,255,255,.9);
}
.note-favorite-button.is-active {
color: #a76b00;
background: rgba(255, 238, 171, .9);
}
.note-pin-button.is-active {
color: #315f48;
background: rgba(204, 235, 216, .9);
}
.note-menu-button {
position: absolute;
top: 0;
right: 0;
margin: 0;
font-size: .92rem;
letter-spacing: .08em;
}
.note-menu {
top: 42px;
right: 0;
width: min(245px, calc(100vw - 44px));
overflow: hidden;
padding: 7px;
border: 1px solid rgba(44, 55, 49, .12);
border-radius: 16px;
background: rgba(255,255,255,.97);
box-shadow: 0 20px 48px rgba(25, 34, 29, .20);
backdrop-filter: blur(12px);
}
.note-menu button,
.note-menu a {
min-height: 38px;
padding: 9px 11px;
border-radius: 10px;
}
.note-text {
min-height: 92px;
margin: 0 0 14px;
color: #2d3732;
font-size: .98rem;
line-height: 1.62;
}
.note-tags {
gap: 6px;
margin: 12px 0;
}
.note-tag {
padding: 5px 9px;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,.45);
color: #506158;
font-size: .7rem;
}
.note-attachments,
.note-audios,
.note-deadline,
.note-share-inside {
border-radius: 14px;
}
.note-date-meta {
display: none;
}
.note-card-footer {
justify-content: space-between;
margin-top: auto;
padding-top: 13px;
border-top: 1px solid rgba(53, 66, 59, .10);
color: rgba(54, 65, 59, .65);
font-size: .69rem;
font-weight: 700;
}
.note-card-footer-date {
white-space: nowrap;
}
.note-card-drag-label {
display: inline-flex;
align-items: center;
gap: 5px;
cursor: grab;
}
.note-card[data-note-pinned="1"] {
border-color: rgba(66, 117, 87, .30);
box-shadow:
0 1px 1px rgba(35, 42, 39, .04),
0 17px 38px rgba(49, 94, 67, .14);
}
.note-card[data-note-pinned="1"]::before {
background:
linear-gradient(125deg, rgba(255,255,255,.52), transparent 44%),
linear-gradient(90deg, rgba(68, 126, 91, .12), transparent 36%);
}
:root[data-theme="dark"] .note-card,
:root[data-theme="dark"] .note-card:nth-child(3n+2),
:root[data-theme="dark"] .note-card:nth-child(3n) {
border-color: rgba(255,255,255,.10);
background:
linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
color-mix(in srgb, var(--note-color) 28%, #17201c 72%);
box-shadow: 0 14px 34px rgba(0,0,0,.24);
}
:root[data-theme="dark"] .note-card:hover {
border-color: rgba(255,255,255,.18);
box-shadow: 0 22px 46px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .note-card-kind-icon,
:root[data-theme="dark"] .note-category,
:root[data-theme="dark"] .note-flag-button,
:root[data-theme="dark"] .note-menu-button,
:root[data-theme="dark"] .note-tag {
border-color: rgba(255,255,255,.08);
background: rgba(255,255,255,.07);
color: rgba(255,255,255,.78);
}
:root[data-theme="dark"] .note-text {
color: rgba(255,255,255,.88);
}
:root[data-theme="dark"] .note-menu {
border-color: rgba(255,255,255,.10);
background: rgba(26, 32, 29, .97);
}
:root[data-theme="dark"] .note-card-footer {
border-top-color: rgba(255,255,255,.08);
color: rgba(255,255,255,.50);
}
@media (max-width: 760px) {
.notes-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.note-card,
.note-card:nth-child(3n+2),
.note-card:nth-child(3n) {
min-height: 235px;
padding: 15px;
border-radius: 18px;
}
.note-card-header {
padding-right: 38px;
}
.note-quick-actions {
position: static;
margin-left: auto;
opacity: 1;
}
.note-card-header {
padding-right: 0;
}
.note-menu-button {
position: static;
}
.note-menu {
top: 40px;
}
.note-card-kind-icon,
.note-flag-button,
.note-menu-button {
width: 32px;
height: 32px;
border-radius: 10px;
}
.note-card-footer-date {
overflow: hidden;
max-width: 62%;
text-overflow: ellipsis;
}
}
/* =========================================================
NOTE-BLOC V4 — ÉTAPE 3 : ÉDITEUR PREMIUM
========================================================= */
#note-modal .note-editor-modal-card {
width: min(1120px, calc(100vw - 32px));
max-height: min(920px, calc(100vh - 32px));
padding: 0;
overflow: hidden;
border-radius: 28px;
}
#note-modal .note-editor-modal-card > .modal-header {
padding: 24px 28px 20px;
border-bottom: 1px solid var(--border-color, rgba(20, 28, 40, .1));
background: color-mix(in srgb, var(--surface, #fff) 94%, #f2b84b 6%);
}
#note-modal .note-editor-modal-card > .modal-header h2 {
font-size: clamp(1.35rem, 2vw, 1.8rem);
letter-spacing: -.035em;
}
#note-modal #note-form {
overflow-y: auto;
padding: 0 28px 28px;
scrollbar-gutter: stable;
}
#note-modal .note-editor-statusbar {
position: sticky;
top: 0;
z-index: 12;
display: flex;
align-items: center;
gap: 9px;
min-height: 46px;
margin: 0 -28px 22px;
padding: 0 28px;
border-bottom: 1px solid var(--border-color, rgba(20, 28, 40, .08));
background: color-mix(in srgb, var(--surface, #fff) 94%, transparent);
backdrop-filter: blur(16px);
}
#note-modal .note-editor-status-icon {
width: 9px;
height: 9px;
flex: 0 0 auto;
border-radius: 50%;
background: #35a76f;
box-shadow: 0 0 0 4px rgba(53, 167, 111, .12);
}
#note-modal .note-editor-status-separator {
width: 1px;
height: 16px;
margin-left: auto;
background: var(--border-color, rgba(20, 28, 40, .12));
}
#note-modal .note-editor-live-state {
font-size: .76rem;
font-weight: 700;
color: var(--muted-text, #707780);
}
#note-modal .autosave-status {
font-size: .8rem;
font-weight: 650;
}
#note-modal .note-edit-save-bar {
position: sticky;
top: 46px;
z-index: 11;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: -22px -28px 22px;
padding: 12px 28px;
border-bottom: 1px solid var(--border-color, rgba(20, 28, 40, .08));
background: color-mix(in srgb, var(--surface, #fff) 96%, transparent);
backdrop-filter: blur(16px);
}
#note-modal .note-edit-save-bar[hidden] { display: none !important; }
#note-modal .note-edit-save-bar #save-note-top { margin-left: auto; }
#note-modal .note-editor-field {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
#note-modal .note-editor-heading {
margin-bottom: 12px;
}
#note-modal .note-editor-heading > label {
font-size: .78rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted-text, #6e7480);
}
#note-modal .note-writing-surface {
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--border-color, #dfe2e6) 80%, #f2b84b 20%);
border-radius: 22px;
background: var(--surface, #fff);
box-shadow: 0 18px 45px rgba(30, 36, 48, .07);
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#note-modal .note-writing-surface:focus-within {
border-color: color-mix(in srgb, #f0ad31 70%, var(--border-color, #dfe2e6));
box-shadow: 0 0 0 4px rgba(240, 173, 49, .12), 0 22px 55px rgba(30, 36, 48, .1);
}
#note-modal #note-text {
display: block;
width: 100%;
min-height: 330px;
max-height: 58vh;
padding: 26px 28px 18px;
resize: vertical;
border: 0;
border-radius: 0;
outline: 0;
background: transparent;
font-family: inherit;
font-size: 1.06rem;
line-height: 1.75;
box-shadow: none;
}
#note-modal #note-text::placeholder { color: color-mix(in srgb, var(--muted-text, #777) 58%, transparent); }
#note-modal .note-writing-metrics {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
padding: 11px 20px;
border-top: 1px solid var(--border-color, rgba(20, 28, 40, .08));
background: color-mix(in srgb, var(--surface-subtle, #f8f8f8) 84%, transparent);
font-size: .73rem;
color: var(--muted-text, #777);
}
#note-modal .note-writing-metrics strong {
color: var(--text-color, #242830);
font-weight: 800;
}
#note-modal .note-editor-shortcuts {
margin-top: 10px;
padding: 0 4px;
}
#note-modal .note-editor-panel {
margin-top: 18px;
padding: 20px;
border: 1px solid var(--border-color, rgba(20, 28, 40, .09));
border-radius: 20px;
background: color-mix(in srgb, var(--surface, #fff) 96%, #f2b84b 4%);
box-shadow: 0 10px 28px rgba(30, 36, 48, .04);
}
#note-modal .note-tags-editor > label,
#note-modal .note-editor-panel legend {
font-weight: 800;
color: var(--text-color, #242830);
}
#note-modal .note-create-flags {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
#note-modal .note-create-flags legend {
grid-column: 1 / -1;
margin-bottom: 3px;
}
#note-modal .note-create-flag {
min-height: 82px;
padding: 14px;
border: 1px solid var(--border-color, rgba(20, 28, 40, .1));
border-radius: 16px;
background: var(--surface, #fff);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#note-modal .note-create-flag:hover {
transform: translateY(-1px);
border-color: rgba(240, 173, 49, .5);
box-shadow: 0 10px 24px rgba(30, 36, 48, .07);
}
#note-modal .note-create-flag:has(input:checked) {
border-color: #e8a62d;
background: rgba(242, 184, 75, .1);
box-shadow: 0 0 0 3px rgba(242, 184, 75, .12);
}
#note-modal .note-form-grid {
align-items: start;
}
#note-modal .note-standard-actions {
position: sticky;
bottom: -28px;
z-index: 10;
margin: 22px -28px -28px;
padding: 16px 28px;
border-top: 1px solid var(--border-color, rgba(20, 28, 40, .09));
background: color-mix(in srgb, var(--surface, #fff) 94%, transparent);
backdrop-filter: blur(16px);
box-shadow: 0 -14px 35px rgba(30, 36, 48, .06);
}
#note-modal.is-focus-mode .note-editor-modal-card {
width: min(960px, calc(100vw - 32px));
}
#note-modal.is-focus-mode .note-editor-statusbar,
#note-modal.is-focus-mode .note-edit-save-bar {
top: 0;
}
#note-modal.is-focus-mode #note-text {
min-height: 58vh;
font-size: 1.12rem;
}
@media (max-width: 720px) {
#note-modal .note-editor-modal-card {
width: 100vw;
max-width: none;
max-height: 100dvh;
height: 100dvh;
border-radius: 0;
}
#note-modal .note-editor-modal-card > .modal-header {
padding: 18px 18px 14px;
}
#note-modal #note-form { padding: 0 16px 22px; }
#note-modal .note-editor-statusbar {
margin-inline: -16px;
padding-inline: 16px;
}
#note-modal .note-edit-save-bar {
margin-inline: -16px;
padding-inline: 16px;
overflow-x: auto;
flex-wrap: nowrap;
}
#note-modal .note-edit-save-bar .button { flex: 0 0 auto; }
#note-modal .note-edit-save-bar #save-note-top { margin-left: 0; }
#note-modal #note-text {
min-height: 40vh;
padding: 21px 18px 14px;
font-size: 1rem;
}
#note-modal .note-writing-metrics {
gap: 6px 12px;
padding-inline: 16px;
}
#note-modal .note-writing-metrics span:last-child { width: 100%; }
#note-modal .note-editor-panel {
padding: 16px;
border-radius: 17px;
}
#note-modal .note-create-flags { grid-template-columns: 1fr; }
#note-modal .note-standard-actions {
bottom: -22px;
margin: 18px -16px -22px;
padding: 13px 16px calc(13px + env(safe-area-inset-bottom));
}
}
/* =========================================================
NOTE-BLOC V4 — VERSION MOBILE DASHBOARD
========================================================= */
.mobile-bottom-navigation { display: none; }
@media (max-width: 700px) {
body { padding-bottom: 82px; }
/* Le tableau de bord devient le véritable en-tête mobile. */
.workspace-overview {
width: calc(100% - 24px);
margin: 12px auto 16px;
padding: 16px;
border-radius: 22px;
box-shadow: 0 12px 30px rgba(35, 42, 39, .08);
}
.workspace-overview-main {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.workspace-overview-copy p:not(.eyebrow) { display: none; }
.workspace-overview-copy .eyebrow { margin-bottom: 5px; font-size: .67rem; }
.workspace-overview-copy h1 {
margin: 0;
font-size: clamp(1.45rem, 7vw, 2rem);
line-height: 1.08;
}
.workspace-quick-actions {
display: flex;
flex: 0 0 auto;
gap: 8px;
}
.workspace-action {
display: grid;
width: 46px;
min-width: 46px;
min-height: 46px;
padding: 0;
place-items: center;
border-radius: 14px;
}
.workspace-action > span:first-child { font-size: 1.25rem; }
.workspace-action > span:last-child { display: none; }
.workspace-action:nth-child(3) { display: none; }
.workspace-overview-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.workspace-stat {
min-height: 132px;
padding: 14px;
align-content: space-between;
border-radius: 17px;
}
.workspace-stat-icon { width: 37px; height: 37px; margin-bottom: 12px; }
.workspace-stat strong { font-size: 1.45rem; }
.workspace-stat small { display: block; margin-top: 3px; font-size: .72rem; }
.workspace-current-list {
grid-column: 1 / -1;
min-height: 96px;
margin-top: 10px;
padding: 13px;
border-radius: 17px;
}
/* La grande colonne de catégories devient un panneau secondaire. */
.notes-dashboard { display: block; width: 100%; }
.notes-sidebar {
position: fixed;
inset: auto 8px 74px;
z-index: 150;
max-height: min(72vh, 620px);
overflow: auto;
padding: 18px;
border: 1px solid rgba(40, 48, 44, .12);
border-radius: 22px;
background: rgba(255,255,255,.98);
box-shadow: 0 24px 60px rgba(20, 27, 23, .24);
transform: translateY(calc(100% + 100px));
visibility: hidden;
transition: transform .24s ease, visibility .24s ease;
}
.notes-sidebar.is-mobile-open {
transform: translateY(0);
visibility: visible;
}
.notes-main { width: 100%; padding: 0 12px; }
.notes-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 12px;
margin: 0 0 14px;
padding: 4px 2px 0;
}
.notes-toolbar h1 { font-size: clamp(1.65rem, 8vw, 2.25rem); }
.notes-toolbar > div:first-child > p:last-child { font-size: .82rem; }
.toolbar-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.toolbar-actions .notes-search,
.toolbar-actions .notes-sort,
.toolbar-actions > .button:not([data-open-modal]) { display: none; }
.toolbar-actions [data-open-modal="note-modal"] {
width: 46px;
min-width: 46px;
height: 46px;
padding: 0;
overflow: hidden;
border-radius: 14px;
font-size: 0;
}
.toolbar-actions [data-open-modal="note-modal"]::before {
content: "+";
font-size: 1.35rem;
font-weight: 900;
}
/* Recherche et tri restent accessibles mais sous le titre. */
.notes-controls,
.notes-view-toolbar {
width: 100%;
margin-bottom: 14px;
}
/* Deux cartes par ligne comme sur la maquette mobile. */
.notes-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.note-card,
.note-card:nth-child(3n+2),
.note-card:nth-child(3n) {
min-height: 225px;
padding: 12px;
border-radius: 17px;
}
.note-card-header { min-height: 32px; margin-bottom: 9px; }
.note-card-kind-icon { display: none; }
.note-category { min-height: 25px; padding: 4px 7px; font-size: .62rem; }
.note-quick-actions { gap: 2px; }
.note-flag-button,
.note-menu-button { width: 32px; height: 32px; }
.note-text {
min-height: 92px;
max-height: 112px;
margin-bottom: 9px;
overflow: hidden;
font-size: .84rem;
line-height: 1.48;
}
.note-tags { margin: 7px 0; }
.note-tag { padding: 4px 7px; font-size: .61rem; }
.note-attachments,
.note-audios,
.note-deadline,
.note-share-inside { font-size: .67rem; }
.note-card-footer { padding-top: 9px; font-size: .61rem; }
.note-card-drag-label { display: none; }
.note-card-footer-date { max-width: 100%; }
/* Navigation principale mobile persistante. */
.mobile-bottom-navigation {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 160;
display: grid;
grid-template-columns: repeat(5, 1fr);
min-height: 70px;
padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
border-top: 1px solid rgba(31, 40, 35, .10);
background: rgba(255,255,255,.96);
box-shadow: 0 -10px 30px rgba(27, 34, 30, .08);
backdrop-filter: blur(18px);
}
.mobile-bottom-navigation a,
.mobile-bottom-navigation button {
display: grid;
place-items: center;
align-content: center;
gap: 3px;
padding: 3px;
border: 0;
background: transparent;
color: #6c7470;
text-decoration: none;
font: inherit;
}
.mobile-bottom-navigation span { font-size: 1.28rem; line-height: 1; }
.mobile-bottom-navigation small { font-size: .64rem; font-weight: 800; }
.mobile-bottom-navigation .is-active { color: #d89b00; }
/* Éditeur : une vraie feuille plein écran sur téléphone. */
#note-modal .note-editor-modal-card {
width: 100vw;
height: 100dvh;
max-height: none;
margin: 0;
border: 0;
border-radius: 0;
}
#note-modal .note-editor-modal-card > .modal-header {
position: sticky;
top: 0;
z-index: 8;
padding: 15px 16px 12px;
}
#note-modal #note-form { padding: 13px 13px 105px; }
#note-modal .note-editor-primary-actions {
position: sticky;
top: 70px;
z-index: 7;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
padding: 8px 0;
background: var(--surface, #fff);
}
#note-modal .note-editor-primary-actions .button { min-width: 0; padding-inline: 8px; font-size: .75rem; }
#note-modal #note-text { min-height: 43dvh; font-size: 1rem; line-height: 1.6; }
}
@media (max-width: 380px) {
.workspace-overview-grid { gap: 8px; }
.workspace-stat { min-height: 120px; padding: 11px; }
.notes-grid { gap: 8px; }
.note-card,
.note-card:nth-child(3n+2),
.note-card:nth-child(3n) { padding: 10px; }
}
@media (max-width: 330px) {
.notes-grid { grid-template-columns: 1fr; }
}
:root[data-theme="dark"] .notes-sidebar,
:root[data-theme="dark"] .mobile-bottom-navigation {
border-color: rgba(255,255,255,.08);
background: rgba(25,30,28,.97);
color: #f4f6f5;
}
/* =========================================================
NOTE-BLOC V4 — DASHBOARD UNIQUEMENT SUR ORDINATEUR
Le tableau de bord reste visible sur les écrans larges et
disparaît sur tablette/mobile pour libérer l'espace vertical.
========================================================= */
@media (max-width: 900px) {
.workspace-overview {
display: none !important;
}
}
/* =========================================================
CORRECTIF MOBILE — DÉFILEMENT DE L'ÉDITEUR DE NOTE
Version 2026-07-25
========================================================= */
@media (max-width: 900px) {
/* Le dialog reste fixé à la fenêtre et ne tente pas de défiler lui-même. */
#note-modal.app-modal {
position: fixed;
inset: 0;
width: 100%;
height: 100dvh;
max-height: 100dvh;
margin: 0;
overflow: hidden;
overscroll-behavior: contain;
}
/* La carte devient une colonne occupant exactement la hauteur disponible. */
#note-modal .note-editor-modal-card {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100dvh;
min-height: 0;
max-height: 100dvh;
margin: 0;
overflow: hidden;
border-radius: 0;
}
#note-modal .note-editor-modal-card > .modal-header {
position: relative;
top: auto;
z-index: 20;
flex: 0 0 auto;
margin: 0;
}
/* C'est le formulaire qui défile, du haut jusqu'aux boutons finaux. */
#note-modal #note-form {
display: block;
flex: 1 1 auto;
min-height: 0;
height: auto;
max-height: none;
padding: 0 13px calc(110px + env(safe-area-inset-bottom));
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
touch-action: pan-y;
scrollbar-gutter: auto;
}
#note-modal .note-editor-statusbar {
top: 0;
}
#note-modal .note-edit-save-bar,
#note-modal .note-editor-primary-actions {
top: 46px;
}
/* Le champ ne monopolise plus toute la hauteur du téléphone. */
#note-modal #note-text {
min-height: 36dvh;
max-height: none;
resize: vertical;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Les actions finales restent dans le flux : on peut vraiment les atteindre. */
#note-modal .note-standard-actions {
position: relative;
bottom: auto;
margin: 18px -13px 0;
padding: 14px 13px calc(14px + env(safe-area-inset-bottom));
}
}
@supports not (height: 100dvh) {
@media (max-width: 900px) {
#note-modal.app-modal,
#note-modal .note-editor-modal-card {
height: 100vh;
max-height: 100vh;
}
}
}
/* =========================================================
CORRECTIF MOBILE — LISIBILITÉ DES NOTES EN MODE SOMBRE
Version 2026-07-25.2
========================================================= */
@media (max-width: 900px) {
:root[data-theme="dark"] .notes-grid .note-card,
:root[data-theme="dark"] .notes-grid .note-card:nth-child(3n+2),
:root[data-theme="dark"] .notes-grid .note-card:nth-child(3n) {
background: #202832 !important;
border-color: #3b4854 !important;
color: #f7f9fa !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, .28) !important;
}
:root[data-theme="dark"] .notes-grid .note-card[data-note-pinned="1"],
:root[data-theme="dark"] .notes-grid .note-card.is-pinned,
:root[data-theme="dark"] .notes-grid .note-card.is-favorite {
background: linear-gradient(155deg, #302b19 0%, #202832 72%) !important;
border-color: rgba(244, 197, 66, .58) !important;
}
:root[data-theme="dark"] .notes-grid .note-text,
:root[data-theme="dark"] .notes-grid .note-text *,
:root[data-theme="dark"] .notes-grid .note-card-title,
:root[data-theme="dark"] .notes-grid .note-card h2,
:root[data-theme="dark"] .notes-grid .note-card h3,
:root[data-theme="dark"] .notes-grid .note-card p,
:root[data-theme="dark"] .notes-grid .note-card li,
:root[data-theme="dark"] .notes-grid .note-card a:not(.note-tag) {
color: #f7f9fa !important;
opacity: 1 !important;
-webkit-text-fill-color: #f7f9fa !important;
}
:root[data-theme="dark"] .notes-grid .note-text {
background: transparent !important;
text-shadow: none !important;
}
:root[data-theme="dark"] .notes-grid .note-card-footer,
:root[data-theme="dark"] .notes-grid .note-card-footer-date,
:root[data-theme="dark"] .notes-grid .note-card-meta,
:root[data-theme="dark"] .notes-grid .note-attachments,
:root[data-theme="dark"] .notes-grid .note-audios,
:root[data-theme="dark"] .notes-grid .note-deadline,
:root[data-theme="dark"] .notes-grid .note-share-inside {
color: #b9c3cc !important;
opacity: 1 !important;
}
:root[data-theme="dark"] .notes-grid .note-card-footer {
border-top-color: #394550 !important;
}
}
/* =========================================================
CORRECTIF MOBILE V2 — CARTES SOMBRES + STABILITÉ DU SCROLL
Version 2026-07-25.3
========================================================= */
@media (max-width: 900px) {
html,
body {
overflow-anchor: none;
}
#notes-grid,
.notes-grid,
.note-card,
.note-content {
overflow-anchor: none;
}
:root[data-theme="dark"] .notes-grid .note-card,
:root[data-theme="dark"] .notes-grid .note-card:nth-child(3n+2),
:root[data-theme="dark"] .notes-grid .note-card:nth-child(3n) {
background: #25313c !important;
border: 1px solid #42515e !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, .34) !important;
}
:root[data-theme="dark"] .notes-grid .note-card[data-note-pinned="1"],
:root[data-theme="dark"] .notes-grid .note-card.is-pinned,
:root[data-theme="dark"] .notes-grid .note-card.is-favorite {
background: #2d332f !important;
border-color: rgba(244, 197, 66, .62) !important;
}
/* La classe réellement utilisée par le HTML est .note-content. */
:root[data-theme="dark"] .notes-grid .note-content {
display: block !important;
position: relative !important;
min-height: 74px;
margin: 4px 0 10px !important;
padding: 11px 12px !important;
border: 1px solid #394957 !important;
border-radius: 12px !important;
background: #182129 !important;
color: #f8fafc !important;
opacity: 1 !important;
text-shadow: none !important;
-webkit-text-fill-color: #f8fafc !important;
}
:root[data-theme="dark"] .notes-grid .note-content,
:root[data-theme="dark"] .notes-grid .note-content *,
:root[data-theme="dark"] .notes-grid .note-content p,
:root[data-theme="dark"] .notes-grid .note-content li,
:root[data-theme="dark"] .notes-grid .note-content strong,
:root[data-theme="dark"] .notes-grid .note-content em,
:root[data-theme="dark"] .notes-grid .note-content span,
:root[data-theme="dark"] .notes-grid .note-content a {
color: #f8fafc !important;
opacity: 1 !important;
-webkit-text-fill-color: #f8fafc !important;
}
:root[data-theme="dark"] .notes-grid .note-content.is-collapsible::after {
background: linear-gradient(
to bottom,
rgba(24, 33, 41, 0),
#182129 88%
) !important;
}
:root[data-theme="dark"] .notes-grid .note-expand-button {
border-color: #465867 !important;
background: #202b35 !important;
color: #eef3f6 !important;
}
:root[data-theme="dark"] .notes-grid .note-card-footer {
border-top-color: #40505d !important;
}
}
/* =========================================================
CORRECTIF FINAL — DASHBOARD PREMIUM HORIZONTAL + ÉDITEUR SOMBRE MOBILE
Version 2026-07-25.4
========================================================= */
@media (min-width: 901px) {
.workspace-overview {
display: grid;
grid-template-columns: minmax(0, 1fr) 420px;
grid-template-areas:
"main main"
"stats recent";
align-items: start;
gap: 14px 18px;
width: min(1180px, calc(100% - 36px));
margin: 22px auto 28px;
padding: 24px 24px 22px;
border: 1px solid rgba(37, 40, 44, .10);
border-radius: 28px;
background:
radial-gradient(circle at 84% 18%, rgba(245, 211, 83, .26), transparent 26%),
linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(250, 247, 238, .92));
box-shadow: 0 18px 46px rgba(37, 40, 44, .07);
}
.workspace-overview-main {
grid-area: main;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(540px, 640px);
align-items: center;
gap: 22px;
}
.workspace-overview-copy h1 {
margin: 0 0 8px;
font-size: clamp(2rem, 2.8vw, 2.85rem);
line-height: 1.03;
letter-spacing: -.05em;
}
.workspace-overview-copy > p:last-child {
max-width: 560px;
margin: 0;
color: #5f6976;
font-size: 1.02rem;
line-height: 1.55;
}
.workspace-quick-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.workspace-action {
min-height: 64px;
padding: 10px 12px;
border-radius: 18px;
background: rgba(255, 255, 255, .84);
box-shadow: 0 8px 20px rgba(37, 40, 44, .03);
}
.workspace-action > span:first-child {
width: 40px;
height: 40px;
border-radius: 12px;
font-size: 1.1rem;
}
.workspace-action strong {
font-size: .86rem;
line-height: 1.2;
}
.workspace-action small {
font-size: .68rem;
line-height: 1.25;
}
.workspace-overview-grid {
grid-area: stats;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-top: 2px;
}
.workspace-stat {
min-height: 88px;
padding: 14px 15px;
border-radius: 17px;
background: rgba(255, 255, 255, .72);
}
.workspace-stat-icon {
width: 36px;
height: 36px;
border-radius: 11px;
}
.workspace-stat strong {
font-size: 1.15rem;
line-height: 1;
}
.workspace-stat small {
margin-top: 4px;
font-size: .72rem;
}
.workspace-current-list {
grid-area: recent;
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto auto;
grid-template-areas:
"icon copy percent arrow"
"icon progress progress arrow";
align-items: center;
gap: 8px 12px;
min-height: 88px;
margin-top: 2px;
padding: 14px 16px;
border-radius: 18px;
background: rgba(255, 249, 224, .82);
}
.workspace-current-list-icon { grid-area: icon; }
.workspace-current-list-copy { grid-area: copy; min-width: 0; }
.workspace-current-list-progress { grid-area: progress; }
.workspace-current-list > b { grid-area: percent; font-size: .86rem; }
.workspace-current-list-arrow { grid-area: arrow; align-self: center; }
.workspace-current-list-copy small {
font-size: .68rem;
letter-spacing: .12em;
}
.workspace-current-list-copy strong {
font-size: .96rem;
}
.workspace-current-list-copy span {
font-size: .73rem;
}
.notes-toolbar h1 {
font-size: clamp(2.35rem, 3.5vw, 3.5rem);
line-height: .98;
}
}
@media (min-width: 901px) and (max-width: 1120px) {
.workspace-overview {
grid-template-columns: 1fr;
grid-template-areas:
"main"
"stats"
"recent";
}
.workspace-overview-main {
grid-template-columns: 1fr;
align-items: start;
}
.workspace-current-list {
max-width: none;
}
}
@media (max-width: 900px) {
:root[data-theme="dark"] #note-modal .note-editor-heading > label,
:root[data-theme="dark"] #note-modal .note-form label > span,
:root[data-theme="dark"] #note-modal .color-fieldset legend,
:root[data-theme="dark"] #note-modal .note-tags-editor > label,
:root[data-theme="dark"] #note-modal .note-editor-panel legend {
color: #e8edf2 !important;
}
:root[data-theme="dark"] #note-modal .note-writing-surface {
border-color: #36414c !important;
background: #151b21 !important;
box-shadow: none !important;
}
:root[data-theme="dark"] #note-modal .note-writing-surface:focus-within {
border-color: #dcae2d !important;
box-shadow: 0 0 0 3px rgba(244, 197, 66, .14) !important;
}
:root[data-theme="dark"] #note-modal #note-text,
:root[data-theme="dark"] #note-modal textarea,
:root[data-theme="dark"] #note-modal input,
:root[data-theme="dark"] #note-modal select {
background: #151b21 !important;
color: #f6f8fa !important;
-webkit-text-fill-color: #f6f8fa !important;
caret-color: #f4c542 !important;
}
:root[data-theme="dark"] #note-modal #note-text::placeholder,
:root[data-theme="dark"] #note-modal textarea::placeholder,
:root[data-theme="dark"] #note-modal input::placeholder {
color: #8f99a3 !important;
opacity: 1 !important;
-webkit-text-fill-color: #8f99a3 !important;
}
:root[data-theme="dark"] #note-modal .note-writing-metrics {
border-top-color: #303943 !important;
background: #1a2129 !important;
color: #bcc5cd !important;
}
:root[data-theme="dark"] #note-modal .note-writing-metrics strong {
color: #f4f7f9 !important;
}
:root[data-theme="dark"] #note-modal .note-editor-panel,
:root[data-theme="dark"] #note-modal .attachment-item,
:root[data-theme="dark"] #note-modal .note-attachment-item,
:root[data-theme="dark"] #note-modal details {
background: #1a2129 !important;
border-color: #36414c !important;
}
}
/* =========================================================
CORRECTIF FINAL BIS — DASHBOARD DESKTOP RENDU PREMIUM + SCROLL PC
Version 2026-07-25.5
========================================================= */
@media (min-width: 901px) {
.workspace-overview {
display: block !important;
width: 100%;
margin: 4px 0 26px;
padding: 26px 22px 18px;
border: 1px solid #e6dfd2;
border-radius: 26px;
background: linear-gradient(180deg, #fffefb 0%, #fcf8ef 100%);
box-shadow: 0 16px 38px rgba(32, 28, 18, .05);
}
.workspace-dashboard-heading {
margin-bottom: 14px;
}
.workspace-dashboard-heading .eyebrow {
margin: 0 0 6px;
color: #5d6671;
}
.workspace-dashboard-heading h2 {
margin: 0;
color: #17202a;
font-size: 1.2rem;
letter-spacing: -.03em;
}
.workspace-dashboard-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(250px, 1.25fr);
gap: 18px;
align-items: stretch;
}
.workspace-dashboard-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 178px;
padding: 20px 20px 18px;
border: 1px solid #e7e2d7;
border-radius: 22px;
background: #fffdfa;
color: #1a2430;
text-decoration: none;
box-shadow: 0 10px 24px rgba(27, 32, 39, .03);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.workspace-dashboard-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(27, 32, 39, .06);
}
.workspace-dashboard-card-notes { background: linear-gradient(180deg, #fffdf1 0%, #fffaf0 100%); }
.workspace-dashboard-card-pinned { background: linear-gradient(180deg, #fbf8ff 0%, #f7f2ff 100%); }
.workspace-dashboard-card-favorites { background: linear-gradient(180deg, #fff9fb 0%, #fff3f7 100%); }
.workspace-dashboard-card-lists { background: linear-gradient(180deg, #f7fcf8 0%, #eef8f1 100%); }
.workspace-dashboard-card-shares { background: linear-gradient(180deg, #f7fbff 0%, #eef5fd 100%); }
.workspace-dashboard-card-current-list { background: linear-gradient(180deg, #fffdf7 0%, #fdf8ed 100%); }
.workspace-dashboard-icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-bottom: auto;
border-radius: 14px;
background: rgba(243, 193, 48, .16);
font-size: 1.35rem;
line-height: 1;
}
.workspace-dashboard-card strong {
display: block;
margin-top: 22px;
font-size: 2.05rem;
line-height: 1;
letter-spacing: -.05em;
color: #111923;
}
.workspace-dashboard-card h3 {
margin: 10px 0 0;
font-size: 1.03rem;
line-height: 1.25;
letter-spacing: -.02em;
color: #1b2430;
}
.workspace-dashboard-card p {
margin: 8px 0 0;
color: #5f6976;
font-size: .96rem;
line-height: 1.4;
}
.workspace-dashboard-card-current-list {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
grid-template-rows: auto auto 1fr auto;
gap: 10px 18px;
align-items: center;
min-height: 178px;
padding: 20px 22px 18px;
}
.workspace-dashboard-list-copy {
grid-column: 1 / -1;
}
.workspace-dashboard-list-copy small {
display: block;
margin-bottom: 6px;
color: #6a6962;
font-size: .88rem;
font-weight: 600;
}
.workspace-dashboard-list-copy h3 {
margin: 0;
font-size: 1.08rem;
}
.workspace-dashboard-list-progress-wrap {
position: relative;
display: grid;
place-items: center;
width: 78px;
height: 78px;
}
.workspace-dashboard-ring {
width: 78px;
height: 78px;
border-radius: 50%;
background: conic-gradient(#f1bf35 0 var(--list-progress), #ebe5d8 var(--list-progress) 100%);
position: relative;
}
.workspace-dashboard-ring::after {
content: "";
position: absolute;
inset: 8px;
border-radius: 50%;
background: #fffdfa;
}
.workspace-dashboard-list-progress-text {
position: absolute;
font-size: 1rem;
font-weight: 800;
color: #8a6500;
z-index: 1;
}
.workspace-dashboard-list-meta strong {
margin: 0;
font-size: 1.8rem;
}
.workspace-dashboard-list-meta p {
margin-top: 4px;
font-size: .95rem;
}
.workspace-dashboard-list-action {
grid-column: 2;
justify-self: start;
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 16px;
border: 1px solid #ddd7c9;
border-radius: 12px;
background: #f7f4ec;
color: #293240;
font-size: .92rem;
font-weight: 700;
}
.notes-toolbar {
align-items: flex-start;
margin-bottom: 24px;
}
.notes-toolbar h1 {
font-size: clamp(2rem, 3vw, 3rem) !important;
line-height: 1.02;
}
.notes-toolbar > div:first-child > p:last-child {
margin-top: 8px;
font-size: 1rem;
}
#note-modal #note-form {
max-height: calc(88vh - 88px);
overflow-y: auto;
}
#note-modal #note-text {
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-color: #b9b1a4 #f5f1e7;
}
#note-modal #note-form::-webkit-scrollbar,
#note-modal #note-text::-webkit-scrollbar {
width: 10px;
}
#note-modal #note-form::-webkit-scrollbar-track,
#note-modal #note-text::-webkit-scrollbar-track {
background: #f5f1e7;
border-radius: 999px;
}
#note-modal #note-form::-webkit-scrollbar-thumb,
#note-modal #note-text::-webkit-scrollbar-thumb {
background: #b9b1a4;
border-radius: 999px;
border: 2px solid #f5f1e7;
}
html[data-theme="dark"] .workspace-overview {
border-color: rgba(255,255,255,.08);
background: linear-gradient(180deg, #1e2329 0%, #171b20 100%);
}
html[data-theme="dark"] .workspace-dashboard-heading h2,
html[data-theme="dark"] .workspace-dashboard-card h3,
html[data-theme="dark"] .workspace-dashboard-card strong,
html[data-theme="dark"] .workspace-dashboard-list-copy h3,
html[data-theme="dark"] .workspace-dashboard-list-meta strong {
color: #f4f6f8;
}
html[data-theme="dark"] .workspace-dashboard-heading .eyebrow,
html[data-theme="dark"] .workspace-dashboard-card p,
html[data-theme="dark"] .workspace-dashboard-list-copy small,
html[data-theme="dark"] .workspace-dashboard-list-meta p {
color: #aeb7c0;
}
html[data-theme="dark"] .workspace-dashboard-card,
html[data-theme="dark"] .workspace-dashboard-card-current-list {
border-color: rgba(255,255,255,.08);
color: #f4f6f8;
box-shadow: none;
}
html[data-theme="dark"] .workspace-dashboard-card-notes { background: linear-gradient(180deg, #2c2818 0%, #23201a 100%); }
html[data-theme="dark"] .workspace-dashboard-card-pinned { background: linear-gradient(180deg, #252032 0%, #1f1b29 100%); }
html[data-theme="dark"] .workspace-dashboard-card-favorites { background: linear-gradient(180deg, #311d25 0%, #251920 100%); }
html[data-theme="dark"] .workspace-dashboard-card-lists { background: linear-gradient(180deg, #1e2c22 0%, #18231c 100%); }
html[data-theme="dark"] .workspace-dashboard-card-shares { background: linear-gradient(180deg, #1e2835 0%, #18212d 100%); }
html[data-theme="dark"] .workspace-dashboard-card-current-list { background: linear-gradient(180deg, #29261f 0%, #22201b 100%); }
html[data-theme="dark"] .workspace-dashboard-icon {
background: rgba(244,197,66,.14);
}
html[data-theme="dark"] .workspace-dashboard-ring {
background: conic-gradient(#f1bf35 0 var(--list-progress), #48443c var(--list-progress) 100%);
}
html[data-theme="dark"] .workspace-dashboard-ring::after {
background: #22201b;
}
html[data-theme="dark"] .workspace-dashboard-list-progress-text {
color: #f2d06c;
}
html[data-theme="dark"] .workspace-dashboard-list-action {
border-color: rgba(255,255,255,.1);
background: #2a2f36;
color: #f0f4f6;
}
}
@media (min-width: 901px) and (max-width: 1320px) {
.workspace-dashboard-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.workspace-dashboard-card-current-list {
grid-column: span 3;
}
}
@media (max-width: 900px) {
.workspace-overview {
display: none !important;
}
}
/* =========================================================
CORRECTIF FINAL TER — DASHBOARD À LA PLACE DU TITRE NOTES
Version 2026-07-25.6
========================================================= */
@media (min-width: 901px) {
.notes-main > .workspace-overview {
display: block !important;
width: 100%;
margin: 0 0 22px;
}
.workspace-dashboard-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.workspace-dashboard-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
}
.workspace-dashboard-actions .button {
min-height: 48px;
padding: 0 18px;
border-radius: 14px;
font-size: .96rem;
font-weight: 760;
}
.workspace-dashboard-actions .button span[aria-hidden="true"] {
font-size: 1rem;
}
.notes-toolbar {
margin-bottom: 22px;
align-items: center;
justify-content: flex-start;
}
.notes-toolbar-copy {
display: none !important;
}
.toolbar-actions {
width: 100%;
justify-content: flex-start;
gap: 12px;
flex-wrap: wrap;
}
.toolbar-actions .new-entry-actions {
display: none !important;
}
.toolbar-actions .notes-search {
width: min(420px, 100%);
flex: 0 1 420px;
margin-right: 0;
}
.toolbar-actions .sort-form {
flex: 0 0 auto;
}
}
@media (min-width: 901px) and (max-width: 1240px) {
.workspace-dashboard-top {
flex-direction: column;
align-items: stretch;
}
.workspace-dashboard-actions {
justify-content: flex-start;
}
}
@media (max-width: 900px) {
.notes-main > .workspace-overview {
display: none !important;
}
.notes-toolbar-copy {
display: block;
}
.toolbar-actions .new-entry-actions {
display: flex;
}
}
/* =========================================================
NOTE-BLOC — NETTOYAGE DASHBOARD, HEADER ET LISTES DANS LES NOTES
Version 2026-07-25.7
========================================================= */
.header-icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 44px;
min-height: 44px;
padding: 0 14px;
border: 1px solid #dde2e7;
border-radius: 12px;
background: #fff;
color: #28313d;
text-decoration: none;
font: inherit;
font-weight: 760;
cursor: pointer;
}
.header-logout-button {
border-color: #18202a;
background: #18202a;
color: #fff;
}
.header-icon-button > span:first-child {
font-size: 1rem;
line-height: 1;
}
@media (min-width: 901px) {
.workspace-dashboard-grid-compact {
display: block;
}
.workspace-dashboard-grid-compact .workspace-dashboard-card-current-list {
width: 100%;
min-height: 126px;
grid-template-columns: minmax(220px, 1fr) 88px minmax(110px, auto) auto;
grid-template-rows: auto;
gap: 18px;
padding: 18px 20px;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-copy,
.workspace-dashboard-grid-compact .workspace-dashboard-list-action {
grid-column: auto;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-copy {
align-self: center;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-action {
justify-self: end;
align-self: center;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-meta {
align-self: center;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-progress-wrap {
width: 72px;
height: 72px;
}
.workspace-dashboard-grid-compact .workspace-dashboard-ring {
width: 72px;
height: 72px;
}
}
.shopping-note-card {
min-height: 280px;
padding: 18px;
border-color: #eadba7;
background: linear-gradient(155deg, #fffdf3 0%, #fff8dc 100%);
box-shadow: 0 12px 28px rgba(70, 53, 10, .07);
}
.shopping-note-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.shopping-note-card-header h3 {
margin: 8px 0 0;
font-size: 1.08rem;
line-height: 1.25;
}
.shopping-note-open {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid #e4d49d;
border-radius: 11px;
background: rgba(255,255,255,.72);
color: #7d6000;
text-decoration: none;
font-weight: 900;
}
.shopping-note-progress {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 10px;
align-items: center;
margin-bottom: 12px;
color: #6e6651;
font-size: .76rem;
}
.shopping-note-progress > strong {
color: #8a6500;
}
.shopping-note-progress > i {
grid-column: 1 / -1;
display: block;
height: 6px;
overflow: hidden;
border-radius: 999px;
background: rgba(80,64,18,.10);
}
.shopping-note-progress > i > b {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #f2c438, #e7ab18);
}
.shopping-note-items {
display: grid;
gap: 7px;
max-height: 210px;
overflow-y: auto;
padding-right: 3px;
}
.shopping-note-card .notes-shopping-item {
display: grid;
grid-template-columns: 30px minmax(0,1fr) 28px;
gap: 8px;
align-items: center;
padding: 8px;
border: 1px solid rgba(125,96,0,.14);
border-radius: 11px;
background: rgba(255,255,255,.72);
}
.shopping-note-card .notes-shopping-item > button {
display: grid;
place-items: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid #d9c989;
border-radius: 9px;
background: #fffdf5;
color: #705600;
cursor: pointer;
}
.shopping-note-card .notes-shopping-item > div {
min-width: 0;
display: grid;
grid-template-columns: minmax(0,1fr) 78px;
gap: 6px;
}
.shopping-note-card .notes-shopping-item input {
width: 100%;
min-width: 0;
height: 30px;
padding: 0 8px;
border: 1px solid #e7ddba;
border-radius: 8px;
background: #fff;
color: #202730;
font: inherit;
font-size: .76rem;
}
.shopping-note-card .notes-shopping-item.is-completed input:first-child {
text-decoration: line-through;
opacity: .6;
}
.shopping-note-card .notes-shopping-item.is-saving { opacity: .72; }
.shopping-note-card .notes-shopping-item.is-saved { border-color: #79b78d; }
.shopping-note-add {
display: grid;
grid-template-columns: minmax(0,1fr) 38px;
gap: 8px;
margin-top: 10px;
}
.shopping-note-add input {
width: 100%;
height: 38px;
padding: 0 11px;
border: 1px solid #dfcf96;
border-radius: 10px;
background: #fff;
color: #202730;
font: inherit;
}
.shopping-note-add button {
border: 0;
border-radius: 10px;
background: #f1bf35;
color: #28220d;
font-size: 1.2rem;
font-weight: 900;
cursor: pointer;
}
html[data-theme="dark"] .header-icon-button {
border-color: #343c45;
background: #20262d;
color: #edf1f4;
}
html[data-theme="dark"] .header-logout-button {
background: #eef1f4;
color: #161b21;
}
html[data-theme="dark"] .shopping-note-card {
border-color: #4a4430 !important;
background: linear-gradient(155deg, #2b281d 0%, #201f1a 100%) !important;
}
html[data-theme="dark"] .shopping-note-card .notes-shopping-item,
html[data-theme="dark"] .shopping-note-add input,
html[data-theme="dark"] .shopping-note-card .notes-shopping-item input {
border-color: #464339;
background: #181d22;
color: #f3f5f7;
}
@media (max-width: 900px) {
.site-header-inner {
min-height: 62px;
}
.header-icon-label {
display: none;
}
.header-icon-button {
width: 40px;
min-width: 40px;
min-height: 40px;
padding: 0;
}
.header-actions {
gap: 7px;
}
.notes-sidebar[hidden] {
display: none !important;
}
.notes-sidebar:not([hidden]),
.notes-sidebar.is-mobile-open {
position: static !important;
inset: auto !important;
display: block !important;
width: calc(100% - 24px);
max-height: none !important;
margin: 12px auto 90px;
overflow: visible !important;
transform: none !important;
visibility: visible !important;
opacity: 1 !important;
}
.notes-sidebar:not([hidden]) .category-navigation {
display: grid;
grid-template-columns: 1fr;
}
.shopping-note-card {
min-height: 240px !important;
grid-column: span 2;
}
.shopping-note-card .notes-shopping-item > div {
grid-template-columns: minmax(0,1fr) 64px;
}
}
@media (max-width: 330px) {
.shopping-note-card {
grid-column: span 1;
}
}
/* =========================================================
NOTE-BLOC V4.1 — HEADER MOBILE + DASHBOARD PC + LISTES
========================================================= */
.mobile-home-header { display:none; }
@media (min-width: 901px) {
.workspace-overview {
width: min(1500px, calc(100% - 34px));
margin: 18px auto 22px;
padding: 20px 22px;
border-radius: 24px;
background: linear-gradient(135deg,#fff 0%,#fffdf8 65%,#fff7d7 100%);
box-shadow: 0 14px 38px rgba(35,40,45,.08);
}
.workspace-dashboard-top { display:flex; align-items:center; justify-content:space-between; gap:22px; }
.workspace-dashboard-heading h2 { margin:2px 0 0; font-size:1.55rem; }
.workspace-dashboard-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; }
.workspace-dashboard-grid { margin-top:16px; }
}
@media (max-width: 900px) {
.site-header { display:none !important; }
.mobile-notes-bar { display:none !important; }
.workspace-overview { display:none !important; }
.mobile-home-header {
position:relative;
z-index:20;
display:block;
padding: calc(12px + env(safe-area-inset-top)) 14px 14px;
background:#fffdf7;
border-bottom:1px solid #eee7d5;
box-shadow:0 8px 24px rgba(49,42,24,.06);
}
.mobile-home-top { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; gap:10px; }
.mobile-home-menu,.mobile-home-profile {
display:grid; place-items:center; width:42px; height:42px; padding:0;
border:1px solid #e8dfc7; border-radius:14px; background:#fff; color:#363329;
text-decoration:none; font-size:1.2rem; box-shadow:0 5px 14px rgba(55,48,29,.05);
}
.mobile-home-brand { color:#25231d; text-align:center; text-decoration:none; font-size:1.38rem; font-weight:900; letter-spacing:-.035em; }
.mobile-home-search {
display:grid; grid-template-columns:28px 1fr 30px; align-items:center; gap:6px;
height:48px; margin-top:13px; padding:0 10px 0 14px;
border:1px solid #e6dcc1; border-radius:16px; background:#fff;
box-shadow:0 7px 20px rgba(49,42,24,.055);
}
.mobile-home-search > span { color:#8d836b; font-size:1.2rem; }
.mobile-home-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:#2d2a22; font:inherit; }
.mobile-home-search button { display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:9px; background:#f5f0e3; color:#746c59; font-size:1rem; }
.mobile-home-actions { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-top:8px; }
.mobile-home-actions button,.mobile-home-actions a {
display:grid; place-items:center; gap:5px; min-width:0; min-height:68px; padding:8px 4px;
border:1px solid #eadfbf; border-radius:16px; background:#fffaf0; color:#544619;
text-decoration:none; font:inherit; box-shadow:0 6px 16px rgba(77,60,11,.045);
}
.mobile-home-actions span { display:grid; place-items:center; width:28px; height:28px; border-radius:10px; background:#f4c53e; color:#2f2917; font-size:1rem; font-weight:900; }
.mobile-home-actions strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; font-size:.69rem; }
.notes-toolbar { padding-top:14px !important; }
.notes-toolbar .notes-search { display:none !important; }
.notes-main { min-width:0; }
/* Retour aux couleurs historiques sur mobile, y compris en thème sombre. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .app-shell,
:root[data-theme="dark"] .notes-main,
:root[data-theme="dark"] main { background:#f6f4ee !important; color:#2d2d29 !important; }
:root[data-theme="dark"] .mobile-home-header { background:#fffdf7 !important; border-color:#eee7d5 !important; }
:root[data-theme="dark"] .mobile-home-menu,
:root[data-theme="dark"] .mobile-home-profile,
:root[data-theme="dark"] .mobile-home-search { background:#fff !important; border-color:#e6dcc1 !important; color:#363329 !important; }
:root[data-theme="dark"] .mobile-home-brand,
:root[data-theme="dark"] .mobile-home-search input { color:#25231d !important; }
:root[data-theme="dark"] .notes-grid .note-card,
:root[data-theme="dark"] .notes-grid .note-card:nth-child(3n+2),
:root[data-theme="dark"] .notes-grid .note-card:nth-child(3n) {
background:var(--note-color,#fff59a) !important;
border-color:rgba(91,83,33,.13) !important;
color:#312f25 !important;
box-shadow:0 10px 24px rgba(36,41,47,.10) !important;
}
:root[data-theme="dark"] .notes-grid .note-card h2,
:root[data-theme="dark"] .notes-grid .note-card h3,
:root[data-theme="dark"] .notes-grid .note-card-title,
:root[data-theme="dark"] .notes-grid .note-content,
:root[data-theme="dark"] .notes-grid .note-content * { color:#312f25 !important; }
:root[data-theme="dark"] .notes-grid .note-card-footer,
:root[data-theme="dark"] .notes-grid .note-card-footer-date { color:rgba(66,63,45,.62) !important; }
:root[data-theme="dark"] .shopping-note-card { background:linear-gradient(155deg,#fffdf3,#fff8dc) !important; border-color:#eadba7 !important; }
:root[data-theme="dark"] .shopping-note-card .notes-shopping-item,
:root[data-theme="dark"] .shopping-note-card input { background:#fff !important; border-color:#e7ddba !important; color:#202730 !important; }
}
.quick-list-overlay {
position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
padding:22px; background:rgba(20,22,25,.55); backdrop-filter:blur(8px);
}
.quick-list-dialog {
width:min(760px,100%); max-height:min(88vh,860px); overflow:hidden;
border:1px solid rgba(255,255,255,.6); border-radius:26px; background:#fffdf6;
box-shadow:0 28px 90px rgba(0,0,0,.28);
}
.quick-list-dialog-bar { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid #ebe2ca; background:#fff; }
.quick-list-dialog-bar strong { font-size:1rem; }
.quick-list-dialog-bar button { width:38px; height:38px; border:0; border-radius:12px; background:#f3eee1; color:#4a4436; font-size:1.35rem; cursor:pointer; }
.quick-list-dialog-body { max-height:calc(88vh - 69px); overflow:auto; padding:18px; -webkit-overflow-scrolling:touch; }
.quick-list-dialog .shopping-note-card { min-height:0 !important; margin:0; transform:none !important; box-shadow:none !important; cursor:default; }
.quick-list-dialog .shopping-note-items { max-height:none; overflow:visible; }
.quick-list-dialog .shopping-note-card .notes-shopping-item { padding:11px; }
.quick-list-is-open { overflow:hidden; }
@media (max-width: 700px) {
.quick-list-overlay { align-items:end; padding:0; }
.quick-list-dialog { width:100%; max-height:94dvh; border-radius:24px 24px 0 0; border-bottom:0; }
.quick-list-dialog-body { max-height:calc(94dvh - 69px); padding:12px; }
.quick-list-dialog-bar { padding:13px 14px; }
.quick-list-dialog .shopping-note-card { grid-column:span 1; padding:15px !important; }
}
/* =========================================================
NOTE-BLOC V4.2 — OUVERTURE FLUIDE DES NOTES
========================================================= */
.note-card.is-openable {
cursor: pointer;
}
.note-card.is-openable:focus-visible {
outline: 3px solid rgba(236, 180, 35, .72);
outline-offset: 4px;
}
#note-modal[open] {
display: grid;
align-items: stretch;
justify-items: end;
padding: 0;
background: rgba(25, 27, 31, .38);
backdrop-filter: blur(6px);
}
#note-modal .modal-backdrop {
position: fixed;
inset: 0;
}
#note-modal .note-editor-modal-card {
position: relative;
z-index: 1;
width: min(860px, 74vw);
max-width: none;
height: 100dvh;
max-height: 100dvh;
margin: 0;
border-radius: 28px 0 0 28px;
overflow: hidden;
box-shadow: -24px 0 70px rgba(10, 14, 20, .22);
animation: noteEditorSlideIn .24s cubic-bezier(.2,.8,.2,1);
}
#note-modal .note-editor-modal-card > .modal-header {
flex: 0 0 auto;
}
#note-modal .note-form {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
@keyframes noteEditorSlideIn {
from { transform: translateX(42px); opacity: .72; }
to { transform: translateX(0); opacity: 1; }
}
@media (max-width: 900px) {
#note-modal[open] {
align-items: end;
justify-items: stretch;
background: rgba(25, 27, 31, .46);
}
#note-modal .note-editor-modal-card {
width: 100%;
height: 96dvh;
max-height: 96dvh;
border-radius: 24px 24px 0 0;
box-shadow: 0 -20px 55px rgba(10, 14, 20, .22);
animation-name: noteEditorRiseIn;
}
#note-modal .modal-header {
position: sticky;
top: 0;
z-index: 8;
}
#note-modal .modal-close {
width: 42px;
height: 42px;
}
.note-card.is-openable::after {
content: 'Toucher pour ouvrir';
position: absolute;
right: 12px;
bottom: 10px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(255,255,255,.58);
color: rgba(57,52,35,.66);
font-size: .58rem;
font-weight: 800;
letter-spacing: .02em;
pointer-events: none;
}
}
@keyframes noteEditorRiseIn {
from { transform: translateY(34px); opacity: .76; }
to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
#note-modal .note-editor-modal-card { animation: none; }
}
/* =========================================================
NOTE-BLOC V4.3 — TITRE « VOTRE ESPACE » SUR MOBILE
========================================================= */
.notes-toolbar-mobile-icon { display:none; }
.notes-toolbar-title-group { min-width:0; }
.notes-toolbar-count strong { font:inherit; }
@media (max-width: 900px) {
.notes-toolbar {
position:relative;
display:block !important;
margin:12px 14px 10px !important;
padding:11px 13px !important;
border:1px solid #ece3cb;
border-radius:22px;
background:
radial-gradient(circle at 92% 12%, rgba(244,197,62,.20), transparent 31%),
linear-gradient(145deg,#fff 0%,#fffdf7 72%,#fff8df 100%);
box-shadow:0 12px 30px rgba(57,48,24,.075);
overflow:hidden;
}
.notes-toolbar::after {
content:"";
position:absolute;
right:-25px;
bottom:-38px;
width:105px;
height:105px;
border:18px solid rgba(244,197,62,.10);
border-radius:50%;
pointer-events:none;
}
.notes-toolbar-copy {
position:relative;
z-index:1;
display:grid !important;
grid-template-columns:40px minmax(0,1fr);
align-items:center;
gap:13px;
width:100%;
min-width:0;
}
.notes-toolbar-mobile-icon {
display:grid;
place-items:center;
width:40px;
height:40px;
border-radius:13px;
background:#f4c53e;
color:#332b13;
font-size:1.08rem;
box-shadow:0 7px 17px rgba(171,125,0,.20);
}
.notes-toolbar-title-group { min-width:0; }
.notes-toolbar-copy .eyebrow {
margin:0 0 1px !important;
color:#9a7b22 !important;
font-size:.64rem !important;
font-weight:900 !important;
letter-spacing:.12em !important;
line-height:1.15;
text-transform:uppercase;
}
.notes-toolbar h1 {
max-width:100%;
margin:0 !important;
color:#29271f !important;
font-size:1.25rem !important;
font-weight:900 !important;
line-height:1.12 !important;
letter-spacing:-.035em;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.notes-toolbar-count {
display:inline-flex;
align-items:center;
width:max-content;
max-width:100%;
margin:4px 0 0 !important;
padding:4px 9px;
border:1px solid #eee4c8;
border-radius:999px;
background:rgba(255,255,255,.82);
color:#7a725f !important;
font-size:.68rem !important;
font-weight:700;
line-height:1.2;
box-shadow:0 3px 8px rgba(60,50,23,.04);
}
.notes-toolbar-count strong {
margin-right:4px;
color:#433b27;
font-weight:900;
}
.toolbar-actions {
position:relative;
z-index:1;
width:100%;
margin-top:12px;
}
.toolbar-actions > :not(.sort-form):not(.view-switcher) {
display:none !important;
}
.toolbar-actions .sort-form,
.toolbar-actions .view-switcher {
margin:0;
}
:root[data-theme="dark"] .notes-toolbar {
border-color:#ece3cb !important;
background:
radial-gradient(circle at 92% 12%, rgba(244,197,62,.20), transparent 31%),
linear-gradient(145deg,#fff 0%,#fffdf7 72%,#fff8df 100%) !important;
box-shadow:0 12px 30px rgba(57,48,24,.075) !important;
}
:root[data-theme="dark"] .notes-toolbar h1 { color:#29271f !important; }
:root[data-theme="dark"] .notes-toolbar-copy .eyebrow { color:#9a7b22 !important; }
:root[data-theme="dark"] .notes-toolbar-count {
background:rgba(255,255,255,.82) !important;
border-color:#eee4c8 !important;
color:#7a725f !important;
}
:root[data-theme="dark"] .notes-toolbar-count strong { color:#433b27 !important; }
}
@media (max-width: 380px) {
.notes-toolbar { margin-inline:12px !important; padding:10px 12px !important; }
.notes-toolbar-copy { grid-template-columns:38px minmax(0,1fr); gap:10px; }
.notes-toolbar-mobile-icon { width:38px; height:38px; border-radius:12px; }
.notes-toolbar h1 { font-size:1.16rem !important; }
}
/* =========================================================
NOTE-BLOC V4.3.2 — LISTE DU MOMENT COMPACTE
Corrige la largeur mobile et le bouton PC
========================================================= */
/* PC : garder le libellé sur une seule ligne et donner une vraie largeur au bouton. */
@media (min-width: 901px) {
.workspace-dashboard-grid-compact .workspace-dashboard-list-action {
width: auto !important;
min-width: 154px;
max-width: none !important;
padding-inline: 18px !important;
justify-content: center;
white-space: nowrap;
word-break: normal;
line-height: 1.15;
}
}
/* Mobile : la carte occupe la même largeur que les autres blocs et devient moins haute. */
@media (max-width: 900px) {
.notes-main > .workspace-overview,
.workspace-overview {
width: calc(100% - 28px) !important;
max-width: none !important;
margin: 10px 14px 12px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.workspace-overview .workspace-dashboard-top {
display: none !important;
}
.workspace-dashboard-grid-compact {
width: 100% !important;
margin: 0 !important;
}
.workspace-dashboard-grid-compact .workspace-dashboard-card-current-list {
box-sizing: border-box;
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 12px 13px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 58px auto !important;
grid-template-rows: auto !important;
align-items: center !important;
gap: 10px !important;
border-radius: 18px !important;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-copy {
min-width: 0;
grid-column: 1 !important;
grid-row: 1 !important;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-copy small {
display: block;
margin: 0 0 3px !important;
font-size: .72rem !important;
line-height: 1.15 !important;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-copy h3 {
margin: 0 !important;
font-size: .91rem !important;
line-height: 1.2 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-progress-wrap,
.workspace-dashboard-grid-compact .workspace-dashboard-ring {
width: 54px !important;
height: 54px !important;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-progress-wrap {
grid-column: 2 !important;
grid-row: 1 !important;
margin: 0 !important;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-progress-text {
font-size: .72rem !important;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-meta {
display: none !important;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-action {
grid-column: 3 !important;
grid-row: 1 !important;
justify-self: end !important;
align-self: center !important;
width: auto !important;
min-width: 72px !important;
max-width: 82px !important;
min-height: 36px !important;
padding: 6px 10px !important;
border-radius: 12px !important;
justify-content: center;
text-align: center;
white-space: normal;
font-size: .72rem !important;
line-height: 1.12 !important;
}
}
@media (max-width: 380px) {
.workspace-dashboard-grid-compact .workspace-dashboard-card-current-list {
grid-template-columns: minmax(0, 1fr) 50px auto !important;
padding: 10px 11px !important;
gap: 8px !important;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-progress-wrap,
.workspace-dashboard-grid-compact .workspace-dashboard-ring {
width: 48px !important;
height: 48px !important;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-action {
min-width: 68px !important;
max-width: 74px !important;
padding-inline: 8px !important;
}
}
/* =========================================================
NOTE-BLOC V4.3.3 — EDITEUR DE NOTE CENTRE SUR PC
Aligne l'ouverture des notes sur celle des listes.
========================================================= */
@media (min-width: 901px) {
#note-modal[open] {
display: grid !important;
place-items: center !important;
padding: 22px !important;
}
#note-modal .note-editor-modal-card {
width: min(920px, calc(100vw - 44px)) !important;
height: min(860px, calc(100dvh - 44px)) !important;
max-height: calc(100dvh - 44px) !important;
margin: auto !important;
border-radius: 26px !important;
box-shadow: 0 28px 90px rgba(10, 14, 20, .28) !important;
animation-name: noteEditorCenterIn !important;
}
#note-modal .note-form {
min-height: 0 !important;
overflow-y: auto !important;
}
}
@keyframes noteEditorCenterIn {
from {
transform: translateY(16px) scale(.985);
opacity: .72;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
/* =========================================================
NOTE-BLOC V4.3.4 — VOTRE ESPACE MOBILE VRAIMENT COMPACT
Supprime la grande zone vide sous le tri.
========================================================= */
@media (max-width: 900px) {
.notes-main > .notes-toolbar,
.notes-toolbar {
box-sizing: border-box !important;
width: calc(100% - 28px) !important;
max-width: none !important;
min-height: 0 !important;
height: auto !important;
margin: 10px 14px 14px !important;
padding: 14px !important;
display: block !important;
overflow: hidden !important;
border-radius: 20px !important;
}
.notes-toolbar::before,
.notes-toolbar::after {
pointer-events: none;
}
.notes-toolbar-copy {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: 42px minmax(0, 1fr) !important;
align-items: center !important;
gap: 11px !important;
}
.notes-toolbar-mobile-icon {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
border-radius: 13px !important;
font-size: 1rem !important;
}
.notes-toolbar-title-group {
min-width: 0 !important;
}
.notes-toolbar-copy .eyebrow {
margin: 0 0 1px !important;
font-size: .62rem !important;
line-height: 1.1 !important;
}
.notes-toolbar h1 {
margin: 0 !important;
font-size: 1.18rem !important;
line-height: 1.08 !important;
}
.notes-toolbar-count {
margin: 4px 0 0 !important;
padding: 3px 8px !important;
font-size: .65rem !important;
line-height: 1.15 !important;
}
.notes-toolbar .toolbar-actions {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
min-height: 0 !important;
height: auto !important;
margin: 10px 0 0 !important;
padding: 0 !important;
display: block !important;
overflow: visible !important;
}
.notes-toolbar .toolbar-actions > :not(.sort-form):not(.view-switcher) {
display: none !important;
}
.notes-toolbar .sort-form {
width: 100% !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
.notes-toolbar .sort-form select,
.notes-toolbar #notes-sort {
box-sizing: border-box !important;
width: 100% !important;
height: 46px !important;
min-height: 46px !important;
margin: 0 !important;
padding: 0 42px 0 14px !important;
border-radius: 14px !important;
font-size: .9rem !important;
line-height: 46px !important;
}
.notes-toolbar .view-switcher {
margin-top: 8px !important;
}
}
@media (max-width: 380px) {
.notes-main > .notes-toolbar,
.notes-toolbar {
width: calc(100% - 24px) !important;
margin-inline: 12px !important;
padding: 12px !important;
}
.notes-toolbar-copy {
grid-template-columns: 38px minmax(0, 1fr) !important;
gap: 9px !important;
}
.notes-toolbar-mobile-icon {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
}
.notes-toolbar h1 {
font-size: 1.08rem !important;
}
.notes-toolbar .sort-form select,
.notes-toolbar #notes-sort {
height: 43px !important;
min-height: 43px !important;
line-height: 43px !important;
}
}
/* =========================================================
NOTE-BLOC V4.3.5 — « VOTRE ESPACE » MOBILE ULTRA-COMPACT
Conserve le titre et le tri, sans grande carte verticale.
========================================================= */
@media (max-width: 900px) {
.notes-main > .notes-toolbar,
.notes-toolbar {
width: calc(100% - 24px) !important;
margin: 8px 12px 10px !important;
padding: 10px 11px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(118px, 42%) !important;
align-items: center !important;
gap: 10px !important;
border-radius: 16px !important;
}
.notes-toolbar-copy {
grid-template-columns: 34px minmax(0, 1fr) !important;
gap: 8px !important;
}
.notes-toolbar-mobile-icon {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
border-radius: 11px !important;
font-size: .82rem !important;
}
.notes-toolbar-copy .eyebrow {
display: none !important;
}
.notes-toolbar h1 {
font-size: 1rem !important;
line-height: 1.05 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notes-toolbar-count {
margin-top: 3px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
font-size: .62rem !important;
white-space: nowrap;
}
.notes-toolbar .toolbar-actions {
width: auto !important;
margin: 0 !important;
}
.notes-toolbar .sort-form select,
.notes-toolbar #notes-sort {
height: 38px !important;
min-height: 38px !important;
padding: 0 32px 0 10px !important;
border-radius: 11px !important;
font-size: .76rem !important;
line-height: 38px !important;
}
.notes-toolbar .view-switcher {
display: none !important;
}
}
@media (max-width: 390px) {
.notes-main > .notes-toolbar,
.notes-toolbar {
grid-template-columns: minmax(0, 1fr) 112px !important;
padding: 9px 10px !important;
gap: 8px !important;
}
.notes-toolbar-mobile-icon {
display: none !important;
}
.notes-toolbar-copy {
display: block !important;
}
}
/* Accueil : les listes affichent leurs étiquettes et la liste du moment reste réservée au mobile. */
.shopping-note-tags-wrap {
margin: 10px 0 12px;
}
.shopping-note-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
}
.shopping-note-tags[hidden] {
display: none !important;
}
.shopping-note-tags span {
display: inline-flex;
align-items: center;
min-height: 25px;
padding: 4px 9px;
border: 1px solid rgba(37, 40, 44, .10);
border-radius: 999px;
background: rgba(255, 255, 255, .72);
color: #665b42;
font-size: .72rem;
font-weight: 800;
line-height: 1;
}
.shopping-note-tags-editor {
display: none;
}
.shopping-note-tags-editor label {
display: block;
margin: 0 0 6px;
color: #7a715e;
font-size: .68rem;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.shopping-note-tags-editor-row {
display: grid;
grid-template-columns: minmax(0,1fr) 52px;
gap: 8px;
}
.shopping-note-tags-editor input {
width: 100%;
min-width: 0;
height: 38px;
padding: 0 11px;
border: 1px solid #dfcf96;
border-radius: 10px;
background: #fff;
color: #202730;
font: inherit;
font-size: .78rem;
}
.shopping-note-tags-editor button {
height: 38px;
border: 0;
border-radius: 10px;
background: #f4efe1;
color: #5f5230;
font-size: .76rem;
font-weight: 900;
cursor: pointer;
}
.shopping-note-tags-editor.is-saving {
opacity: .72;
}
.shopping-note-tags-editor.is-saved input,
.shopping-note-tags-editor.is-saved button {
border-color: #79b78d;
box-shadow: 0 0 0 3px rgba(121, 183, 141, .12);
}
.quick-list-dialog .shopping-note-tags-wrap {
margin-top: 4px;
}
.quick-list-dialog .shopping-note-tags-editor {
display: block;
margin-top: 10px;
}
:root[data-theme="dark"] .shopping-note-tags span {
border-color: rgba(255,255,255,.10);
background: rgba(255,255,255,.07);
color: #e5d8b9;
}
:root[data-theme="dark"] .shopping-note-tags-editor label {
color: #d2c39b;
}
:root[data-theme="dark"] .shopping-note-tags-editor input {
border-color: #464339;
background: #181d22;
color: #f3f5f7;
}
:root[data-theme="dark"] .shopping-note-tags-editor button {
background: rgba(255,255,255,.10);
color: #f1e6c7;
}
@media (min-width: 701px) {
.workspace-dashboard-grid-compact {
display: none !important;
}
}
/* =========================================================
NOTE-BLOC V4.4 — PAGE LISTES PLUS CLAIRE ET STRUCTURÉE
========================================================= */
.shopping-page-v3 {
--shopping-page-border: #e8e0d2;
--shopping-page-muted: #7b7469;
--shopping-page-accent: #efb91f;
--shopping-page-accent-soft: #fff6d8;
--shopping-page-panel: #fffdfa;
}
.shopping-page-v3 .shopping-app-shell {
grid-template-columns: 292px minmax(0, 1fr);
gap: 20px;
align-items: start;
}
.shopping-page-v3 .shopping-sidebar,
.shopping-page-v3 .shopping-editor {
border: 1px solid var(--shopping-page-border);
border-radius: 24px;
background: var(--shopping-page-panel);
box-shadow: 0 14px 34px rgba(54, 46, 31, .065);
}
.shopping-page-v3 .shopping-sidebar {
padding: 20px;
}
.shopping-sidebar-heading {
margin-bottom: 16px;
}
.shopping-sidebar-heading h2 {
margin-top: 3px;
font-size: 1.55rem;
line-height: 1.05;
}
.shopping-list-total {
min-width: 32px;
height: 32px;
background: #fff0b6;
color: #805a00;
font-size: .9rem;
}
.shopping-new-list {
padding: 14px;
border-color: #eadfcb;
border-radius: 17px;
background: #fffaf0;
}
.shopping-new-list label {
margin-bottom: 7px;
color: #645b4d;
font-size: .72rem;
letter-spacing: .02em;
}
.shopping-create-row {
grid-template-columns: minmax(0, 1fr) 44px;
}
.shopping-create-row input,
.shopping-create-button {
height: 44px;
min-height: 44px;
border-radius: 12px;
}
.shopping-create-button {
font-size: 1.55rem;
box-shadow: none;
}
.shopping-filter-block {
margin: 18px 0 12px;
}
.shopping-tag-chip {
padding: 6px 9px;
border-color: #e5dccf;
background: #fff;
}
.shopping-tag-chip.is-active {
border-color: #e9b92b;
background: var(--shopping-page-accent-soft);
}
.shopping-list-nav {
gap: 8px;
}
.shopping-list-card {
gap: 10px;
padding: 12px;
border: 1px solid transparent;
border-radius: 15px;
}
.shopping-list-card:hover {
transform: none;
border-color: #eadfcb;
background: #fffaf1;
}
.shopping-list-card.is-active {
border-color: #edc34a;
background: #fff7da;
box-shadow: inset 3px 0 0 #efb91f;
}
.shopping-list-card-icon {
flex-basis: 38px;
height: 38px;
border-radius: 12px;
font-size: 18px;
}
.shopping-list-card-top strong {
font-size: .9rem;
}
.shopping-list-card-top b {
font-size: .78rem;
}
.shopping-list-card-meta {
margin-top: 2px;
font-size: .69rem;
}
.shopping-list-mini-progress {
height: 4px;
margin-top: 7px;
}
.shopping-nav-tags {
gap: 4px;
margin-top: 7px;
}
.shopping-nav-tags em {
padding: 3px 6px;
font-size: .62rem;
}
.shopping-sidebar-tip {
margin-top: 16px;
padding: 12px;
border: 1px solid #ebe5f5;
border-radius: 15px;
background: #faf8ff;
}
.shopping-sidebar-tip > span {
font-size: 18px;
}
.shopping-page-v3 .shopping-editor {
min-width: 0;
padding: 26px 28px 30px;
overflow: hidden;
}
.shopping-editor-heading {
align-items: flex-start;
gap: 18px;
padding-bottom: 18px;
border-bottom: 1px solid #eee7dc;
}
.shopping-active-heading {
min-width: 0;
flex: 1;
}
.shopping-active-badge {
display: block;
margin-bottom: 5px;
color: #946700;
font-size: .68rem;
font-weight: 900;
letter-spacing: .13em;
text-transform: uppercase;
}
.shopping-title-input {
display: block;
width: 100%;
min-width: 0;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
font-size: clamp(1.9rem, 3.2vw, 2.65rem) !important;
line-height: 1.08;
letter-spacing: -.045em;
}
.shopping-autosave-hint {
display: block;
margin-top: 6px;
color: #9a948c;
font-size: .72rem;
}
.shopping-delete-list {
flex: 0 0 auto;
min-height: 42px;
padding: 0 14px;
border-radius: 12px;
font-size: .82rem;
}
.shopping-list-tags-form {
margin: 18px 0;
padding: 14px 16px;
border: 1px solid #ece5da;
border-radius: 16px;
background: #fbfaf7;
}
.shopping-list-tags-form > label {
margin-bottom: 7px;
font-size: .78rem;
}
.shopping-tags-input-row {
min-height: 46px;
padding: 4px 5px 4px 12px;
border-radius: 13px;
}
.shopping-tags-input-row button {
height: 36px;
padding-inline: 14px;
border-radius: 10px;
}
.shopping-list-tags-form small {
margin-top: 6px;
font-size: .68rem;
}
.shopping-progress-panel {
grid-template-columns: 72px minmax(0, 1fr) 58px;
gap: 18px;
margin-bottom: 18px;
padding: 17px 20px;
border-radius: 18px;
background: #fffaf0;
box-shadow: none;
}
.shopping-progress-ring {
width: 66px;
height: 66px;
}
.shopping-progress-ring::before {
inset: 7px;
}
.shopping-progress-ring span {
font-size: 1rem;
}
.shopping-progress-copy > div:first-child {
gap: 6px;
}
.shopping-progress-copy strong {
font-size: 1.3rem;
}
.shopping-progress-copy span,
.shopping-progress-copy p {
font-size: .78rem;
}
.shopping-progress-track {
height: 8px;
margin: 9px 0 6px;
}
.shopping-progress-illustration {
font-size: 38px;
}
.shopping-add-panel {
margin-bottom: 22px;
border-color: #e9e2d8;
border-radius: 18px;
background: #fff;
}
.shopping-add-item {
display: grid;
grid-template-columns: minmax(240px, 1.55fr) minmax(105px, .55fr) minmax(160px, .85fr) 142px;
gap: 10px;
align-items: end;
margin: 0;
padding: 16px;
}
.shopping-add-main,
.shopping-add-details > div {
min-width: 0;
}
.shopping-add-details {
display: contents;
}
.shopping-add-main label,
.shopping-add-details label {
margin-bottom: 6px;
font-size: .67rem;
}
.shopping-add-main input,
.shopping-add-details input,
.shopping-add-details select,
.shopping-add-details > button {
height: 48px;
min-height: 48px;
border-radius: 12px;
}
.shopping-add-main input {
padding-inline: 14px;
font-size: .95rem;
}
.shopping-add-details > button {
width: 100%;
white-space: nowrap;
box-shadow: none;
}
.shopping-smart-suggestions {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
gap: 14px;
align-items: center;
padding: 13px 16px;
background: #fcfbf8;
}
.shopping-suggestions-heading {
margin: 0;
}
.shopping-suggestions-heading > span {
font-size: 18px;
}
.shopping-suggestions-heading strong {
font-size: .82rem;
}
.shopping-suggestions-heading small {
font-size: .67rem;
}
.shopping-suggestion-chips {
gap: 6px;
}
.shopping-suggestion-chip {
padding: 7px 10px;
border-radius: 10px;
font-size: .76rem;
}
.shopping-bulk-add summary {
padding: 13px 16px;
font-size: .78rem;
}
.shopping-items-toolbar {
margin: 4px 0 12px;
}
.shopping-items-toolbar h2 {
font-size: 1.35rem;
}
.shopping-items-toolbar > div span {
font-size: .76rem;
}
.shopping-items-toolbar select {
height: 38px;
}
.shopping-item {
gap: 10px;
padding: 11px 12px;
border-radius: 14px;
box-shadow: none;
}
.shopping-item:hover {
box-shadow: none;
}
.shopping-item-icon {
width: 40px;
height: 40px;
border-radius: 12px;
}
.shopping-item-actions button {
width: 30px;
height: 30px;
}
@media (max-width: 1180px) {
.shopping-page-v3 .shopping-app-shell {
grid-template-columns: 270px minmax(0, 1fr);
}
.shopping-add-item {
grid-template-columns: minmax(220px, 1fr) 120px minmax(160px, .8fr);
}
.shopping-add-details > button {
grid-column: 1 / -1;
}
}
@media (max-width: 980px) {
.shopping-page-v3 .shopping-app-shell {
grid-template-columns: 1fr;
}
.shopping-page-v3 .shopping-sidebar {
position: static;
}
.shopping-list-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.shopping-page-v3 .shopping-editor {
padding: 16px;
}
.shopping-editor-heading {
align-items: stretch;
}
.shopping-title-input {
font-size: 1.8rem !important;
}
.shopping-delete-list {
width: auto;
align-self: flex-start;
}
.shopping-progress-panel {
grid-template-columns: 62px minmax(0, 1fr);
padding: 15px;
}
.shopping-progress-ring {
width: 58px;
height: 58px;
}
.shopping-progress-illustration {
display: none;
}
.shopping-add-item {
grid-template-columns: 1fr 1fr;
}
.shopping-add-main {
grid-column: 1 / -1;
}
.shopping-add-details > button {
grid-column: 1 / -1;
}
.shopping-smart-suggestions {
grid-template-columns: 1fr;
gap: 9px;
}
}
@media (max-width: 480px) {
.shopping-list-nav,
.shopping-add-item {
grid-template-columns: 1fr;
}
.shopping-add-main,
.shopping-add-details > button {
grid-column: auto;
}
.shopping-list-tags-form {
padding: 12px;
}
.shopping-tags-input-row {
flex-wrap: wrap;
}
.shopping-tags-input-row button {
width: 100%;
}
}
html[data-theme="dark"] .shopping-page-v3 .shopping-sidebar,
html[data-theme="dark"] .shopping-page-v3 .shopping-editor,
html[data-theme="dark"] .shopping-add-panel {
background: #20252b;
border-color: #3a4047;
}
html[data-theme="dark"] .shopping-list-tags-form,
html[data-theme="dark"] .shopping-smart-suggestions {
background: #1d2227;
border-color: #3a4047;
}
html[data-theme="dark"] .shopping-list-card:hover {
background: #272d33;
border-color: #414850;
}
html[data-theme="dark"] .shopping-list-card.is-active {
background: #332f20;
border-color: #6b5b27;
}
/* Listes : accès rapide aux articles et ordre manuel. */
.shopping-secondary-panel {
margin: 0 0 14px;
border: 1px solid #e7dfd2;
border-radius: 15px;
background: #fbfaf7;
}
.shopping-secondary-panel > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
cursor: pointer;
font-weight: 850;
list-style: none;
}
.shopping-secondary-panel > summary::-webkit-details-marker { display: none; }
.shopping-secondary-panel > summary span { color: #847b6c; font-size: .72rem; font-weight: 650; }
.shopping-secondary-panel[open] > summary { border-bottom: 1px solid #e7dfd2; }
.shopping-secondary-panel .shopping-list-tags-form,
.shopping-secondary-panel .shopping-progress-panel { margin: 14px; }
.shopping-add-panel-primary { margin-bottom: 16px; }
.shopping-smart-suggestions { border-top: 1px solid #ece6dc; }
.shopping-smart-suggestions > summary {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
cursor: pointer;
list-style: none;
}
.shopping-smart-suggestions > summary::-webkit-details-marker { display: none; }
.shopping-smart-suggestions > summary small { margin-left: auto; color: #818181; }
.shopping-smart-suggestions-content { padding: 0 16px 14px; }
.shopping-list-card-row { display: grid; grid-template-columns: minmax(0,1fr) 30px; gap: 5px; align-items: center; }
.shopping-list-card-row .shopping-list-card { min-width: 0; }
.shopping-list-order-actions { display: grid; gap: 4px; opacity: .45; transition: opacity .15s ease; }
.shopping-list-card-row:hover .shopping-list-order-actions,
.shopping-list-card-row:focus-within .shopping-list-order-actions { opacity: 1; }
.shopping-list-order-actions button {
display: grid; place-items: center; width: 28px; height: 25px; padding: 0;
border: 1px solid #e1d7c5; border-radius: 8px; background: #fff; color: #685f50; cursor: pointer;
}
@media (max-width: 700px) {
.shopping-secondary-panel > summary span { display: none; }
.shopping-list-order-actions { opacity: 1; }
}
html[data-theme="dark"] .shopping-secondary-panel { background:#252a30; border-color:#3d434a; }
html[data-theme="dark"] .shopping-secondary-panel[open] > summary { border-color:#3d434a; }
html[data-theme="dark"] .shopping-list-order-actions button { background:#20252b; border-color:#41474e; color:#eee; }
/* Ajout rapide : ouvert par défaut, sans titre dupliqué. */
.shopping-smart-suggestions[open] > summary {
border-bottom: 1px solid #ece6dc;
}
.shopping-smart-suggestions-content {
padding-top: 14px !important;
}
/* =========================================================
ADMINISTRATION V2 — pilotage plus lisible et opérationnel
========================================================= */
.admin-command-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
padding: 14px 16px;
border: 1px solid #dfe5ea;
border-radius: 17px;
background: #fff;
box-shadow: 0 9px 24px rgba(40, 50, 60, .045);
}
.admin-command-copy {
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
}
.admin-command-copy > div {
display: grid;
gap: 2px;
}
.admin-command-copy strong {
color: #23303c;
font-size: .82rem;
}
.admin-command-copy small {
color: #7c8791;
font-size: .7rem;
}
.admin-live-dot {
width: 11px;
height: 11px;
flex: 0 0 auto;
border-radius: 50%;
background: #35a46b;
box-shadow: 0 0 0 5px rgba(53, 164, 107, .12);
}
.admin-command-bar nav {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 7px;
}
.admin-command-bar nav a {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 11px;
border: 1px solid #e0e5e9;
border-radius: 10px;
background: #f8fafb;
color: #4f5d69;
font-size: .7rem;
font-weight: 850;
text-decoration: none;
}
.admin-command-bar nav a:hover {
border-color: #b9c9e8;
background: #edf3ff;
color: #315f9f;
}
.admin-stat-grid-primary .admin-stat-card {
position: relative;
overflow: hidden;
min-height: 150px;
padding-top: 22px;
}
.admin-stat-grid-primary .admin-stat-card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: var(--admin-accent, #6d89bd);
}
.admin-stat-grid-primary .admin-stat-card strong {
font-size: clamp(1.7rem, 3vw, 2.2rem);
letter-spacing: -.04em;
}
.admin-stat-grid-primary .admin-stat-card a {
margin-top: auto;
color: #426ea8;
font-weight: 850;
}
.admin-stat-users { --admin-accent: #6488d1; }
.admin-stat-notes { --admin-accent: #40a277; }
.admin-stat-lists { --admin-accent: #d7a927; }
.admin-stat-shares { --admin-accent: #8b75cf; }
.admin-stat-media { --admin-accent: #dd8061; }
.admin-stat-storage { --admin-accent: #586877; }
.admin-stat-storage > i {
display: block;
height: 7px;
margin-top: auto;
overflow: hidden;
border-radius: 999px;
background: #e9edf0;
}
.admin-stat-storage > i > b {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #6386ca, #7ea6e8);
}
.admin-alerts {
display: grid;
gap: 9px;
margin: -2px 0 18px;
}
.admin-alert {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
gap: 11px;
align-items: center;
padding: 12px 14px;
border: 1px solid #e2e6e9;
border-radius: 14px;
background: #fff;
}
.admin-alert > span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 11px;
font-weight: 950;
}
.admin-alert strong { color: #2d3842; font-size: .78rem; }
.admin-alert p { margin: 3px 0 0; color: #78838d; font-size: .7rem; }
.admin-alert-warn > span { background: #fff3cf; color: #9b6b00; }
.admin-alert-danger > span { background: #ffe5e1; color: #bb463f; }
.admin-alert-info > span { background: #eaf2ff; color: #4974b5; }
.admin-secondary-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 20px;
}
.admin-secondary-metrics article {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 3px 12px;
padding: 13px 15px;
border: 1px solid #e2e6e9;
border-radius: 14px;
background: rgba(255,255,255,.72);
}
.admin-secondary-metrics span {
color: #6f7b86;
font-size: .72rem;
font-weight: 850;
}
.admin-secondary-metrics strong {
grid-column: 2;
grid-row: 1 / span 2;
color: #25313b;
font-size: 1.45rem;
}
.admin-secondary-metrics small {
color: #98a1aa;
font-size: .65rem;
}
.admin-user-recent {
margin-top: 17px;
padding-top: 16px;
border-top: 1px solid #e8ecef;
}
.admin-user-recent > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.admin-user-recent > header strong {
color: #2b3640;
font-size: .82rem;
}
.admin-user-recent > header span {
color: #939da5;
font-size: .62rem;
}
.admin-user-recent-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.admin-user-recent-grid > div {
min-width: 0;
padding: 12px;
border: 1px solid #e6eaed;
border-radius: 14px;
background: #fafbfc;
}
.admin-user-recent-grid h3 {
margin: 0 0 9px;
color: #64717c;
font-size: .68rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.admin-user-recent-grid article {
display: grid;
gap: 3px;
padding: 8px 0;
border-bottom: 1px solid #e9edf0;
}
.admin-user-recent-grid article:last-child { border-bottom: 0; }
.admin-user-recent-grid article strong {
overflow: hidden;
color: #34404a;
font-size: .72rem;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-user-recent-grid article small,
.admin-muted {
margin: 0;
color: #98a1a9;
font-size: .62rem;
}
@media (max-width: 980px) {
.admin-command-bar { align-items: flex-start; flex-direction: column; }
.admin-command-bar nav { justify-content: flex-start; }
}
@media (max-width: 720px) {
.admin-secondary-metrics,
.admin-user-recent-grid { grid-template-columns: 1fr; }
.admin-command-bar nav { display: grid; width: 100%; grid-template-columns: 1fr; }
.admin-command-bar nav a { justify-content: center; }
.admin-user-recent > header { align-items: flex-start; flex-direction: column; }
}
html[data-theme="dark"] .admin-command-bar,
html[data-theme="dark"] .admin-alert,
html[data-theme="dark"] .admin-secondary-metrics article,
html[data-theme="dark"] .admin-user-recent-grid > div {
border-color: #39424b;
background: #20262c;
}
html[data-theme="dark"] .admin-command-copy strong,
html[data-theme="dark"] .admin-alert strong,
html[data-theme="dark"] .admin-secondary-metrics strong,
html[data-theme="dark"] .admin-user-recent > header strong,
html[data-theme="dark"] .admin-user-recent-grid article strong {
color: #edf1f4;
}
html[data-theme="dark"] .admin-command-bar nav a {
border-color: #404952;
background: #282f36;
color: #d6dde3;
}
html[data-theme="dark"] .admin-user-recent-grid article {
border-color: #374049;
}
/* =========================================================
NOTE-BLOC — ADMINISTRATION APPROFONDIE, ÉTAPE 2
Activité, contenus détaillés et diagnostic renforcé.
========================================================= */
.admin-activity-stack {
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
align-self: end;
width: 100%;
min-height: 4px;
max-height: 100%;
overflow: hidden;
border-radius: 7px 7px 2px 2px;
}
.admin-activity-stack i {
display: block;
width: 100%;
min-height: 3px;
}
.admin-activity-stack .is-note { background: linear-gradient(180deg,#6f96ea,#8aa8eb); }
.admin-activity-stack .is-list { background: #52606e; }
.admin-ranking-panel { margin-top: 20px; overflow: hidden; }
.admin-ranking-panel > header > span,
.health-database-panel > header > span { align-self: center; color: #87919a; font-size: .72rem; }
.admin-ranking-list { display: grid; }
.admin-ranking-row {
display: grid;
grid-template-columns: 38px minmax(0,1fr) auto auto 46px;
gap: 14px;
align-items: center;
padding: 14px 18px;
border-top: 1px solid #edf0f2;
color: inherit;
text-decoration: none;
}
.admin-ranking-row:first-child { border-top: 0; }
.admin-ranking-row:hover { background: #fafbfc; }
.admin-ranking-row > b {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 10px;
background: #edf3ff;
color: #5c7eb9;
}
.admin-ranking-row > div { min-width: 0; }
.admin-ranking-row strong,
.admin-ranking-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-ranking-row small { margin-top: 3px; color: #8d97a0; }
.admin-ranking-row > span { color: #697681; font-size: .75rem; }
.admin-ranking-row > em {
display: grid;
place-items: center;
min-width: 38px;
height: 30px;
border-radius: 999px;
background: #202d39;
color: #fff;
font-style: normal;
font-weight: 900;
}
.admin-content-summary {
display: grid;
grid-template-columns: repeat(5,minmax(0,1fr));
gap: 10px;
margin-bottom: 16px;
}
.admin-content-summary article {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 66px;
padding: 14px 16px;
border: 1px solid #e0e5e9;
border-radius: 15px;
background: #fff;
}
.admin-content-summary span { color: #74808a; font-size: .75rem; font-weight: 800; }
.admin-content-summary strong { font-size: 1.35rem; }
details.admin-content-row { display: block; padding: 0; }
details.admin-content-row > summary {
display: grid;
grid-template-columns: 44px minmax(0,1fr) auto;
gap: 13px;
align-items: center;
padding: 15px 18px;
cursor: pointer;
list-style: none;
}
details.admin-content-row > summary::-webkit-details-marker { display: none; }
details.admin-content-row[open] > summary { background: #fafbfc; }
.admin-content-copy > div { flex-wrap: wrap; }
.admin-content-copy em.is-deadline { background: #fff0e7; color: #a85724; }
.admin-content-details {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
gap: 14px 22px;
padding: 0 18px 18px 75px;
border-top: 1px dashed #e4e8eb;
background: #fafbfc;
}
.admin-content-details > div:first-child { padding-top: 14px; }
.admin-content-details > div:first-child > span { color: #75818b; font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.admin-content-details p { margin: 7px 0 0; color: #3f4b55; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-content-details dl { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 0; }
.admin-content-details dl > div { min-width: 115px; }
.admin-content-details dt { color: #929ca5; font-size: .66rem; }
.admin-content-details dd { margin: 3px 0 0; color: #47535d; font-size: .75rem; font-weight: 800; }
.admin-content-details > a { grid-column: 1/-1; justify-self: start; color: #557bb9; font-size: .76rem; font-weight: 850; text-decoration: none; }
.health-database-panel { margin-top: 20px; overflow: hidden; }
.health-database-list { display: grid; }
.health-database-list article {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 14px 20px;
border-top: 1px solid var(--border-color,rgba(128,128,128,.16));
}
.health-database-list article:first-child { border-top: 0; }
.health-database-list strong,
.health-database-list small { display: block; }
.health-database-list small { margin-top: 3px; color: var(--muted-color,#7d8790); }
.health-database-list > article > span { color: #5979ad; font-weight: 900; white-space: nowrap; }
@media (max-width: 850px) {
.admin-content-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
.admin-content-summary article:last-child { grid-column: 1/-1; }
.admin-ranking-row { grid-template-columns: 34px minmax(0,1fr) 42px; gap: 10px; }
.admin-ranking-row > span { display: none; }
}
@media (max-width: 650px) {
details.admin-content-row > summary { grid-template-columns: 42px minmax(0,1fr); }
details.admin-content-row .admin-content-meta { grid-column: 2; }
.admin-content-details { grid-template-columns: 1fr; padding: 0 14px 16px 56px; }
.admin-content-details dl { display: grid; grid-template-columns: 1fr 1fr; }
.admin-ranking-row { padding-inline: 14px; }
}
@media (max-width: 420px) {
.admin-content-summary { grid-template-columns: 1fr 1fr; }
.admin-content-details { padding-left: 14px; }
}
@media (prefers-color-scheme:dark) {
body:not([data-theme="light"]) .admin-content-summary article { border-color:#374552; background:#202b35; }
body:not([data-theme="light"]) details.admin-content-row[open] > summary,
body:not([data-theme="light"]) .admin-content-details,
body:not([data-theme="light"]) .admin-ranking-row:hover { background:#26323d; }
body:not([data-theme="light"]) .admin-content-details { border-color:#3b4751; }
body:not([data-theme="light"]) .admin-content-details p,
body:not([data-theme="light"]) .admin-content-details dd { color:#e2e8ed; }
}
body[data-theme="dark"] .admin-content-summary article { border-color:#374552; background:#202b35; }
body[data-theme="dark"] details.admin-content-row[open] > summary,
body[data-theme="dark"] .admin-content-details,
body[data-theme="dark"] .admin-ranking-row:hover { background:#26323d; }
body[data-theme="dark"] .admin-content-details { border-color:#3b4751; }
body[data-theme="dark"] .admin-content-details p,
body[data-theme="dark"] .admin-content-details dd { color:#e2e8ed; }
/* =========================================================
ADMINISTRATION — ÉTAPE 3 : MODÉRATION ET JOURNAL D’AUDIT
========================================================= */
.admin-account-row em.is-suspended {
background: #fff0ed;
color: #b44b42;
}
.admin-user-status-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.admin-user-status.is-active strong { color: #31875a; }
.admin-user-status.is-suspended strong { color: #b94d43; }
.admin-suspension-note {
margin-top: 12px;
padding: 14px 16px;
border: 1px solid #efd0ca;
border-radius: 14px;
background: #fff5f2;
}
.admin-suspension-note strong { color: #a7443c; }
.admin-suspension-note p { margin: 5px 0 0; color: #76534e; line-height: 1.45; }
.admin-account-actions {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid #e3e7ea;
}
.admin-account-actions > header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
margin-bottom: 12px;
}
.admin-account-actions > header strong { font-size: .93rem; }
.admin-account-actions > header span { color: #87919a; font-size: .68rem; }
.admin-account-action-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 10px;
}
.admin-action-card {
display: flex;
flex-direction: column;
align-items: stretch;
min-width: 0;
padding: 14px;
border: 1px solid #dfe5e9;
border-radius: 15px;
background: #fbfcfd;
}
.admin-action-card strong { font-size: .82rem; }
.admin-action-card p { flex: 1; margin: 5px 0 11px; color: #78838c; font-size: .7rem; line-height: 1.45; }
.admin-action-card input[type="text"] {
width: 100%;
min-width: 0;
height: 38px;
margin-bottom: 8px;
padding: 0 10px;
border: 1px solid #d7dde2;
border-radius: 10px;
background: #fff;
font: inherit;
font-size: .72rem;
}
.admin-action-card button {
min-height: 38px;
padding: 0 12px;
border: 0;
border-radius: 10px;
background: #263746;
color: #fff;
font-weight: 850;
cursor: pointer;
}
.admin-action-danger { border-color: #efd1cb; background: #fff8f6; }
.admin-action-danger button { background: #b84c42; }
.admin-action-warn { border-color: #eadbad; background: #fffaf0; }
.admin-action-warn button { background: #9a721b; }
.admin-action-success { border-color: #cae6d4; background: #f4fbf6; }
.admin-action-success button { background: #367f53; }
.admin-audit-filter { grid-template-columns: minmax(220px,360px) auto; }
.admin-audit-filter select {
width: 100%;
min-height: 46px;
padding: 0 38px 0 13px;
border: 1px solid #dce2e6;
border-radius: 13px;
background: #fff;
color: #34414b;
font: inherit;
}
.admin-audit-panel { margin-top: 18px; }
.admin-audit-panel > header > span { color: #84909a; font-size: .72rem; }
.admin-audit-list { display: grid; }
.admin-audit-entry {
display: grid;
grid-template-columns: 36px minmax(0,1fr);
gap: 12px;
padding: 15px 20px;
border-top: 1px solid #e6eaed;
}
.admin-audit-entry:first-child { border-top: 0; }
.admin-audit-icon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 11px;
background: #edf2f7;
color: #617b98;
font-size: 1.2rem;
}
.admin-audit-user_suspend .admin-audit-icon { background: #fff0ed; color: #b64b42; }
.admin-audit-user_reactivate .admin-audit-icon { background: #eaf7ef; color: #3e8b5c; }
.admin-audit-shares_revoke .admin-audit-icon { background: #fff6dc; color: #9b711a; }
.admin-audit-copy > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.admin-audit-copy time { color: #8b959d; font-size: .68rem; white-space: nowrap; }
.admin-audit-copy p { margin: 4px 0 0; color: #66737d; font-size: .75rem; }
.admin-audit-copy p a { color: #557bb9; font-weight: 850; text-decoration: none; }
.admin-audit-copy small { display: block; margin-top: 6px; color: #8a6d57; line-height: 1.45; }
.admin-metric-date { font-size: 1.2rem !important; }
@media (max-width: 700px) {
.admin-user-status-grid,
.admin-account-action-grid { grid-template-columns: 1fr; }
.admin-account-actions > header,
.admin-audit-copy > div { align-items: flex-start; flex-direction: column; }
.admin-audit-filter { grid-template-columns: 1fr; }
.admin-audit-entry { padding-inline: 14px; }
}
@media (prefers-color-scheme:dark) {
body:not([data-theme="light"]) .admin-action-card,
body:not([data-theme="light"]) .admin-audit-filter select { border-color:#3b4853; background:#202b35; color:#edf1f4; }
body:not([data-theme="light"]) .admin-action-card input[type="text"] { border-color:#46535e; background:#18222b; color:#edf1f4; }
body:not([data-theme="light"]) .admin-suspension-note { border-color:#67433e; background:#352725; }
body:not([data-theme="light"]) .admin-suspension-note p { color:#d5b5ae; }
body:not([data-theme="light"]) .admin-account-actions { border-color:#3a4650; }
body:not([data-theme="light"]) .admin-audit-entry { border-color:#394651; }
}
body[data-theme="dark"] .admin-action-card,
body[data-theme="dark"] .admin-audit-filter select { border-color:#3b4853; background:#202b35; color:#edf1f4; }
body[data-theme="dark"] .admin-action-card input[type="text"] { border-color:#46535e; background:#18222b; color:#edf1f4; }
body[data-theme="dark"] .admin-suspension-note { border-color:#67433e; background:#352725; }
body[data-theme="dark"] .admin-suspension-note p { color:#d5b5ae; }
body[data-theme="dark"] .admin-account-actions { border-color:#3a4650; }
body[data-theme="dark"] .admin-audit-entry { border-color:#394651; }
/* Administration — modération des contenus */
.admin-content-footer {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 14px;
padding-top: 13px;
border-top: 1px solid #edf0f2;
}
.admin-content-footer > a {
color: #557bb9;
font-size: .76rem;
font-weight: 850;
text-decoration: none;
}
.admin-content-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 7px;
}
.admin-content-actions form { margin: 0; }
.admin-content-action {
min-height: 34px;
padding: 0 11px;
border: 1px solid #dbe2e7;
border-radius: 9px;
background: #f7f9fa;
color: #4b5964;
font: inherit;
font-size: .7rem;
font-weight: 850;
cursor: pointer;
}
.admin-content-action:hover { background: #eef3f6; }
.admin-content-action.is-success {
border-color: #c8e4d1;
background: #eff9f2;
color: #347c50;
}
.admin-content-action.is-danger {
border-color: #efd0cb;
background: #fff3f1;
color: #b2473e;
}
.admin-content-action.is-warning {
border-color: #eadbae;
background: #fff9e9;
color: #916b18;
}
.admin-content-action:disabled { opacity: .55; cursor: wait; }
@media (max-width: 760px) {
.admin-content-footer {
align-items: stretch;
flex-direction: column;
}
.admin-content-actions {
display: grid;
grid-template-columns: 1fr 1fr;
justify-content: stretch;
}
.admin-content-action { width: 100%; }
}
body[data-theme="dark"] .admin-content-footer,
body:not([data-theme="light"]) .admin-content-footer { border-color: #3b4751; }
body[data-theme="dark"] .admin-content-action,
body:not([data-theme="light"]) .admin-content-action {
border-color: #46535e;
background: #25313b;
color: #e5ebef;
}
body[data-theme="dark"] .admin-content-action.is-success,
body:not([data-theme="light"]) .admin-content-action.is-success {
border-color: #365e45;
background: #23372b;
color: #a9dbb9;
}
body[data-theme="dark"] .admin-content-action.is-danger,
body:not([data-theme="light"]) .admin-content-action.is-danger {
border-color: #65413d;
background: #392725;
color: #edb1aa;
}
body[data-theme="dark"] .admin-content-action.is-warning,
body:not([data-theme="light"]) .admin-content-action.is-warning {
border-color: #625535;
background: #383121;
color: #e4ca82;
}
/* Administration — maintenance */
.admin-maintenance-stats{margin-bottom:22px}.admin-maintenance-grid{align-items:start}.admin-maintenance-list{display:grid;gap:9px}.admin-maintenance-list article{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 13px;border:1px solid rgba(35,45,55,.10);border-radius:14px;background:rgba(255,255,255,.72)}.admin-maintenance-list article>div{min-width:0;display:grid;gap:3px}.admin-maintenance-list strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-maintenance-list small{color:#77808a}.admin-maintenance-list form{margin:0}.admin-maintenance-command{display:grid;gap:6px;margin-top:16px;padding:14px;border-radius:15px;background:#f5f2e9}.admin-maintenance-command code{display:block;padding:10px;border-radius:10px;background:#1e252c;color:#f0f3f5;overflow:auto}.admin-maintenance-command small{color:#737a80}.admin-maintenance-breakdown{display:grid;gap:8px;margin:15px 0}.admin-maintenance-breakdown span{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 12px;border-radius:12px;background:#f7f8f8}.admin-maintenance-breakdown b{font-size:1rem}.admin-panel form .button[disabled]{opacity:.45;cursor:not-allowed}.admin-empty-state{padding:22px;border:1px dashed #d7dce0;border-radius:14px;text-align:center;color:#747d85}:root[data-theme="dark"] .admin-maintenance-list article,:root[data-theme="dark"] .admin-maintenance-breakdown span,:root[data-theme="dark"] .admin-maintenance-command{background:#252b31;border-color:#3c444d}:root[data-theme="dark"] .admin-maintenance-command code{background:#11161b}@media(max-width:700px){.admin-maintenance-list article{align-items:flex-start;flex-direction:column}.admin-maintenance-list article form,.admin-maintenance-list article button{width:100%}}
/* =========================================================
ADMINISTRATION — ÉTAPE 6 : SUPERVISION ET ALERTES
========================================================= */
.admin-supervision-state {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 14px;
border: 1px solid rgba(33, 45, 56, .12);
border-radius: 999px;
background: rgba(255,255,255,.72);
color: #52606c;
font-size: .76rem;
font-weight: 900;
white-space: nowrap;
}
.admin-supervision-state i {
width: 9px;
height: 9px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 5px rgba(82,96,108,.10);
}
.admin-supervision-state-healthy { color: #31835a; }
.admin-supervision-state-watch { color: #9b6a00; }
.admin-supervision-state-critical { color: #b5443d; }
.admin-supervision-hero {
display: grid;
grid-template-columns: 108px minmax(0,1fr) auto;
align-items: center;
gap: 24px;
margin-bottom: 22px;
padding: 24px;
border: 1px solid rgba(36,48,58,.10);
border-radius: 22px;
background: linear-gradient(135deg,#f6faf8,#fff);
box-shadow: 0 12px 30px rgba(35,45,55,.05);
}
.admin-supervision-hero-watch { background: linear-gradient(135deg,#fff9e9,#fff); }
.admin-supervision-hero-critical { background: linear-gradient(135deg,#fff1ef,#fff); }
.admin-supervision-score {
--score: 0%;
position: relative;
display: grid;
place-content: center;
width: 96px;
height: 96px;
border-radius: 50%;
background: conic-gradient(#42a56b var(--score),#e8ece9 0);
text-align: center;
}
.admin-supervision-score::before {
content: "";
position: absolute;
inset: 9px;
border-radius: 50%;
background: #fff;
}
.admin-supervision-score strong,
.admin-supervision-score span { position: relative; z-index: 1; }
.admin-supervision-score strong { font-size: 1.65rem; line-height: 1; }
.admin-supervision-score span { color: #7e8992; font-size: .68rem; }
.admin-supervision-hero h2 { margin: 2px 0 5px; font-size: 1.7rem; }
.admin-supervision-hero p:last-child { margin: 0; color: #707c85; }
.admin-supervision-hero nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.admin-supervision-hero nav a {
padding: 9px 12px;
border: 1px solid #dfe5e2;
border-radius: 11px;
background: #fff;
color: #3f4b54;
font-size: .75rem;
font-weight: 850;
text-decoration: none;
}
.admin-supervision-stats { margin-bottom: 22px; }
.admin-supervision-value-small { font-size: 1.25rem !important; }
.admin-supervision-alert-panel { margin-bottom: 22px; }
.admin-supervision-alert-list { display: grid; gap: 9px; }
.admin-supervision-alert {
display: grid;
grid-template-columns: 36px minmax(0,1fr) 24px;
align-items: center;
gap: 12px;
padding: 13px 14px;
border: 1px solid #e2e7e4;
border-radius: 14px;
color: inherit;
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease;
}
.admin-supervision-alert:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(35,45,55,.07); }
.admin-supervision-alert > span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 11px;
font-weight: 900;
}
.admin-supervision-alert strong { font-size: .8rem; }
.admin-supervision-alert p { margin: 3px 0 0; color: #75818a; font-size: .72rem; }
.admin-supervision-alert > b { color: #929ca4; }
.admin-supervision-alert-danger > span { background: #ffe7e3; color: #b8443d; }
.admin-supervision-alert-warn > span { background: #fff2cc; color: #986800; }
.admin-supervision-alert-info > span { background: #eaf2ff; color: #4d76b5; }
.admin-supervision-clear {
display: flex;
align-items: center;
gap: 13px;
padding: 18px;
border: 1px dashed #cfdcd4;
border-radius: 15px;
background: #f7fbf8;
}
.admin-supervision-clear > span {
display: grid;
place-items: center;
flex: 0 0 38px;
height: 38px;
border-radius: 12px;
background: #e5f5eb;
color: #33825a;
font-weight: 900;
}
.admin-supervision-clear p { margin: 3px 0 0; color: #748079; font-size: .73rem; }
.admin-supervision-grid { align-items: start; margin-bottom: 22px; }
.admin-supervision-users { display: grid; gap: 7px; }
.admin-supervision-users a {
display: grid;
grid-template-columns: 38px minmax(0,1fr) auto;
align-items: center;
gap: 10px;
padding: 10px;
border-radius: 12px;
color: inherit;
text-decoration: none;
}
.admin-supervision-users a:hover { background: #f5f7f8; }
.admin-supervision-users div { min-width: 0; display: grid; gap: 2px; }
.admin-supervision-users small { overflow: hidden; color: #7b8790; text-overflow: ellipsis; white-space: nowrap; }
.admin-supervision-users > a > b { color: #66737c; font-size: .72rem; white-space: nowrap; }
.admin-supervision-operations { display: grid; }
.admin-supervision-operations article {
display: grid;
grid-template-columns: 24px minmax(0,1fr);
gap: 9px;
padding: 11px 0;
border-top: 1px solid rgba(35,45,55,.08);
}
.admin-supervision-operations article:first-child { border-top: 0; }
.admin-supervision-operations article > span {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 8px;
background: #eef2f5;
color: #687680;
}
.admin-supervision-operations div { min-width: 0; }
.admin-supervision-operations small { display: block; margin-top: 2px; color: #838e96; }
.admin-supervision-operations p { margin: 5px 0 0; color: #72685d; font-size: .71rem; }
.admin-supervision-errors { margin-bottom: 22px; scroll-margin-top: 18px; }
.admin-supervision-error-list { display: grid; gap: 8px; }
.admin-supervision-error-list article {
display: grid;
grid-template-columns: 120px minmax(0,1fr);
gap: 10px;
padding: 10px 12px;
border: 1px solid rgba(36,48,58,.10);
border-radius: 12px;
background: #f8f9fa;
}
.admin-supervision-error-list span {
overflow: hidden;
color: #7a8790;
font-size: .7rem;
font-weight: 850;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-supervision-error-list code {
overflow-wrap: anywhere;
color: #4b555e;
font-size: .7rem;
white-space: pre-wrap;
}
.admin-supervision-secondary { margin-top: 0; }
:root[data-theme="dark"] .admin-supervision-state,
:root[data-theme="dark"] .admin-supervision-hero,
:root[data-theme="dark"] .admin-supervision-alert,
:root[data-theme="dark"] .admin-supervision-clear,
:root[data-theme="dark"] .admin-supervision-error-list article {
border-color: #394650;
background: #202a33;
}
:root[data-theme="dark"] .admin-supervision-score::before { background: #202a33; }
:root[data-theme="dark"] .admin-supervision-hero nav a { border-color: #3b4852; background: #27323c; color: #eef2f4; }
:root[data-theme="dark"] .admin-supervision-hero p:last-child,
:root[data-theme="dark"] .admin-supervision-alert p,
:root[data-theme="dark"] .admin-supervision-clear p,
:root[data-theme="dark"] .admin-supervision-users small,
:root[data-theme="dark"] .admin-supervision-error-list span { color: #aeb8bf; }
:root[data-theme="dark"] .admin-supervision-users a:hover { background: #27323b; }
:root[data-theme="dark"] .admin-supervision-operations article { border-color: #394650; }
:root[data-theme="dark"] .admin-supervision-error-list code { color: #dce3e8; }
@media (max-width: 900px) {
.admin-supervision-hero { grid-template-columns: 88px minmax(0,1fr); }
.admin-supervision-score { width: 82px; height: 82px; }
.admin-supervision-hero nav { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 620px) {
.admin-supervision-state { width: 100%; justify-content: center; }
.admin-supervision-hero { grid-template-columns: 1fr; text-align: center; }
.admin-supervision-score { margin: 0 auto; }
.admin-supervision-hero nav { justify-content: center; }
.admin-supervision-alert { grid-template-columns: 34px minmax(0,1fr); }
.admin-supervision-alert > b { display: none; }
.admin-supervision-error-list article { grid-template-columns: 1fr; }
.admin-supervision-users a { grid-template-columns: 38px minmax(0,1fr); }
.admin-supervision-users > a > b { grid-column: 2; }
}
/* =========================================================
ADMINISTRATION — ÉTAPE 7 : RAPPORTS ET EXPORTS
========================================================= */
.admin-heading-actions {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
}
.admin-report-period {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 20px;
padding: 12px 14px;
border: 1px solid #e4e8ec;
border-radius: 15px;
background: #fff;
box-shadow: 0 8px 24px rgba(31, 41, 51, .04);
}
.admin-report-period label {
color: #66717b;
font-size: .78rem;
font-weight: 850;
}
.admin-report-period select {
min-width: 190px;
height: 40px;
padding: 0 36px 0 12px;
border: 1px solid #d9dfe4;
border-radius: 11px;
background: #fff;
color: #26313a;
font: inherit;
}
.admin-report-period button {
height: 40px;
padding: 0 14px;
border: 0;
border-radius: 11px;
background: #1f2a33;
color: #fff;
font-weight: 800;
cursor: pointer;
}
.admin-report-chart-panel {
margin-bottom: 22px;
}
.admin-report-chart-panel > header > span {
color: #89929a;
font-size: .75rem;
font-weight: 750;
}
.admin-report-chart {
display: flex;
align-items: flex-end;
gap: clamp(3px, .55vw, 9px);
min-height: 230px;
padding: 18px 4px 0;
overflow-x: auto;
border-bottom: 1px solid #e6eaee;
}
.admin-report-bar {
display: grid;
grid-template-rows: 190px 24px;
align-items: end;
justify-items: center;
flex: 1 0 12px;
min-width: 12px;
}
.admin-report-bar > span {
position: relative;
display: block;
width: min(22px, 100%);
min-height: 4px;
overflow: hidden;
border-radius: 7px 7px 2px 2px;
background: #e0b432;
}
.admin-report-bar > span > i {
position: absolute;
inset: 0 0 auto;
display: block;
height: var(--notes-share);
background: #546fdf;
}
.admin-report-bar small {
min-width: 30px;
color: #8a939b;
font-size: .6rem;
text-align: center;
transform: rotate(-35deg);
transform-origin: center;
}
.admin-report-legend {
display: flex;
gap: 16px;
justify-content: flex-end;
padding-top: 13px;
color: #68737c;
font-size: .75rem;
}
.admin-report-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.admin-report-legend i {
width: 10px;
height: 10px;
border-radius: 3px;
}
.admin-report-legend .is-notes { background: #546fdf; }
.admin-report-legend .is-lists { background: #e0b432; }
.admin-report-ranking {
display: grid;
gap: 7px;
}
.admin-report-ranking a {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 10px 11px;
border: 1px solid #e8ebee;
border-radius: 13px;
color: inherit;
text-decoration: none;
}
.admin-report-ranking a:hover {
border-color: #cfd7df;
background: #f8fafb;
}
.admin-report-ranking a > b {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 10px;
background: #edf1ff;
color: #5267bf;
}
.admin-report-ranking span,
.admin-report-ranking strong,
.admin-report-ranking small {
display: block;
min-width: 0;
}
.admin-report-ranking small {
margin-top: 2px;
color: #87919a;
font-size: .7rem;
}
.admin-report-ranking em {
color: #27323b;
font-size: .9rem;
font-style: normal;
font-weight: 900;
}
.admin-report-categories {
display: grid;
gap: 13px;
}
.admin-report-categories article > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
}
.admin-report-categories article span {
color: #87919a;
font-size: .72rem;
}
.admin-report-categories article > i {
display: block;
height: 7px;
overflow: hidden;
border-radius: 999px;
background: #edf0f2;
}
.admin-report-categories article > i > b {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #536cdb, #7f95ec);
}
.admin-empty-state {
margin: 0;
padding: 25px 12px;
color: #8a939a;
text-align: center;
}
html[data-theme="dark"] .admin-report-period,
html[data-theme="dark"] .admin-report-ranking a {
border-color: #3c444c;
background: #21272d;
}
html[data-theme="dark"] .admin-report-period select {
border-color: #454d55;
background: #171c21;
color: #edf1f4;
}
html[data-theme="dark"] .admin-report-ranking a:hover {
background: #272e35;
}
html[data-theme="dark"] .admin-report-ranking em {
color: #eef2f5;
}
html[data-theme="dark"] .admin-report-categories article > i,
html[data-theme="dark"] .admin-report-chart {
border-color: #3d454c;
background-color: transparent;
}
@media (max-width: 760px) {
.admin-heading-actions {
display: grid;
}
.admin-heading-actions .button {
width: 100%;
justify-content: center;
}
.admin-report-period {
display: grid;
grid-template-columns: 1fr auto;
}
.admin-report-period label {
grid-column: 1 / -1;
}
.admin-report-period select {
min-width: 0;
width: 100%;
}
.admin-report-chart {
min-height: 210px;
}
.admin-report-bar {
flex-basis: 16px;
}
}
/* =========================================================
ADMINISTRATION — CENTRE D’ALERTES
========================================================= */
.admin-nav-alert-count {
display: inline-grid;
place-items: center;
min-width: 21px;
height: 21px;
margin-left: auto;
padding: 0 6px;
border-radius: 999px;
background: #d94e45;
color: #fff;
font-size: .65rem;
font-weight: 900;
line-height: 1;
}
.admin-alert-center-metrics { margin-bottom: 18px; }
.admin-alert-filters {
grid-template-columns: minmax(180px,260px) minmax(180px,260px) auto;
margin-bottom: 18px;
}
.admin-alert-filters select {
min-height: 46px;
padding: 0 40px 0 13px;
border: 1px solid #dfe5e9;
border-radius: 12px;
background: #fff;
color: #34414b;
font: inherit;
}
.admin-alert-center-grid {
display: grid;
grid-template-columns: minmax(0,1.55fr) minmax(300px,.75fr);
gap: 22px;
align-items: start;
}
.admin-alert-center-list-panel > header > span,
.admin-alert-history-panel > header > span { color:#84909a; font-size:.72rem; }
.admin-alert-center-list { display:grid; gap:10px; }
.admin-alert-incident {
display: grid;
grid-template-columns: 38px minmax(0,1fr) minmax(190px,240px);
gap: 12px;
align-items: start;
padding: 15px;
border: 1px solid #e3e8eb;
border-radius: 16px;
background: #fff;
}
.admin-alert-incident.is-acknowledged { background:#fbfcfc; opacity:.88; }
.admin-alert-incident.is-resolved { background:#f7faf8; opacity:.75; }
.admin-alert-incident-icon {
display:grid;
place-items:center;
width:36px;
height:36px;
border-radius:11px;
font-weight:900;
}
.admin-alert-incident-danger .admin-alert-incident-icon { background:#ffe6e2; color:#b5423c; }
.admin-alert-incident-warn .admin-alert-incident-icon { background:#fff2c9; color:#966600; }
.admin-alert-incident-info .admin-alert-incident-icon { background:#e9f2ff; color:#4b75b4; }
.admin-alert-incident-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.admin-alert-incident-heading strong { color:#2d3842; font-size:.84rem; }
.admin-alert-incident-heading span {
flex:0 0 auto;
padding:4px 8px;
border-radius:999px;
background:#eef2f4;
color:#68747d;
font-size:.62rem;
font-weight:850;
text-transform:uppercase;
}
.admin-alert-incident-copy p { margin:5px 0 7px; color:#67747d; font-size:.75rem; line-height:1.5; }
.admin-alert-incident-copy small { display:block; color:#8b959c; font-size:.66rem; line-height:1.45; }
.admin-alert-ack-note { margin-top:6px; color:#6d7e70 !important; }
.admin-alert-incident-actions { display:grid; gap:8px; }
.admin-alert-incident-actions > a {
display:flex;
align-items:center;
justify-content:center;
min-height:38px;
border:1px solid #dce3e7;
border-radius:10px;
color:#4f6f9e;
text-decoration:none;
font-size:.72rem;
font-weight:850;
}
.admin-alert-incident-actions form { display:grid; gap:7px; }
.admin-alert-incident-actions input {
width:100%;
min-width:0;
height:38px;
padding:0 10px;
border:1px solid #dfe5e9;
border-radius:10px;
background:#fff;
font:inherit;
font-size:.72rem;
}
.admin-alert-incident-actions button {
min-height:38px;
border:0;
border-radius:10px;
background:#293643;
color:#fff;
font-size:.72rem;
font-weight:850;
cursor:pointer;
}
.admin-alert-incident-actions button.is-secondary { background:#eef2f4; color:#4f5c66; }
.admin-alert-event-list { display:grid; }
.admin-alert-event-list article {
display:grid;
grid-template-columns:12px minmax(0,1fr);
gap:10px;
padding:13px 0;
border-top:1px solid #edf0f2;
}
.admin-alert-event-list article:first-child { border-top:0; }
.admin-alert-event-dot { width:9px; height:9px; margin-top:5px; border-radius:50%; background:#6f8db7; }
.admin-alert-event-list strong { display:block; color:#34414b; font-size:.75rem; }
.admin-alert-event-list p { margin:3px 0; color:#6f7c85; font-size:.69rem; }
.admin-alert-event-list small { display:block; color:#8a725d; font-size:.66rem; line-height:1.4; }
.admin-alert-event-list time { display:block; margin-top:4px; color:#98a1a8; font-size:.62rem; }
:root[data-theme="dark"] .admin-alert-filters select,
:root[data-theme="dark"] .admin-alert-incident,
:root[data-theme="dark"] .admin-alert-incident-actions input {
border-color:#394650;
background:#202a33;
color:#edf1f4;
}
:root[data-theme="dark"] .admin-alert-incident.is-acknowledged,
:root[data-theme="dark"] .admin-alert-incident.is-resolved { background:#1d262e; }
:root[data-theme="dark"] .admin-alert-incident-heading strong,
:root[data-theme="dark"] .admin-alert-event-list strong { color:#edf1f4; }
:root[data-theme="dark"] .admin-alert-incident-copy p,
:root[data-theme="dark"] .admin-alert-event-list p { color:#aeb8bf; }
:root[data-theme="dark"] .admin-alert-event-list article { border-color:#394650; }
:root[data-theme="dark"] .admin-alert-incident-actions > a { border-color:#44525d; color:#a9c5ef; }
@media (max-width:1100px) {
.admin-alert-center-grid { grid-template-columns:1fr; }
.admin-alert-history-panel { order:2; }
}
@media (max-width:760px) {
.admin-alert-filters { grid-template-columns:1fr; }
.admin-alert-incident { grid-template-columns:36px minmax(0,1fr); }
.admin-alert-incident-actions { grid-column:1 / -1; }
.admin-alert-incident-heading { align-items:flex-start; flex-direction:column; }
}
/* =========================================================
ADMINISTRATION ÉTAPE 9 — CONFIGURATION CENTRALISÉE
========================================================= */
.admin-settings-form{display:grid;gap:18px}.admin-settings-section{overflow:visible}.admin-settings-section>header{align-items:flex-start}.admin-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.admin-settings-grid-four{grid-template-columns:repeat(4,minmax(0,1fr))}.admin-settings-grid>label{display:grid;align-content:start;gap:6px;padding:15px;border:1px solid #e6e9ed;border-radius:16px;background:#fbfcfd}.admin-settings-grid>label>span{font-weight:850;color:#202a35}.admin-settings-grid>label>small{min-height:34px;color:#727c87;line-height:1.4}.admin-settings-grid>label>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}.admin-settings-grid input{width:100%;height:44px;padding:0 12px;border:1px solid #d8dee5;border-radius:11px;background:#fff;color:#17212c;font:inherit;font-weight:750;outline:0}.admin-settings-grid input:focus{border-color:#5279d8;box-shadow:0 0 0 4px rgba(82,121,216,.12)}.admin-settings-grid label b{min-width:30px;color:#79828c;font-size:.78rem}.admin-settings-toggles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.admin-settings-toggles label{display:flex;align-items:flex-start;gap:11px;padding:14px;border:1px solid #e6e9ed;border-radius:15px;background:#fbfcfd;cursor:pointer}.admin-settings-toggles input{width:20px;height:20px;margin:1px 0 0;accent-color:#416fd0}.admin-settings-toggles span{display:grid;gap:3px}.admin-settings-toggles b{color:#202a35}.admin-settings-toggles small{color:#77818c;line-height:1.35}.admin-settings-actions{display:flex;justify-content:flex-end;gap:10px}.admin-settings-reset{display:flex;justify-content:flex-end;margin-top:-8px}.admin-settings-migration{margin-bottom:18px}.admin-settings-migration code{font-weight:850}.admin-settings-form button:disabled,.admin-settings-reset button:disabled{opacity:.45;cursor:not-allowed}
:root[data-theme="dark"] .admin-settings-grid>label,:root[data-theme="dark"] .admin-settings-toggles label{border-color:#3d454f;background:#222930}:root[data-theme="dark"] .admin-settings-grid>label>span,:root[data-theme="dark"] .admin-settings-toggles b{color:#eef2f5}:root[data-theme="dark"] .admin-settings-grid>label>small,:root[data-theme="dark"] .admin-settings-toggles small{color:#aab2bb}:root[data-theme="dark"] .admin-settings-grid input{border-color:#46505b;background:#171d23;color:#f2f4f6}
@media(max-width:1050px){.admin-settings-grid-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.admin-settings-grid,.admin-settings-grid-four,.admin-settings-toggles{grid-template-columns:1fr}.admin-settings-grid>label>small{min-height:0}.admin-settings-actions,.admin-settings-reset{justify-content:stretch}.admin-settings-actions button,.admin-settings-reset button{width:100%}}
/* =========================================================
ADMINISTRATION — PASSE GLOBALE 2026
Navigation unifiée, lisibilité et comportement mobile.
========================================================= */
.admin-mobile-nav-toggle {
display: none;
}
.admin-sidebar nav a {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-height: 44px;
}
.admin-nav-icon {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 9px;
background: rgba(255,255,255,.07);
font-size: .9rem;
}
.admin-sidebar nav a.is-active .admin-nav-icon {
background: rgba(255,255,255,.16);
}
.admin-nav-alert-count {
display: grid;
place-items: center;
min-width: 23px;
height: 23px;
padding: 0 6px;
border-radius: 999px;
background: #e94e59;
color: #fff;
font-size: .7rem;
font-weight: 900;
}
.admin-nav-alert-count[hidden] {
display: none !important;
}
.admin-nav-return {
margin-top: 10px;
border-top: 1px solid rgba(255,255,255,.09);
}
.admin-sidebar-status {
display: grid;
grid-template-columns: 28px minmax(0,1fr);
gap: 10px;
align-items: center;
margin-top: 18px;
padding: 12px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 14px;
background: rgba(255,255,255,.045);
}
.admin-sidebar-status > span {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
font-weight: 900;
}
.admin-sidebar-status.is-ready > span {
background: rgba(69,190,121,.16);
color: #62d596;
}
.admin-sidebar-status.is-warning > span {
background: rgba(247,190,54,.16);
color: #ffd15b;
}
.admin-sidebar-status strong,
.admin-sidebar-status small {
display: block;
}
.admin-sidebar-status strong {
font-size: .75rem;
}
.admin-sidebar-status small {
margin-top: 2px;
color: rgba(255,255,255,.58);
font-size: .65rem;
line-height: 1.35;
}
.admin-main > .flash,
.admin-main > .alert {
max-width: 100%;
}
.admin-main table {
width: 100%;
}
.admin-main input,
.admin-main select,
.admin-main textarea,
.admin-main button {
max-width: 100%;
}
@media (max-width: 980px) {
.admin-shell {
display: block !important;
}
.admin-mobile-nav-toggle {
position: sticky;
top: 0;
z-index: 90;
display: inline-flex;
align-items: center;
gap: 8px;
width: calc(100% - 24px);
min-height: 46px;
margin: 12px;
padding: 0 15px;
border: 1px solid #dfe3e8;
border-radius: 14px;
background: #fff;
color: #18212c;
font: inherit;
font-weight: 850;
box-shadow: 0 8px 24px rgba(18,26,35,.08);
cursor: pointer;
}
.admin-sidebar {
position: fixed !important;
z-index: 100;
inset: 0 auto 0 0;
width: min(310px, calc(100vw - 42px)) !important;
max-height: 100dvh;
padding-bottom: 24px;
overflow-y: auto;
transform: translateX(-105%);
transition: transform .22s ease;
box-shadow: 24px 0 60px rgba(5,11,18,.28);
}
.admin-sidebar.is-mobile-open {
transform: translateX(0);
}
.admin-main {
width: 100% !important;
padding: 12px 14px 50px !important;
}
.admin-main .admin-page-header,
.admin-main .admin-header {
align-items: flex-start;
flex-direction: column;
}
.admin-table-wrap,
.admin-table-responsive {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 620px) {
.admin-main {
padding-inline: 10px !important;
}
.admin-stat-grid,
.admin-dashboard-grid,
.admin-health-grid,
.admin-settings-grid {
grid-template-columns: 1fr !important;
}
.admin-main h1 {
font-size: clamp(1.8rem, 9vw, 2.5rem);
}
.admin-main .button,
.admin-main button[type="submit"] {
min-height: 42px;
}
}
/* =========================================================
LISTES — FLUIDITÉ, ORDRE ET ACCÈS RAPIDE
========================================================= */
.shopping-items-empty[hidden],
.shopping-footer-actions[hidden] {
display: none !important;
}
.shopping-item.is-new {
animation: shoppingItemArrive .55s ease both;
}
.shopping-item.is-saving {
opacity: .68;
}
.shopping-item.is-saved {
border-color: #72b886 !important;
box-shadow: 0 0 0 3px rgba(114,184,134,.12) !important;
}
@keyframes shoppingItemArrive {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.shopping-list-order-actions button:disabled {
opacity: .28;
cursor: default;
}
.shopping-autosave-hint {
min-height: 1em;
}
@media (max-width: 980px) {
.shopping-page-v3 .shopping-sidebar {
padding-bottom: 14px;
}
.shopping-list-nav {
display: flex;
gap: 9px;
overflow-x: auto;
padding: 2px 2px 10px;
scroll-snap-type: x proximity;
scrollbar-width: thin;
}
.shopping-list-card-row {
flex: 0 0 min(330px, 82vw);
scroll-snap-align: start;
}
.shopping-list-card {
height: 100%;
}
}
@media (max-width: 700px) {
.shopping-page-v3 .shopping-sidebar {
padding: 14px;
}
.shopping-sidebar-heading {
margin-bottom: 13px;
}
.shopping-new-list {
padding: 12px;
}
.shopping-filter-block {
margin: 14px 0 10px;
}
.shopping-sidebar-tip {
display: none;
}
.shopping-list-card-row {
flex-basis: min(300px, 86vw);
}
.shopping-list-order-actions {
width: 30px;
}
.shopping-editor-heading {
position: sticky;
top: 0;
z-index: 4;
margin: -16px -16px 14px;
padding: 14px 16px;
background: rgba(255,255,255,.96);
backdrop-filter: blur(12px);
}
html[data-theme="dark"] .shopping-editor-heading {
background: rgba(32,37,43,.96);
}
.shopping-add-panel-primary {
position: relative;
z-index: 2;
}
.shopping-smart-suggestions-content {
overflow-x: auto;
}
.shopping-suggestion-chips {
flex-wrap: nowrap;
width: max-content;
min-width: 100%;
}
}
/* =========================================================
PARTAGE DES LISTES — GESTION SIMPLE ET COHÉRENTE
========================================================= */
.shopping-editor-heading-actions {
display: flex;
align-items: center;
gap: 9px;
flex-wrap: wrap;
justify-content: flex-end;
}
.shopping-share-list-button {
min-height: 42px;
padding: 0 14px;
border: 1px solid #d8cfbf;
border-radius: 12px;
background: #fff;
color: #423a2e;
font: inherit;
font-weight: 850;
cursor: pointer;
}
.shopping-share-panel {
margin: 16px 0 20px;
padding: 18px;
border: 1px solid #dfd6c8;
border-radius: 18px;
background: linear-gradient(145deg,#fff,#fbf8f1);
}
.shopping-share-panel[hidden] { display: none !important; }
.shopping-share-panel-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.shopping-share-panel-heading h2 { margin: 3px 0 0; font-size: 1.2rem; }
.shopping-share-close {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 0;
border-radius: 10px;
background: #f1ece3;
color: #5a5144;
font-size: 1.25rem;
cursor: pointer;
}
.shopping-share-help { margin: 10px 0 14px; color: #766f65; }
.shopping-share-permissions {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-bottom: 14px;
}
.shopping-share-permissions label {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 12px;
border: 1px solid #ddd3c4;
border-radius: 12px;
background: #fff;
cursor: pointer;
}
.shopping-share-link-row {
display: grid;
grid-template-columns: minmax(0,1fr) auto auto;
gap: 8px;
}
.shopping-share-link-row[hidden], .shopping-share-meta[hidden] { display: none !important; }
.shopping-share-link-row input {
min-width: 0;
height: 42px;
padding: 0 12px;
border: 1px solid #d9d0c2;
border-radius: 11px;
background: #fff;
color: #38342e;
}
.shopping-share-link-row button,
.shopping-share-link-row a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 13px;
border: 1px solid #d9d0c2;
border-radius: 11px;
background: #fff;
color: #413a30;
text-decoration: none;
font-weight: 800;
cursor: pointer;
}
.shopping-share-meta { margin-top: 8px; color: #7c7468; font-size: .78rem; }
.shopping-share-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.shopping-share-revoke { border-color: #ecc9c5 !important; background: #fff3f1 !important; color: #ad443c !important; }
.shopping-share-feedback { min-height: 20px; margin: 10px 0 0; font-size: .8rem; }
.shopping-share-feedback[data-state="saved"] { color: #378052; }
.shopping-share-feedback[data-state="error"] { color: #b7463f; }
.shopping-share-feedback[data-state="saving"] { color: #8d6a13; }
html[data-theme="dark"] .shopping-share-panel,
html[data-theme="dark"] .shopping-share-list-button,
html[data-theme="dark"] .shopping-share-permissions label,
html[data-theme="dark"] .shopping-share-link-row input,
html[data-theme="dark"] .shopping-share-link-row button,
html[data-theme="dark"] .shopping-share-link-row a {
border-color: #414850;
background: #20262c;
color: #f1eee8;
}
html[data-theme="dark"] .shopping-share-help,
html[data-theme="dark"] .shopping-share-meta { color: #b7b0a5; }
html[data-theme="dark"] .shopping-share-close { background: #2c333a; color: #eee; }
@media (max-width: 700px) {
.shopping-editor-heading-actions { width: 100%; justify-content: stretch; }
.shopping-editor-heading-actions > button { flex: 1; }
.shopping-share-panel { padding: 14px; border-radius: 15px; }
.shopping-share-permissions { display: grid; grid-template-columns: 1fr; }
.shopping-share-link-row { grid-template-columns: 1fr 1fr; }
.shopping-share-link-row input { grid-column: 1 / -1; }
.shopping-share-actions { display: grid; grid-template-columns: 1fr; }
.shopping-share-actions .button { width: 100%; }
}
/* =========================================================
PASSE GLOBALE HORS ADMIN — ÉTAPE 4
Mobile, clavier virtuel et thème sombre
========================================================= */
:root {
--app-viewport-height: 100dvh;
--app-keyboard-offset: 0px;
}
@media (max-width: 900px) {
html.note-editor-is-open,
html.note-editor-is-open body {
overflow: hidden !important;
overscroll-behavior: none;
}
#note-modal.app-modal {
height: var(--app-viewport-height) !important;
max-height: var(--app-viewport-height) !important;
}
#note-modal .note-editor-modal-card {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: var(--app-viewport-height) !important;
max-height: var(--app-viewport-height) !important;
min-height: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
transform: none !important;
}
#note-modal .note-editor-modal-card > .modal-header {
position: relative !important;
top: auto !important;
flex: 0 0 auto !important;
padding-top: max(13px, env(safe-area-inset-top)) !important;
}
#note-modal #note-form {
display: block !important;
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
padding-bottom: calc(24px + env(safe-area-inset-bottom) + var(--app-keyboard-offset)) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
scroll-padding-top: 62px;
scroll-padding-bottom: calc(120px + env(safe-area-inset-bottom));
}
#note-modal #note-text {
min-height: clamp(230px, 36dvh, 410px) !important;
max-height: none !important;
resize: none !important;
overflow-y: auto !important;
touch-action: pan-y;
}
#note-modal .note-editor-statusbar,
#note-modal .note-edit-save-bar,
#note-modal .note-editor-primary-actions {
position: sticky !important;
}
#note-modal .note-standard-actions {
position: relative !important;
bottom: auto !important;
margin-bottom: 0 !important;
padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
}
#note-modal input,
#note-modal select,
#note-modal textarea,
#note-modal button {
font-size: 16px;
}
.notes-sidebar:not([hidden]),
.notes-sidebar.is-mobile-open {
max-height: none !important;
overflow: visible !important;
}
.category-navigation {
padding-bottom: calc(88px + env(safe-area-inset-bottom));
}
.app-modal:not(#note-modal) .modal-card {
width: calc(100% - 20px) !important;
max-height: calc(var(--app-viewport-height) - 20px) !important;
margin: 10px auto !important;
padding: 20px 16px !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 390px) {
#note-modal .note-editor-modal-card > .modal-header {
padding-inline: 13px !important;
}
#note-modal #note-form {
padding-inline: 11px !important;
}
#note-modal .note-editor-panel {
padding: 14px !important;
border-radius: 16px !important;
}
#note-modal .note-create-flags {
grid-template-columns: 1fr !important;
}
}
:root[data-theme="dark"] #note-modal .note-editor-modal-card,
:root[data-theme="dark"] #note-modal .note-editor-modal-card > .modal-header,
:root[data-theme="dark"] #note-modal .note-editor-statusbar,
:root[data-theme="dark"] #note-modal .note-edit-save-bar,
:root[data-theme="dark"] #note-modal .note-standard-actions {
background: #171d23 !important;
border-color: #343d46 !important;
color: #f3f6f8 !important;
}
:root[data-theme="dark"] #note-modal .note-writing-surface,
:root[data-theme="dark"] #note-modal .note-editor-panel,
:root[data-theme="dark"] #note-modal .note-create-flag {
border-color: #3a4650 !important;
background: #202831 !important;
color: #f3f6f8 !important;
box-shadow: none !important;
}
:root[data-theme="dark"] #note-modal textarea,
:root[data-theme="dark"] #note-modal input[type="text"],
:root[data-theme="dark"] #note-modal input[type="date"],
:root[data-theme="dark"] #note-modal input[type="time"],
:root[data-theme="dark"] #note-modal select {
border-color: #46535e !important;
background: #13191f !important;
color: #f4f7f9 !important;
-webkit-text-fill-color: #f4f7f9 !important;
}
:root[data-theme="dark"] #note-modal textarea::placeholder,
:root[data-theme="dark"] #note-modal input::placeholder {
color: #929eaa !important;
opacity: 1;
}
:root[data-theme="dark"] #note-modal .note-writing-metrics,
:root[data-theme="dark"] #note-modal .note-editor-live-state,
:root[data-theme="dark"] #note-modal .note-editor-heading > label,
:root[data-theme="dark"] #note-modal .note-form label > span {
color: #b9c3cc !important;
}
:root[data-theme="dark"] #note-modal .note-writing-metrics strong,
:root[data-theme="dark"] #note-modal .note-tags-editor > label,
:root[data-theme="dark"] #note-modal .note-editor-panel legend {
color: #f4f7f9 !important;
}
/* =========================================================
NOTE-BLOC — FINITION PAGES PUBLIQUES ET CONFORMITÉ
========================================================= */
.public-page,
.auth-page {
background:
radial-gradient(circle at 12% 8%, rgba(247, 210, 79, .13), transparent 28rem),
#f7f5ef;
}
.public-page main,
.auth-page main {
min-height: calc(100dvh - 190px);
}
.public-page .site-header,
.auth-page .site-header {
border-bottom: 1px solid rgba(43, 45, 40, .08);
background: rgba(255, 255, 255, .86);
backdrop-filter: blur(16px);
}
.public-page .legal-hero,
.public-page .features-page-hero {
width: min(1080px, calc(100% - 32px));
margin: 34px auto 22px;
}
.public-page .legal-content,
.public-page .faq-list,
.public-page .features-detail-grid {
width: min(1080px, calc(100% - 32px));
margin-inline: auto;
}
.legal-config-alert {
margin-bottom: 18px;
padding: 15px 17px;
border: 1px solid #efc15c;
border-radius: 15px;
background: #fff8df;
color: #5f470d;
}
.legal-config-alert strong,
.legal-config-alert p {
display: block;
margin: 0;
}
.legal-config-alert p {
margin-top: 4px;
}
.legal-config-alert code {
padding: 2px 5px;
border-radius: 6px;
background: rgba(255,255,255,.72);
}
.site-footer {
margin-top: 54px;
border-top: 1px solid rgba(43,45,40,.08);
background: #20242a;
color: #e8ebee;
}
.site-footer-grid,
.site-footer-bottom {
width: min(1240px, calc(100% - 34px));
margin-inline: auto;
}
.site-footer a,
.site-footer .footer-link-button {
color: #cfd5db;
}
.site-footer a:hover,
.site-footer .footer-link-button:hover {
color: #fff;
}
.footer-brand-block p,
.footer-privacy-note {
color: #aeb6be;
}
.cookie-banner {
left: 50%;
right: auto;
bottom: max(18px, env(safe-area-inset-bottom));
width: min(980px, calc(100% - 28px));
transform: translateX(-50%);
border: 1px solid rgba(42, 45, 48, .13);
box-shadow: 0 24px 70px rgba(18, 22, 27, .22);
}
.cookie-dialog[open] {
display: grid;
place-items: center;
width: 100%;
max-width: none;
height: 100%;
max-height: none;
padding: 18px;
border: 0;
background: rgba(15, 18, 22, .56);
}
.cookie-dialog-card {
width: min(680px, 100%);
max-height: calc(100dvh - 36px);
overflow: auto;
}
.auth-page .auth-shell {
width: min(1160px, calc(100% - 32px));
margin: 34px auto 46px;
}
.auth-page .auth-card {
box-shadow: 0 24px 70px rgba(40, 42, 45, .12);
}
.auth-page .auth-form input {
min-height: 48px;
}
:root[data-theme="dark"] .public-page,
:root[data-theme="dark"] .auth-page {
background:
radial-gradient(circle at 12% 8%, rgba(238, 190, 46, .08), transparent 28rem),
#15191e;
}
:root[data-theme="dark"] .public-page .site-header,
:root[data-theme="dark"] .auth-page .site-header {
border-color: rgba(255,255,255,.08);
background: rgba(25, 30, 36, .88);
}
:root[data-theme="dark"] .legal-config-alert {
border-color: #6d5924;
background: #302a19;
color: #f3d980;
}
@media (max-width: 760px) {
.public-page .public-nav-link {
display: none;
}
.public-page .legal-hero,
.public-page .features-page-hero,
.public-page .legal-content,
.public-page .faq-list,
.public-page .features-detail-grid {
width: min(100% - 22px, 1080px);
}
.site-footer-grid {
grid-template-columns: 1fr 1fr;
gap: 28px 20px;
}
.footer-brand-block {
grid-column: 1 / -1;
}
.cookie-banner {
align-items: stretch;
}
.cookie-banner-actions {
display: grid;
grid-template-columns: 1fr 1fr;
}
.cookie-banner-actions .button:last-child {
grid-column: 1 / -1;
}
.auth-page .auth-shell {
width: calc(100% - 20px);
margin-top: 14px;
}
}
@media (max-width: 460px) {
.site-footer-grid {
grid-template-columns: 1fr;
}
.footer-brand-block {
grid-column: auto;
}
.cookie-banner-actions {
grid-template-columns: 1fr;
}
.cookie-banner-actions .button:last-child {
grid-column: auto;
}
}
/* =========================================================
CORRECTIFS GLOBAUX — COULEURS, NAVIGATION, MOBILE, CORBEILLE
========================================================= */
.color-options {
position: relative;
z-index: 2;
}
.color-option {
display: grid;
place-items: center;
width: 38px;
height: 38px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.color-option span {
display: block;
width: 32px;
height: 32px;
border: 3px solid #fff;
border-radius: 50%;
background: var(--choice-color);
box-shadow: 0 0 0 1px #d9dde0;
transition: transform .15s ease, box-shadow .15s ease;
pointer-events: none;
}
.color-option.is-selected span,
.color-option[aria-pressed="true"] span {
transform: scale(.88);
box-shadow: 0 0 0 3px #18202a;
}
:root[data-theme="dark"] .color-option span {
border-color: #252d35;
box-shadow: 0 0 0 1px #68737e;
}
:root[data-theme="dark"] .color-option.is-selected span,
:root[data-theme="dark"] .color-option[aria-pressed="true"] span {
box-shadow: 0 0 0 3px #f4c542;
}
.header-main-link {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 42px;
padding: 0 13px;
border: 1px solid transparent;
border-radius: 12px;
color: #414b56;
text-decoration: none;
font-size: .82rem;
font-weight: 850;
}
.header-main-link:hover,
.header-main-link.is-active {
border-color: #e7dcae;
background: #fff8dc;
color: #6f5600;
}
:root[data-theme="dark"] .header-main-link { color: #dce3e8; }
:root[data-theme="dark"] .header-main-link:hover,
:root[data-theme="dark"] .header-main-link.is-active {
border-color: #4f4934;
background: #302d21;
color: #f4d76b;
}
.quick-list-create-card { width: min(520px, calc(100vw - 30px)); }
.quick-list-create-form { display: grid; gap: 16px; padding: 20px; }
.quick-list-create-form label { display: grid; gap: 8px; font-weight: 800; }
.quick-list-create-form input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #d9dde1;
border-radius: 13px;
background: #fff;
color: #252d35;
font: inherit;
}
.quick-list-create-form [data-quick-list-status] { min-height: 20px; margin: 0; color: #8b5e00; font-size: .8rem; }
.account-mobile-navigation {
display: flex;
align-items: center;
gap: 9px;
width: min(1180px, calc(100% - 32px));
margin: 14px auto 0;
}
.account-mobile-navigation a,
.account-mobile-navigation button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 42px;
padding: 0 13px;
border: 1px solid #e3ded4;
border-radius: 12px;
background: #fff;
color: #37414b;
text-decoration: none;
font: inherit;
font-weight: 800;
cursor: pointer;
}
.account-mobile-navigation button { display: none; }
.account-mobile-menu { width: min(1180px, calc(100% - 32px)); margin: 8px auto 0; padding: 10px; border: 1px solid #e3ded4; border-radius: 14px; background: #fff; }
.account-mobile-menu a { display: block; padding: 11px 12px; border-radius: 10px; color: #37414b; text-decoration: none; font-weight: 750; }
.account-mobile-menu a:hover { background: #f5f2ea; }
.trash-overview {
display: grid;
grid-template-columns: 52px minmax(0,1fr) auto;
align-items: center;
gap: 15px;
margin: 0 0 18px;
padding: 16px 18px;
border: 1px solid #efcfc9;
border-radius: 18px;
background: linear-gradient(135deg,#fff7f5,#fff);
color: #5a302d;
}
.trash-overview-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 15px;
background: #ffe3df;
color: #b7453d;
font-size: 1.45rem;
}
.trash-overview strong { display: block; margin-bottom: 3px; font-size: 1rem; }
.trash-overview p { margin: 0; color: #80615e; font-size: .8rem; line-height: 1.45; }
.trash-overview a { padding: 9px 12px; border-radius: 11px; background: #fff; color: #9f3d36; text-decoration: none; font-weight: 850; box-shadow: inset 0 0 0 1px #edcbc6; }
.note-card.is-trashed { border-color: #e6b6b0 !important; background: linear-gradient(155deg,#fff8f6,#ffecea) !important; filter: saturate(.8); }
.note-card.is-trashed::before { content: "CORBEILLE"; position: absolute; top: 10px; left: 12px; z-index: 2; padding: 4px 7px; border-radius: 999px; background: #c84b42; color: #fff; font-size: .56rem; font-weight: 900; letter-spacing: .08em; }
@media (max-width: 900px) {
.header-main-link { display: none; }
.account-mobile-navigation {
display: grid;
grid-template-columns: 1fr 1fr auto;
width: calc(100% - 24px);
margin: 10px 12px 0;
}
.account-mobile-navigation button { display: inline-flex; }
.account-mobile-navigation a,
.account-mobile-navigation button { min-width: 0; padding: 0 10px; font-size: .76rem; }
.account-mobile-menu { width: calc(100% - 24px); margin: 8px 12px 0; }
/* Largeur commune à toutes les pages principales sur mobile. */
.site-main > .account-shell,
.site-main > .shopping-page,
.site-main > .shopping-page-v3,
.site-main > .shared-notes-page,
.site-main > .reminders-page,
.site-main > .templates-page,
.site-main > .tags-page,
.site-main > .public-page-shell,
.notes-layout,
.workspace-overview,
.notes-main > .notes-toolbar,
.notes-main > .active-search,
.notes-main > .trash-overview,
.notes-main > .notes-grid {
box-sizing: border-box;
width: calc(100% - 24px) !important;
max-width: none !important;
margin-left: 12px !important;
margin-right: 12px !important;
}
.trash-overview { grid-template-columns: 44px 1fr; padding: 14px; }
.trash-overview-icon { width: 42px; height: 42px; }
.trash-overview a { grid-column: 1 / -1; text-align: center; }
.quick-list-create-form { padding: 16px; }
}
@media (max-width: 430px) {
.account-mobile-navigation { grid-template-columns: 1fr auto; }
.account-mobile-navigation a:nth-child(2) { display: none; }
}
/* Correctif corbeille : le badge ne doit pas hériter du fond ::before couvrant la carte. */
.note-card.is-trashed::before,
.note-card.is-archived::before {
inset: auto !important;
right: auto !important;
bottom: auto !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
transform: none !important;
pointer-events: none !important;
}
.note-card.is-trashed::before {
top: 10px !important;
left: 12px !important;
}
.note-card.is-archived::before {
top: -12px !important;
left: 18px !important;
}
/* =========================================================
GESTION DES LISTES — INTERFACE MOBILE DÉDIÉE
========================================================= */
.shopping-mobile-toolbar,
.shopping-sidebar-close,
.shopping-mobile-list-switch {
display: none;
}
@media (max-width: 700px) {
html.shopping-sidebar-is-open,
html.shopping-sidebar-is-open body {
overflow: hidden !important;
overscroll-behavior: none;
}
.shopping-page-v3 {
width: calc(100% - 24px) !important;
margin: 8px 12px 88px !important;
padding: 0 !important;
}
.shopping-page-v3 .shopping-hero {
display: none !important;
}
.shopping-mobile-toolbar {
position: sticky;
top: 0;
z-index: 20;
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
min-height: 58px;
margin-bottom: 10px;
padding: 8px;
border: 1px solid #e7dece;
border-radius: 17px;
background: rgba(255, 253, 249, .96);
box-shadow: 0 8px 24px rgba(42, 36, 26, .08);
backdrop-filter: blur(12px);
}
.shopping-mobile-toolbar > a,
.shopping-mobile-toolbar > button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
border: 1px solid #e5dbc9;
border-radius: 12px;
background: #fff;
color: #423a2e;
text-decoration: none;
font: inherit;
font-weight: 850;
}
.shopping-mobile-toolbar > a {
width: 42px;
font-size: 1.15rem;
}
.shopping-mobile-toolbar > button {
gap: 6px;
padding: 0 12px;
cursor: pointer;
}
.shopping-mobile-toolbar > strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .96rem;
}
.shopping-page-v3 .shopping-app-shell {
display: block !important;
}
.shopping-sidebar-backdrop {
position: fixed;
inset: 0;
z-index: 89;
display: block;
border: 0;
background: rgba(17, 21, 25, .48);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
.shopping-sidebar-backdrop.is-visible {
opacity: 1;
pointer-events: auto;
}
.shopping-page-v3 .shopping-sidebar {
position: fixed !important;
inset: auto 0 0 0 !important;
z-index: 90;
width: 100% !important;
max-width: none !important;
max-height: min(88dvh, 760px);
margin: 0 !important;
padding: 16px 14px calc(18px + env(safe-area-inset-bottom)) !important;
overflow-y: auto;
border: 0 !important;
border-radius: 24px 24px 0 0 !important;
background: #fffdfa !important;
box-shadow: 0 -22px 55px rgba(18, 22, 28, .24) !important;
transform: translateY(105%);
visibility: hidden;
transition: transform .24s ease, visibility .24s ease;
}
.shopping-page-v3 .shopping-sidebar.is-mobile-open {
transform: translateY(0);
visibility: visible;
}
.shopping-sidebar-heading {
position: sticky;
top: -16px;
z-index: 3;
grid-template-columns: minmax(0, 1fr) auto auto;
padding: 12px 0 10px;
margin-bottom: 10px;
background: #fffdfa;
}
.shopping-sidebar-close {
display: grid;
place-items: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 11px;
background: #f1ece2;
color: #4c453a;
font-size: 1.3rem;
cursor: pointer;
}
.shopping-new-list {
margin-bottom: 12px;
padding: 12px !important;
}
.shopping-filter-block {
margin: 12px 0 10px !important;
}
.shopping-tag-filters {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: none;
}
.shopping-tag-filters::-webkit-scrollbar {
display: none;
}
.shopping-tag-chip {
flex: 0 0 auto;
}
.shopping-list-nav {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
overflow: visible !important;
padding: 0 0 6px !important;
}
.shopping-list-card-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
width: 100%;
flex-basis: auto !important;
}
.shopping-list-card {
min-height: 70px;
padding: 10px 11px !important;
}
.shopping-list-order-actions {
display: grid;
gap: 4px;
width: 34px !important;
opacity: 1 !important;
}
.shopping-list-order-actions button {
width: 32px;
height: 30px;
}
.shopping-page-v3 .shopping-editor {
width: 100%;
min-width: 0;
padding: 14px !important;
overflow: visible !important;
border-radius: 20px !important;
}
.shopping-editor-heading {
position: static !important;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
margin: 0 0 14px !important;
padding: 0 0 14px !important;
background: transparent !important;
backdrop-filter: none !important;
}
.shopping-title-input {
font-size: clamp(1.55rem, 8vw, 2rem) !important;
}
.shopping-editor-heading-actions {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 8px;
width: 100%;
}
.shopping-editor-heading-actions > button {
width: 100%;
min-width: 0;
min-height: 42px;
padding: 0 10px;
font-size: .78rem;
}
.shopping-mobile-list-switch {
display: inline-flex;
grid-column: 1 / -1;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid #e1d5c3;
border-radius: 12px;
background: #fff8e7;
color: #5e4912;
font: inherit;
font-weight: 850;
cursor: pointer;
}
.shopping-secondary-panel {
margin-bottom: 12px;
border-radius: 14px;
}
.shopping-secondary-panel > summary {
min-height: 48px;
padding: 0 13px;
}
.shopping-add-panel {
margin-bottom: 14px !important;
border-radius: 16px !important;
}
.shopping-add-item {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(105px, .7fr) !important;
gap: 9px !important;
padding: 12px !important;
}
.shopping-add-main {
grid-column: 1 / -1 !important;
}
.shopping-add-details {
display: contents !important;
}
.shopping-add-details > div {
min-width: 0;
}
.shopping-add-main input,
.shopping-add-details input,
.shopping-add-details select,
.shopping-add-details > button {
height: 46px !important;
min-height: 46px !important;
font-size: 16px !important;
}
.shopping-add-details > button {
grid-column: 1 / -1 !important;
}
.shopping-smart-suggestions {
display: block !important;
padding: 11px 12px !important;
}
.shopping-suggestions-heading {
margin-bottom: 9px !important;
}
.shopping-smart-suggestions-content {
width: 100%;
overflow-x: auto;
padding-bottom: 3px;
scrollbar-width: none;
}
.shopping-smart-suggestions-content::-webkit-scrollbar {
display: none;
}
.shopping-suggestion-chips {
display: flex;
flex-wrap: nowrap !important;
width: max-content;
min-width: 100%;
}
.shopping-items-toolbar {
display: grid !important;
grid-template-columns: 1fr;
gap: 9px;
margin-top: 10px;
}
.shopping-items-toolbar form,
.shopping-items-toolbar select {
width: 100% !important;
}
.shopping-item {
grid-template-columns: 38px minmax(0, 1fr) auto !important;
gap: 8px !important;
padding: 10px !important;
}
.shopping-item-icon {
display: none !important;
}
.shopping-item-fields {
grid-column: 2;
min-width: 0;
}
.shopping-item-label {
min-height: 38px !important;
font-size: 16px !important;
}
.shopping-item-meta-fields {
display: grid !important;
grid-template-columns: minmax(80px, .7fr) minmax(120px, 1fr);
gap: 6px;
}
.shopping-item-quantity,
.shopping-item-section {
width: 100% !important;
max-width: none !important;
min-width: 0;
height: 36px !important;
font-size: 13px !important;
}
.shopping-item-actions {
grid-column: 3;
grid-row: 1;
align-self: start;
display: grid !important;
gap: 4px;
}
.shopping-item-actions button[data-move-item] {
display: none !important;
}
.shopping-footer-actions {
display: grid;
grid-template-columns: 1fr;
gap: 7px;
padding-bottom: 8px;
}
.shopping-footer-actions button {
width: 100%;
min-height: 42px;
}
.shopping-share-panel {
margin: 0 0 14px;
}
}
@media (max-width: 390px) {
.shopping-mobile-toolbar {
grid-template-columns: 40px minmax(0, 1fr) 44px;
}
.shopping-mobile-toolbar > button {
width: 44px;
padding: 0;
font-size: 0;
}
.shopping-mobile-toolbar > button::first-letter {
font-size: 1rem;
}
.shopping-mobile-toolbar > button span {
display: none;
}
.shopping-editor-heading-actions {
grid-template-columns: 1fr;
}
.shopping-mobile-list-switch {
grid-column: auto;
}
.shopping-add-item,
.shopping-item-meta-fields {
grid-template-columns: 1fr !important;
}
.shopping-add-details > button {
grid-column: auto !important;
}
}
html[data-theme="dark"] .shopping-mobile-toolbar,
html[data-theme="dark"] .shopping-page-v3 .shopping-sidebar.is-mobile-open,
html[data-theme="dark"] .shopping-sidebar-heading {
border-color: #3d444b;
background: #20252b !important;
color: #f1eee8;
}
html[data-theme="dark"] .shopping-mobile-toolbar > a,
html[data-theme="dark"] .shopping-mobile-toolbar > button,
html[data-theme="dark"] .shopping-sidebar-close,
html[data-theme="dark"] .shopping-mobile-list-switch {
border-color: #414850;
background: #2a3036;
color: #f1eee8;
}
@media (max-width: 700px) {
.shopping-sidebar-heading {
display: grid !important;
align-items: center;
}
}
/* =========================================================
Correctifs mobiles V21 — navigation, menus, listes partagées
========================================================= */
.note-menu-order-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 6px;
border-top: 1px solid rgba(80, 86, 92, .10);
border-bottom: 1px solid rgba(80, 86, 92, .10);
}
.note-menu-order-actions button {
min-height: 38px;
border-radius: 10px;
background: #f4f1e9;
color: #3c3b36;
font-weight: 800;
}
.shopping-note-card .notes-shopping-item > div {
grid-template-columns: minmax(0, 1fr) 72px minmax(105px, 135px);
}
.shopping-note-card .notes-shopping-item select[data-quick-section-input] {
width: 100%;
min-width: 0;
height: 30px;
padding: 0 24px 0 7px;
border: 1px solid #e7ddba;
border-radius: 8px;
background: #fff;
color: #655f51;
font: inherit;
font-size: .68rem;
}
.shopping-public-shell {
width: min(940px, calc(100% - 28px));
margin: 22px auto 70px;
}
.shopping-public-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 18px;
padding: 24px;
border: 1px solid #e7dece;
border-radius: 24px;
background: linear-gradient(145deg, #fffdf8, #fff8e8);
box-shadow: 0 14px 35px rgba(55, 44, 22, .07);
}
.shopping-public-heading h1 {
margin: 4px 0 8px;
font-size: clamp(2rem, 6vw, 3.2rem);
line-height: 1.02;
}
.shopping-public-heading > div > p:last-child {
margin: 0;
color: #69675f;
}
.shopping-public-progress {
margin: 18px 0;
}
.shopping-public-items {
gap: 10px;
}
.shopping-public-secondary {
margin-top: 16px;
padding: 0;
overflow: hidden;
border: 1px solid #e7dece;
border-radius: 18px;
background: #fff;
}
.shopping-public-secondary > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 18px;
cursor: pointer;
list-style: none;
}
.shopping-public-secondary > summary::-webkit-details-marker { display: none; }
.shopping-public-secondary > summary span { display: grid; gap: 2px; }
.shopping-public-secondary > summary small {
color: #8e7a50;
font-size: .66rem;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
.shopping-public-secondary > summary strong { font-size: 1rem; }
.shopping-public-secondary > summary b {
color: #7d7566;
font-size: .74rem;
}
.shopping-public-secondary[open] > summary b::after { content: " moins"; }
.shopping-public-secondary:not([open]) > summary b::after { content: ""; }
.shopping-public-secondary .shopping-participants-heading,
.shopping-public-secondary .shopping-participants-list,
.shopping-public-secondary .shopping-activity-list {
margin: 0;
padding: 0 18px 18px;
}
.shopping-shared-label {
min-width: 0;
display: grid;
gap: 3px;
}
.shopping-shared-label strong { overflow-wrap: anywhere; }
.shopping-shared-label span {
color: #8b7e68;
font-size: .78rem;
}
@media (max-width: 900px) {
body:has(.mobile-bottom-navigation) {
padding-bottom: calc(82px + env(safe-area-inset-bottom));
}
.mobile-bottom-navigation {
position: fixed !important;
z-index: 950 !important;
right: 0;
bottom: 0;
left: 0;
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr));
padding-bottom: env(safe-area-inset-bottom);
}
.site-footer { margin-bottom: 68px; }
.note-menu {
position: fixed !important;
z-index: 1100 !important;
inset: auto 12px calc(78px + env(safe-area-inset-bottom)) 12px !important;
width: auto !important;
max-width: none !important;
max-height: min(62dvh, 520px);
padding: 10px !important;
overflow-y: auto;
border-radius: 20px !important;
box-shadow: 0 24px 80px rgba(15, 20, 26, .28) !important;
}
.note-menu > a,
.note-menu > button {
width: 100%;
min-height: 46px;
padding: 11px 13px !important;
border-radius: 12px;
text-align: left;
}
.note-menu-order-actions { position: sticky; top: 0; background: inherit; }
.shopping-note-card .notes-shopping-item > div {
grid-template-columns: minmax(0, 1fr) 62px;
}
.shopping-note-card .notes-shopping-item select[data-quick-section-input] {
grid-column: 1 / -1;
height: 34px;
font-size: .72rem;
}
.shopping-public-shell {
width: calc(100% - 24px);
margin: 12px auto 40px;
}
.shopping-public-heading {
grid-template-columns: 1fr;
gap: 12px;
padding: 18px;
border-radius: 20px;
}
.shopping-public-heading h1 { font-size: 2rem; }
.shopping-share-badge {
width: max-content;
max-width: 100%;
padding: 7px 10px;
border-radius: 999px;
font-size: .76rem;
}
.shopping-public-shell > .shopping-add-item {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 9px;
margin: 14px 0;
padding: 14px;
border: 1px solid #e7dece;
border-radius: 18px;
background: #fff;
}
.shopping-public-shell > .shopping-add-item input,
.shopping-public-shell > .shopping-add-item select,
.shopping-public-shell > .shopping-add-item button {
width: 100%;
min-height: 48px;
}
.shopping-public-progress {
grid-template-columns: 1fr !important;
gap: 10px !important;
margin: 14px 0 !important;
padding: 16px !important;
border-radius: 18px !important;
}
.shopping-public-items .shopping-section-heading {
margin: 18px 4px 7px;
}
.shopping-public-items .shopping-item {
grid-template-columns: 42px minmax(0, 1fr) !important;
gap: 10px !important;
padding: 12px !important;
border-radius: 16px !important;
}
.shopping-public-items .shopping-shared-section {
grid-column: 2;
color: #847966;
font-size: .75rem;
}
.shopping-public-items .shopping-item-delete {
grid-column: 2;
width: 100%;
}
}
html[data-theme="dark"] .note-menu-order-actions button,
html[data-theme="dark"] .shopping-public-secondary,
html[data-theme="dark"] .shopping-public-shell > .shopping-add-item {
border-color: #3d434a;
background: #22282e;
color: #f1eee8;
}
html[data-theme="dark"] .shopping-note-card .notes-shopping-item select[data-quick-section-input] {
border-color: #464339;
background: #181d22;
color: #f3f5f7;
}
/* =========================================================
NOTE-BLOC V5 — COHÉRENCE VISUELLE GLOBALE
Unifie dimensions, espacements, contrôles et états sans
modifier les fonctionnalités existantes.
========================================================= */
:root {
--ui-page-max: 1480px;
--ui-page-gutter: 22px;
--ui-mobile-gutter: 12px;
--ui-radius-xs: 10px;
--ui-radius-sm: 13px;
--ui-radius-md: 18px;
--ui-radius-lg: 24px;
--ui-control-height: 46px;
--ui-control-height-mobile: 44px;
--ui-border: #e6dfd2;
--ui-surface: #fffdfa;
--ui-surface-soft: #f8f5ee;
--ui-text: #202832;
--ui-muted: #727a81;
--ui-shadow: 0 12px 32px rgba(35, 39, 43, .07);
--ui-shadow-hover: 0 17px 38px rgba(35, 39, 43, .11);
}
/* Conteneurs principaux : même axe et mêmes marges. */
body:not(.admin-page) .site-main > .shopping-page-v3,
body:not(.admin-page) .site-main > .shared-notes-page,
body:not(.admin-page) .site-main > .favorites-page,
body:not(.admin-page) .site-main > .reminders-page,
body:not(.admin-page) .site-main > .profile-page,
body:not(.admin-page) .site-main > .templates-page,
body:not(.admin-page) .site-main > .public-page-shell,
body:not(.admin-page) .site-main > .shopping-public-shell {
box-sizing: border-box;
width: min(var(--ui-page-max), calc(100% - (var(--ui-page-gutter) * 2)));
margin-inline: auto;
}
/* Boutons et champs : mêmes hauteurs, arrondis et rythme. */
body:not(.admin-page) :where(
button,
.button,
.btn,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="number"],
select
) {
box-sizing: border-box;
}
body:not(.admin-page) :where(
.button,
.btn,
button:not(.note-color-option):not(.shopping-check):not(.notes-shopping-item > button):not(.note-menu-toggle):not(.icon-button)
) {
min-height: var(--ui-control-height);
border-radius: var(--ui-radius-sm);
}
body:not(.admin-page) :where(
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="number"],
select,
textarea
) {
border-radius: var(--ui-radius-sm);
}
body:not(.admin-page) :where(
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="number"],
select
):not(.note-card input):not(.shopping-item input):not(.shopping-item select) {
min-height: var(--ui-control-height);
}
body:not(.admin-page) :where(input, select, textarea):focus-visible,
body:not(.admin-page) :where(button, .button, .btn, a):focus-visible {
outline: 3px solid rgba(240, 184, 31, .25);
outline-offset: 2px;
}
/* Cartes et panneaux principaux. */
body:not(.admin-page) :where(
.profile-card,
.shared-notes-panel,
.reminders-panel,
.favorites-panel,
.shopping-page-v3 .shopping-sidebar,
.shopping-page-v3 .shopping-editor,
.shopping-public-heading,
.shopping-public-secondary,
.auth-card,
.public-card
) {
border-radius: var(--ui-radius-lg);
box-shadow: var(--ui-shadow);
}
/* Messages d'état uniformisés. */
body:not(.admin-page) :where(
.flash,
.alert,
.notice,
.success-message,
.error-message,
.form-message,
.status-message
) {
box-sizing: border-box;
padding: 13px 15px;
border-radius: var(--ui-radius-sm);
line-height: 1.45;
}
body:not(.admin-page) :where(.flash-success, .alert-success, .success-message) {
border: 1px solid #bfe2ca;
background: #eef9f1;
color: #28633d;
}
body:not(.admin-page) :where(.flash-error, .alert-error, .error-message) {
border: 1px solid #efc1bd;
background: #fff1ef;
color: #9e3732;
}
body:not(.admin-page) :where(.flash-warning, .alert-warning, .notice) {
border: 1px solid #ead48d;
background: #fff8d9;
color: #765800;
}
/* États vides : même présence visuelle. */
body:not(.admin-page) :where(
.shopping-items-empty,
.shopping-empty,
.notes-empty,
.empty-state,
.shared-notes-empty,
.reminders-empty
) {
box-sizing: border-box;
min-height: 180px;
padding: 34px 22px;
border: 1px dashed #dcd3c5;
border-radius: var(--ui-radius-md);
background: rgba(255, 253, 248, .72);
text-align: center;
}
/* Cartes de notes : rayons, ombres et actions homogènes. */
.notes-grid .note-card {
border-radius: 22px;
box-shadow: 0 10px 25px rgba(40, 44, 48, .085);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (hover:hover) {
.notes-grid .note-card:hover {
transform: translateY(-2px);
box-shadow: var(--ui-shadow-hover);
}
}
.note-card :where(.note-menu-toggle, .favorite-button, .pin-button),
.shopping-note-open {
border-radius: 12px !important;
}
/* Page listes : même langage visuel pour les blocs. */
.shopping-page-v3 .shopping-add-panel,
.shopping-page-v3 .shopping-progress-panel,
.shopping-page-v3 .shopping-list-options,
.shopping-page-v3 .shopping-bulk-add,
.shopping-page-v3 .shopping-share-panel {
border-radius: var(--ui-radius-md);
}
.shopping-page-v3 .shopping-item {
border-radius: 15px;
}
.shopping-page-v3 .shopping-list-card {
border-radius: 16px;
}
/* Partages : largeur, panneaux et actions cohérents. */
.shopping-public-shell,
.shared-notes-page {
color: var(--ui-text);
}
.shopping-public-secondary > summary,
.shared-notes-page details > summary {
min-height: 54px;
}
.shopping-public-items .shopping-item {
box-shadow: 0 5px 15px rgba(42, 38, 28, .04);
}
/* Footer et authentification. */
.site-footer-grid,
.site-footer-bottom {
width: min(var(--ui-page-max), calc(100% - (var(--ui-page-gutter) * 2)));
margin-inline: auto;
}
.auth-page .auth-card {
border-radius: var(--ui-radius-lg);
}
/* Thème sombre : mêmes surfaces et contrastes. */
:root[data-theme="dark"] {
--ui-border: #3b4249;
--ui-surface: #20262c;
--ui-surface-soft: #191f24;
--ui-text: #f0f3f5;
--ui-muted: #aab3ba;
--ui-shadow: 0 14px 34px rgba(0, 0, 0, .24);
--ui-shadow-hover: 0 18px 42px rgba(0, 0, 0, .32);
}
:root[data-theme="dark"] body:not(.admin-page) :where(
.profile-card,
.shared-notes-panel,
.reminders-panel,
.favorites-panel,
.shopping-public-secondary,
.public-card
) {
border-color: var(--ui-border);
background: var(--ui-surface);
color: var(--ui-text);
}
:root[data-theme="dark"] body:not(.admin-page) :where(
.shopping-items-empty,
.shopping-empty,
.notes-empty,
.empty-state,
.shared-notes-empty,
.reminders-empty
) {
border-color: #454d54;
background: rgba(31, 37, 43, .78);
color: #dce2e6;
}
:root[data-theme="dark"] body:not(.admin-page) :where(.flash-success, .alert-success, .success-message) {
border-color: #315c40;
background: #1d3525;
color: #bde8ca;
}
:root[data-theme="dark"] body:not(.admin-page) :where(.flash-error, .alert-error, .error-message) {
border-color: #70413e;
background: #3a2423;
color: #f0c2be;
}
:root[data-theme="dark"] body:not(.admin-page) :where(.flash-warning, .alert-warning, .notice) {
border-color: #6d5a27;
background: #392f18;
color: #efd98d;
}
/* Mobile : une seule largeur, mêmes marges et boutons. */
@media (max-width: 900px) {
:root {
--ui-page-gutter: var(--ui-mobile-gutter);
}
body:not(.admin-page) .site-main,
body:not(.admin-page) main.site-main {
overflow-x: clip;
}
body:not(.admin-page) .site-main > :where(
.shopping-page-v3,
.shared-notes-page,
.favorites-page,
.reminders-page,
.profile-page,
.templates-page,
.public-page-shell,
.shopping-public-shell
) {
width: calc(100% - (var(--ui-mobile-gutter) * 2)) !important;
max-width: none !important;
margin-inline: auto !important;
}
.notes-main > :where(.notes-toolbar, .notes-grid, .trash-banner, .archive-banner),
.workspace-overview,
.mobile-home-header > *,
.site-footer-grid,
.site-footer-bottom {
box-sizing: border-box;
width: calc(100% - (var(--ui-mobile-gutter) * 2));
max-width: none;
margin-inline: auto;
}
body:not(.admin-page) :where(
.button,
.btn,
button:not(.note-color-option):not(.shopping-check):not(.notes-shopping-item > button):not(.note-menu-toggle):not(.icon-button)
) {
min-height: var(--ui-control-height-mobile);
}
body:not(.admin-page) :where(
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="number"],
select,
textarea
) {
font-size: 16px;
}
.notes-grid {
gap: 12px !important;
}
.notes-grid .note-card {
border-radius: 20px;
}
#note-modal .note-editor-modal-card,
.quick-list-dialog,
.modal-card,
dialog > form {
border-radius: 22px 22px 0 0;
}
.mobile-bottom-navigation {
min-height: 72px;
border-top: 1px solid #e4e0d8;
box-shadow: 0 -8px 28px rgba(31, 35, 39, .09);
}
.mobile-bottom-navigation a,
.mobile-bottom-navigation button {
min-width: 0;
min-height: 68px;
padding: 7px 3px 6px;
}
.floating-add-button,
.mobile-fab,
[data-mobile-create-note] {
right: 14px !important;
bottom: calc(82px + env(safe-area-inset-bottom)) !important;
}
.site-footer {
padding-inline: 0;
}
}
@media (max-width: 430px) {
.notes-grid {
grid-template-columns: 1fr !important;
}
.notes-grid .note-card,
.shopping-note-card {
grid-column: 1 !important;
width: 100%;
}
}
/* =========================================================
POLICE D’ÉCRITURE DU COMPTE
========================================================= */
.account-appearance-card { scroll-margin-top: 100px; }
.account-font-form { display: grid; gap: 20px; }
.font-choice-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.font-choice {
position: relative;
display: grid;
grid-template-columns: 46px minmax(0,1fr) 24px;
align-items: center;
gap: 12px;
min-height: 82px;
padding: 14px;
border: 1px solid #dde2e5;
border-radius: 16px;
background: #fff;
cursor: pointer;
transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.font-choice:hover { transform: translateY(-1px); border-color: #d6b84f; }
.font-choice.is-selected {
border-color: #e1b522;
background: #fff9df;
box-shadow: 0 8px 22px rgba(172, 126, 0, .10);
}
.font-choice input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.font-choice-sample {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 13px;
background: #f3f1e9;
color: #26303a;
font-size: 1.18rem;
font-weight: 800;
}
.font-choice-copy { min-width: 0; }
.font-choice-copy strong,
.font-choice-copy small { display: block; }
.font-choice-copy strong { color: #28313b; font-size: .92rem; }
.font-choice-copy small { margin-top: 4px; color: #737d87; font-size: .73rem; line-height: 1.35; }
.font-choice-check {
display: grid;
place-items: center;
width: 23px;
height: 23px;
border-radius: 50%;
background: #eceff1;
color: transparent;
font-size: .75rem;
font-weight: 900;
}
.font-choice.is-selected .font-choice-check { background: #f2c43a; color: #332b0d; }
.font-live-preview {
padding: 20px;
border: 1px solid #e3ded0;
border-radius: 18px;
background: linear-gradient(135deg,#fffdf7,#fff8dc);
}
.font-live-preview > span {
display: block;
margin-bottom: 7px;
color: #8a806b;
font-family: var(--app-font-family);
font-size: .68rem;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
.font-live-preview strong { display: block; color: #202932; font-size: 1.3rem; }
.font-live-preview p { margin: 7px 0 0; color: #606a74; line-height: 1.55; }
.account-feature-warning {
margin-bottom: 18px;
padding: 13px 15px;
border: 1px solid #edcf6c;
border-radius: 13px;
background: #fff8d9;
color: #66530e;
}
:root[data-theme="dark"] .font-choice {
border-color: #39424b;
background: #20262c;
}
:root[data-theme="dark"] .font-choice.is-selected {
border-color: #75652c;
background: #302d20;
}
:root[data-theme="dark"] .font-choice-sample { background: #171c21; color: #eef1f3; }
:root[data-theme="dark"] .font-choice-copy strong { color: #eef1f3; }
:root[data-theme="dark"] .font-choice-copy small { color: #aab2ba; }
:root[data-theme="dark"] .font-live-preview {
border-color: #484331;
background: linear-gradient(135deg,#28271f,#211f19);
}
:root[data-theme="dark"] .font-live-preview strong { color: #f4f0e7; }
:root[data-theme="dark"] .font-live-preview p { color: #b9b5aa; }
:root[data-theme="dark"] .account-feature-warning {
border-color: #6d5b23;
background: #302b18;
color: #f0d778;
}
@media (max-width: 820px) {
.font-choice-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
.font-choice-grid { grid-template-columns: 1fr; }
.font-choice { min-height: 72px; padding: 12px; }
.font-live-preview { padding: 16px; }
}
/* Catégories PC : liste défilable avec barre verticale visible. */
.sidebar-heading-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
@media (min-width: 901px) {
.notes-sidebar .category-navigation {
max-height: min(62vh, 640px);
overflow-y: scroll;
overflow-x: hidden;
padding-right: 8px;
overscroll-behavior: contain;
scrollbar-gutter: stable;
scrollbar-width: auto;
scrollbar-color: #b9bec4 #eef0f1;
}
.notes-sidebar .category-navigation::-webkit-scrollbar {
width: 12px;
}
.notes-sidebar .category-navigation::-webkit-scrollbar-track {
border-radius: 999px;
background: #eef0f1;
}
.notes-sidebar .category-navigation::-webkit-scrollbar-thumb {
min-height: 48px;
border: 3px solid #eef0f1;
border-radius: 999px;
background: #aeb5bc;
}
.notes-sidebar .category-navigation::-webkit-scrollbar-thumb:hover {
background: #8f989f;
}
:root[data-theme="dark"] .notes-sidebar .category-navigation {
scrollbar-color: #69737c #252c33;
}
:root[data-theme="dark"] .notes-sidebar .category-navigation::-webkit-scrollbar-track {
background: #252c33;
}
:root[data-theme="dark"] .notes-sidebar .category-navigation::-webkit-scrollbar-thumb {
border-color: #252c33;
background: #69737c;
}
:root[data-theme="dark"] .notes-sidebar .category-navigation::-webkit-scrollbar-thumb:hover {
background: #828d97;
}
}
/* =========================================================
CORRECTIF MOBILE PAYSAGE — NAVIGATION ET CATÉGORIES
========================================================= */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-width: 1100px) and (max-height: 650px) {
body {
padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
}
.site-header,
.mobile-notes-bar,
.workspace-overview {
display: none !important;
}
.mobile-home-header {
display: block !important;
padding: calc(7px + env(safe-area-inset-top)) 12px 9px !important;
}
.mobile-home-top {
grid-template-columns: 38px minmax(0, 1fr) 38px !important;
gap: 8px !important;
}
.mobile-home-menu,
.mobile-home-profile {
width: 38px !important;
height: 38px !important;
min-height: 38px !important;
border-radius: 12px !important;
}
.mobile-home-brand {
font-size: 1.12rem !important;
}
.mobile-home-search {
height: 40px !important;
margin-top: 7px !important;
border-radius: 13px !important;
}
.mobile-home-actions {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 7px !important;
margin-top: 7px !important;
}
.mobile-home-actions button,
.mobile-home-actions a {
min-height: 48px !important;
padding: 5px 4px !important;
border-radius: 13px !important;
}
.mobile-home-actions span {
width: 24px !important;
height: 24px !important;
border-radius: 8px !important;
font-size: .86rem !important;
}
.mobile-home-actions strong {
font-size: .61rem !important;
}
.notes-dashboard {
display: block !important;
width: 100% !important;
}
.notes-main {
width: 100% !important;
padding: 0 12px !important;
}
/* La colonne PC ne doit jamais réapparaître dans la page en paysage. */
.notes-sidebar:not(.is-mobile-open) {
display: none !important;
}
.notes-sidebar.is-mobile-open {
position: fixed !important;
inset: auto 10px calc(62px + env(safe-area-inset-bottom)) !important;
z-index: 175 !important;
display: block !important;
width: auto !important;
max-height: calc(100dvh - 84px) !important;
margin: 0 !important;
padding: 14px !important;
overflow-y: auto !important;
transform: none !important;
visibility: visible !important;
border-radius: 18px !important;
}
.notes-sidebar.is-mobile-open .category-navigation {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
padding-bottom: 8px !important;
}
.notes-toolbar {
margin-top: 8px !important;
}
.notes-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* En paysage, la navigation devient un rail vertical à droite.
Cela évite qu'une barre horizontale recouvre le contenu au milieu
de la faible hauteur disponible. */
body:has(.mobile-bottom-navigation) {
padding-right: calc(62px + env(safe-area-inset-right)) !important;
padding-bottom: 0 !important;
}
.mobile-bottom-navigation {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: auto !important;
z-index: 980 !important;
display: grid !important;
width: calc(58px + env(safe-area-inset-right)) !important;
height: 100dvh !important;
min-height: 0 !important;
grid-template-columns: 1fr !important;
grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
padding: max(5px, env(safe-area-inset-top)) env(safe-area-inset-right) max(5px, env(safe-area-inset-bottom)) 0 !important;
border-top: 0 !important;
border-left: 1px solid rgba(31, 40, 35, .10) !important;
box-shadow: -8px 0 24px rgba(27, 34, 30, .09) !important;
}
.mobile-bottom-navigation a,
.mobile-bottom-navigation button {
min-width: 0 !important;
min-height: 0 !important;
padding: 4px 2px !important;
gap: 1px !important;
}
.mobile-bottom-navigation span {
font-size: 1.02rem !important;
}
.mobile-bottom-navigation small {
font-size: .5rem !important;
line-height: 1.05 !important;
}
.notes-main {
padding-right: 8px !important;
}
.notes-sidebar.is-mobile-open {
right: calc(68px + env(safe-area-inset-right)) !important;
bottom: 10px !important;
}
.floating-add-button,
.mobile-fab,
[data-mobile-create-note] {
right: calc(70px + env(safe-area-inset-right)) !important;
bottom: 12px !important;
}
}
/* Accueil — ajout fluide d'articles dans une liste ouverte */
/* Accueil : ne pas afficher le formulaire d'ajout directement dans la grille.
Il reste disponible uniquement après ouverture de la liste en grand. */
.notes-grid > .shopping-note-card > .shopping-note-add {
display: none !important;
}
.quick-list-dialog .shopping-note-card > .shopping-note-add {
display: grid !important;
}
.shopping-note-add {
grid-template-columns: minmax(150px, 1fr) minmax(72px, 92px) minmax(125px, 165px) 42px;
align-items: center;
}
.shopping-note-add input,
.shopping-note-add select {
width: 100%;
min-width: 0;
height: 42px;
padding: 0 11px;
border: 1px solid #dfcf96;
border-radius: 10px;
background: #fff;
color: #202730;
font: inherit;
}
.shopping-note-add select {
padding-right: 30px;
font-size: .78rem;
}
.shopping-note-add button {
width: 42px;
height: 42px;
}
.quick-list-dialog .shopping-note-add {
position: sticky;
bottom: -18px;
z-index: 4;
padding: 10px 0 2px;
background: linear-gradient(to bottom, rgba(255, 251, 232, 0), #fffbe8 24%);
}
:root[data-theme="dark"] .shopping-note-add input,
:root[data-theme="dark"] .shopping-note-add select {
border-color: #464339;
background: #181d22;
color: #f3f5f7;
}
:root[data-theme="dark"] .quick-list-dialog .shopping-note-add {
background: linear-gradient(to bottom, rgba(32, 31, 26, 0), #201f1a 24%);
}
@media (max-width: 700px) {
.shopping-note-add {
grid-template-columns: minmax(0, 1fr) 88px 46px;
gap: 7px;
}
.shopping-note-add input[name="label"] {
grid-column: 1 / -1;
}
.shopping-note-add select[name="section"] {
grid-column: 1;
}
.shopping-note-add input[name="quantity"] {
grid-column: 2;
}
.shopping-note-add button {
grid-column: 3;
grid-row: 2;
width: 46px;
}
.quick-list-dialog .shopping-note-add {
bottom: -12px;
}
}
/* =========================================================
LISTES — FAVORIS, ÉPINGLES ET ACTIONS
========================================================= */
.shopping-list-side-actions {
display: grid;
flex: 0 0 auto;
gap: 5px;
}
.shopping-list-flag-actions,
.shopping-list-order-actions {
display: flex;
gap: 4px;
}
.shopping-list-flag-actions button,
.shopping-list-heading-flag,
.shopping-note-flag {
display: inline-grid;
place-items: center;
border: 1px solid #e5dcc9;
background: #fff;
color: #8a8172;
cursor: pointer;
}
.shopping-list-flag-actions button {
width: 29px;
height: 29px;
padding: 0;
border-radius: 9px;
}
.shopping-list-flag-actions button[data-toggle-list-flag="is_favorite"].is-active,
.shopping-list-heading-flag[data-toggle-list-flag="is_favorite"].is-active,
.shopping-note-flag[data-toggle-quick-list-flag="is_favorite"].is-active {
border-color: #e6bf3c;
background: #fff1b1;
color: #8b6200;
}
.shopping-list-flag-actions button[data-toggle-list-flag="is_pinned"].is-active,
.shopping-list-heading-flag[data-toggle-list-flag="is_pinned"].is-active,
.shopping-note-flag[data-toggle-quick-list-flag="is_pinned"].is-active {
border-color: #9bc9ae;
background: #dff3e6;
color: #35664a;
}
.shopping-list-card-row.is-pinned .shopping-list-card,
.shopping-note-card.is-pinned {
border-color: #a9cfb7;
box-shadow: 0 10px 26px rgba(58,111,77,.11);
}
.shopping-list-heading-flag {
min-height: 42px;
padding: 0 12px;
grid-auto-flow: column;
gap: 7px;
border-radius: 12px;
font: inherit;
font-size: .78rem;
font-weight: 850;
}
.shopping-note-card-actions {
display: flex;
align-items: flex-start;
gap: 6px;
position: relative;
}
.shopping-list-inline-menu {
position: relative;
display: inline-flex;
align-items: center;
}
.shopping-list-inline-menu .note-menu {
top: calc(100% + 6px);
right: 0;
}
.shopping-note-flag {
width: 34px;
height: 34px;
padding: 0;
border-radius: 10px;
font-size: .84rem;
}
:root[data-theme="dark"] .shopping-list-flag-actions button,
:root[data-theme="dark"] .shopping-list-heading-flag,
:root[data-theme="dark"] .shopping-note-flag {
border-color: #454a50;
background: #272d33;
color: #c7cdd3;
}
/* =========================================================
MOBILE — MENU NOTE TOUJOURS ENTIÈREMENT VISIBLE
========================================================= */
@media (max-width: 900px) {
.note-menu {
position: fixed !important;
z-index: 1300 !important;
top: auto !important;
right: 12px !important;
bottom: calc(78px + env(safe-area-inset-bottom)) !important;
left: 12px !important;
width: auto !important;
max-width: none !important;
max-height: min(68dvh, 560px) !important;
margin: 0 !important;
padding: 10px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
transform: none !important;
border-radius: 20px !important;
}
.note-menu > a,
.note-menu > button,
.note-menu-order-actions {
box-sizing: border-box;
width: 100% !important;
max-width: 100% !important;
}
.note-menu > a,
.note-menu > button {
display: flex !important;
align-items: center;
min-height: 46px !important;
white-space: normal !important;
overflow-wrap: anywhere;
}
}
/* =========================================================
MOBILE PAYSAGE — RAIL FLOTTANT COMPACT
========================================================= */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-width: 1100px) and (max-height: 650px) {
body:has(.mobile-bottom-navigation) {
padding-right: 0 !important;
padding-bottom: 0 !important;
}
.mobile-bottom-navigation {
position: fixed !important;
z-index: 1200 !important;
top: 50% !important;
right: max(8px, env(safe-area-inset-right)) !important;
bottom: auto !important;
left: auto !important;
width: 54px !important;
height: auto !important;
min-height: 0 !important;
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: repeat(5, 48px) !important;
gap: 5px !important;
padding: 6px !important;
transform: translateY(-50%) !important;
border: 1px solid rgba(35,43,39,.12) !important;
border-radius: 18px !important;
background: rgba(255,255,255,.94) !important;
box-shadow: 0 16px 42px rgba(22,29,25,.22) !important;
backdrop-filter: blur(16px);
}
.mobile-bottom-navigation a,
.mobile-bottom-navigation button {
display: grid !important;
place-items: center !important;
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
padding: 0 !important;
border-radius: 13px !important;
color: #5e6862 !important;
text-decoration: none !important;
}
.mobile-bottom-navigation a:hover,
.mobile-bottom-navigation a.is-active,
.mobile-bottom-navigation button.is-active {
background: #fff2b2 !important;
color: #7b5900 !important;
}
.mobile-bottom-navigation span {
font-size: 1.12rem !important;
line-height: 1 !important;
}
.mobile-bottom-navigation small {
display: none !important;
}
.notes-main,
.shopping-page,
.site-main {
padding-right: 70px !important;
}
.floating-add-button,
.mobile-fab,
[data-mobile-create-note] {
right: calc(72px + env(safe-area-inset-right)) !important;
bottom: 12px !important;
}
.notes-sidebar.is-mobile-open {
right: calc(72px + env(safe-area-inset-right)) !important;
}
.note-menu {
right: calc(72px + env(safe-area-inset-right)) !important;
bottom: 10px !important;
left: 12px !important;
max-height: calc(100dvh - 20px) !important;
}
:root[data-theme="dark"] .mobile-bottom-navigation {
border-color: rgba(255,255,255,.10) !important;
background: rgba(29,35,32,.95) !important;
}
}
@media (max-width: 700px) {
.shopping-editor-heading-actions {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
}
.shopping-list-heading-flag,
.shopping-mobile-list-switch,
.shopping-share-list-button,
.shopping-delete-list {
width: 100%;
}
.shopping-list-side-actions {
align-self: center;
}
}
/* =========================================================
MODE SOMBRE MOBILE — BASCULE GLOBALE + REFINEMENT VISUEL
========================================================= */
.mobile-theme-button { display: none; }
@media (max-width: 900px) {
.mobile-bottom-navigation {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
.mobile-theme-button {
display: grid !important;
border: 0;
background: transparent;
color: inherit;
font: inherit;
cursor: pointer;
}
.mobile-theme-button .mobile-theme-icon {
transition: transform .2s ease, color .2s ease;
}
.mobile-theme-button[aria-pressed="true"] .mobile-theme-icon {
transform: rotate(180deg);
}
:root[data-theme="dark"] body:not(.admin-page),
:root[data-theme="dark"] body:not(.admin-page) .app-shell,
:root[data-theme="dark"] body:not(.admin-page) .notes-main,
:root[data-theme="dark"] body:not(.admin-page) main {
background:
radial-gradient(circle at 12% 0%, rgba(238,190,53,.08), transparent 26rem),
#11161b !important;
color: #eef2f4 !important;
}
:root[data-theme="dark"] .mobile-home-header {
background: rgba(22,28,33,.97) !important;
border-color: #333b42 !important;
box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
}
:root[data-theme="dark"] .mobile-home-brand { color: #f4f1e9 !important; }
:root[data-theme="dark"] .mobile-home-menu,
:root[data-theme="dark"] .mobile-home-profile,
:root[data-theme="dark"] .mobile-home-search {
border-color: #3b444c !important;
background: #20272d !important;
color: #edf1f3 !important;
box-shadow: 0 5px 16px rgba(0,0,0,.22) !important;
}
:root[data-theme="dark"] .mobile-home-search input {
color: #f1f4f5 !important;
}
:root[data-theme="dark"] .mobile-home-search input::placeholder { color: #89949c !important; }
:root[data-theme="dark"] .mobile-home-search button { background: #303840 !important; color: #cbd3d8 !important; }
:root[data-theme="dark"] .mobile-home-actions button,
:root[data-theme="dark"] .mobile-home-actions a {
border-color: #414038 !important;
background: linear-gradient(145deg,#252821,#20262b) !important;
color: #eee3b7 !important;
box-shadow: 0 7px 18px rgba(0,0,0,.22) !important;
}
:root[data-theme="dark"] .mobile-home-actions span {
background: linear-gradient(145deg,#f2c84a,#d9a91f) !important;
color: #24200f !important;
}
:root[data-theme="dark"] .notes-toolbar {
border-color: #3d4244 !important;
background: linear-gradient(135deg,#25292c,#1d2328) !important;
color: #f0f3f4 !important;
box-shadow: 0 10px 26px rgba(0,0,0,.24) !important;
}
:root[data-theme="dark"] .notes-toolbar h1,
:root[data-theme="dark"] .notes-toolbar-count { color: #f2f4f5 !important; }
:root[data-theme="dark"] .notes-toolbar #notes-sort,
:root[data-theme="dark"] .notes-toolbar select {
border-color: #46505a !important;
background: #171d22 !important;
color: #edf1f3 !important;
}
:root[data-theme="dark"] .notes-grid .note-card:not(.shopping-note-card) {
border-color: rgba(255,255,255,.13) !important;
color: #242521 !important;
filter: saturate(.72) brightness(.88) !important;
box-shadow: 0 12px 28px rgba(0,0,0,.30) !important;
}
:root[data-theme="dark"] .notes-grid .note-card:not(.shopping-note-card) :where(h2,h3,p,div,span,time,strong) {
text-shadow: none;
}
:root[data-theme="dark"] .shopping-note-card,
:root[data-theme="dark"] .quick-list-dialog .shopping-note-card {
border-color: #504a36 !important;
background: linear-gradient(155deg,#2b291f,#22241f) !important;
color: #f1eee4 !important;
box-shadow: 0 12px 30px rgba(0,0,0,.30) !important;
}
:root[data-theme="dark"] .shopping-note-card h3,
:root[data-theme="dark"] .shopping-note-card .shopping-section-title,
:root[data-theme="dark"] .shopping-note-card .shopping-section-heading { color: #f4f0e5 !important; }
:root[data-theme="dark"] .shopping-note-progress,
:root[data-theme="dark"] .shopping-note-progress span { color: #bbb5a6 !important; }
:root[data-theme="dark"] .shopping-note-card .notes-shopping-item {
border-color: #454a47 !important;
background: #1a2024 !important;
}
:root[data-theme="dark"] .shopping-note-card .notes-shopping-item input,
:root[data-theme="dark"] .shopping-note-card .notes-shopping-item select,
:root[data-theme="dark"] .shopping-note-add input,
:root[data-theme="dark"] .shopping-note-add select {
border-color: #46505a !important;
background: #141a1f !important;
color: #eef1f3 !important;
}
:root[data-theme="dark"] .mobile-bottom-navigation {
border-color: #343c42 !important;
background: rgba(20,25,29,.97) !important;
color: #aeb8be !important;
box-shadow: 0 -10px 28px rgba(0,0,0,.38) !important;
}
:root[data-theme="dark"] .mobile-bottom-navigation a,
:root[data-theme="dark"] .mobile-bottom-navigation button { color: #aeb8be !important; }
:root[data-theme="dark"] .mobile-bottom-navigation .is-active,
:root[data-theme="dark"] .mobile-bottom-navigation button[aria-pressed="true"] {
color: #f2c94c !important;
background: rgba(242,201,76,.09) !important;
}
:root[data-theme="dark"] .note-menu,
:root[data-theme="dark"] .quick-list-dialog,
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] #note-modal .note-editor-modal-card {
border-color: #3d464e !important;
background: #1b2228 !important;
color: #eef2f4 !important;
box-shadow: 0 26px 70px rgba(0,0,0,.50) !important;
}
:root[data-theme="dark"] .note-menu a,
:root[data-theme="dark"] .note-menu button {
color: #e8edef !important;
background: transparent !important;
}
:root[data-theme="dark"] .note-menu a:hover,
:root[data-theme="dark"] .note-menu button:hover { background: #293139 !important; }
:root[data-theme="dark"] .notes-sidebar,
:root[data-theme="dark"] .shopping-page-v3 .shopping-sidebar,
:root[data-theme="dark"] .shopping-page-v3 .shopping-editor,
:root[data-theme="dark"] .account-card,
:root[data-theme="dark"] .profile-card {
border-color: #3a434a !important;
background: #1c2329 !important;
color: #eef2f4 !important;
}
:root[data-theme="dark"] .category-link { color: #cbd2d7 !important; }
:root[data-theme="dark"] .category-link:hover,
:root[data-theme="dark"] .category-link.is-active {
border-color: #665b32 !important;
background: #322e20 !important;
color: #f2d978 !important;
}
}
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-width: 1100px) and (max-height: 650px) {
.mobile-bottom-navigation {
grid-template-rows: repeat(6, 42px) !important;
width: 50px !important;
}
.mobile-bottom-navigation a,
.mobile-bottom-navigation button {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
}
}
/* =========================================================
LISTES — RAYONS PERSONNALISÉS + COLONNE LATÉRALE ÉPURÉE
========================================================= */
.shopping-section-manager {
margin: 16px 0 18px;
border: 1px solid #eadfca;
border-radius: 17px;
background: #fffdf8;
overflow: hidden;
}
.shopping-section-manager > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 14px;
cursor: pointer;
list-style: none;
color: #39342c;
font-size: .82rem;
font-weight: 900;
}
.shopping-section-manager > summary::-webkit-details-marker { display: none; }
.shopping-section-manager > summary b {
color: #9b721e;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .08em;
}
.shopping-section-manager[open] > summary { border-bottom: 1px solid #eee5d5; }
.shopping-section-manager form { padding: 13px 14px 8px; }
.shopping-section-manager form label {
display: block;
margin-bottom: 7px;
color: #756c5d;
font-size: .7rem;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .07em;
}
.shopping-section-manager form > div {
display: grid;
grid-template-columns: minmax(0,1fr) 42px;
gap: 8px;
}
.shopping-section-manager input {
width: 100%;
min-width: 0;
height: 42px;
padding: 0 12px;
border: 1px solid #ddd3c2;
border-radius: 12px;
background: #fff;
color: #282e35;
font: inherit;
}
.shopping-section-manager form button {
border: 0;
border-radius: 12px;
background: #f4c33f;
color: #28220d;
font-size: 1.25rem;
font-weight: 900;
cursor: pointer;
}
.shopping-custom-section-list {
display: grid;
gap: 6px;
padding: 6px 14px 14px;
}
.shopping-custom-section-list > span {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 38px;
padding: 6px 7px 6px 11px;
border-radius: 11px;
background: #f7f3eb;
color: #554d40;
font-size: .76rem;
}
.shopping-custom-section-list button {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border: 0;
border-radius: 9px;
background: #fff0ed;
color: #ba493f;
cursor: pointer;
}
.shopping-section-manager > p {
margin: 0;
padding: 3px 14px 14px;
color: #8a8173;
font-size: .74rem;
}
/* La carte entière devient le conteneur : les commandes ne flottent plus à droite. */
.shopping-page-v3 .shopping-list-nav {
gap: 10px;
}
.shopping-page-v3 .shopping-list-card-row {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
grid-template-rows: auto auto;
gap: 0;
overflow: hidden;
border: 1px solid #e7dfd2;
border-radius: 18px;
background: #fff;
box-shadow: 0 7px 18px rgba(55,45,28,.045);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.shopping-page-v3 .shopping-list-card-row:hover {
border-color: #dfc66e;
box-shadow: 0 10px 24px rgba(55,45,28,.08);
transform: translateY(-1px);
}
.shopping-page-v3 .shopping-list-card-row.is-pinned {
border-color: #8cc9a7;
}
.shopping-page-v3 .shopping-list-card-row.is-favorite:not(.is-pinned) {
border-color: #efd371;
}
.shopping-page-v3 .shopping-list-card-row .shopping-list-card {
grid-column: 1 / -1;
grid-row: 1;
display: grid;
grid-template-columns: 44px minmax(0,1fr);
gap: 11px;
width: 100%;
padding: 13px 13px 10px;
border: 0 !important;
border-radius: 0;
background: transparent !important;
box-shadow: none !important;
transform: none !important;
}
.shopping-page-v3 .shopping-list-card-row .shopping-list-card.is-active {
background: linear-gradient(135deg,rgba(255,246,207,.76),rgba(255,255,255,.9)) !important;
}
.shopping-page-v3 .shopping-list-card-icon {
width: 44px;
height: 44px;
flex-basis: 44px;
border-radius: 14px;
}
.shopping-page-v3 .shopping-list-card-top {
align-items: flex-start;
}
.shopping-page-v3 .shopping-list-card-top strong {
white-space: normal;
overflow: visible;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.25;
}
.shopping-page-v3 .shopping-list-card-top b {
display: grid;
place-items: center;
min-width: 28px;
height: 28px;
padding: 0 7px;
border-radius: 999px;
background: #fff3bd;
font-size: .75rem;
}
.shopping-page-v3 .shopping-list-card-meta { margin-top: 4px; }
.shopping-page-v3 .shopping-list-mini-progress { margin-top: 8px; }
.shopping-page-v3 .shopping-list-side-actions {
grid-column: 1 / -1;
grid-row: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border-top: 1px solid #eee8dc;
background: #fbfaf7;
}
.shopping-page-v3 .shopping-list-flag-actions,
.shopping-page-v3 .shopping-list-order-actions {
display: flex;
align-items: center;
gap: 6px;
}
.shopping-page-v3 .shopping-list-flag-actions {
flex-wrap: nowrap;
}
.shopping-page-v3 .shopping-list-side-actions button {
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid #e5dfd5;
border-radius: 10px;
background: #fff;
color: #777065;
cursor: pointer;
}
.shopping-page-v3 .shopping-list-inline-menu .note-menu-button {
width: 32px;
height: 32px;
}
.shopping-page-v3 .shopping-list-side-actions button:disabled {
opacity: .28;
cursor: default;
}
.shopping-page-v3 .shopping-list-flag-actions button.is-active {
border-color: #e7bd35;
background: #fff2b9;
color: #8a6200;
}
.shopping-page-v3 .shopping-list-flag-actions button[data-toggle-list-flag="is_pinned"].is-active {
border-color: #8bc6a5;
background: #e8f7ee;
color: #31744d;
}
.shopping-page-v3 .shopping-nav-tags { margin-top: 7px; }
.shopping-page-v3 .shopping-sidebar-tip { margin-top: 16px; }
:root[data-theme="dark"] .shopping-section-manager,
:root[data-theme="dark"] .shopping-page-v3 .shopping-list-card-row {
border-color: #3c454c;
background: #1b2228;
}
:root[data-theme="dark"] .shopping-section-manager > summary,
:root[data-theme="dark"] .shopping-section-manager input,
:root[data-theme="dark"] .shopping-custom-section-list > span {
color: #e9edef;
}
:root[data-theme="dark"] .shopping-section-manager input {
border-color: #46515a;
background: #141a1f;
}
:root[data-theme="dark"] .shopping-custom-section-list > span,
:root[data-theme="dark"] .shopping-page-v3 .shopping-list-side-actions {
border-color: #394249;
background: #20272d;
}
:root[data-theme="dark"] .shopping-page-v3 .shopping-list-side-actions button {
border-color: #465058;
background: #171d22;
color: #cdd3d7;
}
:root[data-theme="dark"] .shopping-page-v3 .shopping-list-card-row .shopping-list-card.is-active {
background: linear-gradient(135deg,rgba(90,75,25,.28),rgba(27,34,40,.96)) !important;
}
@media (max-width: 700px) {
.shopping-section-manager { margin: 13px 0; }
.shopping-page-v3 .shopping-list-card-row {
min-width: min(285px, calc(100vw - 46px));
}
.shopping-page-v3 .shopping-list-side-actions { padding: 7px 9px; }
}
/* =========================================================
LISTES — ORDRE DES RAYONS ET ARTICLES + THÈME SOMBRE MOBILE
========================================================= */
.shopping-custom-section-actions {
display: inline-flex;
align-items: center;
gap: 5px;
flex: 0 0 auto;
}
.shopping-custom-section-list > span > strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.shopping-custom-section-actions button {
width: 30px;
height: 30px;
border-radius: 9px;
background: #eee9df;
color: #5e574c;
font-size: .85rem;
font-weight: 900;
}
.shopping-custom-section-actions button:hover:not(:disabled) {
background: #e5dccb;
color: #28241e;
}
.shopping-custom-section-actions button:disabled {
opacity: .32;
cursor: not-allowed;
}
.shopping-custom-section-actions .shopping-custom-section-delete {
background: #fff0ed;
color: #ba493f;
}
.shopping-custom-section-actions .shopping-custom-section-delete:hover:not(:disabled) {
background: #ffe3df;
color: #9f3028;
}
@media (max-width: 700px) {
.shopping-item-actions button[data-move-item] {
display: grid !important;
}
.shopping-item-actions {
grid-template-columns: repeat(3, 32px) !important;
grid-column: 2 / -1 !important;
grid-row: auto !important;
justify-content: end;
margin-top: 7px;
}
.shopping-item {
grid-template-columns: 38px minmax(0,1fr) !important;
}
.shopping-item-fields {
grid-column: 2 !important;
}
.shopping-custom-section-list > span {
align-items: center;
padding: 7px 8px 7px 11px;
}
}
@media (max-width: 900px) {
:root[data-theme="dark"] body,
:root[data-theme="dark"] .site-main,
:root[data-theme="dark"] .shopping-page,
:root[data-theme="dark"] .shopping-page-v3 {
background: #11161c !important;
color: #edf1f4 !important;
}
:root[data-theme="dark"] .mobile-home-header,
:root[data-theme="dark"] .shopping-mobile-toolbar,
:root[data-theme="dark"] .mobile-notes-bar {
border-color: #2f3943 !important;
background: rgba(18,24,31,.97) !important;
color: #f0f3f6 !important;
box-shadow: 0 8px 24px rgba(0,0,0,.24) !important;
}
:root[data-theme="dark"] .mobile-home-menu,
:root[data-theme="dark"] .mobile-home-profile,
:root[data-theme="dark"] .mobile-home-search,
:root[data-theme="dark"] .mobile-home-actions button,
:root[data-theme="dark"] .mobile-home-actions a,
:root[data-theme="dark"] .mobile-notes-tab {
border-color: #35414c !important;
background: #1c242c !important;
color: #e8edf1 !important;
}
:root[data-theme="dark"] .mobile-home-brand,
:root[data-theme="dark"] .mobile-home-search input {
color: #f5f6f7 !important;
}
:root[data-theme="dark"] .notes-toolbar,
:root[data-theme="dark"] .notes-sidebar,
:root[data-theme="dark"] .shopping-page-v3 .shopping-sidebar,
:root[data-theme="dark"] .shopping-page-v3 .shopping-editor,
:root[data-theme="dark"] .shopping-add-panel,
:root[data-theme="dark"] .shopping-progress-panel,
:root[data-theme="dark"] .shopping-section-manager,
:root[data-theme="dark"] .shopping-share-panel,
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] .note-editor-modal-card {
border-color: #34404a !important;
background: #1a222a !important;
color: #edf1f4 !important;
box-shadow: 0 14px 34px rgba(0,0,0,.25) !important;
}
:root[data-theme="dark"] .shopping-new-list,
:root[data-theme="dark"] .shopping-custom-section-list > span,
:root[data-theme="dark"] .shopping-smart-suggestions,
:root[data-theme="dark"] .shopping-bulk-add,
:root[data-theme="dark"] .shopping-item,
:root[data-theme="dark"] .notes-grid .note-card:not(.shopping-note-card) {
border-color: #35414b !important;
background: #202932 !important;
color: #f0f3f5 !important;
}
:root[data-theme="dark"] .shopping-list-card,
:root[data-theme="dark"] .category-link,
:root[data-theme="dark"] .shopping-tag-chip {
color: #dce3e8 !important;
}
:root[data-theme="dark"] .shopping-list-card:hover,
:root[data-theme="dark"] .shopping-list-card.is-active,
:root[data-theme="dark"] .category-link:hover,
:root[data-theme="dark"] .category-link.is-active {
border-color: #665a2d !important;
background: #302b1d !important;
color: #ffe07a !important;
}
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .shopping-item-label,
:root[data-theme="dark"] .shopping-item-quantity,
:root[data-theme="dark"] .shopping-item-section {
border-color: #3b4650 !important;
background: #141b22 !important;
color: #f1f4f6 !important;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
color: #86919b !important;
}
:root[data-theme="dark"] .shopping-section-heading,
:root[data-theme="dark"] .shopping-items-toolbar h2,
:root[data-theme="dark"] .shopping-sidebar-heading h2,
:root[data-theme="dark"] .shopping-editor-heading h1,
:root[data-theme="dark"] .shopping-editor-heading h2 {
color: #f2f4f5 !important;
}
:root[data-theme="dark"] .shopping-section-heading span,
:root[data-theme="dark"] .shopping-list-card-icon,
:root[data-theme="dark"] .mobile-home-actions span {
background: #594a18 !important;
color: #ffe075 !important;
}
:root[data-theme="dark"] .shopping-item-actions button,
:root[data-theme="dark"] .shopping-custom-section-actions button,
:root[data-theme="dark"] .shopping-footer-actions button,
:root[data-theme="dark"] .shopping-suggestion-chip {
border-color: #3b4650 !important;
background: #28323b !important;
color: #e7ecef !important;
}
:root[data-theme="dark"] .shopping-item-actions .shopping-item-delete,
:root[data-theme="dark"] .shopping-custom-section-actions .shopping-custom-section-delete {
background: #422725 !important;
color: #ffaaa2 !important;
}
:root[data-theme="dark"] .button-primary,
:root[data-theme="dark"] .shopping-create-button,
:root[data-theme="dark"] .shopping-add-details > button {
background: linear-gradient(135deg,#f3cc4f,#dca921) !important;
color: #241e0e !important;
}
}
/* =========================================================
LISTES — ALIGNEMENT UNIFORME DES ACTIONS ET MENU FIABLE
========================================================= */
.shopping-note-card-header > div:first-child {
min-width: 0;
flex: 1 1 auto;
}
.shopping-note-card-actions {
flex: 0 0 auto;
align-items: center;
flex-wrap: nowrap;
}
.shopping-note-card-actions > .shopping-note-flag,
.shopping-note-card-actions > .shopping-list-inline-menu,
.shopping-note-card-actions .note-menu-button {
flex: 0 0 34px;
}
.shopping-note-card .shopping-list-inline-menu .note-menu-button,
.shopping-page-v3 .shopping-list-inline-menu .note-menu-button {
position: static !important;
inset: auto !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
letter-spacing: .08em;
}
.shopping-note-card .shopping-list-inline-menu .note-menu-button {
width: 34px !important;
height: 34px !important;
border: 1px solid rgba(39,50,43,.10) !important;
border-radius: 11px !important;
background: rgba(255,255,255,.58) !important;
color: #69736d !important;
}
.shopping-note-card .shopping-note-flag {
width: 34px !important;
min-width: 34px !important;
height: 34px !important;
}
.shopping-list-inline-menu .note-menu[hidden] {
display: none !important;
}
:root[data-theme="dark"] .shopping-note-card .shopping-list-inline-menu .note-menu-button {
border-color: #454a50 !important;
background: #272d33 !important;
color: #c7cdd3 !important;
}
/* =========================================================
ZONE DE CALCUL, FONDS D'ÉCRAN ET THÈME SOMBRE 2026
========================================================= */
.note-calculator{display:grid;gap:14px;padding:17px;border:1px solid #dce2e6;border-radius:17px;background:#f7f9fa}
.note-calculator[hidden]{display:none!important}
.note-calculator header,.note-calculator-actions,.note-calculator-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.note-calculator header>div{display:grid;gap:2px}.note-calculator header span{color:#6c7680;font-size:.82rem}
.note-calculator header>button,.note-calculator-row>button{border:0;border-radius:9px;background:#e9edf0;color:#5d6872;cursor:pointer}
.note-calculator header>button{width:34px;height:34px;font-size:1.2rem}
.note-calculator-rows{display:grid;gap:8px}.note-calculator-row{display:grid;grid-template-columns:minmax(0,1fr) 120px 18px 34px;align-items:center;gap:8px}
.note-calculator-row input,.note-calculator-footer input{min-width:0;padding:11px 12px;border:1px solid #d5dce1;border-radius:11px;background:#fff;color:#18202a;font:inherit}
.note-calculator-row>button{height:38px;font-size:1.15rem}.note-calculator-actions label{font-weight:800}.note-calculator-actions output{margin-left:8px;color:#9c7100;font-size:1.15rem}
.note-calculator-footer input{flex:1}.note-editor-shortcuts>button#open-note-calculator{font-weight:850;color:#8c6500}
.wallpaper-preferences{display:grid;gap:14px;margin-top:24px;padding-top:23px;border-top:1px solid #e7eaed}.wallpaper-heading{display:grid;gap:3px}.wallpaper-heading span,.wallpaper-custom small{color:#6e7882;font-size:.84rem}
.wallpaper-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.wallpaper-grid button{display:grid;gap:7px;padding:7px;border:2px solid transparent;border-radius:13px;background:transparent;color:inherit;font:inherit;font-weight:800;cursor:pointer}.wallpaper-grid button.is-selected{border-color:#dfac1e;background:#fff8dc}
.wallpaper-grid i{display:block;height:62px;border:1px solid #d8dde1;border-radius:10px;background:#f3f4f5}.wallpaper-grid button[data-wallpaper=paper] i{background:repeating-linear-gradient(0deg,#f7f1de 0 23px,#d9e4ed 24px 25px)}.wallpaper-grid button[data-wallpaper=warm] i{background:linear-gradient(135deg,#f9e7ca,#eebd83)}.wallpaper-grid button[data-wallpaper=forest] i{background:linear-gradient(135deg,#dcebdc,#789b78)}.wallpaper-grid button[data-wallpaper=night] i{background:linear-gradient(135deg,#253547,#0f1721)}
.wallpaper-custom{display:grid;gap:7px}.wallpaper-custom input{padding:10px;border:1px dashed #cbd2d8;border-radius:12px;background:#fafbfb}
:root[data-wallpaper=paper] body{background-color:#f3efe5;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.62) 0 31px,rgba(174,196,210,.22) 32px 33px)}
:root[data-wallpaper=warm] body{background:linear-gradient(135deg,rgba(255,250,241,.94),rgba(239,203,158,.64)),radial-gradient(circle at 20% 10%,#fff2d8,transparent 42%);background-attachment:fixed}
:root[data-wallpaper=forest] body{background:linear-gradient(135deg,rgba(241,247,240,.94),rgba(153,184,151,.62)),radial-gradient(circle at 80% 10%,#55745b,transparent 40%);background-attachment:fixed}
:root[data-wallpaper=night] body{background:radial-gradient(circle at 20% 10%,#30465d 0,transparent 34%),linear-gradient(135deg,#151e28,#080d12);background-attachment:fixed}
:root[data-wallpaper=custom] body{background-image:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)),var(--custom-wallpaper);background-size:cover;background-position:center;background-attachment:fixed}
:root[data-wallpaper]:not([data-wallpaper=none]) .site-main{background:transparent}
:root[data-theme=dark]{--dark-bg:#0f151b;--dark-panel:#182129;--dark-panel-2:#202b34;--dark-border:#35424d;--dark-text:#eef2f5;--dark-muted:#9ba7b1}
:root[data-theme=dark] .note-calculator{border-color:var(--dark-border);background:#151d24;color:var(--dark-text)}
:root[data-theme=dark] .note-calculator header span,:root[data-theme=dark] .wallpaper-heading span,:root[data-theme=dark] .wallpaper-custom small{color:var(--dark-muted)}
:root[data-theme=dark] .note-calculator-row input,:root[data-theme=dark] .note-calculator-footer input,:root[data-theme=dark] .wallpaper-custom input{border-color:var(--dark-border);background:#10171d;color:var(--dark-text)}
:root[data-theme=dark] .note-calculator header>button,:root[data-theme=dark] .note-calculator-row>button{background:#29353f;color:#e7edf1}
:root[data-theme=dark] .wallpaper-preferences{border-color:var(--dark-border)}:root[data-theme=dark] .wallpaper-grid button.is-selected{border-color:#e3bd45;background:#332c18;color:#ffe486}
:root[data-theme=dark] .note-writing-surface,:root[data-theme=dark] .note-editor-shortcuts,:root[data-theme=dark] .voice-panel,:root[data-theme=dark] .attachments-panel,:root[data-theme=dark] .note-relations-panel{border-color:var(--dark-border)!important;background:#141c23!important;color:var(--dark-text)!important}
:root[data-theme=dark] .note-writing-surface textarea{background:#10171d!important;color:#f3f6f8!important;-webkit-text-fill-color:#f3f6f8!important}
:root[data-theme=dark] .note-editor-heading label,:root[data-theme=dark] .note-form label>span,:root[data-theme=dark] .color-fieldset legend{color:#dfe5e9!important}
:root[data-theme=dark] .note-menu{border-color:var(--dark-border);background:#202a33;color:var(--dark-text)}:root[data-theme=dark] .note-menu button{color:var(--dark-text)}:root[data-theme=dark] .note-menu button:hover{background:#2b3741}
:root[data-theme=dark] .quick-list-overlay{background:rgba(3,7,10,.76)}:root[data-theme=dark] .quick-list-dialog{border-color:var(--dark-border)!important;background:#182129!important;color:var(--dark-text)!important}
@media(max-width:700px){.note-calculator-row{grid-template-columns:minmax(0,1fr) 88px 14px 32px}.note-calculator-actions,.note-calculator-footer{align-items:stretch;flex-direction:column}.wallpaper-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Accueil des notes — fond personnalisable des cartes de listes */
.shopping-note-card {
background: linear-gradient(145deg, color-mix(in srgb, var(--list-card-color, #fff4c7) 92%, #ffffff 8%), var(--list-card-color, #fff4c7));
border-color: color-mix(in srgb, var(--list-card-color, #fff4c7) 68%, #8f7b43 32%);
}
.shopping-list-color-picker {
display: grid;
grid-template-columns: repeat(7, 22px);
gap: 6px;
align-items: center;
padding: 9px 10px 7px;
border-top: 1px solid rgba(30, 34, 38, .10);
}
.shopping-list-color-picker > span {
grid-column: 1 / -1;
font-size: 11px;
font-weight: 800;
color: #68716b;
}
.shopping-list-color-choice {
width: 22px;
height: 22px;
padding: 0 !important;
border: 2px solid rgba(28, 31, 34, .16) !important;
border-radius: 999px !important;
background: var(--choice-color) !important;
box-shadow: none !important;
}
.shopping-list-color-choice.is-selected {
border-color: #20252a !important;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(32, 37, 42, .25) !important;
}
:root[data-theme="dark"] .shopping-note-card {
background: linear-gradient(145deg, color-mix(in srgb, var(--list-card-color, #fff4c7) 24%, #171b20 76%), color-mix(in srgb, var(--list-card-color, #fff4c7) 14%, #11151a 86%));
border-color: color-mix(in srgb, var(--list-card-color, #fff4c7) 35%, #313840 65%);
}
:root[data-theme="dark"] .shopping-list-color-picker {
border-top-color: rgba(255,255,255,.10);
}
:root[data-theme="dark"] .shopping-list-color-picker > span {
color: #b9c1c8;
}
/* Correctif : le fond choisi doit rester visible sur la carte de liste de l'accueil.
Ces règles sont volontairement placées en fin de fichier pour dépasser
les anciens fonds fixes, notamment ceux déclarés avec !important. */
.notes-grid > .shopping-note-card {
background: linear-gradient(
145deg,
color-mix(in srgb, var(--list-card-color, #fff4c7) 92%, #ffffff 8%),
var(--list-card-color, #fff4c7)
) !important;
border-color: color-mix(in srgb, var(--list-card-color, #fff4c7) 68%, #8f7b43 32%) !important;
}
:root[data-theme="dark"] .notes-grid > .shopping-note-card {
background: linear-gradient(
145deg,
color-mix(in srgb, var(--list-card-color, #fff4c7) 24%, #171b20 76%),
color-mix(in srgb, var(--list-card-color, #fff4c7) 14%, #11151a 86%)
) !important;
border-color: color-mix(in srgb, var(--list-card-color, #fff4c7) 35%, #313840 65%) !important;
}
/* Filtre rapide : listes uniquement */
.lists-only-filter {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 46px;
padding: 0 16px;
border: 1px solid rgba(48, 57, 52, .16);
border-radius: 14px;
background: rgba(255, 255, 255, .92);
color: #28322d;
font-size: .88rem;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.lists-only-filter:hover { transform: translateY(-1px); border-color: rgba(48, 57, 52, .32); }
.lists-only-filter span { font-size: .95rem; }
.lists-only-filter.is-active {
border-color: #344d3c;
background: #344d3c;
color: #fff;
}
:root[data-theme="dark"] .lists-only-filter {
border-color: #46514a;
background: #252d29;
color: #eef4f0;
}
:root[data-theme="dark"] .lists-only-filter.is-active {
border-color: #9cc5a9;
background: #9cc5a9;
color: #172019;
}
@media (max-width: 760px) {
.lists-only-filter { width: 100%; min-height: 44px; }
}
/* Partage d'une liste depuis l'accueil des notes */
.quick-list-share-overlay {
position: fixed;
inset: 0;
z-index: 10050;
display: grid;
place-items: center;
padding: 20px;
background: rgba(26, 31, 28, .48);
backdrop-filter: blur(5px);
}
.quick-list-share-modal {
width: min(560px, 100%);
max-height: calc(100vh - 40px);
overflow: auto;
padding: 24px;
border: 1px solid rgba(70, 79, 73, .14);
border-radius: 24px;
background: #fff;
box-shadow: 0 28px 80px rgba(29, 38, 33, .25);
}
.quick-list-share-modal > header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.quick-list-share-modal > header span {
display: block;
margin-bottom: 4px;
color: #718078;
font-size: .76rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.quick-list-share-modal h2 {
margin: 0;
font-size: clamp(1.25rem, 4vw, 1.7rem);
}
.quick-list-share-modal > header > button {
flex: 0 0 auto;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: #f0f3f1;
color: #27312c;
font-size: 1.45rem;
cursor: pointer;
}
.quick-list-share-modal > p:not(.quick-list-share-feedback) {
margin: 16px 0;
color: #66736c;
line-height: 1.55;
}
.quick-list-share-permissions {
display: grid;
gap: 10px;
margin: 18px 0;
}
.quick-list-share-permissions label {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 14px;
border: 1px solid #dde4df;
border-radius: 14px;
cursor: pointer;
}
.quick-list-share-link {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 8px;
margin-top: 18px;
}
.quick-list-share-link input,
.quick-list-share-link button,
.quick-list-share-link a {
min-height: 43px;
border: 1px solid #d9e1dc;
border-radius: 12px;
}
.quick-list-share-link input {
min-width: 0;
padding: 0 12px;
background: #f7f9f8;
}
.quick-list-share-link button,
.quick-list-share-link a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 14px;
background: #fff;
color: #2f4a3b;
font-weight: 800;
text-decoration: none;
cursor: pointer;
}
.quick-list-share-modal > small {
display: block;
min-height: 18px;
margin-top: 8px;
color: #77827c;
}
.quick-list-share-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.quick-list-share-revoke {
color: #a13c3c;
}
.quick-list-share-feedback {
min-height: 22px;
margin: 12px 0 0;
font-weight: 700;
}
.quick-list-share-feedback[data-state="saved"] { color: #25764b; }
.quick-list-share-feedback[data-state="error"] { color: #b23a3a; }
:root[data-theme="dark"] .quick-list-share-modal {
border-color: rgba(255, 255, 255, .09);
background: #202723;
color: #f3f6f4;
}
:root[data-theme="dark"] .quick-list-share-modal > header > button,
:root[data-theme="dark"] .quick-list-share-link button,
:root[data-theme="dark"] .quick-list-share-link a {
background: #303a34;
color: #f1f5f2;
}
:root[data-theme="dark"] .quick-list-share-permissions label,
:root[data-theme="dark"] .quick-list-share-link input,
:root[data-theme="dark"] .quick-list-share-link button,
:root[data-theme="dark"] .quick-list-share-link a {
border-color: #465149;
}
:root[data-theme="dark"] .quick-list-share-link input {
background: #171c19;
color: #f1f5f2;
}
@media (max-width: 620px) {
.quick-list-share-overlay { padding: 10px; }
.quick-list-share-modal { padding: 19px; border-radius: 20px; }
.quick-list-share-link { grid-template-columns: 1fr 1fr; }
.quick-list-share-link input { grid-column: 1 / -1; }
.quick-list-share-actions .button { flex: 1 1 100%; }
}
/* =========================================================
Liste collaborative publique — refonte V34
========================================================= */
.shopping-public-shell {
width: min(1240px, calc(100% - 48px));
margin: 38px auto 78px;
}
.shopping-public-heading {
padding: 34px 36px;
border: 1px solid #eadfce;
border-radius: 24px;
background: rgba(255, 253, 249, .94);
box-shadow: 0 14px 38px rgba(63, 48, 24, .07);
}
.shopping-public-heading .eyebrow {
color: #9a6b1e;
letter-spacing: .09em;
}
.shopping-public-heading h1 {
margin: 10px 0 12px;
font-size: clamp(2.35rem, 5vw, 4rem);
line-height: 1;
letter-spacing: -.035em;
}
.shopping-share-badge {
padding: 10px 14px;
border: 0;
border-radius: 999px;
background: #eef2e4;
color: #496633;
font-weight: 800;
}
.shopping-public-shell > .shopping-add-item {
display: grid;
grid-template-columns: minmax(260px, 1.7fr) minmax(130px, .55fr) minmax(210px, .95fr) 190px;
gap: 14px;
margin: 20px 0;
padding: 20px;
border: 1px solid #e9e0d3;
border-radius: 20px;
background: rgba(255,255,255,.88);
box-shadow: 0 10px 28px rgba(49, 42, 31, .055);
}
.shopping-public-shell > .shopping-add-item :where(input,select) {
min-width: 0;
border: 1px solid #ded5c9;
background: #fff;
}
.shopping-public-shell > .shopping-add-item .button-primary {
border-color: #efb91f;
background: linear-gradient(135deg, #f7ca43, #efb51b);
color: #32250b;
font-weight: 900;
box-shadow: 0 8px 20px rgba(227, 166, 14, .18);
}
.shopping-public-progress {
padding: 20px 22px;
border: 1px solid #e9e0d3;
border-radius: 18px;
background: rgba(255,253,249,.9);
box-shadow: 0 8px 22px rgba(49, 42, 31, .045);
}
.shopping-public-section-heading {
margin: 28px 10px 12px;
padding-bottom: 10px;
border-bottom: 1px solid #e9e1d6;
}
.shopping-public-items .shopping-item {
grid-template-columns: 46px minmax(0, 1fr) auto 48px;
gap: 16px;
min-height: 76px;
padding: 14px 18px;
border: 1px solid #e9e3dc;
border-radius: 16px;
background: rgba(255,255,255,.95);
box-shadow: 0 7px 20px rgba(35, 31, 25, .045);
}
.shopping-public-items .shopping-shared-label {
display: flex;
align-items: center;
gap: 14px;
}
.shopping-public-items .shopping-shared-label strong {
font-size: 1.05rem;
}
.shopping-public-items .shopping-shared-label span,
.shopping-public-items .shopping-shared-section {
display: inline-flex;
align-items: center;
width: max-content;
min-height: 30px;
padding: 5px 10px;
border-radius: 9px;
background: #f7f3ed;
color: #746b60;
font-size: .78rem;
font-weight: 700;
}
.shopping-public-items .shopping-item-delete {
width: 42px;
min-width: 42px;
min-height: 42px;
border: 1px solid #e4ddd4;
border-radius: 11px;
background: #fff;
color: #6b7379;
font-size: 1.25rem;
}
.shopping-identity-overlay {
position: fixed;
z-index: 2500;
inset: 0;
display: grid;
place-items: center;
padding: 28px;
overflow-y: auto;
background:
radial-gradient(circle at 50% 10%, rgba(255,255,255,.96), rgba(250,245,237,.95) 58%, rgba(244,235,220,.96));
backdrop-filter: blur(10px);
}
.shopping-identity-overlay[hidden] { display: none !important; }
.shopping-identity-dialog {
box-sizing: border-box;
width: min(940px, 100%);
padding: clamp(34px, 6vw, 66px) clamp(24px, 8vw, 92px) 38px;
border: 1px solid #e5d7c4;
border-radius: 30px;
background: rgba(255, 253, 249, .97);
color: #172333;
text-align: center;
box-shadow: 0 26px 70px rgba(68, 49, 24, .14);
}
.shopping-identity-dialog .eyebrow {
margin-bottom: 18px;
color: #9a6b1e;
font-size: .82rem;
letter-spacing: .1em;
}
.shopping-identity-dialog h2 {
margin: 0;
font-size: clamp(2.35rem, 6vw, 4.25rem);
line-height: .98;
letter-spacing: -.045em;
}
.shopping-identity-intro {
margin: 24px auto 30px;
color: #5f6871;
font-size: 1.05rem;
}
.shopping-identity-join-row {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr);
gap: 18px;
max-width: 680px;
margin: 0 auto;
}
.shopping-identity-join-row input,
.shopping-identity-join-row button {
min-height: 64px !important;
border-radius: 15px !important;
font-size: 1.05rem;
}
.shopping-identity-join-row input {
padding: 0 22px;
border: 1px solid #dfd1bd;
background: #fff;
}
.shopping-identity-join-row .button-primary {
border-color: #efb91f;
background: linear-gradient(135deg, #f8cd4b, #efb51c);
color: #30230a;
font-weight: 900;
box-shadow: 0 10px 24px rgba(222, 160, 12, .18);
}
.shopping-identity-error {
display: block;
min-height: 20px;
margin-top: 9px;
color: #a43d36;
}
.shopping-identity-account {
max-width: 680px;
margin: 22px auto 0;
}
.shopping-identity-divider {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
margin: 8px 0 18px;
color: #ae761c;
}
.shopping-identity-divider::before,
.shopping-identity-divider::after {
content: "";
height: 1px;
background: #e3d7c7;
}
.shopping-identity-divider span { font-size: 1.35rem; }
.shopping-identity-account > p:first-of-type {
margin: 0 0 20px;
color: #68717a;
line-height: 1.45;
}
.shopping-google-login,
.shopping-create-account {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
box-sizing: border-box;
width: 100%;
min-height: 58px;
margin-top: 12px;
padding: 12px 18px;
border: 1px solid #dfd8cf;
border-radius: 14px;
background: #fff;
color: #172333;
font-size: 1rem;
font-weight: 850;
text-decoration: none;
box-shadow: 0 7px 20px rgba(43, 37, 29, .055);
}
.shopping-create-account {
background: transparent;
color: #9a6515;
box-shadow: none;
}
.shopping-google-login:hover,
.shopping-create-account:hover { transform: translateY(-1px); }
.shopping-existing-account {
margin: 22px 0 -78px !important;
color: #68717a;
}
.shopping-existing-account a {
color: #ad6f13;
text-underline-offset: 4px;
}
html[data-theme="dark"] .shopping-identity-overlay {
background: radial-gradient(circle at 50% 5%, rgba(39,45,51,.98), rgba(20,25,30,.98));
}
html[data-theme="dark"] .shopping-identity-dialog {
border-color: #41484f;
background: rgba(31,37,43,.98);
color: #f2f5f7;
}
html[data-theme="dark"] .shopping-identity-intro,
html[data-theme="dark"] .shopping-identity-account > p,
html[data-theme="dark"] .shopping-existing-account { color: #b3bbc1; }
html[data-theme="dark"] .shopping-identity-join-row input,
html[data-theme="dark"] .shopping-google-login {
border-color: #495159;
background: #252c32;
color: #f4f6f7;
}
html[data-theme="dark"] .shopping-create-account { border-color: #4a5158; }
html[data-theme="dark"] .shopping-identity-divider::before,
html[data-theme="dark"] .shopping-identity-divider::after { background: #4a5158; }
@media (max-width: 760px) {
.shopping-public-shell { width: calc(100% - 24px); margin-top: 14px; }
.shopping-public-heading { padding: 22px 18px; }
.shopping-public-shell > .shopping-add-item { grid-template-columns: 1fr; padding: 14px; }
.shopping-public-items .shopping-item {
grid-template-columns: 42px minmax(0,1fr) 42px !important;
gap: 10px !important;
}
.shopping-public-items .shopping-shared-label {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
gap: 6px 10px;
}
.shopping-public-items .shopping-shared-section { grid-column: 2; }
.shopping-public-items .shopping-item-delete { grid-column: 3; grid-row: 1 / span 2; width: 40px; }
.shopping-identity-overlay { place-items: start center; padding: 14px 10px 90px; }
.shopping-identity-dialog { padding: 34px 18px 26px; border-radius: 24px; }
.shopping-identity-dialog h2 { font-size: clamp(2.2rem, 13vw, 3.35rem); }
.shopping-identity-intro { margin: 18px auto 24px; font-size: .96rem; }
.shopping-identity-join-row { grid-template-columns: 1fr; gap: 10px; }
.shopping-identity-join-row input,
.shopping-identity-join-row button { min-height: 54px !important; }
.shopping-identity-account > p:first-of-type br { display: none; }
.shopping-existing-account { margin: 20px 0 0 !important; }
}
/* =========================================================
OUTILS MOBILES, ÉCHÉANCES ET RENDEZ-VOUS — 2026-08
========================================================= */
.note-mobile-tools{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.note-mobile-tools button,.deadline-quick-choices button{min-height:44px;border:1px solid #d8dee2;border-radius:12px;background:#fff;color:#26313a;font:inherit;font-weight:800;cursor:pointer}
.note-mobile-tools button span{margin-right:5px;color:#a87700}
.appointment-assistant{display:grid;gap:16px;padding:18px;border:1px solid #dce2e6;border-radius:18px;background:#f8fafb}
.appointment-assistant[hidden]{display:none!important}
.appointment-assistant header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.appointment-assistant header>div{display:grid;gap:3px}.appointment-assistant header span{color:#6c7680;font-size:.84rem}
.appointment-assistant header>button{width:36px;height:36px;border:0;border-radius:10px;background:#e9edf0;color:#4f5b64;font-size:1.25rem;cursor:pointer}
.appointment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.appointment-grid label{display:grid;gap:6px}.appointment-grid label>span{font-size:.78rem;font-weight:850;color:#4b5862;text-transform:uppercase;letter-spacing:.04em}
.appointment-grid .appointment-wide{grid-column:1/-1}
.appointment-grid input,.appointment-grid textarea{width:100%;min-width:0;padding:12px 13px;border:1px solid #d3dbe0;border-radius:12px;background:#fff;color:#18222b;font:inherit;line-height:1.4}
.appointment-grid textarea{resize:vertical}
.appointment-actions{display:flex;justify-content:flex-end;gap:10px}
.deadline-quick-choices{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.deadline-quick-choices button{min-height:38px;padding:0 13px;font-size:.82rem}
.deadline-quick-choices button:hover,.deadline-quick-choices button.is-selected{border-color:#d7a51b;background:#fff5cf;color:#725000}
:root[data-theme=dark] .appointment-assistant{border-color:var(--dark-border);background:#151d24;color:var(--dark-text)}
:root[data-theme=dark] .appointment-assistant header span{color:var(--dark-muted)}
:root[data-theme=dark] .appointment-grid label>span{color:#cbd4db}
:root[data-theme=dark] .appointment-grid input,:root[data-theme=dark] .appointment-grid textarea,:root[data-theme=dark] .note-mobile-tools button,:root[data-theme=dark] .deadline-quick-choices button{border-color:var(--dark-border);background:#10171d;color:var(--dark-text);-webkit-text-fill-color:var(--dark-text)}
:root[data-theme=dark] .deadline-quick-choices button.is-selected{border-color:#dfbd55;background:#332b17;color:#ffe48a;-webkit-text-fill-color:#ffe48a}
@media(max-width:760px){
.note-mobile-tools{display:grid}
.note-editor-shortcuts{display:none!important}
.appointment-grid{grid-template-columns:1fr}
.appointment-grid .appointment-wide{grid-column:auto}
.appointment-actions{display:grid;grid-template-columns:1fr}
.appointment-actions .button{width:100%;min-height:46px}
.note-calculator{padding:14px}
.note-calculator-row{grid-template-columns:minmax(0,1fr) 82px 12px 36px}
.note-calculator-row input,.note-calculator-footer input,.appointment-grid input,.appointment-grid textarea,
.deadline-fields input,.note-form input,.note-form select,.note-form textarea{font-size:16px!important;line-height:1.45!important;opacity:1!important}
.note-writing-surface textarea{min-height:260px;color:#17212a!important;-webkit-text-fill-color:#17212a!important;caret-color:#17212a!important}
:root[data-theme=dark] .note-writing-surface textarea{color:#f3f6f8!important;-webkit-text-fill-color:#f3f6f8!important;caret-color:#f3f6f8!important}
.lists-only-filter{display:flex!important;width:auto!important;min-width:0;flex:1 1 100%;white-space:normal;text-align:center}
.deadline-date-time-grid{grid-template-columns:1fr!important}
.deadline-actions{display:grid!important;grid-template-columns:1fr;gap:8px}
.deadline-actions .button{width:100%;justify-content:center}
}
@media(max-width:390px){
.note-mobile-tools{grid-template-columns:1fr}
.note-calculator-row{grid-template-columns:minmax(0,1fr) 72px 10px 34px;gap:6px}
.deadline-quick-choices{display:grid;grid-template-columns:1fr}
}
/* =========================================================
Interface claire, outils de note et catégories
========================================================= */
:root { color-scheme: light; }
html[data-theme="dark"] { color-scheme: light; }
.note-primary-tools {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 2px 0 4px;
}
.note-primary-tools > button {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
padding: 13px 14px;
border: 1px solid #e2dfd3;
border-radius: 14px;
background: linear-gradient(180deg, #fffdf7, #faf7ee);
color: #26303b;
text-align: left;
font: inherit;
cursor: pointer;
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.note-primary-tools > button:hover {
transform: translateY(-1px);
border-color: #ddbd54;
box-shadow: 0 8px 20px rgba(54, 47, 25, .09);
}
.note-primary-tools > button > span:first-child {
display: grid;
place-items: center;
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 11px;
background: #fff0a8;
color: #6b5513;
font-size: 1.15rem;
font-weight: 900;
}
.note-primary-tools > button > span:last-child { display: grid; min-width: 0; gap: 2px; }
.note-primary-tools strong { font-size: .88rem; }
.note-primary-tools small { color: #757b82; font-size: .75rem; line-height: 1.3; }
.category-row-colored {
margin: 2px 0;
padding-right: 4px;
border-radius: 13px;
}
.category-row-colored .category-link {
min-height: 43px;
border: 1px solid transparent;
border-left: 0;
border-radius: 12px;
}
.category-row-colored .category-dot {
flex-basis: 11px;
width: 11px;
height: 11px;
border: 2px solid rgba(255,255,255,.9);
box-shadow: 0 0 0 2px var(--category-color);
}
.category-row-colored .category-link:hover {
border-color: color-mix(in srgb, var(--category-color) 34%, #dedbd1);
background: color-mix(in srgb, var(--category-color) 11%, #ffffff);
}
.category-row-colored .category-link.is-active {
border-color: color-mix(in srgb, var(--category-color) 42%, #d8d5cb);
background: color-mix(in srgb, var(--category-color) 18%, #ffffff);
color: #252c34;
box-shadow: 0 5px 14px color-mix(in srgb, var(--category-color) 13%, transparent);
}
.category-row-colored .category-link strong,
.category-row-colored .category-link.is-active strong {
min-width: 25px;
padding: 3px 7px;
border-radius: 999px;
background: color-mix(in srgb, var(--category-color) 18%, #f3f1eb) !important;
color: #505861 !important;
text-align: center;
}
.note-card[draggable="true"] { cursor: grab; }
.note-card[draggable="true"]:active { cursor: grabbing; }
.note-card[draggable="false"], .shopping-note-card { cursor: default; }
@media (max-width: 640px) {
.note-primary-tools { grid-template-columns: 1fr; }
}
/* =========================================================
Éditeur de note — hiérarchie simplifiée
========================================================= */
#note-modal .note-editor-organisation {
display: grid;
gap: 16px;
margin-top: 20px;
padding: 20px;
border: 1px solid #e6e2d8;
border-radius: 20px;
background: #fbfaf6;
}
#note-modal .note-editor-section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
padding-bottom: 14px;
border-bottom: 1px solid #e8e4da;
}
#note-modal .note-editor-section-heading > div { display: grid; gap: 3px; }
#note-modal .note-editor-section-kicker {
color: #9a7317;
font-size: .7rem;
font-weight: 850;
letter-spacing: .1em;
text-transform: uppercase;
}
#note-modal .note-editor-section-heading strong { color: #222b34; font-size: 1rem; }
#note-modal .note-editor-section-heading small { max-width: 360px; color: #747b82; line-height: 1.4; text-align: right; }
#note-modal .note-editor-organisation .note-form-grid {
display: grid;
grid-template-columns: minmax(230px,.85fr) minmax(0,1.15fr);
gap: 18px;
margin: 0;
padding: 0;
}
#note-modal .note-editor-organisation .note-form-grid > label,
#note-modal .note-editor-organisation .color-fieldset { display: grid; align-content: start; gap: 8px; }
#note-modal .note-editor-organisation .note-form-grid > label > span,
#note-modal .note-editor-organisation .color-fieldset legend,
#note-modal .note-create-flags legend {
color: #59616a;
font-size: .74rem;
font-weight: 850;
letter-spacing: .06em;
text-transform: uppercase;
}
#note-modal .note-editor-organisation select {
min-height: 48px;
border-color: #dcd8cd;
background: #fff;
}
#note-modal .note-editor-organisation .color-options {
min-height: 48px;
align-items: center;
padding: 6px 8px;
border: 1px solid #dedacf;
border-radius: 13px;
background: #fff;
}
#note-modal .note-editor-organisation .note-create-flags {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 10px;
margin: 0;
padding: 0;
border: 0;
}
#note-modal .note-editor-organisation .note-create-flags legend {
grid-column: 1/-1;
margin-bottom: 7px;
}
#note-modal .note-editor-organisation .note-create-flag {
min-height: 68px;
padding: 12px 13px;
border-color: #dedacf;
box-shadow: none;
}
#note-modal .note-editor-organisation .note-create-flag small { display: none; }
#note-modal .note-editor-options {
margin-top: 14px;
overflow: hidden;
border: 1px solid #e2dfd6;
border-radius: 18px;
background: #fff;
}
#note-modal .note-editor-options > summary {
display: grid;
grid-template-columns: 40px minmax(0,1fr) 28px;
align-items: center;
gap: 12px;
min-height: 72px;
padding: 13px 16px;
list-style: none;
cursor: pointer;
user-select: none;
}
#note-modal .note-editor-options > summary::-webkit-details-marker { display: none; }
#note-modal .note-editor-options > summary:hover { background: #fcfaf3; }
#note-modal .note-editor-options-icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: #fff1b7;
color: #73570c;
font-size: 1.15rem;
font-weight: 900;
transition: transform .2s ease;
}
#note-modal .note-editor-options summary > span:nth-child(2) { display: grid; gap: 3px; }
#note-modal .note-editor-options summary strong { color: #273039; font-size: .92rem; }
#note-modal .note-editor-options summary small { color: #747c84; font-size: .76rem; line-height: 1.35; }
#note-modal .note-editor-options-chevron { color: #69717a; font-size: 1.25rem; text-align: center; transition: transform .2s ease; }
#note-modal .note-editor-options[open] .note-editor-options-icon { transform: rotate(45deg); }
#note-modal .note-editor-options[open] .note-editor-options-chevron { transform: rotate(180deg); }
#note-modal .note-editor-options-content {
display: grid;
gap: 0;
padding: 0 18px 18px;
border-top: 1px solid #ece8df;
}
#note-modal .note-editor-subpanel {
margin: 0;
padding: 18px 0;
border: 0;
border-bottom: 1px solid #ece8df;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#note-modal .note-editor-subpanel:last-child { padding-bottom: 0; border-bottom: 0; }
#note-modal .note-tags-editor.note-editor-subpanel { padding-top: 18px; }
#note-modal .note-editor-subpanel input,
#note-modal .note-editor-subpanel textarea { background: #fff; }
@media (max-width: 720px) {
#note-modal .note-editor-organisation { padding: 16px; border-radius: 17px; }
#note-modal .note-editor-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
#note-modal .note-editor-section-heading small { max-width: none; text-align: left; }
#note-modal .note-editor-organisation .note-form-grid,
#note-modal .note-editor-organisation .note-create-flags { grid-template-columns: 1fr; }
#note-modal .note-editor-organisation .note-create-flag small { display: block; }
#note-modal .note-editor-options > summary { grid-template-columns: 38px minmax(0,1fr) 22px; padding: 12px 13px; }
#note-modal .note-editor-options-content { padding-inline: 14px; }
}
/* Favoris / épinglage dans l’éditeur : sélection sans case à cocher visible */
#note-modal .note-create-flag input[type="checkbox"] {
display: none !important;
}
#note-modal .note-create-flag {
user-select: none;
}
#note-modal .note-create-flag:focus-within {
outline: 3px solid rgba(242, 184, 75, .2);
outline-offset: 2px;
}
/* Pièces jointes toujours visibles dans l’éditeur */
#note-modal .note-editor-attachments-visible {
margin-top: 14px;
padding: 17px 18px;
border: 1px solid #e2dfd6;
border-radius: 18px;
background: #fff;
box-shadow: none;
}
#note-modal .note-editor-attachments-visible .attachment-editor-heading {
margin-bottom: 10px;
}
#note-modal .note-editor-attachments-visible .attachment-library:not([hidden]) {
margin-top: 12px;
}
@media (max-width: 720px) {
#note-modal .note-editor-attachments-visible {
padding: 15px 14px;
border-radius: 17px;
}
}
/* Déplacement fiable des notes — souris et tactile */
.note-card-drag-label {
appearance: none;
border: 0;
background: transparent;
font: inherit;
cursor: grab;
touch-action: none;
user-select: none;
}
.note-card-drag-label:active,
.note-card.is-dragging .note-card-drag-label { cursor: grabbing; }
html.is-reordering-notes,
html.is-reordering-notes body { overscroll-behavior: none; }
html.is-reordering-notes body { user-select: none; }
/* Suite : stabilisation de l'accueil et de l'éditeur sur mobile paysage */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-width: 1100px) and (max-height: 650px) {
body:has(.mobile-bottom-navigation) { padding-bottom: 64px !important; }
.mobile-bottom-navigation {
position: fixed !important;
inset: auto 10px 8px 10px !important;
width: auto !important;
transform: none !important;
max-height: 54px !important;
z-index: 1200 !important;
}
.notes-sidebar:not(.is-mobile-open) {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
.notes-sidebar.is-mobile-open {
display: flex !important;
position: fixed !important;
inset: 10px auto 72px 10px !important;
width: min(360px, calc(100vw - 20px)) !important;
max-height: none !important;
overflow: hidden !important;
z-index: 1250 !important;
}
.notes-sidebar.is-mobile-open .category-navigation {
overflow-y: auto !important;
overscroll-behavior: contain;
min-height: 0;
}
.note-editor-panel,
.note-editor-dialog,
.note-modal-content {
max-height: calc(100dvh - 20px) !important;
overflow-y: auto !important;
overscroll-behavior: contain;
}
}
/* =========================================================
Échéances et préparation de rendez-vous — interface clarifiée
========================================================= */
.appointment-assistant{
gap:18px;
padding:20px;
border-color:#e1ddd3;
background:linear-gradient(180deg,#fffdf8 0%,#f8f5ee 100%);
box-shadow:0 14px 35px rgba(45,39,29,.07);
}
.appointment-assistant header>div{gap:4px}
.appointment-assistant header strong{font-size:1.05rem;color:#232b34}
.appointment-assistant header .appointment-kicker{
color:#9a6a28;
font-size:.7rem;
font-weight:900;
letter-spacing:.12em;
text-transform:uppercase;
}
.appointment-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.appointment-grid input,
.appointment-grid textarea,
.appointment-grid select{
width:100%;
min-width:0;
padding:12px 13px;
border:1px solid #d8d4ca;
border-radius:12px;
background:#fff;
color:#18222b;
font:inherit;
line-height:1.4;
}
.appointment-grid input:focus,
.appointment-grid textarea:focus,
.appointment-grid select:focus{
outline:3px solid rgba(201,146,62,.14);
border-color:#c9923e;
}
.appointment-preview{
display:flex;
align-items:center;
gap:12px;
padding:13px 14px;
border:1px solid #e2d5bd;
border-radius:14px;
background:#fff9ec;
}
.appointment-preview-icon{
display:grid;
place-items:center;
flex:0 0 38px;
width:38px;
height:38px;
border-radius:12px;
background:#f1dfba;
color:#76501e;
font-size:1.1rem;
}
.appointment-preview>div{display:grid;gap:2px;min-width:0}
.appointment-preview strong{color:#2c3138}
.appointment-preview span:last-child{color:#6f6b64;font-size:.86rem;white-space:normal}
.appointment-deadline-option{
display:flex;
align-items:flex-start;
gap:11px;
padding:12px 14px;
border:1px solid #e4e0d8;
border-radius:14px;
background:rgba(255,255,255,.68);
cursor:pointer;
}
.appointment-deadline-option input{margin-top:3px;accent-color:#9b6a2d}
.appointment-deadline-option>span{display:grid;gap:2px}
.appointment-deadline-option strong{font-size:.9rem;color:#303841}
.appointment-deadline-option small{color:#737a80}
.appointment-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.deadline-current-status{
display:flex;
align-items:center;
gap:11px;
margin-bottom:12px;
padding:12px 13px;
border:1px dashed #d8d7d2;
border-radius:13px;
background:#faf9f6;
color:#747b81;
}
.deadline-current-status>span{
display:grid;
place-items:center;
width:34px;
height:34px;
flex:0 0 34px;
border-radius:10px;
background:#ecebe6;
}
.deadline-current-status>div{display:grid;gap:1px}
.deadline-current-status strong{color:#4d555c;font-size:.9rem}
.deadline-current-status small{font-size:.8rem}
.deadline-current-status.has-value{
border-style:solid;
border-color:#dbc79e;
background:#fff8e9;
}
.deadline-current-status.has-value>span{background:#ecd7aa;color:#68491e}
.deadline-current-status.has-value strong{color:#5a421f}
.deadline-quick-choices{display:flex;gap:7px;flex-wrap:wrap}
.deadline-quick-choices button{padding:8px 11px}
@media (max-width:700px){
.appointment-assistant{padding:15px;border-radius:15px}
.appointment-grid{grid-template-columns:1fr}
.appointment-grid .appointment-wide{grid-column:auto}
.appointment-actions{display:grid;grid-template-columns:1fr}
.appointment-actions .button{width:100%;justify-content:center}
.appointment-preview{align-items:flex-start}
.deadline-quick-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.deadline-quick-choices button{width:100%}
}
/* Rendez-vous modifiable */
.appointment-heading-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.appointment-mode{display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border-radius:999px;background:#eef2f4;color:#64717b!important;font-size:.72rem!important;font-weight:700;letter-spacing:.02em}
.appointment-assistant.is-editing{border-color:#e2c47c;background:linear-gradient(180deg,#fffdf7 0%,#fbfaf6 100%)}
.appointment-assistant.is-editing .appointment-mode{background:#fff0c7;color:#86610d!important}
.button-danger-soft{border:1px solid #efcaca;background:#fff5f5;color:#a53232}
.button-danger-soft:hover{background:#ffe9e9;border-color:#e8aaaa}
@media(max-width:720px){.appointment-heading-line{align-items:flex-start}.appointment-mode{font-size:.68rem!important}}
/* Outil conservé sous la zone d’écriture : calculatrice / budget */
#note-modal .note-under-tools {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
margin: 12px 0 4px;
}
#note-modal .note-under-tools > button {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 52px;
padding: 12px 14px;
border: 1px solid #e2dfd3;
border-radius: 14px;
background: linear-gradient(180deg, #fffdf7, #faf7ee);
color: #26303b;
text-align: left;
font: inherit;
cursor: pointer;
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
#note-modal .note-under-tools > button:hover {
transform: translateY(-1px);
border-color: #ddbd54;
box-shadow: 0 8px 20px rgba(54, 47, 25, .09);
}
#note-modal .note-under-tools > button > span:first-child {
display: grid;
place-items: center;
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 11px;
background: #fff0a8;
color: #6b5513;
font-size: 1.15rem;
font-weight: 900;
}
#note-modal .note-under-tools > button > span:last-child {
display: grid;
min-width: 0;
gap: 2px;
}
#note-modal .note-under-tools strong { font-size: .88rem; }
#note-modal .note-under-tools small { color: #757b82; font-size: .75rem; line-height: 1.3; }
@media (max-width: 760px) {
#note-modal .note-under-tools > button { min-height: 48px; }
}
/* =========================================================
MODULE RENDEZ-VOUS — AGENDA SÉPARÉ ET LIÉ AUX NOTES
========================================================= */
.appointments-page {
width: min(1180px, calc(100% - 36px));
margin: 0 auto;
padding: 34px 0 72px;
}
.appointments-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 26px;
padding: 30px;
border: 1px solid #eadfce;
border-radius: 28px;
background:
radial-gradient(circle at 91% 10%, rgba(225, 181, 82, .18), transparent 31%),
linear-gradient(145deg, #fffdf8 0%, #f8f1e7 100%);
box-shadow: 0 22px 50px rgba(58, 46, 31, .08);
}
.appointments-hero-copy {
display: flex;
align-items: center;
gap: 20px;
min-width: 0;
}
.appointments-hero-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 64px;
height: 64px;
border-radius: 20px;
background: #242b33;
color: #fff9ec;
font-size: 2rem;
box-shadow: 0 12px 28px rgba(36, 43, 51, .2);
}
.appointments-hero h1 {
margin: 3px 0 8px;
color: #202832;
font-size: clamp(2rem, 4vw, 3.5rem);
line-height: 1;
letter-spacing: -.045em;
}
.appointments-hero p:not(.eyebrow) {
max-width: 650px;
margin: 0;
color: #697078;
line-height: 1.65;
}
.appointments-hero-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.appointments-install-notice {
display: flex;
align-items: flex-start;
gap: 14px;
margin-top: 20px;
padding: 18px 20px;
border: 1px solid #e6c87e;
border-radius: 18px;
background: #fff8df;
color: #5f4d22;
}
.appointments-install-notice > span {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: #d39b2b;
color: white;
font-weight: 900;
}
.appointments-install-notice p {
margin: 5px 0 0;
}
.appointments-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin: 22px 0;
}
.appointments-stats article {
display: grid;
gap: 3px;
min-height: 128px;
padding: 20px;
border: 1px solid #e7e1d8;
border-radius: 20px;
background: #fff;
box-shadow: 0 12px 28px rgba(49, 43, 35, .055);
}
.appointments-stats span {
color: #7b746b;
font-size: .78rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
}
.appointments-stats strong {
color: #222a32;
font-size: 2.15rem;
line-height: 1.1;
}
.appointments-stats small {
color: #8a837b;
}
.appointments-filters {
display: inline-flex;
align-items: center;
gap: 5px;
margin-bottom: 20px;
padding: 5px;
border: 1px solid #e3ddd5;
border-radius: 15px;
background: #f8f6f2;
}
.appointments-filters a {
padding: 9px 14px;
border-radius: 11px;
color: #656b71;
font-size: .88rem;
font-weight: 750;
text-decoration: none;
}
.appointments-filters a:hover,
.appointments-filters a.is-active {
background: #fff;
color: #222a32;
box-shadow: 0 5px 14px rgba(36, 42, 50, .09);
}
.appointments-empty {
display: grid;
justify-items: center;
gap: 8px;
padding: 66px 24px;
border: 1px dashed #d9d1c6;
border-radius: 24px;
background: #fcfaf7;
text-align: center;
}
.appointments-empty > span {
display: grid;
place-items: center;
width: 58px;
height: 58px;
margin-bottom: 6px;
border-radius: 18px;
background: #f1e4c4;
color: #8b6426;
font-size: 1.8rem;
}
.appointments-empty h2,
.appointments-empty p {
margin: 0;
}
.appointments-empty p {
margin-bottom: 12px;
color: #77716a;
}
.appointments-list {
display: grid;
gap: 16px;
}
.appointment-card {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
overflow: hidden;
border: 1px solid #e4ded5;
border-radius: 22px;
background: #fff;
box-shadow: 0 13px 34px rgba(43, 39, 33, .06);
}
.appointment-date-block {
display: grid;
align-content: center;
justify-items: center;
gap: 0;
padding: 20px 10px;
border-right: 1px solid #e9e3da;
background: #f8f4ed;
color: #313942;
text-transform: uppercase;
}
.appointment-date-block span {
color: #9a6a24;
font-size: .72rem;
font-weight: 900;
letter-spacing: .09em;
}
.appointment-date-block strong {
font-size: 2.15rem;
line-height: 1.05;
}
.appointment-date-block small {
margin-top: 4px;
color: #76716b;
font-weight: 800;
}
.appointment-card.is-today .appointment-date-block {
background: #2c343d;
color: #fff;
}
.appointment-card.is-today .appointment-date-block span,
.appointment-card.is-today .appointment-date-block small {
color: #f6d889;
}
.appointment-card.is-past {
border-color: #e3c4bd;
}
.appointment-card.is-past .appointment-date-block {
background: #fff2ef;
}
.appointment-card.is-done,
.appointment-card.is-cancelled {
opacity: .78;
}
.appointment-card-main {
display: grid;
gap: 15px;
min-width: 0;
padding: 22px 24px;
}
.appointment-card-main > header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.appointment-card-main h2 {
margin: 4px 0 0;
color: #242c35;
font-size: 1.3rem;
line-height: 1.25;
}
.appointment-status-pill {
display: inline-flex;
align-items: center;
min-height: 23px;
padding: 3px 9px;
border-radius: 999px;
background: #edf5e8;
color: #5d793f;
font-size: .7rem;
font-weight: 850;
letter-spacing: .04em;
text-transform: uppercase;
}
.appointment-card.is-past .appointment-status-pill {
background: #fff0e8;
color: #9a5c3f;
}
.appointment-card.is-done .appointment-status-pill {
background: #e9eef1;
color: #68737b;
}
.appointment-edit-button {
flex: 0 0 auto;
padding: 8px 12px;
border: 1px solid #ddd7cf;
border-radius: 10px;
background: #fbfaf8;
color: #4c555d;
font: inherit;
font-size: .82rem;
font-weight: 800;
cursor: pointer;
}
.appointment-edit-button:hover {
border-color: #c8b489;
background: #fff8e9;
color: #6d5222;
}
.appointment-meta-row {
display: flex;
align-items: center;
gap: 9px 16px;
flex-wrap: wrap;
color: #626a72;
font-size: .88rem;
}
.appointment-meta-row span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.appointment-meta-row b {
color: #a97831;
font-weight: 900;
}
.appointment-preparation {
padding: 13px 15px;
border-left: 3px solid #d5ad5c;
border-radius: 0 12px 12px 0;
background: #fbf8f1;
}
.appointment-preparation strong {
color: #72572c;
font-size: .78rem;
letter-spacing: .04em;
text-transform: uppercase;
}
.appointment-preparation p {
margin: 4px 0 0;
color: #5e6368;
line-height: 1.55;
}
.appointment-note-link {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 11px;
padding: 12px 14px;
border: 1px solid #e3e6e8;
border-radius: 13px;
background: #f8fafb;
color: inherit;
text-decoration: none;
}
.appointment-note-link > span:first-child {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: #e8edf0;
color: #59646d;
}
.appointment-note-link > span:nth-child(2) {
display: grid;
gap: 2px;
min-width: 0;
}
.appointment-note-link strong,
.appointment-note-link small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.appointment-note-link strong {
color: #343c43;
font-size: .82rem;
}
.appointment-note-link small {
color: #737b81;
}
.appointment-note-link b {
color: #8a6b32;
}
.appointment-card-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
padding-top: 2px;
}
.appointment-delete-button {
color: #a34b47 !important;
}
.appointment-modal {
z-index: 1300;
}
.appointment-modal-card {
width: min(760px, calc(100vw - 28px));
max-height: min(900px, calc(100vh - 30px));
overflow: auto;
}
.appointment-form {
display: grid;
gap: 18px;
}
.appointment-form-intro,
.appointment-live-preview {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 15px;
border: 1px solid #e4ded4;
border-radius: 14px;
background: #faf7f1;
}
.appointment-form-intro > span,
.appointment-live-preview > span {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 12px;
background: #eee1c3;
color: #8a642b;
font-size: 1.1rem;
}
.appointment-form-intro > div,
.appointment-live-preview > div {
display: grid;
gap: 2px;
min-width: 0;
}
.appointment-form-intro strong,
.appointment-live-preview strong {
color: #303840;
}
.appointment-form-intro small,
.appointment-live-preview small {
color: #72787d;
line-height: 1.45;
}
.appointment-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
}
.appointment-form-grid label {
display: grid;
gap: 6px;
min-width: 0;
}
.appointment-form-grid label > span {
color: #525c64;
font-size: .78rem;
font-weight: 850;
letter-spacing: .035em;
text-transform: uppercase;
}
.appointment-form-grid input,
.appointment-form-grid select,
.appointment-form-grid textarea {
width: 100%;
min-width: 0;
padding: 12px 13px;
border: 1px solid #d6dce0;
border-radius: 12px;
background: #fff;
color: #202830;
font: inherit;
}
.appointment-form-grid input:focus,
.appointment-form-grid select:focus,
.appointment-form-grid textarea:focus {
outline: 3px solid rgba(202, 159, 73, .18);
border-color: #c59b49;
}
.appointment-form-grid textarea {
resize: vertical;
line-height: 1.5;
}
.appointment-form-wide {
grid-column: 1 / -1;
}
.appointment-form-status {
min-height: 22px;
margin: 0;
color: #69727a;
font-size: .86rem;
text-align: right;
}
.appointment-form-status[data-state="error"] {
color: #a53c38;
}
.appointment-form-status[data-state="success"] {
color: #4f7a42;
}
/* Rendez-vous visibles et modifiables depuis l'éditeur de note */
.note-linked-appointments {
display: grid;
gap: 14px;
padding: 18px;
border: 1px solid #e1ddd5;
border-radius: 18px;
background: #fbfaf7;
}
.note-linked-appointments-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 15px;
}
.note-linked-appointments-heading > div {
display: grid;
gap: 3px;
}
.note-linked-appointments-heading strong {
color: #29323a;
font-size: 1.02rem;
}
.note-linked-appointments-heading p {
max-width: 600px;
margin: 2px 0 0;
color: #737a80;
font-size: .86rem;
line-height: 1.5;
}
.linked-appointments-empty {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
border: 1px dashed #d6d0c7;
border-radius: 14px;
background: #fff;
}
.linked-appointments-empty > span {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 12px;
background: #f0e5cc;
color: #8d682d;
}
.linked-appointments-empty > div {
display: grid;
gap: 2px;
}
.linked-appointments-empty strong {
color: #3c454c;
}
.linked-appointments-empty small {
color: #7a8085;
}
.linked-appointments-list {
display: grid;
gap: 9px;
}
.linked-appointments-loading {
margin: 0;
padding: 12px;
color: #737a80;
text-align: center;
}
.linked-appointment-item > button {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 11px;
width: 100%;
padding: 12px 13px;
border: 1px solid #e1e4e5;
border-radius: 13px;
background: #fff;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.linked-appointment-item > button:hover {
border-color: #d1b978;
box-shadow: 0 7px 18px rgba(60, 49, 30, .08);
}
.linked-appointment-icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 12px;
background: #edf3e8;
color: #627b48;
}
.linked-appointment-item.is-past .linked-appointment-icon {
background: #fff0eb;
color: #a05e48;
}
.linked-appointment-item.is-done {
opacity: .72;
}
.linked-appointment-copy {
display: grid;
gap: 2px;
min-width: 0;
}
.linked-appointment-copy strong,
.linked-appointment-copy small,
.linked-appointment-copy span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.linked-appointment-copy strong {
color: #303840;
}
.linked-appointment-copy small,
.linked-appointment-copy span {
color: #71787e;
font-size: .82rem;
}
.linked-appointment-item > button > b {
color: #88682d;
font-size: .78rem;
}
.note-linked-appointments > footer {
display: flex;
justify-content: flex-end;
}
.note-linked-appointments > footer a {
color: #7b5e29;
font-size: .83rem;
font-weight: 800;
text-decoration: none;
}
.linked-appointments-status {
min-height: 0;
margin: 0;
}
/* Résumé compact sur la carte de note */
.note-appointment-summary {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
margin-top: 12px;
padding: 10px 12px;
border: 1px solid rgba(74, 95, 63, .18);
border-radius: 12px;
background: rgba(244, 249, 240, .82);
color: inherit;
text-decoration: none;
}
.note-appointment-summary:hover {
border-color: rgba(136, 99, 38, .38);
background: rgba(255, 250, 237, .92);
}
.note-appointment-summary.is-past {
border-color: rgba(151, 79, 59, .2);
background: rgba(255, 240, 235, .82);
}
.note-appointment-summary-icon {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(102, 130, 78, .14);
color: #5e7648;
}
.note-appointment-summary-copy {
display: grid;
gap: 1px;
min-width: 0;
}
.note-appointment-summary-copy strong,
.note-appointment-summary-copy small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.note-appointment-summary-copy strong {
color: #3a4634;
font-size: .86rem;
}
.note-appointment-summary-copy small {
color: #687063;
font-size: .76rem;
}
.note-appointment-summary > b {
color: #7d6539;
font-size: .78rem;
}
@media (max-width: 900px) {
.appointments-hero {
align-items: flex-start;
flex-direction: column;
}
.appointments-hero-actions {
width: 100%;
justify-content: flex-start;
}
.appointments-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.appointments-page {
width: min(100% - 22px, 1180px);
padding-top: 16px;
padding-bottom: 92px;
}
.appointments-hero {
gap: 18px;
padding: 21px 18px;
border-radius: 21px;
}
.appointments-hero-copy {
align-items: flex-start;
gap: 13px;
}
.appointments-hero-icon {
width: 48px;
height: 48px;
border-radius: 15px;
font-size: 1.5rem;
}
.appointments-hero h1 {
font-size: 2.1rem;
}
.appointments-hero-actions {
display: grid;
grid-template-columns: 1fr;
}
.appointments-hero-actions .button {
width: 100%;
justify-content: center;
}
.appointments-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.appointments-stats article {
min-height: 108px;
padding: 15px;
border-radius: 16px;
}
.appointments-stats strong {
font-size: 1.75rem;
}
.appointments-filters {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
.appointments-filters a {
text-align: center;
}
.appointment-card {
grid-template-columns: 68px minmax(0, 1fr);
border-radius: 18px;
}
.appointment-date-block {
padding: 15px 6px;
}
.appointment-date-block strong {
font-size: 1.7rem;
}
.appointment-card-main {
gap: 12px;
padding: 16px 14px;
}
.appointment-card-main > header {
display: grid;
}
.appointment-edit-button {
width: fit-content;
}
.appointment-card-actions {
display: grid;
grid-template-columns: 1fr;
}
.appointment-card-actions .button {
width: 100%;
justify-content: center;
}
.appointment-form-grid {
grid-template-columns: 1fr;
}
.appointment-form-wide {
grid-column: auto;
}
.appointment-modal-card {
width: calc(100vw - 16px);
max-height: calc(100dvh - 16px);
}
.note-linked-appointments-heading {
display: grid;
}
.note-linked-appointments-heading .button {
width: 100%;
justify-content: center;
}
.linked-appointment-item > button {
grid-template-columns: auto minmax(0, 1fr);
}
.linked-appointment-item > button > b {
grid-column: 2;
}
}
/* =========================================================
NOTE-BLOC — ACTION RAPIDE « NOUVEAU RDV »
========================================================= */
.button-appointment {
min-height: 48px;
border: 1px solid #b9c6eb;
background: linear-gradient(180deg, #f1f4ff 0%, #e4e9fb 100%);
color: #394d86;
box-shadow: 0 8px 18px rgba(74, 94, 151, .08);
}
.button-appointment:hover {
border-color: #9eafe0;
background: linear-gradient(180deg, #f7f8ff 0%, #dce4fb 100%);
color: #2f437d;
transform: translateY(-1px);
}
.button-appointment:focus-visible {
outline: 3px solid rgba(79, 104, 177, .24);
outline-offset: 2px;
}
@media (min-width: 901px) and (max-width: 1450px) {
.workspace-dashboard-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
}
.workspace-dashboard-actions .button {
justify-content: center;
width: 100%;
white-space: nowrap;
}
}
/* =========================================================
RENDEZ-VOUS — CONFIRMATION ET MISE EN ÉVIDENCE APRÈS ENREGISTREMENT
========================================================= */
.appointment-save-notice {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 18px;
padding: 14px 16px;
border: 1px solid #cfe0bd;
border-radius: 16px;
background: #f3f8ed;
color: #35502d;
box-shadow: 0 8px 22px rgba(62, 92, 48, .07);
}
.appointment-save-notice > span {
display: grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 50%;
background: #dcebcf;
font-weight: 900;
}
.appointment-save-notice strong,
.appointment-save-notice small {
display: block;
}
.appointment-save-notice small {
margin-top: 2px;
color: #62745a;
}
.appointment-card.is-just-saved {
border-color: #e0b229;
box-shadow: 0 0 0 4px rgba(224, 178, 41, .14), 0 18px 42px rgba(74, 57, 12, .10);
animation: appointmentSavedPulse 1.4s ease-out 1;
}
.appointment-card.is-just-saved:focus {
outline: none;
}
@keyframes appointmentSavedPulse {
0% { transform: translateY(0); }
35% { transform: translateY(-4px); }
100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.appointment-card.is-just-saved { animation: none; }
}
/* =========================================================
RENDEZ-VOUS — CORRECTIFS MOBILE ET CONTENUS LONGS
========================================================= */
.appointment-card,
.appointment-card-main,
.appointment-card-main > header > div,
.appointment-meta-row,
.appointment-meta-row span,
.appointment-preparation,
.appointment-note-link {
min-width: 0;
}
.appointment-meta-row span,
.appointment-preparation p,
.appointment-note-link small {
overflow-wrap: anywhere;
word-break: break-word;
}
.appointment-modal-card,
.appointment-form,
.appointment-form-grid,
.appointment-form-grid label {
box-sizing: border-box;
max-width: 100%;
}
@media (max-width: 680px) {
.appointments-page {
width: calc(100% - 20px);
max-width: none;
margin-inline: auto;
overflow: visible;
}
.appointments-filters {
gap: 6px;
padding: 6px;
border-radius: 18px;
}
.appointments-filters a {
display: grid;
place-items: center;
min-width: 0;
min-height: 50px;
padding: 8px 5px;
font-size: .82rem;
line-height: 1.2;
white-space: normal;
}
.appointment-card {
display: block;
width: 100%;
overflow: hidden;
border-radius: 20px;
}
.appointment-date-block {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
min-height: 0;
padding: 11px 15px;
border-right: 0;
border-bottom: 1px solid #e9e3da;
text-align: left;
}
.appointment-date-block span,
.appointment-date-block strong,
.appointment-date-block small {
margin: 0;
line-height: 1;
}
.appointment-date-block span {
font-size: .7rem;
}
.appointment-date-block strong {
font-size: 1.1rem;
}
.appointment-date-block small {
margin-left: auto;
font-size: .82rem;
}
.appointment-card-main {
width: 100%;
gap: 13px;
padding: 16px;
}
.appointment-card-main > header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 10px;
}
.appointment-card-main h2 {
font-size: 1.18rem;
overflow-wrap: anywhere;
}
.appointment-edit-button {
width: auto !important;
min-width: 0;
max-width: 112px;
min-height: 42px !important;
padding: 8px 11px;
white-space: nowrap;
justify-self: end;
}
.appointment-meta-row {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
width: 100%;
}
.appointment-meta-row span {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
align-items: start;
gap: 7px;
width: 100%;
line-height: 1.4;
}
.appointment-meta-row b {
text-align: center;
}
.appointment-preparation {
width: 100%;
padding: 13px 14px;
}
.appointment-preparation p {
max-width: 100%;
}
.appointment-note-link {
grid-template-columns: auto minmax(0, 1fr);
width: 100%;
padding: 11px 12px;
}
.appointment-note-link > b {
display: none;
}
.appointment-card-actions {
display: grid;
grid-template-columns: 1fr;
width: 100%;
gap: 8px;
}
.appointment-card-actions .button {
width: 100%;
min-width: 0;
justify-content: center;
white-space: normal;
text-align: center;
}
.appointment-modal[open] {
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
}
.appointment-modal .modal-backdrop {
position: fixed;
inset: 0;
}
.appointment-modal-card {
width: 100%;
max-width: none;
max-height: calc(100dvh - 10px);
margin: 10px 0 0;
padding: 20px 16px calc(18px + env(safe-area-inset-bottom));
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 24px 24px 0 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}
.appointment-modal-card .modal-header {
position: sticky;
top: -20px;
z-index: 4;
margin: -20px -16px 16px;
padding: 18px 16px 14px;
border-bottom: 1px solid #ece6dd;
background: rgba(255, 255, 255, .97);
backdrop-filter: blur(14px);
}
.appointment-modal-card .modal-header h2 {
font-size: 1.45rem;
}
.appointment-form {
width: 100%;
gap: 15px;
}
.appointment-form-intro,
.appointment-live-preview {
align-items: flex-start;
width: 100%;
padding: 12px;
}
.appointment-form-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
gap: 12px;
}
.appointment-form-grid label,
.appointment-form-wide {
grid-column: 1;
width: 100%;
min-width: 0;
}
.appointment-form-grid input,
.appointment-form-grid select,
.appointment-form-grid textarea {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.appointment-form-grid select {
text-overflow: ellipsis;
}
.appointment-modal-card .modal-actions {
position: sticky;
bottom: calc(-18px - env(safe-area-inset-bottom));
z-index: 3;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin: 2px -16px calc(-18px - env(safe-area-inset-bottom));
padding: 13px 16px calc(13px + env(safe-area-inset-bottom));
border-top: 1px solid #e8e2d9;
background: rgba(255, 255, 255, .97);
backdrop-filter: blur(14px);
}
.appointment-modal-card .modal-actions .button {
width: 100%;
min-width: 0;
justify-content: center;
white-space: normal;
text-align: center;
}
.appointment-form-status {
text-align: left;
}
}
/* =========================================================
FAQ — RECHERCHE ET RUBRIQUES
========================================================= */
.faq-hero {
padding-bottom: 28px;
}
.faq-browser {
width: min(960px, calc(100% - 32px));
margin: 0 auto 90px;
}
.faq-search-panel {
display: grid;
gap: 15px;
margin-bottom: 20px;
padding: 20px;
border: 1px solid #e5dfd5;
border-radius: 22px;
background: rgba(255, 255, 255, .88);
box-shadow: 0 14px 36px rgba(42, 37, 29, .06);
}
.faq-search-field {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 10px;
min-height: 54px;
padding: 0 16px;
border: 1px solid #ddd8cf;
border-radius: 15px;
background: #fff;
}
.faq-search-field > span {
color: #9b742a;
font-size: 1.25rem;
}
.faq-search-field input {
width: 100%;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: #252e37;
font: inherit;
font-size: 1rem;
}
.faq-category-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.faq-category-filters button {
min-height: 38px;
padding: 7px 12px;
border: 1px solid #dfd9cf;
border-radius: 999px;
background: #faf8f4;
color: #646b71;
font: inherit;
font-size: .8rem;
font-weight: 800;
cursor: pointer;
}
.faq-category-filters button:hover,
.faq-category-filters button.is-active {
border-color: #dfb746;
background: #fff4c9;
color: #674d13;
}
.faq-result-count {
margin: 0;
color: #7b7f82;
font-size: .8rem;
}
.faq-browser .faq-list {
width: 100%;
margin: 0;
}
.faq-browser .faq-list details {
padding: 0;
overflow: hidden;
}
.faq-browser .faq-list details[hidden] {
display: none;
}
.faq-browser .faq-list summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
padding: 21px 23px;
cursor: pointer;
list-style: none;
}
.faq-browser .faq-list summary::-webkit-details-marker {
display: none;
}
.faq-browser .faq-list summary > span {
display: grid;
gap: 4px;
}
.faq-browser .faq-list summary small {
color: #a27628;
font-size: .67rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
.faq-browser .faq-list summary strong {
color: #27303a;
font-size: 1.02rem;
}
.faq-browser .faq-list summary b {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 11px;
background: #f4f0e8;
color: #7c6330;
font-size: 1.25rem;
transition: transform .18s ease, background .18s ease;
}
.faq-browser .faq-list details[open] summary b {
transform: rotate(45deg);
background: #fff0b8;
}
.faq-browser .faq-list details > p {
margin: 0;
padding: 0 23px 23px;
color: #667078;
line-height: 1.7;
}
.faq-empty {
justify-items: center;
gap: 8px;
padding: 54px 20px;
border: 1px dashed #d9d1c5;
border-radius: 22px;
background: rgba(255, 255, 255, .68);
text-align: center;
}
.faq-empty:not([hidden]) {
display: grid;
}
.faq-empty > span {
font-size: 2rem;
color: #a27b32;
}
.faq-empty h2,
.faq-empty p {
margin: 0;
}
.faq-empty p {
margin-bottom: 10px;
color: #747b80;
}
.faq-final-cta {
width: min(960px, calc(100% - 32px));
margin-inline: auto;
}
/* =========================================================
MENTIONS LÉGALES — SOMMAIRE ET CARTES
========================================================= */
.legal-hero-compact {
padding-bottom: 34px;
}
.legal-update-badge {
display: inline-flex;
margin-top: 18px;
padding: 7px 11px;
border: 1px solid #ded7ca;
border-radius: 999px;
background: rgba(255, 255, 255, .74);
color: #747069;
font-size: .75rem;
font-weight: 750;
}
.legal-page-layout {
display: grid;
grid-template-columns: 210px minmax(0, 1fr);
align-items: start;
gap: 26px;
width: min(1120px, calc(100% - 32px));
margin: 0 auto 90px;
}
.legal-toc {
position: sticky;
top: 96px;
display: grid;
gap: 4px;
padding: 17px;
border: 1px solid #e2ddd4;
border-radius: 18px;
background: rgba(255, 255, 255, .78);
}
.legal-toc strong {
margin-bottom: 7px;
color: #27313a;
font-size: .82rem;
}
.legal-toc a {
padding: 8px 9px;
border-radius: 10px;
color: #6a7177;
font-size: .78rem;
font-weight: 700;
text-decoration: none;
}
.legal-toc a:hover {
background: #fff4cc;
color: #6b5018;
}
.legal-content-modern {
width: 100%;
margin: 0;
}
.legal-content-modern > section {
scroll-margin-top: 100px;
}
.legal-section-heading {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 19px;
}
.legal-section-heading > span {
display: grid;
place-items: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 13px;
background: #fff0b9;
color: #795a1b;
font-size: .72rem;
font-weight: 900;
}
.legal-section-heading .eyebrow,
.legal-section-heading h2 {
margin: 0;
}
.legal-section-heading h2 {
margin-top: 3px;
}
.legal-data-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.legal-data-grid > div {
padding: 14px;
border: 1px solid #ebe6df;
border-radius: 13px;
background: #fbfaf7;
}
.legal-data-grid .legal-data-wide {
grid-column: 1 / -1;
}
.legal-data-grid dt {
margin-bottom: 5px;
color: #8a8176;
font-size: .69rem;
font-weight: 850;
letter-spacing: .04em;
text-transform: uppercase;
}
.legal-data-grid dd {
margin: 0;
color: #343c43;
overflow-wrap: anywhere;
}
.legal-related-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 18px;
}
.legal-related-links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 15px;
border: 1px solid #e4dfd7;
border-radius: 13px;
background: #fbfaf7;
color: #3b444b;
font-weight: 800;
text-decoration: none;
}
.legal-related-links a:hover {
border-color: #ddba59;
background: #fff8df;
}
/* =========================================================
FOOTER — VERSION PLUS CLAIRE ET PLUS UTILE
========================================================= */
.site-footer-v2 {
padding-top: 52px;
background:
radial-gradient(circle at 8% 0, rgba(241, 196, 71, .13), transparent 25rem),
#1c2229;
}
.site-footer-v2 .site-footer-grid {
grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(145px, 1fr));
gap: 42px;
}
.site-footer-v2 .footer-brand-block p {
margin-top: 17px;
}
.footer-brand-actions {
margin-top: 20px;
}
.footer-primary-link {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 42px;
padding: 9px 13px;
border: 1px solid rgba(248, 211, 91, .32);
border-radius: 12px;
background: rgba(248, 211, 91, .1);
color: #f9dd7d !important;
font-size: .82rem;
font-weight: 850;
text-decoration: none !important;
}
.footer-primary-link:hover {
border-color: rgba(248, 211, 91, .55);
background: rgba(248, 211, 91, .16);
}
.footer-trust-items {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px 18px;
flex-wrap: wrap;
}
.footer-trust-items span {
display: inline-flex;
align-items: center;
gap: 6px;
color: #aeb8c1;
}
.footer-trust-items b {
display: grid;
place-items: center;
width: 17px;
height: 17px;
border-radius: 50%;
background: rgba(121, 173, 103, .18);
color: #a7d397;
font-size: .66rem;
}
@media (max-width: 900px) {
.legal-page-layout {
grid-template-columns: 1fr;
}
.legal-toc {
position: static;
display: flex;
overflow-x: auto;
gap: 7px;
padding: 10px;
scrollbar-width: thin;
}
.legal-toc strong {
display: none;
}
.legal-toc a {
flex: 0 0 auto;
border: 1px solid #e6e0d7;
background: #fff;
white-space: nowrap;
}
.site-footer-v2 .site-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-footer-v2 .footer-brand-block {
grid-column: 1 / -1;
}
.site-footer-v2 .site-footer-bottom {
align-items: flex-start;
flex-direction: column;
}
.footer-trust-items {
justify-content: flex-start;
}
}
@media (max-width: 560px) {
.faq-browser,
.faq-final-cta,
.legal-page-layout {
width: calc(100% - 20px);
}
.faq-search-panel {
padding: 14px;
border-radius: 18px;
}
.faq-category-filters {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.faq-category-filters button {
width: 100%;
min-width: 0;
white-space: normal;
}
.faq-browser .faq-list summary {
padding: 17px;
}
.faq-browser .faq-list details > p {
padding: 0 17px 18px;
}
.legal-content-modern > section {
padding: 20px 17px;
}
.legal-data-grid,
.legal-related-links {
grid-template-columns: 1fr;
}
.legal-data-grid .legal-data-wide {
grid-column: auto;
}
.site-footer-v2 .site-footer-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.site-footer-v2 .footer-brand-block {
grid-column: auto;
}
.footer-trust-items {
display: grid;
gap: 8px;
}
}
/* =========================================================
RENDEZ-VOUS — VERROUILLAGE FINAL DE LA MODALE SUR MOBILE
Empêche tout dépassement horizontal lors de la modification.
========================================================= */
@media (max-width: 680px) {
html:has(.appointment-modal[open]),
body:has(.appointment-modal[open]) {
width: 100%;
max-width: 100%;
overflow: hidden;
}
/* Un dialog sans l’attribut open doit rester totalement masqué. */
dialog.appointment-modal:not([open]) {
display: none !important;
}
.appointment-modal[open] {
position: fixed !important;
inset: 0 !important;
display: flex !important;
align-items: flex-end !important;
justify-content: stretch !important;
width: 100dvw !important;
min-width: 0 !important;
max-width: 100dvw !important;
height: 100dvh !important;
min-height: 0 !important;
max-height: 100dvh !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
}
.appointment-modal .modal-backdrop {
position: fixed !important;
inset: 0 !important;
width: 100dvw !important;
height: 100dvh !important;
margin: 0 !important;
}
.appointment-modal-card {
position: relative !important;
inset: auto !important;
flex: 0 0 100%;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
max-height: calc(100dvh - 8px) !important;
margin: 0 !important;
padding: 20px 14px calc(16px + env(safe-area-inset-bottom)) !important;
overflow-x: clip !important;
overflow-y: auto !important;
overscroll-behavior: contain;
border-radius: 22px 22px 0 0 !important;
}
.appointment-modal-card *,
.appointment-form,
.appointment-form > *,
.appointment-form-grid,
.appointment-form-grid > *,
.appointment-form-grid label,
.appointment-form-grid input,
.appointment-form-grid select,
.appointment-form-grid textarea,
.appointment-form-intro,
.appointment-live-preview,
.appointment-modal-card .modal-header,
.appointment-modal-card .modal-actions {
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.appointment-modal-card .modal-header {
width: auto !important;
margin: -20px -14px 15px !important;
padding: 17px 14px 13px !important;
}
.appointment-modal-card .modal-header > div {
min-width: 0 !important;
overflow: hidden;
}
.appointment-modal-card .modal-header h2 {
max-width: 100% !important;
overflow-wrap: anywhere;
word-break: break-word;
}
.appointment-form-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
width: 100% !important;
overflow: hidden;
}
.appointment-form-grid label,
.appointment-form-wide {
grid-column: 1 / -1 !important;
width: 100% !important;
overflow: hidden;
}
.appointment-form-grid input,
.appointment-form-grid select,
.appointment-form-grid textarea {
display: block !important;
inline-size: 100% !important;
width: 100% !important;
min-inline-size: 0 !important;
max-inline-size: 100% !important;
-webkit-min-logical-width: 0 !important;
margin: 0 !important;
overflow: hidden;
}
.appointment-form-grid select {
text-overflow: ellipsis;
white-space: nowrap;
}
.appointment-form-intro > div,
.appointment-live-preview > div,
.appointment-form-intro small,
.appointment-live-preview small {
min-width: 0 !important;
max-width: 100% !important;
overflow-wrap: anywhere;
word-break: break-word;
}
.appointment-modal-card .modal-actions {
width: auto !important;
margin: 2px -14px calc(-16px - env(safe-area-inset-bottom)) !important;
padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
overflow: hidden;
}
.appointment-modal-card .modal-actions .button,
.appointment-modal-card button[data-save-appointment] {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
padding-inline: 12px !important;
white-space: normal !important;
overflow-wrap: anywhere;
}
}
/* =========================================================
RENDEZ-VOUS — ACTIONS TOUJOURS VISIBLES SUR MOBILE
Garde Annuler et Mettre à jour au-dessus de la barre système.
========================================================= */
@media (max-width: 680px) {
.appointment-modal-card {
max-height: 100dvh !important;
padding-bottom: 0 !important;
scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
}
.appointment-modal-card .modal-actions {
position: sticky !important;
right: auto !important;
bottom: 0 !important;
left: auto !important;
z-index: 20 !important;
width: auto !important;
max-width: none !important;
margin: 12px -14px 0 !important;
padding: 12px 14px calc(14px + max(env(safe-area-inset-bottom), 10px)) !important;
overflow: visible !important;
border-top: 1px solid #e8e2d9 !important;
background: #fff !important;
box-shadow: 0 -12px 26px rgba(31, 38, 45, .08) !important;
}
.appointment-modal-card .modal-actions .button,
.appointment-modal-card button[data-save-appointment] {
display: flex !important;
min-height: 54px !important;
flex: 0 0 auto !important;
}
.appointment-modal-card button[data-save-appointment] {
margin-bottom: 0 !important;
}
}
/* =========================================================
MOBILE — LARGEURS, ALIGNEMENTS ET FONDS HARMONISÉS
Un seul axe visuel pour l’accueil, les cartes, l’agenda et
les listes ouvertes. Le fond choisi d’une liste remplit
désormais toute sa fenêtre au lieu de former un bloc isolé.
========================================================= */
@media (max-width: 900px) {
:root {
--mobile-content-gutter: 14px;
}
html,
body {
max-width: 100%;
overflow-x: clip;
}
/* Évite l’ancien double retrait : padding du parent + largeur réduite. */
.notes-main {
width: 100% !important;
max-width: none !important;
padding-inline: 0 !important;
}
.mobile-home-header {
padding-right: 0 !important;
padding-left: 0 !important;
}
.mobile-home-header > *,
.notes-main > .workspace-overview,
.notes-main > .notes-toolbar,
.notes-main > .notes-controls,
.notes-main > .notes-view-toolbar,
.notes-main > .active-search,
.notes-main > .trash-overview,
.notes-main > .archive-overview,
.notes-main > .notes-grid,
.appointments-page {
box-sizing: border-box !important;
width: calc(100% - (var(--mobile-content-gutter) * 2)) !important;
max-width: none !important;
margin-right: auto !important;
margin-left: auto !important;
}
.notes-main > .notes-toolbar {
margin-top: 12px !important;
margin-bottom: 14px !important;
}
.notes-main > .notes-grid {
padding-right: 0 !important;
padding-left: 0 !important;
}
.notes-grid > .note-card,
.notes-grid > .shopping-note-card {
box-sizing: border-box !important;
width: 100% !important;
max-width: none !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
.appointments-page {
padding-right: 0 !important;
padding-left: 0 !important;
}
}
/* La fenêtre reprend réellement la couleur choisie pour la liste. */
.quick-list-dialog,
.quick-list-dialog-body {
background: var(--quick-list-color, #fff4c7);
}
.quick-list-dialog-bar {
border-bottom-color: color-mix(in srgb, var(--quick-list-color, #fff4c7) 68%, #8c7a4c 32%);
background: color-mix(in srgb, var(--quick-list-color, #fff4c7) 32%, #ffffff 68%);
}
.quick-list-dialog .shopping-note-card {
width: 100% !important;
max-width: none !important;
border: 0 !important;
background: transparent !important;
}
.quick-list-dialog .shopping-note-add {
background: linear-gradient(
to bottom,
transparent,
color-mix(in srgb, var(--quick-list-color, #fff4c7) 38%, #ffffff 62%) 24%
) !important;
}
@media (max-width: 700px) {
.quick-list-overlay {
align-items: end !important;
padding:
var(--mobile-content-gutter)
var(--mobile-content-gutter)
calc(var(--mobile-content-gutter) + env(safe-area-inset-bottom)) !important;
}
.quick-list-dialog {
width: 100% !important;
max-width: none !important;
max-height: calc(100dvh - (var(--mobile-content-gutter) * 2) - env(safe-area-inset-bottom)) !important;
margin: 0 !important;
border: 1px solid color-mix(in srgb, var(--quick-list-color, #fff4c7) 65%, #756943 35%) !important;
border-radius: 24px !important;
overflow: hidden !important;
}
.quick-list-dialog-bar {
min-height: 68px;
padding: 12px 14px 12px 18px !important;
}
.quick-list-dialog-bar strong {
min-width: 0;
overflow: hidden;
color: #202833;
font-size: 1.18rem;
font-weight: 900;
text-overflow: ellipsis;
white-space: nowrap;
}
.quick-list-dialog-bar button {
flex: 0 0 46px;
width: 46px !important;
height: 46px !important;
border-radius: 15px !important;
background: rgba(255, 255, 255, .72) !important;
}
.quick-list-dialog-body {
max-height: calc(100dvh - 110px - (var(--mobile-content-gutter) * 2) - env(safe-area-inset-bottom)) !important;
padding: 14px !important;
overflow-x: hidden !important;
}
.quick-list-dialog .shopping-note-card {
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.quick-list-dialog .shopping-note-items {
gap: 10px;
}
.quick-list-dialog .shopping-note-section-heading {
box-sizing: border-box;
width: 100%;
margin: 14px 0 7px;
padding-inline: 2px;
}
.quick-list-dialog .notes-shopping-item {
grid-template-columns: 44px minmax(0, 1fr) 44px !important;
gap: 10px !important;
width: 100%;
padding: 11px !important;
border-radius: 17px !important;
background: rgba(255, 255, 255, .76) !important;
}
.quick-list-dialog .notes-shopping-item > button {
width: 44px !important;
height: 44px !important;
border-radius: 13px !important;
}
.quick-list-dialog .notes-shopping-item > div {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 78px !important;
gap: 8px !important;
width: 100%;
}
.quick-list-dialog .notes-shopping-item input,
.quick-list-dialog .notes-shopping-item select[data-quick-section-input] {
width: 100% !important;
min-width: 0 !important;
height: 44px !important;
border-radius: 12px !important;
font-size: .86rem !important;
}
.quick-list-dialog .notes-shopping-item select[data-quick-section-input] {
grid-column: 1 / -1 !important;
}
/* Formulaire d’ajout : chaque ligne utilise toute la largeur disponible. */
.quick-list-dialog .shopping-note-add {
grid-template-columns: minmax(0, 1fr) 54px !important;
gap: 8px !important;
bottom: -14px !important;
margin-top: 14px !important;
padding: 12px 0 3px !important;
}
.quick-list-dialog .shopping-note-add input,
.quick-list-dialog .shopping-note-add select,
.quick-list-dialog .shopping-note-add button {
height: 48px !important;
min-height: 48px !important;
border-radius: 14px !important;
}
.quick-list-dialog .shopping-note-add input[name="label"] {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
}
.quick-list-dialog .shopping-note-add input[name="quantity"] {
grid-column: 1 !important;
grid-row: 2 !important;
}
.quick-list-dialog .shopping-note-add button {
grid-column: 2 !important;
grid-row: 2 !important;
width: 54px !important;
}
.quick-list-dialog .shopping-note-add select[name="section"] {
grid-column: 1 / -1 !important;
grid-row: 3 !important;
}
}
/* V42.1 — éditeur de notes / deadline / BBCode / liens */
.note-editor-mini-tools{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.note-editor-mini-tools button{min-height:30px;padding:5px 9px;border:1px solid rgba(38,45,50,.14);border-radius:999px;background:rgba(255,255,255,.72);color:inherit;font:inherit;font-size:.72rem;font-weight:800;cursor:pointer}
.note-editor-mini-tools button:hover,.note-editor-mini-tools button.is-active{border-color:#d3aa24;background:#fff2b5}
.note-format-help{display:grid;gap:4px;margin:0 0 8px;padding:9px 11px;border:1px dashed rgba(38,45,50,.18);border-radius:12px;background:rgba(255,255,255,.55);font-size:.72rem}
.note-format-help[hidden]{display:none!important}.note-format-help code{padding:1px 4px;border-radius:5px;background:rgba(20,25,30,.08)}
.deadline-quick-choices button.is-selected{border-color:#d3aa24;background:#fff2b5;box-shadow:0 0 0 2px rgba(211,170,36,.12)}
.deadline-current-status.has-deadline{border-color:#d8b23b;background:#fff8d9}
.note-inline-link{color:#1559a8;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;overflow-wrap:anywhere;pointer-events:auto}
.note-inline-link:hover{color:#0c3d78}.note-bb-underline{text-decoration:underline}.note-bb-mark{padding:.04em .22em;border-radius:.25em;background:#fff0a8;color:inherit}
.note-bb-heading{display:block;margin:.35em 0 .18em;font-size:1.12em;font-weight:900;line-height:1.25}
.note-bb-quote{display:block;margin:.4em 0;padding:.45em .7em;border-left:3px solid rgba(40,45,50,.32);background:rgba(255,255,255,.34);font-style:italic}
.note-bb-code{padding:.12em .32em;border-radius:5px;background:rgba(20,25,30,.09);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9em}
:root[data-theme="dark"] .note-editor-mini-tools button,:root[data-theme="dark"] .note-format-help{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .note-inline-link{color:#89bfff}:root[data-theme="dark"] .note-bb-mark{background:#6a5715}
@media(max-width:620px){.note-editor-mini-tools{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.note-editor-mini-tools::-webkit-scrollbar{display:none}.note-editor-mini-tools button{flex:0 0 auto}}
/* =========================================================
V42.4 — Command bar élégante + champs appelés à la demande
========================================================= */
.note-editor-mini-tools,
.note-format-help{display:none!important}
.note-editor-commandbar{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:7px;
margin:2px 0 10px;
}
.note-command{
display:flex;
align-items:center;
gap:8px;
min-width:0;
min-height:54px;
padding:9px 10px;
border:1px solid rgba(40,46,50,.1);
border-radius:14px;
background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.58));
color:#32373b;
box-shadow:0 4px 12px rgba(24,32,38,.035);
cursor:pointer;
transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.note-command:hover,
.note-command.is-active{
transform:translateY(-1px);
border-color:rgba(218,176,36,.48);
background:linear-gradient(180deg,#fffdf5,#fff4c9);
box-shadow:0 7px 18px rgba(131,98,9,.09);
}
.note-command-icon{
display:grid;
place-items:center;
flex:0 0 32px;
width:32px;
height:32px;
border-radius:10px;
background:rgba(245,211,83,.2);
font-size:.9rem;
font-weight:900;
}
.note-command-copy{
min-width:0;
display:grid;
gap:1px;
text-align:left;
}
.note-command-copy strong{
font-size:.78rem;
line-height:1.1;
}
.note-command-copy small{
overflow:hidden;
color:#7c8185;
font-size:.62rem;
line-height:1.1;
text-overflow:ellipsis;
white-space:nowrap;
}
.note-editor-drawer{
margin:0 0 10px;
padding:14px;
border:1px solid rgba(40,46,50,.1);
border-radius:16px;
background:rgba(255,255,255,.68);
box-shadow:0 8px 24px rgba(30,35,40,.045);
}
.note-editor-drawer[hidden]{display:none!important}
.note-editor-drawer.is-open{
animation:noteDrawerIn .18s ease-out;
}
@keyframes noteDrawerIn{
from{opacity:0;transform:translateY(-4px)}
to{opacity:1;transform:translateY(0)}
}
.note-editor-format-actions{
display:flex;
flex-wrap:wrap;
gap:7px;
}
.note-editor-format-actions button{
display:inline-flex;
align-items:center;
gap:6px;
min-height:36px;
padding:7px 10px;
border:1px solid rgba(40,46,50,.1);
border-radius:10px;
background:#fff;
color:#3e4448;
font:inherit;
font-size:.7rem;
cursor:pointer;
}
.note-editor-format-actions button:hover{
border-color:rgba(218,176,36,.48);
background:#fff8db;
}
.note-editor-format-actions button>strong,
.note-editor-format-actions button>em,
.note-editor-format-actions button>u,
.note-editor-format-actions .format-mark{
display:grid;
place-items:center;
width:20px;
min-width:20px;
}
.format-mark{
border-bottom:3px solid #efc62e;
font-weight:900;
}
.note-editor-more .note-create-flags{
margin:8px 0 0;
}
.note-editor-more .note-create-flag{
border-radius:13px;
}
.note-media-heading-actions{
display:flex;
align-items:center;
gap:7px;
flex-wrap:wrap;
}
:root[data-theme="dark"] .note-command,
:root[data-theme="dark"] .note-editor-drawer{
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
border-color:rgba(255,255,255,.1);
color:#edf2f4;
}
:root[data-theme="dark"] .note-command:hover,
:root[data-theme="dark"] .note-command.is-active{
border-color:rgba(245,211,83,.35);
background:rgba(245,211,83,.09);
}
:root[data-theme="dark"] .note-command-copy small{color:#9fa8ad}
:root[data-theme="dark"] .note-command-icon{background:rgba(245,211,83,.11)}
:root[data-theme="dark"] .note-editor-format-actions button{
background:rgba(255,255,255,.045);
border-color:rgba(255,255,255,.1);
color:#edf2f4;
}
@media(max-width:760px){
.note-editor-commandbar{
display:flex;
overflow-x:auto;
padding-bottom:2px;
scrollbar-width:none;
}
.note-editor-commandbar::-webkit-scrollbar{display:none}
.note-command{
flex:0 0 128px;
min-height:50px;
}
.note-editor-drawer{
padding:11px;
border-radius:14px;
}
.note-editor-format-actions{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
}
.note-editor-format-actions button{
justify-content:center;
padding:7px 5px;
}
.note-editor-format-actions button span:last-child{
display:none;
}
}
/* =========================================================
V42.5 — Tous les panneaux sur le modèle de Format
========================================================= */
/* Cachés par défaut : aucun gros bloc ne gêne l'écriture. */
.note-editor-drawer{display:none!important}
/* Une commande ouvre une carte flottante, sans pousser le contenu. */
.note-editor-drawer.is-floating:not([hidden]){
display:block!important;
position:fixed;
z-index:10040;
top:50%;
left:50%;
width:min(500px,calc(100vw - 28px));
max-height:min(72vh,640px);
margin:0;
padding:17px;
overflow:auto;
transform:translate(-50%,-50%);
border:1px solid rgba(38,44,48,.12);
border-radius:22px;
background:#fff;
box-shadow:0 28px 80px rgba(20,27,32,.23);
}
.note-command-overlay{
position:fixed;
inset:0;
z-index:10030;
background:rgba(18,23,27,.16);
backdrop-filter:blur(2px);
}
.note-command-overlay[hidden]{display:none!important}
.note-drawer-floating-header{
position:sticky;
top:-17px;
z-index:3;
display:flex;
justify-content:space-between;
gap:12px;
margin:-17px -17px 14px;
padding:15px 17px 12px;
border-bottom:1px solid rgba(38,44,48,.08);
background:#fff;
}
.note-drawer-floating-header>div{display:grid;gap:2px}
.note-drawer-floating-header strong{font-size:.9rem;color:#2d3236}
.note-drawer-floating-header small{font-size:.68rem;color:#858b90}
.note-drawer-floating-close{
width:30px;height:30px;border:0;border-radius:50%;
background:#f1f2f2;color:#555b5f;font-size:1.15rem;cursor:pointer
}
/* Masquer les anciens gros titres internes devenus inutiles. */
.note-editor-drawer.is-floating > .note-editor-section-heading,
.note-editor-drawer.is-floating .deadline-editor-heading{
display:none;
}
/* FORMAT = référence */
.note-editor-format-actions{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
}
.note-editor-format-actions button{
display:grid;
place-items:center;
gap:5px;
min-height:62px;
padding:8px 5px;
border:1px solid #ece9df;
border-radius:13px;
background:#fff;
color:#3d4246;
font:inherit;
cursor:pointer;
}
.note-editor-format-actions button:hover{
border-color:#dfbd47;
background:#fff8dc;
}
/* CLASSER : deux cartes nettes */
.note-editor-drawer[data-note-drawer="organize"] .note-form-grid{
display:grid;
grid-template-columns:1fr;
gap:10px;
}
.note-editor-drawer[data-note-drawer="organize"] .note-form-grid>label,
.note-editor-drawer[data-note-drawer="organize"] .color-fieldset{
margin:0;
padding:13px;
border:1px solid #ece9df;
border-radius:14px;
background:#fbfbfa;
}
.note-editor-drawer[data-note-drawer="organize"] select{
width:100%;
min-height:43px;
border-radius:10px;
}
.note-editor-drawer[data-note-drawer="organize"] .color-options{
display:flex;
flex-wrap:wrap;
gap:9px;
}
/* ÉCHÉANCE : actions rapides d'abord */
.note-editor-drawer[data-note-drawer="deadline"] .note-tags-editor{
margin:0 0 10px;
padding:12px;
border:1px solid #ece9df;
border-radius:13px;
background:#fbfbfa;
}
.note-editor-drawer[data-note-drawer="deadline"] .deadline-editor{
padding:0;border:0;background:transparent
}
.note-editor-drawer[data-note-drawer="deadline"] .deadline-quick-choices{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:7px;
margin:10px 0;
}
.note-editor-drawer[data-note-drawer="deadline"] .deadline-quick-choices button{
min-height:39px;
border:1px solid #ece9df;
border-radius:11px;
background:#fff;
font-size:.7rem;
font-weight:800;
}
.note-editor-drawer[data-note-drawer="deadline"] .deadline-date-time-grid{
grid-template-columns:1fr 1fr;
gap:8px;
}
.note-editor-drawer[data-note-drawer="deadline"] .deadline-date-time-grid label{
padding:11px;
border:1px solid #ece9df;
border-radius:13px;
background:#fbfbfa;
}
/* AJOUTER : fichier/vocal en deux choix simples */
.note-editor-drawer[data-note-drawer="media"] .attachment-editor-heading>div:first-child{display:none}
.note-editor-drawer[data-note-drawer="media"] .note-media-heading-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
width:100%;
}
.note-editor-drawer[data-note-drawer="media"] .note-media-heading-actions .button{
justify-content:center;
min-height:52px;
border-radius:13px;
}
/* PLUS : épingle/favori comme deux cartes */
.note-editor-drawer[data-note-drawer="more"] .note-create-flags{
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
margin:0;padding:0;border:0;
}
.note-editor-drawer[data-note-drawer="more"] .note-create-flag{
min-height:90px;
margin:0;
padding:13px;
border:1px solid #ece9df;
border-radius:14px;
background:#fbfbfa;
}
.note-editor-drawer[data-note-drawer="more"] .note-create-flag:has(input:checked){
border-color:#dfbd47;
background:#fff8d6;
}
/* Mobile : feuille basse, pas popup au milieu. */
@media(max-width:680px){
.note-editor-drawer.is-floating:not([hidden]){
top:auto;
right:4px;
bottom:4px;
left:4px;
width:auto;
max-height:76svh;
transform:none;
border-radius:22px 22px 16px 16px;
}
.note-editor-drawer[data-note-drawer="deadline"] .deadline-quick-choices{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.note-editor-drawer[data-note-drawer="deadline"] .deadline-date-time-grid{
grid-template-columns:1fr;
}
.note-editor-drawer[data-note-drawer="more"] .note-create-flags{
grid-template-columns:1fr;
}
}
/* Dark */
:root[data-theme="dark"] .note-editor-drawer.is-floating:not([hidden]),
:root[data-theme="dark"] .note-drawer-floating-header{
background:#202a30;
border-color:rgba(255,255,255,.1);
}
:root[data-theme="dark"] .note-editor-format-actions button,
:root[data-theme="dark"] .note-editor-drawer[data-note-drawer="organize"] .note-form-grid>label,
:root[data-theme="dark"] .note-editor-drawer[data-note-drawer="organize"] .color-fieldset,
:root[data-theme="dark"] .note-editor-drawer[data-note-drawer="deadline"] .note-tags-editor,
:root[data-theme="dark"] .note-editor-drawer[data-note-drawer="deadline"] .deadline-date-time-grid label,
:root[data-theme="dark"] .note-editor-drawer[data-note-drawer="deadline"] .deadline-quick-choices button,
:root[data-theme="dark"] .note-editor-drawer[data-note-drawer="more"] .note-create-flag{
background:rgba(255,255,255,.045);
border-color:rgba(255,255,255,.1);
color:#edf2f4;
}
/* =========================================================
V42.6 — Commandes non bloquantes et sans flou
========================================================= */
.note-command-overlay{
display:none !important;
pointer-events:none !important;
background:transparent !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
.note-form.has-open-command .note-writing-surface,
.note-form.has-open-command .modal-header,
.note-form.has-open-command .note-editor-shell,
.note-form.has-open-command .note-editor-sidebar{
filter:none !important;
opacity:1 !important;
}
.note-editor-drawer.is-floating:not([hidden]){
pointer-events:auto;
background:#fff;
box-shadow:0 18px 44px rgba(20,27,32,.16);
}
.note-drawer-floating-header{
background:#fff;
}
@media(max-width:680px){
.note-editor-drawer.is-floating:not([hidden]){
right:10px;
left:10px;
bottom:10px;
width:auto;
max-height:72svh;
}
}
:root[data-theme="dark"] .note-editor-drawer.is-floating:not([hidden]),
:root[data-theme="dark"] .note-drawer-floating-header{
background:#202a30;
}
/* =========================================================
V42.9 — Listes partagées / vocal / participants / mobile
========================================================= */
.shopping-public-compose{
display:grid;
grid-template-columns:minmax(0,1fr) 150px;
gap:10px;
align-items:stretch;
margin:14px 0;
}
.shopping-shared-voice-button{
display:grid;
place-items:center;
align-content:center;
gap:3px;
min-height:64px;
padding:9px;
border:1px solid rgba(30,38,44,.12);
border-radius:15px;
background:#fff8d7;
color:#3c3414;
font:inherit;
cursor:pointer;
}
.shopping-shared-voice-button>span{
display:grid;
place-items:center;
width:28px;height:28px;
border-radius:50%;
background:#f2c94c;
color:#342b0c;
}
.shopping-shared-voice-button strong{font-size:.78rem}
.shopping-shared-voice-button small{font-size:.62rem;color:#776a36;text-align:center}
.shopping-shared-voice-button.is-recording{
border-color:#dd665e;
background:#fff0ee;
animation:sharedVoicePulse 1.1s ease-in-out infinite;
}
@keyframes sharedVoicePulse{50%{transform:scale(.985);box-shadow:0 0 0 5px rgba(221,102,94,.08)}}
.shopping-shared-voices{
display:grid;
gap:8px;
margin:10px 0 14px;
}
.shopping-shared-voice{
display:grid;
grid-template-columns:minmax(0,180px) minmax(180px,1fr);
align-items:center;
gap:12px;
padding:10px 12px;
border:1px solid rgba(35,43,48,.1);
border-radius:14px;
background:rgba(255,255,255,.76);
}
.shopping-shared-voice>div{
display:grid;
grid-template-columns:auto 1fr;
column-gap:8px;
align-items:center;
}
.shopping-shared-voice>div>span{
grid-row:1/3;
display:grid;
place-items:center;
width:28px;height:28px;
border-radius:50%;
background:#fff0b8;
color:#a47800;
}
.shopping-shared-voice strong{font-size:.76rem}
.shopping-shared-voice small{font-size:.62rem;color:#8a8f92}
.shopping-shared-voice audio{width:100%;height:36px}
.shopping-participants-list{
display:flex!important;
flex-wrap:wrap;
gap:8px!important;
}
.shopping-participant{
display:flex!important;
align-items:center!important;
gap:8px!important;
min-width:150px;
padding:8px 10px!important;
border:1px solid rgba(30,38,44,.1);
border-radius:12px;
background:rgba(255,255,255,.7);
}
.shopping-participant>i{
flex:0 0 9px;
width:9px;height:9px;
border-radius:50%;
background:#aeb5b9;
}
.shopping-participant.is-online>i{
background:#29b66f;
box-shadow:0 0 0 4px rgba(41,182,111,.11);
}
.shopping-participant>span{
display:grid;
gap:1px;
min-width:0;
}
.shopping-participant strong{
overflow:hidden;
font-size:.74rem;
text-overflow:ellipsis;
white-space:nowrap;
}
.shopping-participant small{
color:#858b90;
font-size:.61rem;
}
.mobile-categories-close{display:none!important}
@media(max-width:780px){
.mobile-categories-close{
display:grid!important;
place-items:center;
}
.shopping-public-compose{grid-template-columns:1fr}
.shopping-shared-voice-button{grid-template-columns:auto 1fr;justify-items:start;min-height:52px}
.shopping-shared-voice-button>span{grid-row:1/3}
.shopping-shared-voice{grid-template-columns:1fr;gap:8px}
.shopping-participant{min-width:0;flex:1 1 135px}
}
:root[data-theme="dark"] .shopping-shared-voice-button,
:root[data-theme="dark"] .shopping-shared-voice,
:root[data-theme="dark"] .shopping-participant{
background:rgba(255,255,255,.055);
border-color:rgba(255,255,255,.1);
}
/* V43.0 — Liste des listes : lecture et navigation mobile */
@media (max-width: 700px) {
.shopping-page-v3 .shopping-sidebar {
max-height: 94dvh !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
.shopping-page-v3 .shopping-list-nav {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 9px !important;
width: 100% !important;
overflow: visible !important;
}
.shopping-page-v3 .shopping-list-card-row {
min-width: 0 !important;
width: 100% !important;
grid-template-columns: minmax(0, 1fr) !important;
border-radius: 15px !important;
}
.shopping-page-v3 .shopping-list-card-row .shopping-list-card {
grid-template-columns: 38px minmax(0, 1fr) !important;
padding: 11px 11px 9px !important;
}
.shopping-page-v3 .shopping-list-card-icon {
width: 38px !important;
height: 38px !important;
flex-basis: 38px !important;
border-radius: 11px !important;
font-size: 17px !important;
}
.shopping-page-v3 .shopping-list-card-top strong {
-webkit-line-clamp: 1 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.shopping-page-v3 .shopping-list-side-actions {
padding: 6px 9px !important;
}
.shopping-page-v3 .shopping-list-order-actions {
display: none !important;
}
.shopping-page-v3 .shopping-list-side-actions button,
.shopping-page-v3 .shopping-list-inline-menu .note-menu-button {
width: 30px !important;
height: 30px !important;
border-radius: 9px !important;
}
.shopping-page-v3 .shopping-sidebar-heading {
top: -16px !important;
padding-left: 2px !important;
padding-right: 2px !important;
}
}
/* =========================================================
V43.1 — STABILISATION RESPONSIVE NOTES
Une seule logique pour le panneau Catégories et le paysage
tactile. Placé en fin de feuille pour neutraliser les
anciennes générations de correctifs contradictoires.
========================================================= */
@media (max-width: 900px) {
/* Le panneau catégories mobile est un vrai panneau flottant :
il ne repousse plus les notes et reste au-dessus de la navigation. */
.notes-sidebar:not(.is-mobile-open) {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
.notes-sidebar.is-mobile-open {
position: fixed !important;
z-index: 1300 !important;
inset: calc(10px + env(safe-area-inset-top)) 12px calc(82px + env(safe-area-inset-bottom)) 12px !important;
display: flex !important;
flex-direction: column !important;
width: auto !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 16px !important;
overflow: hidden !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
border-radius: 22px !important;
box-shadow: 0 24px 70px rgba(22, 27, 32, .24) !important;
}
.notes-sidebar.is-mobile-open .sidebar-heading {
flex: 0 0 auto;
}
.notes-sidebar.is-mobile-open .category-navigation {
min-height: 0 !important;
overflow-y: auto !important;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding-bottom: 12px !important;
}
.mobile-categories-close {
display: grid !important;
place-items: center !important;
}
}
/* Téléphone/tablette tactile en paysage : on conserve une seule barre
horizontale en bas et on annule l'ancien rail latéral. */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-width: 1100px) and (max-height: 650px) {
body:has(.mobile-bottom-navigation) {
padding-right: 0 !important;
padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
}
.notes-main,
.shopping-page,
.site-main {
padding-right: 0 !important;
}
.mobile-bottom-navigation {
position: fixed !important;
inset: auto 10px 8px 10px !important;
z-index: 1200 !important;
width: auto !important;
height: auto !important;
min-height: 54px !important;
max-height: 54px !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
grid-template-rows: 1fr !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
border-radius: 17px !important;
}
.mobile-bottom-navigation a,
.mobile-bottom-navigation button {
min-height: 50px !important;
padding: 5px 3px !important;
}
.floating-add-button,
.mobile-fab,
[data-mobile-create-note] {
right: 14px !important;
bottom: calc(72px + env(safe-area-inset-bottom)) !important;
}
.notes-sidebar.is-mobile-open {
inset: 10px 10px calc(72px + env(safe-area-inset-bottom)) 10px !important;
width: auto !important;
max-height: none !important;
}
.note-menu {
right: 12px !important;
bottom: calc(70px + env(safe-area-inset-bottom)) !important;
left: 12px !important;
max-height: calc(100dvh - 86px - env(safe-area-inset-bottom)) !important;
}
}
/* =========================================================
V43.2 — ÉDITEUR DE NOTE MOBILE
Hauteur utile, clavier virtuel et outils accessibles au pouce.
========================================================= */
@media (max-width: 760px) {
#note-modal .note-editor-modal-card > .modal-header {
z-index: 40 !important;
min-height: 58px !important;
padding: max(10px, env(safe-area-inset-top)) 14px 9px !important;
border-bottom: 1px solid rgba(118, 126, 134, .16) !important;
}
#note-modal .note-editor-modal-card > .modal-header .eyebrow {
display: none !important;
}
#note-modal .note-editor-modal-card > .modal-header h2 {
margin: 0 !important;
font-size: 1.08rem !important;
line-height: 1.2 !important;
}
#note-modal .modal-close {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
}
#note-modal #note-form {
padding: 0 12px calc(18px + env(safe-area-inset-bottom) + var(--app-keyboard-offset)) !important;
scroll-padding-top: 76px !important;
scroll-padding-bottom: 92px !important;
}
#note-modal .note-editor-statusbar {
z-index: 35 !important;
top: 0 !important;
min-height: 38px !important;
margin: 0 -12px 10px !important;
padding: 8px 12px !important;
border-bottom: 1px solid rgba(118, 126, 134, .13) !important;
}
#note-modal .note-editor-live-state,
#note-modal .note-editor-status-separator {
display: none !important;
}
#note-modal .autosave-status {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: .76rem !important;
}
#note-modal .note-editor-heading {
align-items: center !important;
gap: 10px !important;
margin-bottom: 8px !important;
}
#note-modal .voice-button {
min-height: 40px !important;
padding: 8px 11px !important;
}
#note-modal .voice-button-label {
font-size: .78rem !important;
}
#note-modal .note-editor-commandbar {
display: flex !important;
grid-template-columns: none !important;
gap: 8px !important;
margin-inline: -12px !important;
padding: 2px 12px 10px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
#note-modal .note-editor-commandbar::-webkit-scrollbar {
display: none;
}
#note-modal .note-command {
flex: 0 0 auto !important;
width: auto !important;
min-width: 102px !important;
min-height: 48px !important;
padding: 8px 10px !important;
scroll-snap-align: start;
}
#note-modal .note-command-copy small {
display: none !important;
}
#note-modal .note-editor-drawer {
margin-bottom: 10px !important;
}
#note-modal .note-editor-format-actions {
display: flex !important;
gap: 7px !important;
overflow-x: auto !important;
padding-bottom: 3px !important;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
#note-modal .note-editor-format-actions::-webkit-scrollbar {
display: none;
}
#note-modal .note-editor-format-actions > button {
flex: 0 0 auto !important;
min-width: 48px !important;
min-height: 44px !important;
}
#note-modal .note-writing-surface {
min-height: 0 !important;
margin-top: 2px !important;
}
#note-modal #note-text,
#note-modal .note-writing-surface textarea {
min-height: clamp(250px, 42dvh, 430px) !important;
padding: 14px !important;
line-height: 1.55 !important;
overscroll-behavior: contain;
scroll-padding-block: 16px;
}
#note-modal .note-writing-metrics {
gap: 8px 12px !important;
padding: 8px 10px !important;
font-size: .7rem !important;
}
#note-modal .note-writing-metrics span:nth-child(3) {
display: none !important;
}
#note-modal .note-edit-save-bar {
z-index: 34 !important;
top: 38px !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 7px !important;
margin-inline: -12px !important;
padding: 8px 12px !important;
}
#note-modal .note-edit-save-bar[hidden] {
display: none !important;
}
#note-modal .note-edit-save-bar #save-note-top {
grid-column: 1 / -1 !important;
min-height: 44px !important;
}
#note-modal .note-edit-save-bar .button {
min-width: 0 !important;
min-height: 40px !important;
padding-inline: 8px !important;
white-space: normal !important;
line-height: 1.15 !important;
}
#note-modal .note-standard-actions,
#note-modal .modal-actions.note-standard-actions {
gap: 8px !important;
padding-top: 12px !important;
}
#note-modal .note-standard-actions .button {
min-height: 46px !important;
}
}
@media (max-width: 390px) {
#note-modal #note-form { padding-inline: 10px !important; }
#note-modal .note-editor-statusbar { margin-inline: -10px !important; padding-inline: 10px !important; }
#note-modal .note-editor-commandbar { margin-inline: -10px !important; padding-inline: 10px !important; }
#note-modal .note-command { min-width: 94px !important; }
#note-modal .note-edit-save-bar { margin-inline: -10px !important; padding-inline: 10px !important; }
}
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-height: 650px) {
#note-modal .note-editor-modal-card > .modal-header {
min-height: 48px !important;
padding-top: max(6px, env(safe-area-inset-top)) !important;
padding-bottom: 6px !important;
}
#note-modal .note-editor-statusbar {
min-height: 32px !important;
padding-block: 5px !important;
}
#note-modal #note-text,
#note-modal .note-writing-surface textarea {
min-height: max(180px, 40dvh) !important;
}
}
/* =========================================================
NOTE-BLOC V43.3 — DASHBOARD PC PLUS COMPACT
La vue d'ensemble reste un point d'entrée, pas un second écran.
========================================================= */
@media (min-width: 901px) {
.notes-main > .workspace-overview {
margin-top: 14px;
margin-bottom: 14px;
padding: 16px 18px;
border-radius: 20px;
}
.workspace-overview .workspace-dashboard-top {
display: grid;
grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
align-items: center;
gap: 18px;
}
.workspace-dashboard-heading .eyebrow {
margin-bottom: 1px;
font-size: .68rem;
}
.workspace-dashboard-heading h2 {
margin: 0;
font-size: 1.22rem;
line-height: 1.15;
}
.workspace-overview .workspace-dashboard-actions {
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
gap: 8px;
min-width: 0;
}
.workspace-overview .workspace-dashboard-actions .button {
width: auto;
min-width: 0;
min-height: 42px;
padding: 9px 13px;
border-radius: 13px;
font-size: .82rem;
white-space: nowrap;
}
.workspace-overview .workspace-dashboard-grid-compact {
margin-top: 12px;
}
.workspace-dashboard-grid-compact .workspace-dashboard-card-current-list {
min-height: 88px;
grid-template-columns: minmax(220px, 1fr) 62px minmax(95px, auto) auto;
gap: 14px;
padding: 12px 16px;
border-radius: 16px;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-progress-wrap,
.workspace-dashboard-grid-compact .workspace-dashboard-ring {
width: 56px;
height: 56px;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-progress-text {
font-size: .72rem;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-copy h3 {
margin-top: 2px;
font-size: 1rem;
}
.workspace-dashboard-grid-compact .workspace-dashboard-list-action {
min-height: 36px;
padding: 8px 11px;
border-radius: 11px;
}
}
@media (min-width: 901px) and (max-width: 1180px) {
.workspace-overview .workspace-dashboard-top {
grid-template-columns: 1fr;
}
.workspace-overview .workspace-dashboard-actions {
justify-content: flex-start;
flex-wrap: wrap;
}
}
/* =========================================================
NOTE-BLOC V43.4 — CARTES DE NOTES PC PLUS DENSES
========================================================= */
@media (min-width: 1060px) {
.notes-grid {
gap: 16px;
}
.notes-grid .note-card,
.notes-grid .note-card:nth-child(3n+2),
.notes-grid .note-card:nth-child(3n) {
min-height: 0;
padding: 18px 18px 14px;
border-radius: 18px;
transform: none;
}
.notes-grid .note-card:hover {
transform: translateY(-2px);
}
.note-card-header {
min-height: 32px;
margin-bottom: 10px;
padding-right: 38px;
}
.note-card-labels {
gap: 6px;
}
.note-card-kind-icon,
.note-flag-button,
.note-menu-button {
width: 30px;
height: 30px;
border-radius: 9px;
}
.note-card-kind-icon {
font-size: .82rem;
}
.note-category,
.note-audio-badge {
min-height: 26px;
padding: 4px 8px;
font-size: .66rem;
}
.note-quick-actions {
right: 39px;
gap: 4px;
}
.note-menu {
top: 36px;
}
.note-content,
.note-text {
font-size: .92rem;
line-height: 1.52;
}
.note-content > :first-child,
.note-text > :first-child {
margin-top: 0;
}
.note-content > :last-child,
.note-text > :last-child {
margin-bottom: 0;
}
.note-tags {
margin: 9px 0;
gap: 5px;
}
.note-tag {
padding: 4px 7px;
font-size: .64rem;
}
.note-attachments,
.note-audios,
.note-deadline,
.note-share-inside,
.note-appointment-summary {
margin-top: 9px;
}
.note-card-footer {
margin-top: 12px;
padding-top: 9px;
font-size: .64rem;
}
.note-card-footer-date {
overflow: hidden;
max-width: 72%;
text-overflow: ellipsis;
}
.note-card-drag-label {
opacity: .58;
transition: opacity .16s ease;
}
.note-card:hover .note-card-drag-label,
.note-card:focus-within .note-card-drag-label {
opacity: 1;
}
}
@media (min-width: 1320px) {
.notes-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* =========================================================
V43.5 — NAVIGATION PC : HEADER + COLONNE CATÉGORIES
Hiérarchie plus claire, moins de bruit visuel.
========================================================= */
@media (min-width: 901px) {
/* Header : navigation principale lisible, actions de compte secondaires. */
.site-header-inner {
min-height: 66px !important;
padding-top: 7px !important;
padding-bottom: 7px !important;
gap: 18px !important;
}
.brand {
font-size: 1.16rem !important;
}
.header-actions {
gap: 6px !important;
flex-wrap: nowrap !important;
}
.header-main-link {
min-height: 38px !important;
padding: 0 11px !important;
border-radius: 10px !important;
font-size: .79rem !important;
}
.header-main-link > span:first-child {
opacity: .78;
font-size: .9rem;
}
.header-main-link.is-active {
box-shadow: inset 0 0 0 1px rgba(224, 190, 69, .18) !important;
}
.header-icon-button,
.pwa-install-button.pwa-install-icon {
width: 38px !important;
min-width: 38px !important;
height: 38px !important;
min-height: 38px !important;
padding: 0 !important;
border-radius: 10px !important;
}
.header-icon-label {
display: none !important;
}
.header-account-button {
margin-left: 5px !important;
}
.header-logout-button {
border-color: #e3e6e8 !important;
background: #fff !important;
color: #6d747b !important;
box-shadow: none !important;
}
.header-logout-button:hover {
border-color: #e8c7c3 !important;
background: #fff4f2 !important;
color: #a94840 !important;
}
/* Sidebar : plus compacte, reste visible sous le header. */
.notes-dashboard {
align-items: start;
}
.notes-sidebar {
top: 82px !important;
padding: 16px !important;
border-radius: 19px !important;
box-shadow: 0 12px 32px rgba(34, 40, 46, .055) !important;
}
.notes-sidebar .sidebar-heading {
margin-bottom: 11px !important;
padding: 0 2px 10px !important;
border-bottom: 1px solid rgba(24, 32, 42, .075);
}
.notes-sidebar .sidebar-heading .eyebrow {
display: none !important;
}
.notes-sidebar .sidebar-heading h2 {
font-size: 1.05rem !important;
letter-spacing: -.025em !important;
}
.sidebar-heading-actions {
gap: 5px !important;
}
.sidebar-heading-actions .icon-button {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
border-radius: 10px !important;
}
.notes-sidebar .category-navigation {
max-height: min(68vh, 700px) !important;
padding-right: 5px !important;
}
.notes-sidebar .category-row {
margin: 1px 0 !important;
}
.notes-sidebar .category-link {
gap: 9px !important;
min-height: 37px !important;
padding: 8px 9px !important;
border-radius: 10px !important;
font-size: .83rem !important;
}
.notes-sidebar .category-link strong {
min-width: 25px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(93, 103, 112, .07);
text-align: center;
font-size: .68rem !important;
font-variant-numeric: tabular-nums;
}
.notes-sidebar .category-link.is-active strong {
background: rgba(255,255,255,.66);
}
/* Les raccourcis système sont volontairement plus sobres que les catégories utilisateur. */
.notes-sidebar .category-row-system .category-link:not(.is-active) {
color: #68727c;
font-weight: 720;
}
.notes-sidebar .category-row-system + .category-row:not(.category-row-system) {
margin-top: 8px !important;
padding-top: 8px;
border-top: 1px solid rgba(24, 32, 42, .075);
}
.notes-sidebar .category-row-admin .category-link {
min-height: 34px !important;
font-size: .76rem !important;
opacity: .82;
}
.notes-sidebar .category-delete,
.notes-sidebar .category-rename {
transform: scale(.88);
transform-origin: center;
}
.sidebar-storage {
margin-top: 12px !important;
padding-top: 12px !important;
}
}
@media (min-width: 901px) and (max-width: 1080px) {
.header-main-link {
padding-inline: 9px !important;
}
.header-main-link > span:last-child {
font-size: .75rem !important;
}
}
:root[data-theme="dark"] .header-logout-button {
border-color: #394149 !important;
background: #20262c !important;
color: #c7cdd2 !important;
}
:root[data-theme="dark"] .header-logout-button:hover {
border-color: #68423e !important;
background: #342522 !important;
color: #efb4ad !important;
}
@media (min-width: 901px) {
:root[data-theme="dark"] .notes-sidebar .sidebar-heading,
:root[data-theme="dark"] .notes-sidebar .category-row-system + .category-row:not(.category-row-system) {
border-color: rgba(255,255,255,.075);
}
:root[data-theme="dark"] .notes-sidebar .category-link strong {
background: rgba(255,255,255,.065);
}
:root[data-theme="dark"] .notes-sidebar .category-link.is-active strong {
background: rgba(0,0,0,.18);
}
}
/* =========================================================
NOTE-BLOC V43.6 — BARRE RECHERCHE / FILTRES PC
Recherche prioritaire, tri compact et actions hiérarchisées.
========================================================= */
@media (min-width: 901px) {
.notes-main > .notes-toolbar {
align-items: flex-start;
gap: 18px;
}
.notes-toolbar .toolbar-actions {
flex: 1 1 620px;
min-width: 0;
display: grid;
grid-template-columns: minmax(260px, 1fr) auto auto auto;
align-items: center;
gap: 9px;
}
.notes-toolbar .notes-search {
width: 100%;
min-width: 0;
height: 42px;
border-radius: 12px;
border-color: #e1e4e6;
box-shadow: 0 3px 10px rgba(35, 42, 47, .035);
}
.notes-toolbar .notes-search:focus-within {
border-color: #d4b341;
box-shadow: 0 0 0 3px rgba(242, 196, 56, .13);
}
.notes-toolbar .notes-search input {
padding-left: 13px;
font-size: .88rem;
}
.notes-toolbar .notes-search button {
width: 41px;
color: #727b82;
font-size: 1.12rem;
}
.notes-toolbar .sort-form {
width: auto;
min-width: 142px;
}
.notes-toolbar .sort-form select,
.notes-toolbar #notes-sort {
width: 100%;
height: 42px;
min-height: 42px;
padding: 0 34px 0 12px;
border: 1px solid #e1e4e6;
border-radius: 12px;
background-color: #fff;
font-size: .82rem;
font-weight: 700;
box-shadow: none;
}
.notes-toolbar .lists-only-filter {
width: auto !important;
min-width: 0;
min-height: 42px;
height: 42px;
padding: 0 12px;
gap: 6px;
border-radius: 12px;
font-size: .78rem;
font-weight: 800;
white-space: nowrap;
box-shadow: none;
}
.notes-toolbar .lists-only-filter span {
display: grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 7px;
background: rgba(48, 57, 52, .07);
font-size: .72rem;
}
.notes-toolbar .lists-only-filter.is-active span {
background: rgba(255,255,255,.35);
}
.notes-toolbar .new-entry-actions {
display: flex;
align-items: center;
gap: 7px;
margin: 0;
}
.notes-toolbar .new-entry-actions .button {
width: 42px;
min-width: 42px;
height: 42px;
min-height: 42px;
padding: 0;
display: inline-grid;
place-items: center;
border-radius: 12px;
overflow: hidden;
white-space: nowrap;
font-size: 0;
box-shadow: none;
}
.notes-toolbar .new-entry-actions .button > span {
margin: 0;
font-size: 1rem;
line-height: 1;
}
.notes-toolbar .new-entry-actions .button:hover {
transform: translateY(-1px);
}
.notes-toolbar .button-danger {
min-height: 42px;
padding: 0 13px;
border-radius: 12px;
font-size: .78rem;
}
.notes-main > .active-search {
margin-top: -7px;
margin-bottom: 16px;
padding: 9px 12px;
border-radius: 11px;
font-size: .8rem;
}
.notes-main > .active-search a {
flex: 0 0 auto;
padding: 5px 9px;
border-radius: 8px;
background: rgba(255,255,255,.58);
text-decoration: none;
}
}
@media (min-width: 901px) and (max-width: 1240px) {
.notes-toolbar .toolbar-actions {
grid-template-columns: minmax(230px, 1fr) minmax(132px, auto) auto;
}
.notes-toolbar .new-entry-actions {
grid-column: 1 / -1;
justify-content: flex-end;
}
}
:root[data-theme="dark"] .notes-toolbar .notes-search,
:root[data-theme="dark"] .notes-toolbar .sort-form select,
:root[data-theme="dark"] .notes-toolbar #notes-sort {
border-color: #3a444c;
background: #20282e;
color: #eef1f3;
}
:root[data-theme="dark"] .notes-toolbar .notes-search input {
color: #eef1f3;
}
:root[data-theme="dark"] .notes-toolbar .notes-search:focus-within {
border-color: #c9a834;
box-shadow: 0 0 0 3px rgba(242, 196, 56, .12);
}
/* =========================================================
Note-bloc V43.7 — Listes : densité et actions progressives
========================================================= */
/* Cartes listes intégrées dans "Toutes mes notes" */
@media (min-width: 901px) {
.notes-grid > .shopping-note-card {
padding: 15px 16px 13px !important;
gap: 9px;
}
.notes-grid > .shopping-note-card .shopping-note-card-header {
margin-bottom: 2px;
}
.notes-grid > .shopping-note-card .shopping-note-card-header h3 {
margin-top: 3px;
font-size: 1rem;
line-height: 1.2;
}
.notes-grid > .shopping-note-card .shopping-note-progress {
margin: 1px 0 4px;
}
.notes-grid > .shopping-note-card .shopping-note-items {
gap: 4px;
max-height: 286px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
padding-right: 2px;
}
.notes-grid > .shopping-note-card .shopping-note-section-heading {
min-height: 22px;
margin: 4px 0 0;
padding: 0 3px;
}
.notes-grid > .shopping-note-card .shopping-note-section-heading strong {
font-size: .67rem;
}
.notes-grid > .shopping-note-card .shopping-note-section-heading small {
font-size: .62rem;
}
.notes-grid > .shopping-note-card .notes-shopping-item {
min-height: 40px;
grid-template-columns: 28px minmax(0, 1fr) 26px;
gap: 7px;
padding: 5px 6px;
border-radius: 10px;
}
.notes-grid > .shopping-note-card .notes-shopping-item > button {
width: 25px;
height: 25px;
min-width: 25px;
min-height: 25px;
}
.notes-grid > .shopping-note-card .notes-shopping-item > div {
display: grid;
grid-template-columns: minmax(0, 1fr) 70px 92px;
gap: 5px;
align-items: center;
min-width: 0;
}
.notes-grid > .shopping-note-card .notes-shopping-item input,
.notes-grid > .shopping-note-card .notes-shopping-item select[data-quick-section-input] {
min-width: 0;
height: 28px !important;
padding: 0 6px !important;
font-size: .72rem !important;
border-radius: 7px !important;
}
.notes-grid > .shopping-note-card .notes-shopping-item input[data-quick-label] {
font-size: .78rem !important;
font-weight: 760 !important;
}
.notes-grid > .shopping-note-card .notes-shopping-item input[data-quick-quantity],
.notes-grid > .shopping-note-card .notes-shopping-item select[data-quick-section-input] {
opacity: .62;
transition: opacity .15s ease, border-color .15s ease, background .15s ease;
}
.notes-grid > .shopping-note-card .notes-shopping-item:hover input[data-quick-quantity],
.notes-grid > .shopping-note-card .notes-shopping-item:hover select[data-quick-section-input],
.notes-grid > .shopping-note-card .notes-shopping-item:focus-within input[data-quick-quantity],
.notes-grid > .shopping-note-card .notes-shopping-item:focus-within select[data-quick-section-input] {
opacity: 1;
}
.notes-grid > .shopping-note-card .notes-shopping-item > button[data-quick-delete] {
opacity: .18;
transition: opacity .15s ease, background .15s ease;
}
.notes-grid > .shopping-note-card .notes-shopping-item:hover > button[data-quick-delete],
.notes-grid > .shopping-note-card .notes-shopping-item:focus-within > button[data-quick-delete] {
opacity: 1;
}
.notes-grid > .shopping-note-card .shopping-note-add {
grid-template-columns: minmax(0, 1fr) 72px 96px 30px;
gap: 5px;
margin-top: 5px;
padding-top: 8px;
}
.notes-grid > .shopping-note-card .shopping-note-add input,
.notes-grid > .shopping-note-card .shopping-note-add select,
.notes-grid > .shopping-note-card .shopping-note-add button {
height: 31px !important;
min-height: 31px !important;
font-size: .72rem !important;
}
}
/* Page dédiée aux listes : les commandes secondaires se montrent à l'intention. */
@media (min-width: 901px) {
.shopping-page-v3 .shopping-list-side-actions {
opacity: .42;
transition: opacity .16s ease;
}
.shopping-page-v3 .shopping-list-card-row:hover .shopping-list-side-actions,
.shopping-page-v3 .shopping-list-card-row:focus-within .shopping-list-side-actions,
.shopping-page-v3 .shopping-list-card-row:has(.shopping-list-card.is-active) .shopping-list-side-actions {
opacity: 1;
}
.shopping-page-v3 .shopping-list-order-actions {
opacity: .32;
transition: opacity .16s ease;
}
.shopping-page-v3 .shopping-list-card-row:hover .shopping-list-order-actions,
.shopping-page-v3 .shopping-list-card-row:focus-within .shopping-list-order-actions {
opacity: 1;
}
.shopping-page-v3 .shopping-item-actions {
opacity: .3;
transform: translateX(2px);
transition: opacity .16s ease, transform .16s ease;
}
.shopping-page-v3 .shopping-item:hover .shopping-item-actions,
.shopping-page-v3 .shopping-item:focus-within .shopping-item-actions {
opacity: 1;
transform: none;
}
.shopping-page-v3 .shopping-item.is-completed:not(:hover):not(:focus-within) {
opacity: .52;
}
.shopping-page-v3 .shopping-footer-actions {
padding-top: 4px;
border-top: 1px solid rgba(120, 107, 83, .10);
}
}
/* Tactile / mobile : aucune action ne doit dépendre du survol. */
@media (max-width: 900px), (hover: none) {
.shopping-page-v3 .shopping-list-side-actions,
.shopping-page-v3 .shopping-list-order-actions,
.shopping-page-v3 .shopping-item-actions,
.notes-grid > .shopping-note-card .notes-shopping-item > button[data-quick-delete],
.notes-grid > .shopping-note-card .notes-shopping-item input[data-quick-quantity],
.notes-grid > .shopping-note-card .notes-shopping-item select[data-quick-section-input] {
opacity: 1 !important;
transform: none !important;
}
}
/* =========================================================
NOTE-BLOC V43.8 — RENDEZ-VOUS / DEADLINES
Passe de densité et hiérarchie visuelle (PC + tactile)
========================================================= */
@media (min-width: 901px) {
.appointments-page {
width: min(1160px, calc(100% - 40px));
padding-top: 26px;
}
.appointments-hero {
gap: 22px;
padding: 24px 26px;
border-radius: 22px;
}
.appointments-hero-icon {
width: 54px;
height: 54px;
border-radius: 16px;
font-size: 1.65rem;
}
.appointments-hero h1 {
margin-bottom: 6px;
font-size: clamp(1.9rem, 3vw, 2.8rem);
}
.appointments-hero p:not(.eyebrow) {
line-height: 1.5;
}
.appointments-stats {
gap: 10px;
margin: 16px 0 18px;
}
.appointments-stats article {
min-height: 94px;
padding: 15px 17px;
border-radius: 16px;
box-shadow: 0 7px 20px rgba(49, 43, 35, .045);
}
.appointments-stats span {
font-size: .7rem;
}
.appointments-stats strong {
font-size: 1.72rem;
}
.appointments-stats small {
font-size: .78rem;
}
.appointments-filters {
margin-bottom: 14px;
padding: 4px;
border-radius: 12px;
}
.appointments-filters a {
padding: 7px 12px;
border-radius: 9px;
font-size: .82rem;
}
.appointments-list {
gap: 11px;
}
.appointment-card {
grid-template-columns: 78px minmax(0, 1fr);
border-radius: 17px;
box-shadow: 0 8px 24px rgba(43, 39, 33, .05);
transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.appointment-card:hover {
border-color: #d8ccb9;
box-shadow: 0 12px 28px rgba(43, 39, 33, .075);
}
.appointment-date-block {
padding: 15px 8px;
}
.appointment-date-block strong {
font-size: 1.8rem;
}
.appointment-card-main {
gap: 10px;
padding: 16px 18px;
}
.appointment-card-main h2 {
margin-top: 2px;
font-size: 1.12rem;
}
.appointment-status-pill {
min-height: 21px;
padding: 2px 8px;
font-size: .65rem;
}
.appointment-meta-row {
gap: 7px 13px;
font-size: .81rem;
}
.appointment-preparation {
padding: 10px 12px;
border-radius: 0 10px 10px 0;
}
.appointment-preparation p {
margin-top: 2px;
line-height: 1.42;
}
.appointment-note-link {
padding: 9px 11px;
border-radius: 11px;
}
.appointment-note-link > span:first-child {
width: 30px;
height: 30px;
border-radius: 8px;
}
.appointment-edit-button {
min-height: 34px;
padding: 6px 10px;
font-size: .76rem;
}
.appointment-card-actions {
min-height: 34px;
gap: 6px;
}
/* Les actions secondaires restent disponibles au clavier et apparaissent au survol. */
.appointment-card-actions .button,
.appointment-delete-button {
opacity: .36;
transition: opacity .15s ease, border-color .15s ease, background .15s ease;
}
.appointment-card:hover .appointment-card-actions .button,
.appointment-card:focus-within .appointment-card-actions .button,
.appointment-card:hover .appointment-delete-button,
.appointment-card:focus-within .appointment-delete-button {
opacity: 1;
}
/* États plus faciles à scanner dans une longue liste. */
.appointment-card.is-today {
border-color: #c7aa62;
box-shadow: 0 0 0 2px rgba(199, 170, 98, .11), 0 10px 26px rgba(43, 39, 33, .06);
}
.appointment-card.is-past:not(.is-done):not(.is-cancelled) {
border-color: #e2b8ae;
}
.appointment-card.is-done,
.appointment-card.is-cancelled {
opacity: .64;
box-shadow: none;
}
.appointment-card.is-done:hover,
.appointment-card.is-cancelled:hover,
.appointment-card.is-done:focus-within,
.appointment-card.is-cancelled:focus-within {
opacity: .9;
}
}
/* Le badge échéance d'une note reste lisible sans prendre trop de hauteur. */
.note-deadline {
gap: 5px;
padding-block: 7px;
}
.note-deadline strong {
line-height: 1.25;
}
/* Les cartes liées à un rendez-vous sont légèrement plus calmes dans la grille de notes. */
@media (min-width: 901px) {
.note-appointment-summary {
gap: 8px;
margin-top: 8px;
padding: 8px 10px;
border-radius: 10px;
}
.note-appointment-summary-icon {
width: 28px;
height: 28px;
border-radius: 8px;
}
.note-appointment-summary-copy strong {
font-size: .81rem;
}
.note-appointment-summary-copy small,
.note-appointment-summary > b {
font-size: .72rem;
}
}
/* Mobile/tactile : aucun contrôle ne dépend du survol. */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
.appointment-card-actions .button,
.appointment-delete-button {
opacity: 1 !important;
}
}
/* Mode sombre — conserver la hiérarchie ajoutée par la passe V43.8. */
:root[data-theme="dark"] .appointment-card.is-today {
border-color: #8f7949;
box-shadow: 0 0 0 2px rgba(201, 172, 103, .10), 0 10px 26px rgba(0, 0, 0, .18);
}
:root[data-theme="dark"] .appointment-card.is-past:not(.is-done):not(.is-cancelled) {
border-color: #754e49;
}
/* Note-bloc V43.9 — vues secondaires et états vides */
.notes-empty-actions{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
.notes-empty-actions .button{min-height:42px;padding:0 15px;border-radius:12px;text-decoration:none}
.notes-empty[class*="notes-empty-"]{position:relative;overflow:hidden;min-height:310px;padding:48px 30px}
.notes-empty[class*="notes-empty-"]::after{content:"";position:absolute;inset:auto -55px -70px auto;width:190px;height:190px;border-radius:50%;background:rgba(222,198,95,.08);pointer-events:none}
.notes-empty-trash .empty-note-illustration{filter:saturate(.45);opacity:.72;transform:rotate(2deg)}
.notes-empty-archive .empty-note-illustration{filter:saturate(.55);opacity:.82}
.notes-empty-favorite .empty-note-illustration{box-shadow:0 12px 24px rgba(165,128,12,.10)}
.notes-empty-pinned .empty-note-illustration{transform:rotate(-2deg)}
.notes-empty-deadline .empty-note-illustration{transform:rotate(2deg)}
.notes-empty-search .empty-note-illustration,.notes-empty-tag .empty-note-illustration{filter:saturate(.7)}
.active-search{min-height:42px;padding:8px 11px 8px 14px;border:1px solid #e4dfd2;border-radius:13px;background:rgba(255,255,255,.74);box-shadow:none}
.active-search>span{font-size:.79rem;line-height:1.35;color:#6c716f}
.active-search>a{flex:0 0 auto;padding:7px 10px;border-radius:9px;background:#f3f0e8;color:#555b60;font-size:.75rem;font-weight:800;text-decoration:none}
.active-search>a:hover{background:#ebe5d7}
.trash-overview{margin-bottom:10px;border-color:#efd8d4;background:#fff8f6;box-shadow:none}
.trash-overview a{white-space:nowrap}
.note-card.is-archived{opacity:.88}
.note-card.is-archived .note-card-header,.note-card.is-archived .note-card-footer{filter:saturate(.75)}
.note-card.is-trashed{opacity:.78;filter:saturate(.78)}
.note-card.is-trashed:hover{opacity:.94}
:root[data-theme="dark"] .active-search{border-color:#3c4449;background:rgba(37,43,48,.82)}
:root[data-theme="dark"] .active-search>span{color:#bec5c9}
:root[data-theme="dark"] .active-search>a{background:#30373d;color:#e7eaec}
:root[data-theme="dark"] .active-search>a:hover{background:#394148}
:root[data-theme="dark"] .trash-overview{border-color:#5a3a37;background:#302624}
:root[data-theme="dark"] .notes-empty[class*="notes-empty-"]::after{background:rgba(236,211,99,.045)}
@media (max-width:700px){
.notes-empty[class*="notes-empty-"]{min-height:0;padding:42px 18px}
.notes-empty-actions{width:100%;display:grid;grid-template-columns:1fr}
.notes-empty-actions .button{width:100%;justify-content:center}
.active-search{align-items:flex-start;gap:8px}
.active-search>span{padding-top:5px}
}
/* =========================================================
NOTE-BLOC V43.10 — PARTAGES + PIÈCES JOINTES
========================================================= */
@media (min-width: 901px) {
.notes-grid .note-attachments {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
margin-top: 11px;
}
.notes-grid .note-attachment-image {
border: 1px solid rgba(46, 57, 51, .08);
border-radius: 9px;
transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.notes-grid .note-attachment-image:hover {
z-index: 1;
transform: translateY(-1px);
box-shadow: 0 7px 18px rgba(31, 42, 36, .12);
}
}
.note-attachment-file {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
min-height: 44px;
}
.note-attachment-file-icon {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(255, 255, 255, .58);
font-size: .82rem;
}
.note-attachment-file-copy {
min-width: 0;
}
.note-attachment-file-copy strong,
.note-attachment-file-copy small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.note-attachment-file-copy strong {
font-size: .72rem;
font-weight: 850;
}
.note-attachment-file-copy small {
margin-top: 2px;
opacity: .62;
font-size: .62rem;
font-weight: 700;
}
.note-attachment-file-arrow {
opacity: .48;
font-size: .88rem;
}
.note-attachment-file:hover .note-attachment-file-arrow {
opacity: .9;
}
/* Éditeur : bibliothèque plus compacte, actions secondaires au repos. */
@media (min-width: 901px) {
#note-modal .attachment-library {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#note-modal .attachment-item {
grid-template-columns: 46px minmax(0, 1fr) auto;
gap: 9px;
min-width: 0;
padding: 8px;
}
#note-modal .attachment-preview {
width: 46px;
height: 46px;
}
#note-modal .attachment-actions {
opacity: .48;
transition: opacity .15s ease;
}
#note-modal .attachment-item:hover .attachment-actions,
#note-modal .attachment-item:focus-within .attachment-actions {
opacity: 1;
}
}
/* Galerie plein écran. */
.image-lightbox-heading {
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
}
.image-lightbox-heading strong {
min-width: 0;
}
#image-lightbox-counter {
flex: 0 0 auto;
color: rgba(255, 255, 255, .58);
font-size: .72rem;
font-weight: 800;
}
.image-lightbox-actions {
display: flex;
align-items: center;
gap: 8px;
}
.image-lightbox-download {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 0 12px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 11px;
background: rgba(255, 255, 255, .08);
color: #fff;
font-size: .72rem;
font-weight: 850;
text-decoration: none;
}
.image-lightbox-download:hover {
background: rgba(255, 255, 255, .15);
}
.image-lightbox-download[hidden] {
display: none;
}
.image-lightbox-content {
position: relative;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 14px;
}
.image-lightbox-nav {
display: grid;
place-items: center;
width: 46px;
height: 56px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .13);
border-radius: 14px;
background: rgba(255, 255, 255, .09);
color: #fff;
font: inherit;
font-size: 2rem;
line-height: 1;
cursor: pointer;
}
.image-lightbox-nav:hover {
background: rgba(255, 255, 255, .17);
}
.image-lightbox-nav[hidden] {
visibility: hidden;
}
.image-lightbox-content img {
justify-self: center;
min-width: 0;
}
/* Modal de partage : informations plus faciles à scanner. */
#share-note-modal .modal-card-small {
width: min(560px, calc(100% - 24px));
}
#share-note-modal .note-form {
gap: 13px;
}
#share-note-modal .share-existing,
#share-note-modal .share-result {
padding: 12px;
border-radius: 12px;
}
#share-note-modal .share-existing-status p {
max-width: 390px;
}
#share-note-modal .share-link-row input {
min-height: 40px;
}
@media (max-width: 700px) {
.note-attachments {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.image-lightbox-header {
gap: 10px;
padding: 11px 10px 11px 13px;
}
.image-lightbox-heading {
display: grid;
gap: 2px;
}
.image-lightbox-download {
width: 38px;
padding: 0;
overflow: hidden;
color: transparent;
font-size: 0;
}
.image-lightbox-download::before {
content: "↓";
color: #fff;
font-size: 1rem;
}
.image-lightbox-content {
grid-template-columns: 1fr;
padding: 8px;
}
.image-lightbox-nav {
position: absolute;
top: 50%;
z-index: 3;
width: 40px;
height: 52px;
transform: translateY(-50%);
background: rgba(18, 22, 27, .58);
}
.image-lightbox-prev { left: 10px; }
.image-lightbox-next { right: 10px; }
#share-note-modal .share-existing {
align-items: stretch;
flex-direction: column;
}
#share-note-modal .share-existing button {
width: 100%;
}
}
/* =========================================================
V43.11 — VOCAL : LECTURE, DENSITÉ ET ÉTATS
========================================================= */
@media (min-width: 901px) {
.notes-grid .note-audios {
gap: 7px;
margin-top: 8px;
}
.notes-grid .note-audio-item {
gap: 7px;
padding: 7px 9px;
border-radius: 10px;
}
.notes-grid .note-audio-item audio {
min-width: 0;
height: 32px;
}
.notes-grid .note-audio-meta {
gap: 3px;
font-size: .62rem;
}
.voice-library-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.voice-library-item {
min-width: 0;
padding: 9px;
}
}
.voice-library-item audio {
width: 100%;
min-width: 0;
}
.voice-library-meta {
gap: 8px;
}
.voice-library-meta > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.voice-panel.is-recording .voice-timer {
font-size: .88rem;
font-weight: 900;
letter-spacing: .04em;
}
.note-card.is-audio-only .audio-only-heading {
margin-bottom: 8px;
}
@media (max-width: 650px) {
.note-audio-item {
gap: 6px;
padding: 7px;
}
.note-audio-item audio {
width: 100%;
min-width: 0;
height: 36px;
}
.note-audio-meta {
display: flex;
justify-content: space-between;
gap: 8px;
width: 100%;
}
.voice-library-list {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
}
/* V43.20 — Espaces collaboratifs */
.workspace-page{width:min(1180px,calc(100% - 32px));margin:28px auto 60px}.workspace-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:18px}.workspace-heading h1{margin:2px 0 6px;font-size:clamp(1.8rem,3vw,2.5rem)}.workspace-heading p{max-width:760px;margin:0;color:var(--muted,#66727a)}.workspace-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:18px;align-items:start}.workspace-sidebar,.workspace-main{display:grid;gap:14px}.workspace-card{background:var(--surface,#fff);border:1px solid rgba(116,128,136,.2);border-radius:20px;padding:18px;box-shadow:0 10px 30px rgba(31,42,47,.06)}.workspace-card h2{margin:0;font-size:1.12rem}.workspace-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.workspace-kicker{display:block;margin-bottom:3px;color:#b67800;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.workspace-count,.workspace-member-badge{display:inline-flex;align-items:center;min-height:28px;padding:4px 9px;border-radius:999px;background:rgba(219,164,25,.12);font-size:.78rem;font-weight:850}.workspace-form{display:grid;gap:10px;margin-top:12px}.workspace-form label,.workspace-invite-form label{display:grid;gap:5px;font-size:.78rem;font-weight:800}.workspace-form input,.workspace-form textarea,.workspace-invite-form input,.workspace-invite-form select,.workspace-member-controls select{width:100%;border:1px solid rgba(116,128,136,.28);border-radius:11px;background:var(--surface,#fff);color:inherit;padding:10px 11px;font:inherit}.workspace-space-list{display:grid;gap:7px}.workspace-space-link{display:flex;gap:10px;align-items:center;padding:10px;border-radius:14px;color:inherit;text-decoration:none;border:1px solid transparent}.workspace-space-link:hover,.workspace-space-link.is-active{background:rgba(219,164,25,.09);border-color:rgba(219,164,25,.2)}.workspace-space-link>span:last-child{display:grid;min-width:0}.workspace-space-link strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace-space-link small,.workspace-member-copy small,.workspace-invitation-row small,.workspace-pending-list small{color:var(--muted,#6e777c);font-size:.72rem}.workspace-space-avatar,.workspace-member-avatar{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#ffe8a7,#f5ba29);color:#493400;font-weight:950}.workspace-overview>p{margin:0 0 16px;color:var(--muted,#66727a)}.workspace-coming-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.workspace-coming-grid>div{display:grid;gap:2px;padding:12px;border-radius:14px;background:rgba(116,128,136,.07)}.workspace-coming-grid span{font-size:1.25rem}.workspace-coming-grid strong{font-size:.84rem}.workspace-coming-grid small{font-size:.68rem;color:var(--muted,#6e777c)}.workspace-invite-form{display:grid;grid-template-columns:minmax(0,1fr) 170px auto;gap:9px;align-items:end}.workspace-invitation-list,.workspace-member-list,.workspace-pending-list{display:grid;gap:8px}.workspace-invitation-row,.workspace-member-row,.workspace-pending-list>div{display:flex;align-items:center;gap:10px;padding:10px;border-radius:13px;background:rgba(116,128,136,.055)}.workspace-invitation-row>div:first-child,.workspace-member-copy,.workspace-pending-list>div>span{display:grid;min-width:0;flex:1}.workspace-inline-actions,.workspace-member-controls{display:flex;align-items:center;gap:7px}.workspace-member-controls{margin-left:auto}.workspace-member-controls select{min-width:130px;padding:7px 9px}.workspace-danger{color:#b33b37!important}.workspace-leave-form{display:flex;justify-content:flex-end;margin-top:14px;padding-top:14px;border-top:1px solid rgba(116,128,136,.13)}.workspace-empty-small{padding:14px;text-align:center;color:var(--muted,#6e777c);font-size:.82rem}.workspace-empty-large{text-align:center;padding:50px 24px}.workspace-empty-large>span{display:block;font-size:2.4rem;margin-bottom:8px;color:#c28a0a}.workspace-empty-large p{color:var(--muted,#6e777c)}.workspace-migration-card code{font-weight:800}.workspace-pending-list{margin-top:12px}.workspace-pending-list>div{justify-content:space-between}
:root[data-theme="dark"] .workspace-card{background:#182126;border-color:rgba(255,255,255,.08);box-shadow:none}:root[data-theme="dark"] .workspace-space-link:hover,:root[data-theme="dark"] .workspace-space-link.is-active{background:rgba(237,184,50,.1)}:root[data-theme="dark"] .workspace-coming-grid>div,:root[data-theme="dark"] .workspace-invitation-row,:root[data-theme="dark"] .workspace-member-row,:root[data-theme="dark"] .workspace-pending-list>div{background:rgba(255,255,255,.045)}:root[data-theme="dark"] .workspace-form input,:root[data-theme="dark"] .workspace-form textarea,:root[data-theme="dark"] .workspace-invite-form input,:root[data-theme="dark"] .workspace-invite-form select,:root[data-theme="dark"] .workspace-member-controls select{background:#11191d;border-color:rgba(255,255,255,.12)}
@media(max-width:900px){.workspace-page{width:min(100% - 20px,760px);margin-top:16px}.workspace-layout{grid-template-columns:1fr}.workspace-sidebar{grid-template-columns:1fr 1fr}.workspace-space-list{align-content:start}.workspace-coming-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-invite-form{grid-template-columns:1fr 150px}.workspace-invite-form>.button{grid-column:1/-1}.header-main-link[href$="workspaces.php"]{display:none}}
@media(max-width:620px){.workspace-page{width:calc(100% - 14px);margin-top:10px}.workspace-heading{margin:0 5px 12px}.workspace-heading h1{font-size:1.65rem}.workspace-heading p{font-size:.85rem}.workspace-sidebar{grid-template-columns:1fr}.workspace-create-card{order:2}.workspace-space-list{order:1;display:flex;overflow:auto;padding-bottom:2px}.workspace-space-link{flex:0 0 210px}.workspace-card{padding:14px;border-radius:16px}.workspace-coming-grid{grid-template-columns:1fr 1fr}.workspace-invite-form{grid-template-columns:1fr}.workspace-invite-form>.button{grid-column:auto}.workspace-invitation-row,.workspace-member-row,.workspace-pending-list>div{align-items:flex-start;flex-wrap:wrap}.workspace-inline-actions{width:100%;justify-content:flex-end}.workspace-member-controls{width:100%;margin-left:48px}.workspace-member-controls select{flex:1}.workspace-member-row>form:not(.workspace-member-controls){margin-left:auto}.workspace-pending-list>div form{margin-left:auto}}
/* === V43.21 — Notes communes dans les espaces ========================= */
.category-navigation-divider {
margin: 14px 8px 6px;
padding-top: 12px;
border-top: 1px solid rgba(20, 28, 38, .09);
}
.category-navigation-divider span {
font-size: .72rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .58;
}
.category-link-workspace {
gap: 9px;
}
.category-link-workspace small {
margin-left: auto;
font-size: .68rem;
opacity: .58;
}
.category-workspace-icon {
width: 22px;
height: 22px;
display: grid;
place-items: center;
border-radius: 7px;
background: rgba(91, 141, 239, .12);
font-weight: 900;
}
.note-card.is-workspace-note {
box-shadow: inset 0 3px 0 rgba(91, 141, 239, .55), var(--note-shadow, 0 9px 22px rgba(32, 38, 48, .08));
}
.note-workspace-badge {
background: rgba(91, 141, 239, .11) !important;
border-color: rgba(91, 141, 239, .2) !important;
}
.note-workspace-role {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 2px 7px;
border-radius: 999px;
font-size: .66rem;
font-weight: 750;
background: rgba(255, 255, 255, .52);
opacity: .72;
}
.note-form.is-workspace-note-editor #note-category-field {
display: none !important;
}
#note-workspace-help {
display: block;
margin-top: 5px;
line-height: 1.35;
opacity: .66;
}
.note-form.is-workspace-note-editor .note-editor-organisation {
border-color: rgba(91, 141, 239, .18);
}
.note-card [data-edit-note][disabled],
.note-card .note-flag-button[disabled] {
cursor: default;
opacity: .48;
}
@media (prefers-color-scheme: dark) {
.category-navigation-divider { border-top-color: rgba(255,255,255,.09); }
.category-workspace-icon,
.note-workspace-badge { background: rgba(126, 163, 244, .16) !important; }
.note-workspace-role { background: rgba(255,255,255,.08); }
}
@media (max-width: 900px) {
.category-link-workspace small { display: none; }
.note-workspace-role { font-size: .62rem; }
}
.workspace-coming-grid > a { display:grid; gap:2px; padding:12px; border-radius:14px; background:rgba(116,128,136,.07); color:inherit; text-decoration:none; }
.workspace-coming-grid > a:hover { background:rgba(91,141,239,.12); }
:root[data-theme="dark"] .workspace-coming-grid > a { background:rgba(255,255,255,.045); }
.note-form.is-readonly-note .note-editor-commandbar,
.note-form.is-readonly-note .note-editor-more,
.note-form.is-readonly-note .note-editor-options,
.note-form.is-readonly-note .attachment-editor { display:none !important; }
.note-form.is-readonly-note #note-text { cursor:default; }
.note-form.is-workspace-note-editor [data-note-command="media"],
.note-form.is-workspace-note-editor #voice-button,
.note-form.is-workspace-note-editor #open-note-history,
.note-form.is-workspace-note-editor #open-note-relations { display:none !important; }
/* V43.22 — Bibliothèque de fichiers des espaces collaboratifs */
.workspace-files-page{width:min(1320px,calc(100% - 40px));margin:28px auto 56px}.workspace-files-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px}.workspace-files-heading h1{margin:.18rem 0 .35rem}.workspace-files-heading p{margin:0;max-width:760px}.workspace-files-heading-actions{display:flex;gap:8px;flex-wrap:wrap}.workspace-storage-card{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;gap:18px;margin-bottom:18px}.workspace-storage-copy{display:flex;flex-direction:column;gap:2px}.workspace-storage-copy span,.workspace-file-title small{font-size:.78rem;opacity:.68}.workspace-storage-track{height:9px;border-radius:999px;background:color-mix(in srgb,currentColor 10%,transparent);overflow:hidden}.workspace-storage-track span{display:block;height:100%;border-radius:inherit;background:var(--accent-color,#6d5dfc)}.workspace-storage-percent{font-variant-numeric:tabular-nums;font-weight:700}.workspace-upload-card{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.workspace-upload-card h2{margin:.2rem 0}.workspace-upload-card p{margin:0;opacity:.72}.workspace-upload-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.workspace-file-picker{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border:1px dashed color-mix(in srgb,currentColor 28%,transparent);border-radius:12px;cursor:pointer}.workspace-file-picker input{position:absolute;inset:0;opacity:0;cursor:pointer}.workspace-file-library-heading{display:flex;align-items:end;justify-content:space-between;margin:24px 0 12px}.workspace-file-library-heading h2{margin:.18rem 0 0}.workspace-files-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.workspace-file-card{display:grid;grid-template-rows:150px 1fr;min-width:0;background:var(--card-background,#fff);border:1px solid color-mix(in srgb,currentColor 10%,transparent);border-radius:18px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.05)}.workspace-file-preview{display:grid;place-items:center;background:color-mix(in srgb,currentColor 5%,transparent);font-size:2rem;text-decoration:none;color:inherit;overflow:hidden}.workspace-file-preview.is-image{background:#111}.workspace-file-preview img{width:100%;height:100%;object-fit:cover}.workspace-file-body{display:flex;flex-direction:column;gap:12px;padding:14px}.workspace-file-title{min-width:0;display:flex;flex-direction:column;gap:3px}.workspace-file-title strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-file-links{display:flex;flex-direction:column;gap:6px}.workspace-file-links>span{font-size:.76rem;font-weight:700;opacity:.62;text-transform:uppercase;letter-spacing:.04em}.workspace-file-note-link{display:flex;align-items:center;gap:5px;min-width:0;padding:6px 8px;border-radius:9px;background:color-mix(in srgb,currentColor 5%,transparent)}.workspace-file-note-link>a{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;text-decoration:none;font-size:.82rem}.workspace-file-note-link form{margin:0}.workspace-file-note-link button{border:0;background:transparent;color:inherit;opacity:.55;cursor:pointer;font-size:1.05rem}.workspace-file-link-form{display:flex;gap:7px;align-items:center}.workspace-file-link-form select{min-width:0;flex:1}.workspace-file-actions{display:flex;align-items:center;gap:7px;margin-top:auto}.workspace-file-actions form{margin:0}.workspace-file-card .workspace-danger{color:#b42318}.workspace-empty-large code{font-size:.9em}.workspace-coming-grid>a{text-decoration:none;color:inherit}
@media(max-width:1100px){.workspace-files-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-upload-card{align-items:flex-start;flex-direction:column}}
@media(max-width:720px){.workspace-files-page{width:min(100% - 20px,1320px);margin-top:16px}.workspace-files-heading{align-items:flex-start;flex-direction:column}.workspace-files-heading-actions{width:100%}.workspace-files-heading-actions .button{flex:1}.workspace-storage-card{grid-template-columns:1fr auto;gap:8px}.workspace-storage-track{grid-column:1/-1;grid-row:2}.workspace-files-grid{grid-template-columns:1fr}.workspace-file-card{grid-template-rows:130px 1fr}.workspace-upload-form{width:100%}.workspace-file-picker,.workspace-upload-form .button{width:100%}.workspace-file-link-form{align-items:stretch;flex-direction:column}.workspace-file-actions{flex-wrap:wrap}}
.note-workspace-files{padding-top:8px;border-top:1px dashed color-mix(in srgb,currentColor 13%,transparent)}.note-workspace-file .note-attachment-file-icon{font-size:.9rem}.note-workspace-file .note-attachment-file-copy small{font-size:.72rem}
/* Note-bloc V43.23 — listes collaboratives */
.shopping-workspace-select {
width: 100%;
min-height: 38px;
margin: 0 0 8px;
padding: 8px 10px;
border: 1px solid var(--border-color, rgba(20, 28, 40, .14));
border-radius: 10px;
background: var(--surface, #fff);
color: inherit;
}
.shopping-space-filters {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin: 10px 0 14px;
}
.shopping-space-filters a {
max-width: 100%;
padding: 6px 9px;
border: 1px solid var(--border-color, rgba(20, 28, 40, .12));
border-radius: 999px;
background: var(--surface, #fff);
color: inherit;
font-size: .78rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.shopping-space-filters a.is-active {
border-color: color-mix(in srgb, #f0ad31 60%, var(--border-color, #dfe2e6));
background: color-mix(in srgb, var(--surface, #fff) 88%, #f2b84b 12%);
}
.shopping-workspace-badge,
.shopping-active-workspace {
display: block;
width: max-content;
max-width: 100%;
color: var(--muted-text, #68707b);
font-size: .73rem;
font-weight: 800;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.shopping-workspace-badge {
margin-top: 2px;
}
.shopping-active-workspace {
margin-top: 2px;
}
.shopping-readonly-notice,
.shopping-workspace-note {
border: 1px solid var(--border-color, rgba(20, 28, 40, .12));
border-radius: 14px;
background: color-mix(in srgb, var(--surface, #fff) 95%, #f2b84b 5%);
}
.shopping-readonly-notice {
display: grid;
gap: 4px;
margin: 14px 0;
padding: 13px 15px;
}
.shopping-readonly-notice strong {
font-size: .9rem;
}
.shopping-readonly-notice span,
.shopping-workspace-note {
color: var(--muted-text, #68707b);
font-size: .82rem;
line-height: 1.45;
}
.shopping-workspace-note {
margin: 0 0 14px;
padding: 10px 12px;
}
.shopping-item input[readonly],
.shopping-item select:disabled,
.shopping-check:disabled,
.shopping-title-input[readonly] {
cursor: default;
}
.shopping-item input[readonly],
.shopping-item select:disabled {
opacity: .82;
}
.shopping-check:disabled {
opacity: .72;
}
@media (max-width: 900px) {
.shopping-space-filters {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 3px;
scrollbar-width: none;
}
.shopping-space-filters::-webkit-scrollbar { display: none; }
.shopping-space-filters a { flex: 0 0 auto; }
.shopping-active-workspace { font-size: .69rem; }
}
.shopping-remote-update {
position: fixed;
right: 18px;
bottom: 22px;
z-index: 1200;
display: flex;
align-items: center;
gap: 14px;
max-width: min(430px, calc(100vw - 28px));
padding: 12px 14px;
border: 1px solid var(--border-color, rgba(20, 28, 40, .14));
border-radius: 16px;
background: var(--surface, #fff);
box-shadow: 0 16px 42px rgba(20, 28, 40, .18);
}
.shopping-remote-update span { display: grid; gap: 2px; min-width: 0; }
.shopping-remote-update strong { font-size: .88rem; }
.shopping-remote-update small { color: var(--muted-text, #68707b); line-height: 1.35; }
.shopping-remote-update button {
flex: 0 0 auto;
padding: 8px 11px;
border: 0;
border-radius: 10px;
font-weight: 800;
cursor: pointer;
}
@media (max-width: 700px) {
.shopping-remote-update { left: 14px; right: 14px; bottom: 82px; }
}
/* V43.24 — Agenda collaboratif */
.appointments-scope-filters {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
margin: 4px 0 10px;
}
.appointments-scope-filters a {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 6px 12px;
border: 1px solid var(--border-color, #dedede);
border-radius: 999px;
background: var(--surface, #fff);
color: inherit;
text-decoration: none;
font-size: .86rem;
font-weight: 700;
}
.appointments-scope-filters a:hover,
.appointments-scope-filters a.is-active {
border-color: currentColor;
background: color-mix(in srgb, currentColor 8%, transparent);
}
.appointment-workspace-pill,
.appointment-readonly-badge {
display: inline-flex;
align-items: center;
width: max-content;
padding: 3px 8px;
border-radius: 999px;
font-size: .72rem;
line-height: 1.2;
font-weight: 800;
}
.appointment-workspace-pill {
margin-left: 6px;
background: rgba(90, 112, 255, .1);
color: #5969c9;
}
.appointment-readonly-badge {
background: rgba(120, 120, 120, .1);
color: var(--muted-text, #6f6f6f);
}
.appointment-workspace-field {
margin-bottom: 14px;
}
.appointment-workspace-field select {
width: 100%;
}
@media (max-width: 700px) {
.appointments-scope-filters {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: thin;
}
.appointments-scope-filters a { flex: 0 0 auto; }
.appointment-workspace-pill { margin-left: 2px; }
}
/* V43.25 — activité des espaces collaboratifs */
.workspace-activity-card{overflow:hidden}
.workspace-activity-list{display:grid;gap:0}
.workspace-activity-row{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:flex-start;padding:11px 0;border-top:1px solid rgba(17,24,39,.08)}
.workspace-activity-row:first-child{border-top:0;padding-top:2px}
.workspace-activity-avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(17,24,39,.07);font-size:.8rem;font-weight:800}
.workspace-activity-row p{margin:0;color:var(--text-color,#1f2937);font-size:.92rem;line-height:1.35}
.workspace-activity-row small{display:block;margin-top:3px;color:var(--muted-color,#6b7280);font-size:.76rem}
@media (min-width:901px){.workspace-activity-list{max-height:440px;overflow:auto;padding-right:4px}}
@media (max-width:900px){.workspace-activity-row{grid-template-columns:32px minmax(0,1fr);padding:10px 0}.workspace-activity-avatar{width:30px;height:30px;border-radius:9px}}
[data-theme="dark"] .workspace-activity-row{border-top-color:rgba(255,255,255,.08)}
[data-theme="dark"] .workspace-activity-avatar{background:rgba(255,255,255,.08)}
/* V43.26 — centre de notifications collaboratives */
.header-notification-button{position:relative}
.header-notification-button.is-active{background:rgba(245,211,83,.22)}
.header-notification-count{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#171717;color:#fff;font-size:10px;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--surface,#fff)}
.workspace-notifications-page{width:min(1080px,calc(100% - 32px));margin:0 auto;padding:28px 0 96px}
.notification-page-heading{align-items:flex-end}
.notification-center-card{padding:0;overflow:hidden}
.notification-center-summary{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid rgba(0,0,0,.08);font-size:.9rem}
.notification-center-summary span{color:var(--muted,#6b7280)}
.workspace-notification-list{display:grid}
.workspace-notification-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:15px 18px;border-bottom:1px solid rgba(0,0,0,.07);transition:background .18s ease}
.workspace-notification-row:last-child{border-bottom:0}
.workspace-notification-row.is-unread{background:rgba(245,211,83,.12)}
.workspace-notification-copy{min-width:0}
.workspace-notification-copy p{margin:0 0 4px;line-height:1.4}
.workspace-notification-copy small{display:block;color:var(--muted,#6b7280)}
.workspace-notification-actions{display:flex;align-items:center;gap:10px}
.notification-unread-dot{width:9px;height:9px;border-radius:50%;background:#d59d00;box-shadow:0 0 0 3px rgba(213,157,0,.13)}
@media (max-width:700px){
.workspace-notifications-page{width:min(100% - 20px,1080px);padding-top:18px}
.notification-page-heading{align-items:flex-start}
.workspace-notification-row{grid-template-columns:34px minmax(0,1fr);padding:13px 12px}
.workspace-notification-actions{grid-column:2;justify-content:flex-start}
.notification-center-summary{padding:12px;flex-wrap:wrap}
}
/* V43.27 — Dossiers communs des espaces */
.workspace-categories-card{scroll-margin-top:90px}
.workspace-category-intro{margin:0 0 14px;color:var(--muted,#6b7280);font-size:.9rem}
.workspace-category-create-form{display:grid;grid-template-columns:minmax(220px,1fr) 150px auto;gap:10px;align-items:end;margin:14px 0 16px}
.workspace-category-create-form label,.workspace-category-edit-form{min-width:0}.workspace-category-create-form label span{display:block;font-size:.75rem;font-weight:700;margin-bottom:5px;color:var(--muted,#6b7280)}
.workspace-category-create-form input,.workspace-category-create-form select,.workspace-category-edit-form input,.workspace-category-edit-form select,.workspace-file-category-form select{width:100%;min-height:38px;border:1px solid rgba(0,0,0,.12);border-radius:10px;background:var(--surface,#fff);color:inherit;padding:7px 10px}
.workspace-category-list{display:grid;gap:8px}
.workspace-category-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:11px 12px;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:rgba(255,255,255,.32)}
.workspace-category-dot{width:10px;height:10px;border-radius:50%;background:var(--workspace-category-color,#7EA3F4);box-shadow:0 0 0 4px color-mix(in srgb,var(--workspace-category-color,#7EA3F4) 18%,transparent)}
.workspace-category-copy{display:grid;gap:2px;min-width:0}.workspace-category-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace-category-copy small{color:var(--muted,#6b7280);font-size:.76rem}
.workspace-category-links{display:flex;gap:6px}.workspace-category-links a{font-size:.76rem;text-decoration:none;padding:5px 8px;border-radius:8px;background:rgba(0,0,0,.045);color:inherit}
.workspace-category-manage{position:relative}.workspace-category-manage summary{list-style:none;cursor:pointer;font-size:.76rem;padding:6px 8px;border-radius:8px;background:rgba(0,0,0,.045)}.workspace-category-manage summary::-webkit-details-marker{display:none}
.workspace-category-manage-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(430px,80vw);padding:10px;border:1px solid rgba(0,0,0,.1);border-radius:12px;background:var(--surface,#fff);box-shadow:0 12px 30px rgba(0,0,0,.16)}
.workspace-category-edit-form{display:grid;grid-template-columns:minmax(150px,1fr) 110px auto;gap:7px}.workspace-category-order-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}.workspace-category-order-actions form{margin:0}
.workspace-category-sidebar{display:grid;gap:3px;margin:3px 0 7px 28px;padding-left:10px;border-left:1px solid rgba(0,0,0,.08)}.workspace-category-sidebar a{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:7px;align-items:center;padding:5px 7px;border-radius:8px;text-decoration:none;color:var(--muted,#6b7280);font-size:.76rem}.workspace-category-sidebar a>span{width:7px;height:7px;border-radius:50%;background:var(--workspace-category-color,#aab1bd)}.workspace-category-sidebar a.is-active{background:rgba(126,163,244,.12);color:inherit;font-weight:700}.workspace-category-sidebar small{font-size:.68rem;opacity:.75}
.note-workspace-folder{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;background:color-mix(in srgb,var(--workspace-folder-color,#7EA3F4) 17%,transparent);border:1px solid color-mix(in srgb,var(--workspace-folder-color,#7EA3F4) 30%,transparent);font-size:.66rem;font-weight:700}
.workspace-file-category-filter{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}.workspace-file-category-filter a{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.08);text-decoration:none;color:inherit;font-size:.8rem}.workspace-file-category-filter a:not(:first-child)::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--workspace-category-color,#7EA3F4)}.workspace-file-category-filter a.is-active{background:rgba(126,163,244,.13);border-color:rgba(126,163,244,.3);font-weight:700}
.workspace-file-category-badge{display:inline-flex;align-self:flex-start;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--workspace-category-color,#7EA3F4) 16%,transparent);border:1px solid color-mix(in srgb,var(--workspace-category-color,#7EA3F4) 28%,transparent);font-size:.72rem;font-weight:700;margin-bottom:7px}.workspace-file-category-form{margin:0 0 8px}.workspace-file-category-form select{min-height:34px;font-size:.76rem}
@media (max-width:760px){.workspace-category-create-form{grid-template-columns:1fr}.workspace-category-row{grid-template-columns:12px minmax(0,1fr);align-items:start}.workspace-category-links,.workspace-category-manage{grid-column:2}.workspace-category-manage-panel{position:static;width:100%;margin-top:6px;box-shadow:none}.workspace-category-edit-form{grid-template-columns:1fr}.workspace-category-sidebar{margin-left:18px}.workspace-upload-form select{width:100%}}
@media (prefers-color-scheme:dark){.workspace-category-row,.workspace-category-manage-panel{border-color:rgba(255,255,255,.09);background:rgba(255,255,255,.035)}.workspace-category-create-form input,.workspace-category-create-form select,.workspace-category-edit-form input,.workspace-category-edit-form select,.workspace-file-category-form select{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05)}.workspace-category-links a,.workspace-category-manage summary{background:rgba(255,255,255,.06)}.workspace-category-sidebar{border-color:rgba(255,255,255,.08)}.workspace-file-category-filter a{border-color:rgba(255,255,255,.09)}}
/* V43.28 — Tableau de bord d'espace collaboratif */
.workspace-dashboard-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.workspace-dashboard-stat{display:flex;align-items:center;gap:11px;min-width:0;padding:13px 14px;border:1px solid rgba(15,23,42,.08);border-radius:14px;background:rgba(255,255,255,.46);color:inherit;text-decoration:none;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.workspace-dashboard-stat:hover{transform:translateY(-1px);border-color:rgba(126,163,244,.35);background:rgba(255,255,255,.72)}
.workspace-dashboard-stat-icon{width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;background:rgba(126,163,244,.13);font-size:1rem}
.workspace-dashboard-stat>span:last-child{display:grid;gap:1px;min-width:0}.workspace-dashboard-stat strong{font-size:1.08rem;line-height:1.15}.workspace-dashboard-stat small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted,#6b7280);font-size:.72rem}
.workspace-dashboard-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.workspace-dashboard-panel{min-width:0;padding:15px;border:1px solid rgba(15,23,42,.08);border-radius:15px;background:rgba(255,255,255,.38)}
.workspace-dashboard-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:9px}.workspace-dashboard-panel-head h3{margin:1px 0 0;font-size:1rem}.workspace-dashboard-panel-head a{font-size:.75rem;font-weight:700;color:inherit;text-decoration:none;opacity:.62}.workspace-dashboard-panel-head a:hover{opacity:1}
.workspace-dashboard-recent-list{display:grid}.workspace-dashboard-recent-row{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:9px;padding:9px 0;border-top:1px solid rgba(15,23,42,.07);color:inherit;text-decoration:none}.workspace-dashboard-recent-row:first-child{border-top:0}.workspace-dashboard-recent-row>span:last-child{display:grid;gap:2px;min-width:0}.workspace-dashboard-recent-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem}.workspace-dashboard-recent-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted,#6b7280);font-size:.7rem}
.workspace-dashboard-recent-mark{width:9px;height:9px;border-radius:50%;justify-self:center;background:var(--workspace-item-color,#7EA3F4);box-shadow:0 0 0 5px color-mix(in srgb,var(--workspace-item-color,#7EA3F4) 15%,transparent)}
.workspace-dashboard-file-icon{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:rgba(126,163,244,.1);font-size:.8rem}
.workspace-dashboard-mini-progress{position:relative;width:28px;height:28px;border-radius:50%;background:conic-gradient(#65a87d var(--workspace-progress,0%),rgba(15,23,42,.08) 0);display:grid;place-items:center}.workspace-dashboard-mini-progress::after{content:"";width:20px;height:20px;border-radius:50%;background:var(--surface,#fff)}.workspace-dashboard-mini-progress i{display:none}
.workspace-dashboard-date{width:30px;height:34px;border-radius:8px;display:grid;align-content:center;justify-items:center;background:rgba(244,184,96,.14);line-height:1}.workspace-dashboard-date strong{font-size:.8rem}.workspace-dashboard-date small{font-size:.52rem;margin-top:2px;letter-spacing:.03em}
@media(max-width:1120px){.workspace-dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.workspace-dashboard-stats,.workspace-dashboard-panels{grid-template-columns:1fr}.workspace-dashboard-stat{padding:11px 12px}.workspace-dashboard-panel{padding:13px}.workspace-dashboard-recent-row{padding:8px 0}}
[data-theme="dark"] .workspace-dashboard-stat,[data-theme="dark"] .workspace-dashboard-panel{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.035)}
[data-theme="dark"] .workspace-dashboard-stat:hover{border-color:rgba(126,163,244,.28);background:rgba(255,255,255,.055)}
[data-theme="dark"] .workspace-dashboard-recent-row{border-top-color:rgba(255,255,255,.07)}
[data-theme="dark"] .workspace-dashboard-mini-progress::after{background:#242424}
.workspace-dashboard-team{display:flex;flex-wrap:wrap;gap:8px}.workspace-dashboard-person{display:flex;align-items:center;gap:8px;min-width:0;max-width:190px;padding:7px 9px;border-radius:11px;background:rgba(15,23,42,.045)}.workspace-dashboard-person>b,.workspace-dashboard-activity-avatar{width:28px;height:28px;flex:0 0 28px;border-radius:9px;display:grid;place-items:center;background:rgba(219,164,25,.14);font-size:.7rem}.workspace-dashboard-person>span{display:grid;min-width:0}.workspace-dashboard-person strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem}.workspace-dashboard-person small{color:var(--muted,#6b7280);font-size:.64rem}.workspace-dashboard-more{display:grid;place-items:center;min-width:42px;padding:7px;border-radius:11px;background:rgba(126,163,244,.1);color:inherit;text-decoration:none;font-size:.75rem;font-weight:800}.workspace-dashboard-activity-avatar{justify-self:center}
#workspace-members,#workspace-activity{scroll-margin-top:88px}
[data-theme="dark"] .workspace-dashboard-person{background:rgba(255,255,255,.05)}
/* V43.29 — Sauvegarde complète des espaces collaboratifs */
.workspace-backup-restore-card {
display: grid;
gap: .65rem;
}
.workspace-backup-restore-card h2,
.workspace-backup-export-card h2 { margin: 0; }
.workspace-backup-restore-card p,
.workspace-backup-export-card > p { margin: 0; color: var(--muted, #667085); line-height: 1.5; }
.workspace-backup-form { display: grid; gap: .65rem; }
.workspace-backup-form label { display: grid; gap: .35rem; font-size: .85rem; font-weight: 700; }
.workspace-backup-form input[type="file"] {
width: 100%;
min-width: 0;
padding: .62rem;
border: 1px dashed rgba(120, 130, 150, .38);
border-radius: 12px;
background: rgba(127, 127, 127, .045);
font: inherit;
}
.workspace-backup-restore-card small,
.workspace-backup-actions small { color: var(--muted, #667085); line-height: 1.45; }
.workspace-backup-format {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 28px;
padding: 0 .55rem;
border-radius: 999px;
background: rgba(91, 141, 239, .12);
color: #4c73c9;
font-size: .72rem;
font-weight: 800;
letter-spacing: .06em;
}
.workspace-backup-actions {
display: flex;
align-items: center;
gap: 1rem;
justify-content: space-between;
flex-wrap: wrap;
margin-top: .85rem;
}
.workspace-backup-actions form { margin: 0; }
.workspace-backup-actions small { max-width: 560px; }
@media (max-width: 760px) {
.workspace-backup-actions { align-items: stretch; }
.workspace-backup-actions form,
.workspace-backup-actions .button { width: 100%; }
}
/* V43.30 — Corbeille collaborative */
.workspace-trash-page{max-width:1180px;margin:0 auto;padding:28px 24px 80px}.workspace-trash-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px}.workspace-trash-heading h1{margin:.2rem 0 .45rem}.workspace-trash-heading p{max-width:760px}.workspace-trash-head-actions,.workspace-trash-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.workspace-trash-head-actions form,.workspace-trash-actions form{margin:0}.workspace-trash-section{margin-top:16px}.workspace-trash-list{display:grid;gap:8px}.workspace-trash-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--border-color,#e5e7eb);border-radius:14px;background:var(--surface,#fff)}.workspace-trash-copy{min-width:0;display:grid;gap:3px}.workspace-trash-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace-trash-copy small{opacity:.68}.workspace-danger{color:#b42318!important}.workspace-trash-entry{border-style:dashed}@media(max-width:760px){.workspace-trash-page{padding:18px 14px 90px}.workspace-trash-heading,.workspace-trash-row{align-items:stretch;flex-direction:column}.workspace-trash-head-actions,.workspace-trash-actions{width:100%}.workspace-trash-actions form,.workspace-trash-actions button{flex:1}.workspace-trash-actions button{width:100%}}
/* ==========================================================================
V43.31 — Espace collaboratif : contexte clair + mobile utilisable
========================================================================== */
.workspace-notes-context{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin:0 0 12px;
padding:12px 14px;
border:1px solid rgba(219,164,25,.22);
border-radius:16px;
background:linear-gradient(135deg,rgba(255,246,201,.82),rgba(255,255,255,.72));
box-shadow:0 8px 22px rgba(31,42,47,.05);
}
.workspace-notes-context-copy{display:flex;align-items:center;gap:10px;min-width:0}
.workspace-notes-context-icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:11px;background:#f4c53e;color:#332b16;font-weight:900}
.workspace-notes-context-copy>div{display:grid;min-width:0}
.workspace-notes-context-copy small{font-size:.7rem;color:var(--muted,#66727a)}
.workspace-notes-context-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem}
.workspace-notes-context-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.workspace-notes-context-actions .button{min-height:36px;padding:7px 11px;font-size:.78rem}
.workspace-readonly-pill{display:inline-flex;align-items:center;min-height:34px;padding:6px 10px;border-radius:999px;background:rgba(116,128,136,.1);font-size:.72rem;font-weight:800}
.workspace-mobile-personal-return{display:none}
.mobile-workspace-name{display:none}
.workspace-settings-inline{margin:12px 0 4px;border-top:1px solid rgba(116,128,136,.12);padding-top:10px}
.workspace-settings-inline summary{cursor:pointer;font-size:.78rem;font-weight:800;color:var(--muted,#66727a);list-style:none}
.workspace-settings-inline summary::-webkit-details-marker{display:none}
.workspace-settings-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:9px;align-items:end;margin-top:10px}
.workspace-settings-form label{display:grid;gap:5px;min-width:0}
.workspace-settings-form label span{font-size:.72rem;font-weight:800;color:var(--muted,#66727a)}
.workspace-settings-form input,.workspace-settings-form textarea{width:100%;min-width:0;border:1px solid rgba(116,128,136,.25);border-radius:10px;background:var(--surface,#fff);color:inherit;padding:9px 10px;font:inherit;resize:vertical}
@media (max-width:900px){
.workspace-notes-context{margin:0 10px 10px;align-items:flex-start;flex-direction:column;padding:11px 12px;border-radius:14px}
.workspace-notes-context-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
.workspace-notes-context-actions .button,.workspace-notes-context-actions .workspace-readonly-pill{width:100%;justify-content:center;text-align:center}
.workspace-context-manage{grid-column:1/-1}
.mobile-workspace-name{display:flex;align-items:center;gap:7px;margin:8px 0 0;padding:8px 10px;border-radius:12px;background:rgba(244,197,62,.13);min-width:0}
.mobile-workspace-name>span{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#f4c53e;color:#332b16;font-weight:900}
.mobile-workspace-name strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem}
.mobile-workspace-name small{margin-left:auto;white-space:nowrap;font-size:.62rem;color:var(--muted,#66727a)}
.mobile-workspace-actions{margin-top:7px}
.mobile-workspace-actions a{display:flex!important;text-decoration:none;color:inherit}
.notes-dashboard.is-workspace-mode .notes-main{min-width:0;width:100%;padding-left:8px!important;padding-right:8px!important}
.notes-dashboard.is-workspace-mode .notes-grid{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;width:100%;min-width:0}
.notes-dashboard.is-workspace-mode .note-card{width:100%!important;max-width:none!important;min-width:0!important;margin:0!important}
.notes-dashboard.is-workspace-mode .notes-toolbar{margin-left:2px!important;margin-right:2px!important}
.notes-dashboard.is-workspace-mode .notes-sidebar .sidebar-heading .eyebrow{display:none}
.notes-dashboard.is-workspace-mode .notes-sidebar .sidebar-heading h2{font-size:1rem}
.notes-dashboard.is-workspace-mode .sidebar-tags,
.notes-dashboard.is-workspace-mode .sidebar-storage,
.notes-dashboard.is-workspace-mode .sidebar-tip,
.notes-dashboard.is-workspace-mode .sidebar-empty{display:none!important}
.notes-dashboard.is-workspace-mode .category-navigation.is-workspace-navigation > :not(.workspace-mobile-personal-return):not(.category-navigation-divider):not(.category-row-workspace):not(.workspace-category-sidebar){display:none!important}
.notes-dashboard.is-workspace-mode .workspace-mobile-personal-return{display:block;margin:0 0 8px}
.notes-dashboard.is-workspace-mode .workspace-mobile-personal-return a{display:block;padding:9px 10px;border-radius:10px;background:rgba(116,128,136,.07);color:inherit;text-decoration:none;font-size:.76rem;font-weight:800}
.notes-dashboard.is-workspace-mode .category-navigation-divider{margin-top:4px}
.notes-dashboard.is-workspace-mode .category-row-workspace{margin-bottom:4px}
.notes-dashboard.is-workspace-mode .workspace-category-sidebar{margin:3px 0 8px 12px;padding-left:10px}
.notes-dashboard.is-workspace-mode .shopping-note-card .notes-shopping-item>div{grid-template-columns:minmax(0,1fr) 70px!important;gap:5px!important}
.notes-dashboard.is-workspace-mode .shopping-note-card .notes-shopping-item select{grid-column:1/-1;width:100%!important}
.notes-dashboard.is-workspace-mode .shopping-note-card .notes-shopping-add{grid-template-columns:minmax(0,1fr) 72px 34px!important;gap:5px!important}
.notes-dashboard.is-workspace-mode .shopping-note-card .notes-shopping-add select{grid-column:1/3;width:100%!important}
.notes-dashboard.is-workspace-mode .shopping-note-card .notes-shopping-add button{grid-column:3;grid-row:1/3;height:auto!important}
.workspace-settings-form{grid-template-columns:1fr}
/* La page Espaces devient un vrai écran mobile, pas une page desktop tassée. */
.workspace-page{width:100%!important;margin:0!important;padding:10px 10px 92px!important;overflow-x:hidden}
.workspace-heading{padding:2px 4px 8px!important;margin:0!important}
.workspace-heading p{display:none}
.workspace-layout{display:flex!important;flex-direction:column!important;gap:10px!important}
.workspace-sidebar{display:flex!important;flex-direction:column!important;gap:10px!important;width:100%;min-width:0}
.workspace-space-list{order:-10;display:flex!important;overflow-x:auto!important;gap:7px!important;padding:0 0 5px!important;scroll-snap-type:x proximity}
.workspace-space-link{flex:0 0 min(78vw,260px)!important;scroll-snap-align:start;padding:9px!important}
.workspace-create-card,.workspace-backup-restore-card{display:none}
.workspace-main{width:100%;min-width:0;gap:10px!important}
.workspace-card{width:100%;min-width:0;padding:12px!important;border-radius:15px!important;box-shadow:0 5px 18px rgba(31,42,47,.045)!important}
.workspace-overview .workspace-card-heading{align-items:center;margin-bottom:8px}
.workspace-overview .workspace-card-heading h2{font-size:1.12rem}
.workspace-dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;margin-top:10px!important}
.workspace-dashboard-stat{padding:9px!important;gap:8px!important;min-width:0}
.workspace-dashboard-stat-icon{width:30px!important;height:30px!important;flex-basis:30px!important;border-radius:9px!important}
.workspace-dashboard-stat strong{font-size:.94rem!important}
.workspace-dashboard-stat small{font-size:.62rem!important}
.workspace-dashboard-panels{grid-template-columns:1fr!important;gap:8px!important;margin-top:9px!important}
.workspace-dashboard-panel{padding:11px!important;border-radius:13px!important}
.workspace-dashboard-panel-head{margin-bottom:5px!important}
.workspace-dashboard-recent-row{padding:7px 0!important}
.workspace-dashboard-team{gap:6px!important}
.workspace-dashboard-person{max-width:100%!important;flex:1 1 145px!important}
.workspace-invite-form{grid-template-columns:1fr!important}
.workspace-member-row{display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;gap:8px!important}
.workspace-member-controls,.workspace-member-row>form:not(.workspace-member-controls){grid-column:2!important;margin:0!important;width:100%!important}
.workspace-member-controls{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important}
.workspace-member-row>form:not(.workspace-member-controls) .button{width:100%}
.workspace-activity-row{grid-template-columns:30px minmax(0,1fr)!important}
}
@media (max-width:420px){
.workspace-notes-context-actions{grid-template-columns:1fr}
.workspace-context-manage{grid-column:auto}
.mobile-workspace-name small{display:none}
.notes-dashboard.is-workspace-mode .shopping-note-card .notes-shopping-item>div{grid-template-columns:minmax(0,1fr)!important}
.notes-dashboard.is-workspace-mode .shopping-note-card .notes-shopping-item select{grid-column:auto}
.notes-dashboard.is-workspace-mode .shopping-note-card .notes-shopping-add{grid-template-columns:minmax(0,1fr) 34px!important}
.notes-dashboard.is-workspace-mode .shopping-note-card .notes-shopping-add input[name="quantity"],
.notes-dashboard.is-workspace-mode .shopping-note-card .notes-shopping-add select{grid-column:1!important}
.notes-dashboard.is-workspace-mode .shopping-note-card .notes-shopping-add button{grid-column:2!important;grid-row:1/4!important}
.workspace-dashboard-stats{grid-template-columns:1fr 1fr!important}
}
[data-theme="dark"] .workspace-notes-context{background:linear-gradient(135deg,rgba(90,72,18,.32),rgba(255,255,255,.025));border-color:rgba(244,197,62,.18)}
[data-theme="dark"] .workspace-settings-form input,[data-theme="dark"] .workspace-settings-form textarea{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.11)}
/* V43.32 — accès Espaces dans les navigations mobiles */
@media (max-width: 700px) {
.mobile-home-actions.mobile-workspace-actions,
.mobile-home-actions {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 5px !important;
}
.mobile-home-actions button,
.mobile-home-actions a {
min-width: 0 !important;
padding-inline: 2px !important;
}
.mobile-home-actions strong {
font-size: .58rem !important;
white-space: nowrap;
}
}
@media (max-width: 360px) {
.mobile-home-actions strong { font-size: .54rem !important; }
}
/* V43.33 — synchronisation collaborative */
.workspace-live-refresh{
position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:1400;
border:0;border-radius:999px;padding:10px 16px;font:inherit;font-weight:700;
background:var(--text,#242424);color:var(--surface,#fff);box-shadow:0 8px 28px rgba(0,0,0,.18);cursor:pointer;
}
@media (min-width:901px){.workspace-live-refresh{bottom:24px}}
/* =========================================================
V43.46 — Mobile/PWA : navigation finale stable + safe areas
Cette règle est volontairement placée en fin de feuille afin
de neutraliser les anciennes variantes paysage contradictoires.
========================================================= */
@media (max-width: 900px) {
body:has(.mobile-bottom-navigation) {
padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
}
.mobile-bottom-navigation {
bottom: max(8px, env(safe-area-inset-bottom)) !important;
}
.pwa-update-banner {
margin-bottom: 8px;
}
}
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-width: 1100px) and (max-height: 650px) {
body:has(.mobile-bottom-navigation) {
padding-right: 0 !important;
padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
}
.notes-main,
.shopping-page,
.site-main {
padding-right: 0 !important;
}
.mobile-bottom-navigation {
position: fixed !important;
top: auto !important;
right: max(10px, env(safe-area-inset-right)) !important;
bottom: max(8px, env(safe-area-inset-bottom)) !important;
left: max(10px, env(safe-area-inset-left)) !important;
z-index: 1200 !important;
display: grid !important;
width: auto !important;
height: 54px !important;
min-height: 54px !important;
max-height: 54px !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
grid-template-rows: 1fr !important;
gap: 3px !important;
padding: 3px 5px !important;
transform: none !important;
border-radius: 17px !important;
}
.mobile-bottom-navigation a,
.mobile-bottom-navigation button {
display: grid !important;
place-items: center !important;
align-content: center !important;
width: auto !important;
height: 48px !important;
min-width: 0 !important;
min-height: 48px !important;
padding: 4px 3px !important;
}
.mobile-bottom-navigation small {
display: block !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: .58rem !important;
line-height: 1 !important;
}
.mobile-bottom-navigation span {
font-size: 1rem !important;
line-height: 1 !important;
}
.floating-add-button,
.mobile-fab,
[data-mobile-create-note] {
right: max(14px, env(safe-area-inset-right)) !important;
bottom: calc(72px + env(safe-area-inset-bottom)) !important;
}
.notes-sidebar.is-mobile-open {
inset: calc(8px + env(safe-area-inset-top)) 10px calc(72px + env(safe-area-inset-bottom)) 10px !important;
width: auto !important;
max-height: none !important;
}
.note-menu {
right: 12px !important;
bottom: calc(72px + env(safe-area-inset-bottom)) !important;
left: 12px !important;
max-height: calc(100dvh - 92px - env(safe-area-inset-bottom)) !important;
}
}
/* =========================================================
PASSE 28 — MOBILE / MODALES / CLAVIER VIRTUEL
Vue utile réelle via VisualViewport + zones sûres.
========================================================= */
@media (max-width: 900px) {
.app-modal[open] {
width: 100% !important;
height: var(--app-viewport-height, 100dvh) !important;
max-height: var(--app-viewport-height, 100dvh) !important;
overflow: hidden !important;
overscroll-behavior: contain;
}
.app-modal:not(#note-modal) .modal-card {
width: calc(100% - 20px) !important;
max-height: calc(var(--app-viewport-height, 100dvh) - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
margin: calc(10px + env(safe-area-inset-top)) auto calc(10px + env(safe-area-inset-bottom)) !important;
padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
scroll-padding-top: 16px;
scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom) + var(--app-keyboard-offset, 0px));
}
.app-modal:not(#note-modal) input,
.app-modal:not(#note-modal) select,
.app-modal:not(#note-modal) textarea {
font-size: 16px !important;
}
.app-modal:not(#note-modal) .modal-actions {
position: sticky;
z-index: 5;
bottom: calc(-20px - env(safe-area-inset-bottom));
margin-inline: -16px;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
background: inherit;
box-shadow: 0 -8px 18px rgba(24,32,42,.06);
}
.modal-close,
.app-modal button,
.app-modal .button {
min-height: 44px;
}
}
@media (max-width: 590px) {
.app-modal:not(#note-modal) .modal-card {
width: calc(100% - 12px) !important;
max-height: calc(var(--app-viewport-height, 100dvh) - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
margin: calc(6px + env(safe-area-inset-top)) auto calc(6px + env(safe-area-inset-bottom)) !important;
border-radius: 18px !important;
}
.app-modal:not(#note-modal) .modal-header {
position: sticky;
z-index: 6;
top: -20px;
margin: -20px -16px 16px;
padding: 16px 16px 12px;
background: inherit;
border-bottom: 1px solid rgba(118,126,134,.13);
}
.app-modal:not(#note-modal) .modal-header h2 {
font-size: 1.35rem !important;
line-height: 1.15;
}
}
/* SEO public guides — 2026-08-15 */
.public-guides-preview{margin-top:24px}
.public-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.public-guide-card{display:block;padding:22px;border:1px solid var(--border-color,#e7e2d4);border-radius:18px;background:var(--surface,#fff);color:inherit;text-decoration:none}
.public-guide-card>span{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:10px;background:#f5d353;font-weight:800}
.public-guide-card h3{margin:14px 0 7px;font-size:1.05rem}
.public-guide-card p{margin:0;color:var(--text-soft,#666);line-height:1.55}
.public-guide-card b{display:block;margin-top:14px;font-size:.9rem}
.public-guide-page{max-width:1180px;margin:0 auto;padding:18px 20px 60px}
.public-guide-breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0 28px;font-size:.88rem;color:var(--text-soft,#666)}
.public-guide-breadcrumb a{color:inherit}
.public-guide-hero{max-width:850px;margin-bottom:34px}
.public-guide-hero h1{max-width:820px;margin:8px 0 14px;font-size:clamp(2rem,4vw,3.7rem);line-height:1.06}
.public-guide-hero>p:last-child{font-size:1.12rem;line-height:1.65;color:var(--text-soft,#666)}
.public-guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}
.public-guide-content{display:grid;gap:12px}
.public-guide-content section{padding:24px 0;border-top:1px solid var(--border-color,#e7e2d4)}
.public-guide-content section:first-child{border-top:0;padding-top:0}
.public-guide-content h2{margin:0 0 10px;font-size:1.35rem}
.public-guide-content p{margin:0;line-height:1.75;color:var(--text-soft,#555)}
.public-guide-aside{position:sticky;top:90px;padding:22px;border:1px solid var(--border-color,#e7e2d4);border-radius:18px;background:var(--surface,#fff)}
.public-guide-aside strong{font-size:1.05rem}
.public-guide-aside p{line-height:1.55;color:var(--text-soft,#666)}
.public-guide-aside .button{display:flex;margin-top:10px;justify-content:center}
.public-guide-related{margin-top:48px;padding-top:30px;border-top:1px solid var(--border-color,#e7e2d4)}
.public-guide-related h2{margin:5px 0 18px}
@media(max-width:800px){.public-guide-grid{grid-template-columns:1fr}.public-guide-layout{grid-template-columns:1fr}.public-guide-aside{position:static}.public-guide-page{padding-inline:14px}}
/* =========================================================
NOTE-BLOC V43.47 — PALIER TABLETTE / PETIT PC STABLE
Entre 901 et 1180 px, l'ancienne grille conservait les
dimensions du grand écran. La colonne principale pouvait
alors s'étirer sur la hauteur de la sidebar et éloigner la
barre de recherche du tableau de bord.
========================================================= */
@media (min-width: 901px) and (max-width: 1180px) {
body:not(.admin-page) .site-main {
width: calc(100% - 24px);
}
.notes-dashboard {
grid-template-columns: minmax(210px, 230px) minmax(0, 1fr) !important;
gap: 18px !important;
align-items: start !important;
padding-top: 20px !important;
}
.notes-main {
display: flex;
flex-direction: column;
align-self: start;
width: 100%;
min-width: 0;
}
.notes-sidebar {
width: 100%;
min-width: 0;
padding: 12px !important;
border-radius: 17px !important;
}
.notes-sidebar .category-navigation {
max-height: calc(100dvh - 245px) !important;
}
.notes-main > .workspace-overview {
width: 100% !important;
margin: 0 0 14px !important;
padding: 15px 16px !important;
border-radius: 18px !important;
}
.workspace-overview .workspace-dashboard-top {
gap: 10px !important;
}
.workspace-overview .workspace-dashboard-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px !important;
width: 100%;
}
.workspace-overview .workspace-dashboard-actions .button {
width: 100% !important;
min-height: 39px !important;
padding: 7px 10px !important;
font-size: .76rem !important;
}
.notes-main > .notes-toolbar {
width: 100%;
margin: 0 0 14px !important;
}
.notes-toolbar .toolbar-actions {
flex-basis: auto !important;
grid-template-columns: minmax(210px, 1fr) minmax(132px, auto) auto !important;
}
.notes-toolbar .new-entry-actions {
display: none !important;
}
}
@media (min-width: 901px) and (max-width: 1030px) {
.notes-toolbar .toolbar-actions {
grid-template-columns: minmax(0, 1fr) minmax(132px, auto) !important;
}
.notes-toolbar .notes-search {
grid-column: 1 / -1;
}
.notes-toolbar .lists-only-filter {
justify-self: stretch;
}
}
@media (min-width: 1181px) {
.notes-main {
align-self: start;
}
}
/* =========================================================
NOTE-BLOC V43.48 — MENU BAS TABLETTE
Les styles complets des liens étaient limités à 700 px,
tandis que le conteneur restait visible jusqu'à 900 px.
========================================================= */
@media (min-width: 701px) and (max-width: 900px) {
body:has(.mobile-bottom-navigation) {
padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}
.mobile-bottom-navigation {
position: fixed !important;
top: auto !important;
right: max(10px, env(safe-area-inset-right)) !important;
bottom: max(8px, env(safe-area-inset-bottom)) !important;
left: max(10px, env(safe-area-inset-left)) !important;
z-index: 1200 !important;
display: grid !important;
width: auto !important;
height: 62px !important;
min-height: 62px !important;
max-height: 62px !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
grid-template-rows: 1fr !important;
gap: 4px !important;
padding: 4px 6px !important;
overflow: hidden;
border: 1px solid rgba(31, 40, 35, .11) !important;
border-radius: 18px !important;
background: rgba(255,255,255,.97) !important;
box-shadow: 0 12px 34px rgba(27,34,30,.16) !important;
backdrop-filter: blur(18px);
}
.mobile-bottom-navigation a,
.mobile-bottom-navigation button {
display: grid !important;
place-items: center !important;
align-content: center !important;
gap: 2px !important;
width: auto !important;
height: 52px !important;
min-width: 0 !important;
min-height: 52px !important;
padding: 3px !important;
border: 0 !important;
border-radius: 13px !important;
background: transparent !important;
color: #68716c !important;
text-decoration: none !important;
font: inherit !important;
line-height: 1 !important;
}
.mobile-bottom-navigation a.is-active,
.mobile-bottom-navigation button.is-active,
.mobile-bottom-navigation button[aria-pressed="true"] {
background: #fff3bd !important;
color: #8a6200 !important;
}
.mobile-bottom-navigation span {
display: block !important;
font-size: 1.08rem !important;
line-height: 1 !important;
}
.mobile-bottom-navigation small {
display: block !important;
max-width: 100%;
overflow: hidden;
color: inherit;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .62rem !important;
font-weight: 800 !important;
line-height: 1.05 !important;
}
:root[data-theme="dark"] .mobile-bottom-navigation {
border-color: #343c42 !important;
background: rgba(20,25,29,.97) !important;
box-shadow: 0 12px 34px rgba(0,0,0,.38) !important;
}
:root[data-theme="dark"] .mobile-bottom-navigation a,
:root[data-theme="dark"] .mobile-bottom-navigation button {
color: #aeb8be !important;
}
:root[data-theme="dark"] .mobile-bottom-navigation a.is-active,
:root[data-theme="dark"] .mobile-bottom-navigation button.is-active,
:root[data-theme="dark"] .mobile-bottom-navigation button[aria-pressed="true"] {
background: rgba(242,201,76,.12) !important;
color: #f2c94c !important;
}
}
/* =========================================================
NOTE-BLOC V43.50 — SCROLL TACTILE DANS L'ÉDITEUR MOBILE
Le textarea grandit avec son contenu : le formulaire reste
l'unique zone verticale, même si le geste part sur le texte.
========================================================= */
@media (max-width: 900px) {
#note-modal.app-modal[open] {
position: fixed !important;
top: var(--app-viewport-top, 0px) !important;
right: auto !important;
bottom: auto !important;
left: 0 !important;
width: 100% !important;
margin: 0 !important;
transform: none !important;
}
#note-modal #note-text,
#note-modal .note-writing-surface textarea {
max-height: none !important;
overflow-y: hidden !important;
overscroll-behavior: auto !important;
-webkit-overflow-scrolling: auto;
touch-action: pan-y !important;
resize: none !important;
}
#note-modal .note-writing-surface {
overflow: visible !important;
}
}
/* =========================================================
NOTE-BLOC V43.50 — CATÉGORIES MOBILES + SCROLL TACTILE
Un seul conteneur défile : le panneau complet. Cela évite
le blocage produit par les anciennes zones imbriquées.
========================================================= */
@media (max-width: 900px) {
.notes-sidebar.is-mobile-open {
position: fixed !important;
top: calc(8px + env(safe-area-inset-top)) !important;
right: 10px !important;
bottom: auto !important;
left: 10px !important;
width: auto !important;
height: calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
min-height: 0 !important;
max-height: calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
scrollbar-gutter: auto;
scroll-padding-top: 70px;
scroll-padding-bottom: calc(24px + env(safe-area-inset-bottom));
will-change: scroll-position;
}
.notes-sidebar.is-mobile-open .sidebar-heading {
position: sticky;
top: -16px;
z-index: 4;
margin: -16px -16px 10px !important;
padding: 16px 16px 11px !important;
border-bottom: 1px solid rgba(24,32,42,.09);
background: rgba(255,255,255,.98);
backdrop-filter: blur(14px);
}
.notes-sidebar.is-mobile-open .category-navigation {
display: grid !important;
flex: none !important;
width: 100% !important;
min-height: auto !important;
max-height: none !important;
padding-bottom: 18px !important;
overflow: visible !important;
touch-action: pan-y;
}
:root[data-theme="dark"] .notes-sidebar.is-mobile-open .sidebar-heading {
border-color: rgba(255,255,255,.09);
background: rgba(24,30,35,.98);
}
}
/* =========================================================
NOTE-BLOC V43.49 — SUPPRESSION DE LA COLONNE FANTÔME
De 781 à 900 px, la sidebar était masquée mais la grille
desktop continuait de lui réserver 300 px.
========================================================= */
@media (min-width: 701px) and (max-width: 900px) {
.notes-dashboard {
display: block !important;
width: 100% !important;
max-width: none !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
padding-top: 12px !important;
}
.notes-sidebar:not(.is-mobile-open) {
display: none !important;
}
.notes-main {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
padding-inline: 0 !important;
}
.notes-main > .notes-toolbar,
.notes-main > .active-search,
.notes-main > .trash-overview,
.notes-main > .archive-overview,
.notes-main > .notes-grid {
width: calc(100% - 28px) !important;
max-width: none !important;
margin-right: auto !important;
margin-left: auto !important;
}
.notes-main > .notes-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
}
/* V43.51 — priorités finales de la page Espaces */
.workspace-page .workspace-category-row {
border-left: 4px solid var(--workspace-category-color, #7EA3F4);
}
@media (max-width: 620px) {
.workspace-page .workspace-category-create-form {
margin: 0 !important;
}
.workspace-page .workspace-category-links {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.workspace-page .workspace-category-links a,
.workspace-page .workspace-category-manage summary {
min-height: 40px !important;
}
}
/* V43.52 — finition compacte et sobre des espaces communs */
.workspace-page .workspace-section-nav {
gap: 0;
padding: 4px;
border-color: rgba(116, 128, 136, .16);
border-radius: 15px;
background: rgba(255, 255, 255, .78);
box-shadow: 0 5px 18px rgba(31, 42, 47, .045);
}
.workspace-page .workspace-section-nav a {
gap: 6px;
min-height: 42px;
padding: 6px 8px;
border-radius: 11px;
color: var(--muted, #59636d);
}
.workspace-page .workspace-section-nav a + a {
border-left: 1px solid rgba(116, 128, 136, .12);
border-radius: 0;
}
.workspace-page .workspace-section-nav a:hover,
.workspace-page .workspace-section-nav a:focus-visible {
background: rgba(116, 128, 136, .07);
color: inherit;
transform: none;
}
.workspace-page .workspace-section-nav a > span {
width: 24px;
height: 24px;
flex-basis: 24px;
border-radius: 8px;
background: rgba(219, 164, 25, .12);
color: #9a6800;
font-size: .72rem;
}
.workspace-page .workspace-section-nav strong { font-size: .72rem; }
.workspace-page .workspace-category-create-disclosure {
width: fit-content;
margin: 12px 0 14px;
border: 0;
border-radius: 12px;
background: transparent;
overflow: visible;
}
.workspace-page .workspace-category-create-disclosure > summary {
display: inline-grid;
grid-template-columns: 28px auto;
min-height: 42px;
padding: 6px 12px 6px 7px;
border-radius: 12px;
background: #17212b;
color: #fff;
box-shadow: 0 5px 13px rgba(23, 33, 43, .14);
}
.workspace-page .workspace-category-create-disclosure > summary > span {
width: 28px;
height: 28px;
border-radius: 9px;
font-size: .9rem;
}
.workspace-page .workspace-category-create-disclosure > summary > small { display: none; }
.workspace-page .workspace-category-create-disclosure[open] {
width: 100%;
border: 1px solid rgba(219, 164, 25, .2);
background: rgba(255, 248, 218, .42);
overflow: hidden;
}
.workspace-page .workspace-category-create-disclosure[open] > summary {
margin: 7px;
border: 0;
}
.workspace-page .workspace-category-row {
grid-template-columns: 34px minmax(0, 1fr) auto;
gap: 9px;
padding: 10px 11px;
border: 1px solid color-mix(in srgb, var(--workspace-category-color, #7EA3F4) 28%, transparent);
border-left: 3px solid var(--workspace-category-color, #7EA3F4);
border-radius: 13px;
background: color-mix(in srgb, var(--workspace-category-color, #7EA3F4) 5%, var(--surface, #fff));
box-shadow: none;
}
.workspace-page .workspace-category-dot {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 10px;
background: color-mix(in srgb, var(--workspace-category-color, #7EA3F4) 18%, transparent);
box-shadow: none;
}
.workspace-page .workspace-category-dot::after {
content: "▣";
color: color-mix(in srgb, var(--workspace-category-color, #7EA3F4) 78%, #263442);
font-size: .78rem;
font-weight: 900;
}
.workspace-page .workspace-category-copy strong { font-size: .9rem; }
.workspace-page .workspace-category-links { gap: 6px; }
.workspace-page .workspace-category-links a,
.workspace-page .workspace-category-manage summary {
min-height: 34px;
padding: 6px 10px;
border: 1px solid rgba(116, 128, 136, .13);
border-radius: 9px;
background: rgba(255, 255, 255, .66);
font-size: .72rem;
font-weight: 750;
}
.workspace-page .workspace-category-manage summary {
min-width: 38px;
letter-spacing: .08em;
}
@media (max-width: 620px) {
.workspace-page .workspace-section-nav {
gap: 0;
padding: 3px;
}
.workspace-page .workspace-section-nav a {
display: flex;
min-height: 43px;
padding: 5px 3px;
}
.workspace-page .workspace-section-nav a > span {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.workspace-page .workspace-section-nav strong { font-size: .63rem; }
.workspace-page .workspace-category-row {
grid-template-columns: 34px minmax(0, 1fr) 38px !important;
align-items: center !important;
gap: 8px !important;
padding: 10px !important;
}
.workspace-page .workspace-category-dot {
grid-column: 1;
grid-row: 1;
}
.workspace-page .workspace-category-copy {
grid-column: 2;
grid-row: 1;
}
.workspace-page .workspace-category-manage {
grid-column: 3 !important;
grid-row: 1;
width: 38px;
}
.workspace-page .workspace-category-manage summary {
width: 38px !important;
min-width: 38px;
min-height: 36px !important;
padding: 5px !important;
}
.workspace-page .workspace-category-links {
grid-column: 1 / -1 !important;
grid-row: 2;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
width: 100%;
}
.workspace-page .workspace-category-links a { min-height: 36px !important; }
.workspace-page .workspace-category-manage-panel {
position: absolute;
right: 0;
width: min(430px, calc(100vw - 44px));
margin-top: 6px;
box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}
}
:root[data-theme="dark"] .workspace-page .workspace-section-nav {
border-color: rgba(255, 255, 255, .08);
background: rgba(24, 33, 38, .92);
}
:root[data-theme="dark"] .workspace-page .workspace-category-row {
background: color-mix(in srgb, var(--workspace-category-color, #7EA3F4) 8%, #182126);
}
:root[data-theme="dark"] .workspace-page .workspace-category-links a,
:root[data-theme="dark"] .workspace-page .workspace-category-manage summary {
border-color: rgba(255, 255, 255, .09);
background: rgba(255, 255, 255, .045);
}
/* V43.53 — panneau de gestion toujours opaque */
.workspace-page .workspace-category-manage-panel {
isolation: isolate;
opacity: 1 !important;
border: 1px solid #e4e7eb !important;
background: #ffffff !important;
box-shadow: 0 16px 38px rgba(22, 31, 40, .2) !important;
backdrop-filter: none !important;
}
.workspace-page .workspace-category-manage-panel input,
.workspace-page .workspace-category-manage-panel select {
border-color: #d9dee4 !important;
background: #ffffff !important;
color: #17212b !important;
opacity: 1 !important;
}
.workspace-page .workspace-category-manage-panel .button {
background-color: #ffffff;
}
:root[data-theme="dark"] .workspace-page .workspace-category-manage-panel {
border-color: #3a444b !important;
background: #182126 !important;
box-shadow: 0 18px 42px rgba(0, 0, 0, .48) !important;
}
:root[data-theme="dark"] .workspace-page .workspace-category-manage-panel input,
:root[data-theme="dark"] .workspace-page .workspace-category-manage-panel select {
border-color: #414c54 !important;
background: #11191d !important;
color: #f3f5f6 !important;
}
:root[data-theme="dark"] .workspace-page .workspace-category-manage-panel .button {
background-color: #202a30;
}
/* V43.56 — menu des dossiers toujours contenu dans la carte sur mobile */
@media (max-width: 620px) {
.workspace-page .workspace-category-row {
position: relative;
}
.workspace-page .workspace-category-manage {
position: static;
}
.workspace-page .workspace-category-manage-panel {
top: 54px;
right: 9px;
left: 9px;
width: auto;
max-width: none;
margin-top: 0;
box-sizing: border-box;
}
.workspace-page .workspace-category-order-actions {
display: grid;
grid-template-columns: 42px 42px minmax(0, 1fr);
width: 100%;
}
.workspace-page .workspace-category-order-actions form,
.workspace-page .workspace-category-order-actions .button {
width: 100%;
}
}
/* V43.54 — contexte d’espace unique et compact sur mobile */
.mobile-workspace-panel { display: none; }
@media (max-width: 900px) {
.notes-dashboard.is-workspace-mode .workspace-notes-context {
display: none !important;
}
.mobile-workspace-panel {
display: block;
margin-top: 8px;
padding: 7px;
border: 1px solid rgba(116, 128, 136, .16);
border-radius: 15px;
background: #ffffff;
box-shadow: 0 6px 18px rgba(31, 42, 47, .045);
}
.mobile-workspace-panel .mobile-workspace-name {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
min-height: 38px;
margin: 0;
padding: 3px 5px 7px;
border-bottom: 1px solid rgba(116, 128, 136, .1);
border-radius: 0;
background: transparent;
}
.mobile-workspace-panel .mobile-workspace-name > span {
width: 30px;
height: 30px;
border-radius: 10px;
background: rgba(219, 164, 25, .14);
color: #966500;
font-size: .8rem;
}
.mobile-workspace-panel .mobile-workspace-name strong {
font-size: .84rem;
color: #17212b;
}
.mobile-workspace-panel .mobile-workspace-name small {
margin: 0;
padding: 4px 7px;
border-radius: 999px;
background: rgba(116, 128, 136, .075);
color: #66717a;
font-size: .58rem;
font-weight: 750;
}
.mobile-workspace-panel .mobile-workspace-actions {
gap: 4px !important;
margin-top: 6px !important;
}
.mobile-workspace-panel .mobile-workspace-actions button,
.mobile-workspace-panel .mobile-workspace-actions a {
min-height: 45px !important;
padding: 5px 2px !important;
border: 0 !important;
border-radius: 10px !important;
background: #f5f6f6 !important;
color: #3f4951 !important;
box-shadow: none !important;
}
.mobile-workspace-panel .mobile-workspace-actions button:first-child {
background: #17212b !important;
color: #ffffff !important;
}
.mobile-workspace-panel .mobile-workspace-actions span {
width: 22px !important;
height: 22px !important;
border-radius: 7px !important;
background: rgba(219, 164, 25, .14) !important;
color: #966500 !important;
font-size: .76rem !important;
}
.mobile-workspace-panel .mobile-workspace-actions button:first-child span {
background: #f4c53e !important;
color: #332b16 !important;
}
.mobile-workspace-panel .mobile-workspace-actions strong {
font-size: .58rem !important;
color: inherit;
}
}
@media (max-width: 380px) {
.mobile-workspace-panel .mobile-workspace-name small { display: none; }
.mobile-workspace-panel .mobile-workspace-actions strong { font-size: .54rem !important; }
}
:root[data-theme="dark"] .mobile-workspace-panel {
border-color: rgba(255, 255, 255, .09);
background: #182126;
}
:root[data-theme="dark"] .mobile-workspace-panel .mobile-workspace-name {
border-bottom-color: rgba(255, 255, 255, .08);
}
:root[data-theme="dark"] .mobile-workspace-panel .mobile-workspace-name strong { color: #f3f5f6; }
:root[data-theme="dark"] .mobile-workspace-panel .mobile-workspace-actions button,
:root[data-theme="dark"] .mobile-workspace-panel .mobile-workspace-actions a {
background: #202a30 !important;
color: #dce1e4 !important;
}
/* V43.57 — mêmes boutons rapides dans les notes personnelles et communes */
@media (max-width: 900px) {
.mobile-workspace-panel .mobile-workspace-actions {
gap: 7px !important;
margin-top: 8px !important;
}
.mobile-workspace-panel .mobile-workspace-actions button,
.mobile-workspace-panel .mobile-workspace-actions a,
.mobile-workspace-panel .mobile-workspace-actions button:first-child {
display: grid !important;
place-items: center !important;
gap: 5px !important;
min-height: 68px !important;
padding: 8px 4px !important;
border: 1px solid #eadfbf !important;
border-radius: 16px !important;
background: #fffaf0 !important;
color: #544619 !important;
box-shadow: 0 6px 16px rgba(77, 60, 11, .045) !important;
}
.mobile-workspace-panel .mobile-workspace-actions span,
.mobile-workspace-panel .mobile-workspace-actions button:first-child span {
width: 28px !important;
height: 28px !important;
border-radius: 10px !important;
background: #f4c53e !important;
color: #2f2917 !important;
font-size: 1rem !important;
}
.mobile-workspace-panel .mobile-workspace-actions strong {
font-size: .69rem !important;
}
}
@media (max-width: 700px) {
.mobile-workspace-panel .mobile-workspace-actions {
gap: 5px !important;
}
.mobile-workspace-panel .mobile-workspace-actions button,
.mobile-workspace-panel .mobile-workspace-actions a {
padding-inline: 2px !important;
}
.mobile-workspace-panel .mobile-workspace-actions strong {
font-size: .58rem !important;
}
}
@media (max-width: 380px) {
.mobile-workspace-panel .mobile-workspace-actions strong {
font-size: .54rem !important;
}
}
/* Le mobile conserve volontairement la palette claire historique. */
@media (max-width: 900px) {
:root[data-theme="dark"] .mobile-workspace-panel .mobile-workspace-actions button,
:root[data-theme="dark"] .mobile-workspace-panel .mobile-workspace-actions a,
:root[data-theme="dark"] .mobile-workspace-panel .mobile-workspace-actions button:first-child {
border-color: #eadfbf !important;
background: #fffaf0 !important;
color: #544619 !important;
}
}