/* ═══════════════════════════════════════════════════════════════
ACA PI v3.0.0-beta.1 — Bento Light/Dark
Tokens, grid, widgets fondamentaux.
Scope strict : tout préfixé `aca-pi-v3-` pour ne pas polluer le thème.
═══════════════════════════════════════════════════════════════ */
/* THEME TOKENS — light (default) */
.aca-pi-v3,
.aca-pi-v3[data-theme="light"] {
--bg:#f2f2f7;
--bg-soft:#e9e9ef;
--surface:#ffffff;
--surface-overlay:rgba(255,255,255,.92);
--ink:#1a1a1f;
--ink-2:#525560;
--ink-3:#8a8e98;
--ink-4:#b8bbc4;
--line:rgba(0,0,0,.06);
--line-soft:rgba(0,0,0,.04);
--shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
--shadow-lg:0 4px 12px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.06);
--fab-shadow:0 8px 24px rgba(0,0,0,.2);
--pink:#ff6b8a;
--blue:#0a84ff;
--green:#34c759;
--orange:#ff9f0a;
--purple:#bf5af2;
--teal:#5ac8fa;
--yellow:#ffd60a;
--hero-grad:linear-gradient(135deg,#ff6b8a 0%,#ff9f0a 100%);
--add-grad:linear-gradient(135deg,#bf5af2,#5e5cef);
}
/* THEME TOKENS — dark */
.aca-pi-v3[data-theme="dark"] {
--bg:#000000;
--bg-soft:#0a0a0c;
--surface:#1c1c1e;
--surface-overlay:rgba(28,28,30,.92);
--ink:#ffffff;
--ink-2:#c7c7cc;
--ink-3:#8e8e93;
--ink-4:#48484a;
--line:rgba(255,255,255,.08);
--line-soft:rgba(255,255,255,.04);
--shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
--shadow-lg:0 4px 12px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.4);
--fab-shadow:0 8px 24px rgba(0,0,0,.6);
--hero-grad:linear-gradient(135deg,#ff5a7e 0%,#ff9500 100%);
}
/* RESET local — n'affecte que le scope .aca-pi-v3 */
.aca-pi-v3 *, .aca-pi-v3 *::before, .aca-pi-v3 *::after { box-sizing: border-box; }
/* ROOT */
.aca-pi-v3 {
background:var(--bg);
color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',sans-serif;
-webkit-font-smoothing:antialiased;
font-feature-settings:'kern','liga';
min-height:600px;
padding:24px;
border-radius:18px;
position:relative;
transition:background-color .35s ease, color .35s ease;
line-height:1.5;
}
@media (max-width:720px){ .aca-pi-v3 { padding:16px; border-radius:0; min-height:100vh; } }
/* TOP BAR */
.aca-pi-v3-topbar {
display:flex; align-items:center; justify-content:space-between;
gap:14px; margin-bottom:24px; flex-wrap:wrap;
}
.aca-pi-v3-greet { display:flex; align-items:center; gap:14px; min-width:0; }
.aca-pi-v3-avatar {
width:48px; height:48px; border-radius:50%;
background:linear-gradient(135deg,var(--pink),var(--orange));
display:flex; align-items:center; justify-content:center;
color:#fff; font-weight:800; font-size:1.15rem; letter-spacing:-.3px;
box-shadow:0 4px 12px rgba(255,107,138,.3); flex-shrink:0;
border:none; cursor:pointer; font-family:inherit;
transition:transform .15s, box-shadow .15s;
}
.aca-pi-v3-avatar:hover { transform:scale(1.05); box-shadow:0 6px 18px rgba(255,107,138,.4); }
.aca-pi-v3-avatar:active { transform:scale(.96); }
.aca-pi-v3-greet-text h1 {
margin:0; font-size:1.7rem; font-weight:800;
letter-spacing:-.8px; line-height:1.05; color:var(--ink);
}
.aca-pi-v3-sub {
font-size:.88rem; color:var(--ink-3); margin-top:2px; letter-spacing:-.1px;
}
.aca-pi-v3-topbar-actions { display:flex; gap:10px; align-items:center; }
/* THEME TOGGLE (segmented iOS) — supporte 2 ou 3 options */
.aca-pi-v3-theme-toggle {
display:inline-flex; padding:4px; background:var(--surface);
border-radius:24px; box-shadow:var(--shadow); position:relative;
}
.aca-pi-v3-tt-btn {
background:transparent; border:none; padding:6px 14px; cursor:pointer;
font-family:inherit; font-size:.78rem; font-weight:600;
color:var(--ink-3); border-radius:18px; letter-spacing:-.1px;
display:inline-flex; align-items:center; gap:6px;
transition:color .25s ease; z-index:1; position:relative;
}
.aca-pi-v3-tt-btn.is-active { color:var(--ink); }
/* Pill width 2-options (legacy compat) */
.aca-pi-v3-pill {
position:absolute; top:4px; bottom:4px;
width:calc(50% - 4px); background:var(--bg);
border-radius:18px; left:4px;
transition:transform .35s cubic-bezier(.32,.72,0,1);
box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-pill {
transform:translateX(100%); background:var(--bg-soft);
}
/* v3.16.0 — Pill 3-options */
.aca-pi-v3-theme-toggle[data-options="3"] .aca-pi-v3-pill {
width:calc(33.333% - 2.66px);
}
/* Position via data-pos (0/1/2) — calculé en JS */
.aca-pi-v3-theme-toggle[data-options="3"] .aca-pi-v3-pill[data-pos="0"] { transform:translateX(0); }
.aca-pi-v3-theme-toggle[data-options="3"] .aca-pi-v3-pill[data-pos="1"] { transform:translateX(calc(100% + 4px)); }
.aca-pi-v3-theme-toggle[data-options="3"] .aca-pi-v3-pill[data-pos="2"] { transform:translateX(calc(200% + 8px)); }
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-theme-toggle[data-options="3"] .aca-pi-v3-pill { background:var(--bg-soft); }
@media (max-width:560px){ .aca-pi-v3-tt-label { display:none; } }
/* ICON BUTTONS */
.aca-pi-v3-iconbtn {
width:42px; height:42px; background:var(--surface); border:none;
border-radius:50%; display:flex; align-items:center; justify-content:center;
cursor:pointer; box-shadow:var(--shadow); transition:transform .15s, background-color .35s;
position:relative; font-size:1.05rem; color:var(--ink);
}
.aca-pi-v3-iconbtn:hover { transform:scale(1.08); }
.aca-pi-v3-badge {
position:absolute; top:7px; right:7px; width:9px; height:9px;
background:var(--pink); border-radius:50%;
border:2px solid var(--surface);
}
/* BENTO GRID */
.aca-pi-v3-bento {
display:grid;
grid-template-columns:repeat(4, 1fr);
grid-auto-rows:minmax(160px, auto);
gap:16px;
}
@media (max-width:980px){ .aca-pi-v3-bento { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .aca-pi-v3-bento { gap:11px; grid-auto-rows:minmax(140px, auto); } }
/* v3.40.0 — WIDGET BASE Apple-clean (match mockup dashboard-bento-apple.html) */
.aca-pi-v3-w {
background:var(--bg);
border:1px solid var(--line);
border-radius:14px;
padding:16px 18px;
box-shadow:none;
position:relative;
overflow:hidden;
transition:transform .15s cubic-bezier(.32,.72,0,1), box-shadow .15s, border-color .15s;
color:var(--ink);
min-height:124px;
display:flex;
flex-direction:column;
}
.aca-pi-v3-w:hover {
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(0,0,0,.06);
border-color:var(--ink-4);
}
.aca-pi-v3-w-head {
display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.aca-pi-v3-w-icon {
width:24px; height:24px; border-radius:7px;
display:flex; align-items:center; justify-content:center;
font-size:.82rem; flex-shrink:0;
}
.aca-pi-v3-w-label {
font-size:.62rem;
color:var(--ink-3);
text-transform:uppercase;
letter-spacing:1.4px;
font-weight:700;
}
/* GRID SPANS */
.aca-pi-v3-w-1x1 { grid-column:span 1; grid-row:span 1; }
.aca-pi-v3-w-2x1 { grid-column:span 2; grid-row:span 1; }
.aca-pi-v3-w-2x2 { grid-column:span 2; grid-row:span 2; }
.aca-pi-v3-w-3x1 { grid-column:span 3; grid-row:span 1; }
.aca-pi-v3-w-4x1 { grid-column:span 4; grid-row:span 1; }
@media (max-width:980px){
.aca-pi-v3-w-2x1, .aca-pi-v3-w-3x1, .aca-pi-v3-w-4x1 { grid-column:span 2; }
}
@media (max-width:560px){
.aca-pi-v3-w-2x2 { grid-row:span 2; }
}
/* SKELETON LOADING (shimmer) */
@keyframes acaPiV3Shimmer {
0% { background-position:-300px 0; }
100% { background-position:calc(300px + 100%) 0; }
}
.aca-pi-v3-skel {
background:linear-gradient(90deg, var(--bg-soft) 0%, var(--line) 50%, var(--bg-soft) 100%);
background-size:300px 100%;
background-repeat:no-repeat;
animation: acaPiV3Shimmer 1.4s ease infinite;
box-shadow:none;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-skel {
background:linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 100%);
background-size:300px 100%;
background-repeat:no-repeat;
}
/* v3.40.0 — HERO WIDGET (mission vedette) Apple-clean (pas de gradient, card sobre) */
.aca-pi-v3-w-hero {
background:var(--bg);
color:var(--ink);
padding:22px 24px;
min-height:180px;
display:flex; flex-direction:column; justify-content:space-between;
position:relative;
border:1px solid var(--line);
border-radius:16px;
}
.aca-pi-v3-w-hero::before {
content:''; position:absolute; top:0; right:0;
width:140px; height:140px;
background:radial-gradient(circle, rgba(255,45,135,.07), transparent 70%);
border-radius:50%;
pointer-events:none;
}
.aca-pi-v3-w-hero .star {
display:inline-flex; align-items:center; gap:6px;
font-size:.6rem; color:var(--accent);
letter-spacing:1.6px; text-transform:uppercase;
font-weight:700; margin-bottom:8px;
position:relative;
}
.aca-pi-v3-w-hero .star::before {
content:''; width:6px; height:6px; background:var(--accent);
border-radius:50%; display:inline-block;
}
.aca-pi-v3-w-hero h2 {
margin:0 0 8px;
font-size:1.55rem; font-weight:800;
letter-spacing:-.6px; line-height:1.15;
color:var(--ink);
position:relative;
}
.aca-pi-v3-w-hero .desc {
font-size:.9rem; color:var(--ink-2); opacity:1;
line-height:1.55; letter-spacing:-.15px;
margin:0 0 14px; max-width:520px;
position:relative;
}
.aca-pi-v3-w-hero .bottom {
display:flex; align-items:center; justify-content:space-between;
padding-top:12px; border-top:1px solid var(--line); margin-top:auto;
position:relative;
gap:10px;
flex-wrap:wrap;
}
/* FAB */
.aca-pi-v3-fab {
position:fixed; bottom:24px; right:24px;
width:60px; height:60px;
background:var(--ink); color:var(--surface); border:none;
border-radius:50%; box-shadow:var(--fab-shadow);
font-size:1.5rem; font-weight:300; cursor:pointer; z-index:50;
transition:transform .15s, background-color .35s;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-fab { background:#fff; color:#1a1a1f; }
.aca-pi-v3-fab:hover { transform:scale(1.08); }
/* EMPTY / LOCKED state */
.aca-pi-v3-locked, .aca-pi-v3-empty {
font-family:-apple-system,sans-serif;
letter-spacing:-.1px;
}
/* SECTION TITLE (réutilisé par tous les écrans V3) */
.aca-pi-v3-section-title {
display:flex; align-items:baseline; justify-content:space-between;
padding:0 4px; margin:32px 0 14px;
}
.aca-pi-v3-section-title h2 {
margin:0; font-size:1.4rem; font-weight:800;
letter-spacing:-.5px; color:var(--ink);
}
.aca-pi-v3-section-title .see {
color:var(--blue); font-size:.88rem; font-weight:600; text-decoration:none;
}
/* ═══════════════════════════════════════════════════════════════
WIDGETS — v3.1.0
═══════════════════════════════════════════════════════════════ */
/* v3.40.0 — HERO mission semaine extras (Apple-clean) */
.aca-pi-v3-w-hero .pn {
font-size:1.05rem; font-weight:700; letter-spacing:-.2px;
font-variant-numeric:tabular-nums; color:var(--ink);
}
.aca-pi-v3-w-hero .pbar {
flex:1; min-width:120px; height:6px;
background:var(--bg-soft); border-radius:999px; overflow:hidden;
}
.aca-pi-v3-w-hero .pbar div {
height:100%; background:var(--accent);
border-radius:999px; transition:width .4s cubic-bezier(.32,.72,0,1);
}
.aca-pi-v3-w-hero .pb { display:flex; align-items:center; gap:10px; flex:1; }
.aca-pi-v3-w-hero .avs { display:inline-flex; flex-shrink:0; }
.aca-pi-v3-w-hero .avs img,
.aca-pi-v3-w-hero .avs .av-initial {
width:26px; height:26px; border-radius:50%;
border:2px solid var(--bg);
background:var(--bg-soft);
display:flex; align-items:center; justify-content:center;
color:var(--ink-2); font-size:.7rem; font-weight:700;
}
.aca-pi-v3-w-hero .avs img + img,
.aca-pi-v3-w-hero .avs .av-initial + .av-initial,
.aca-pi-v3-w-hero .avs img + .av-initial,
.aca-pi-v3-w-hero .avs .av-initial + img { margin-left:-8px; }
/* STREAK */
.aca-pi-v3-w-streak .num { font-size:3rem; font-weight:900; letter-spacing:-2px; color:var(--orange); line-height:.95; font-variant-numeric:tabular-nums; }
.aca-pi-v3-w-streak .label { font-size:.78rem; color:var(--ink-2); font-weight:600; margin-top:4px; letter-spacing:-.1px; }
.aca-pi-v3-w-streak .days { display:flex; gap:5px; margin-top:14px; }
.aca-pi-v3-w-streak .day { flex:1; aspect-ratio:1/1; max-width:24px; border-radius:6px; background:var(--bg-soft); }
.aca-pi-v3-w-streak .day.done { background:var(--orange); }
.aca-pi-v3-w-streak .day.today { background:var(--orange); box-shadow:0 0 0 3px rgba(255,159,10,.25); }
/* PROGRESS RING */
.aca-pi-v3-w-ring { display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; padding-top:38px; }
.aca-pi-v3-w-ring .ring-head { position:absolute; top:18px; left:18px; right:18px; }
.aca-pi-v3-w-ring svg { width:100px; height:100px; transform:rotate(-90deg); }
.aca-pi-v3-w-ring .ring-bg { stroke:var(--bg-soft); fill:none; stroke-width:8; }
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-w-ring .ring-bg { stroke:rgba(255,255,255,.08); }
.aca-pi-v3-w-ring .ring-fg { stroke:var(--blue); fill:none; stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset .6s ease; }
.aca-pi-v3-w-ring .center { position:absolute; top:50%; left:50%; transform:translate(-50%, -22%); text-align:center; }
.aca-pi-v3-w-ring .num { font-size:1.65rem; font-weight:800; letter-spacing:-.6px; font-variant-numeric:tabular-nums; }
.aca-pi-v3-w-ring .sub { font-size:.62rem; color:var(--ink-3); letter-spacing:.3px; text-transform:uppercase; font-weight:700; margin-top:1px; }
/* TASKS */
.aca-pi-v3-w-tasks .list { display:flex; flex-direction:column; }
.aca-pi-v3-w-tasks .task { padding:10px 0; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; cursor:pointer; }
.aca-pi-v3-w-tasks .task:last-child { border-bottom:none; padding-bottom:0; }
.aca-pi-v3-w-tasks .check { width:20px; height:20px; border-radius:6px; border:1.5px solid var(--ink-4); flex-shrink:0; transition:all .12s; cursor:pointer; }
.aca-pi-v3-w-tasks .check:hover { border-color:var(--ink-2); }
.aca-pi-v3-w-tasks .task.done .check { background:var(--green); border-color:var(--green); position:relative; }
.aca-pi-v3-w-tasks .task.done .check::after { content:'✓'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; font-size:.78rem; font-weight:800; }
.aca-pi-v3-w-tasks .body { flex:1; min-width:0; }
.aca-pi-v3-w-tasks .ttl { font-size:.92rem; font-weight:600; letter-spacing:-.2px; color:var(--ink); }
.aca-pi-v3-w-tasks .task.done .ttl { color:var(--ink-3); text-decoration:line-through; }
.aca-pi-v3-w-tasks .meta { font-size:.74rem; color:var(--ink-3); margin-top:2px; letter-spacing:-.1px; }
.aca-pi-v3-w-tasks .when { font-size:.78rem; color:var(--ink-3); font-weight:600; flex-shrink:0; font-variant-numeric:tabular-nums; }
.aca-pi-v3-w-tasks .when.urgent { color:var(--pink); }
/* STATS */
.aca-pi-v3-w-stats .row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); }
.aca-pi-v3-w-stats .row:last-child { border-bottom:none; }
.aca-pi-v3-w-stats .l { font-size:.85rem; color:var(--ink-2); font-weight:500; letter-spacing:-.1px; }
.aca-pi-v3-w-stats .v { font-size:.9rem; font-weight:700; letter-spacing:-.2px; font-variant-numeric:tabular-nums; }
/* ACTIVITY chart */
.aca-pi-v3-w-activity .bars { display:flex; gap:8px; align-items:flex-end; height:80px; margin-top:14px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.aca-pi-v3-w-activity .bar { flex:1; background:linear-gradient(to top, var(--blue), var(--teal)); border-radius:6px 6px 0 0; min-height:6px; transition:opacity .15s; cursor:pointer; }
.aca-pi-v3-w-activity .bar:hover { opacity:.7; }
.aca-pi-v3-w-activity .bar.empty { background:var(--bg-soft); }
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-w-activity .bar.empty { background:rgba(255,255,255,.06); }
.aca-pi-v3-w-activity .days { display:flex; gap:8px; margin-top:8px; }
.aca-pi-v3-w-activity .days div { flex:1; text-align:center; font-size:.66rem; color:var(--ink-3); font-weight:600; letter-spacing:.4px; }
/* PEOPLE */
.aca-pi-v3-w-people .avs { display:flex; margin-top:8px; }
.aca-pi-v3-w-people .avs > * { width:36px; height:36px; border-radius:50%; border:3px solid var(--surface); display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; color:#fff; flex-shrink:0; background:linear-gradient(135deg,var(--pink),var(--orange)); object-fit:cover; }
.aca-pi-v3-w-people .avs > * + * { margin-left:-10px; }
.aca-pi-v3-w-people .more { background:var(--bg-soft); color:var(--ink-2); font-size:.72rem; }
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-w-people .more { background:rgba(255,255,255,.1); color:var(--ink-2); }
.aca-pi-v3-w-people .label { font-size:.78rem; color:var(--ink-2); margin-top:12px; line-height:1.4; }
/* PFEQ */
.aca-pi-v3-w-pfeq .bars { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.aca-pi-v3-w-pfeq .row { display:flex; align-items:center; gap:10px; }
.aca-pi-v3-w-pfeq .code { font-size:.72rem; font-weight:700; color:var(--ink-2); width:48px; flex-shrink:0; font-variant-numeric:tabular-nums; }
.aca-pi-v3-w-pfeq .bar { flex:1; height:7px; background:var(--bg-soft); border-radius:4px; overflow:hidden; }
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-w-pfeq .bar { background:rgba(255,255,255,.08); }
.aca-pi-v3-w-pfeq .bar div { height:100%; border-radius:4px; transition:width .6s; }
.aca-pi-v3-w-pfeq .pct { font-size:.74rem; font-weight:700; color:var(--ink); width:40px; text-align:right; font-variant-numeric:tabular-nums; }
/* JOURNAL teaser */
.aca-pi-v3-w-journal { padding:0; overflow:hidden; cursor:pointer; }
.aca-pi-v3-w-journal .img { aspect-ratio:16/10; background:linear-gradient(135deg,#ffd5dc,#ffe5b4); position:relative; background-size:cover; background-position:center; }
.aca-pi-v3-w-journal .img .play { position:absolute; bottom:12px; left:12px; padding:5px 10px; background:rgba(0,0,0,.6); backdrop-filter:blur(10px); border-radius:6px; color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.4px; }
.aca-pi-v3-w-journal .body { padding:14px 16px; }
.aca-pi-v3-w-journal .kicker { font-size:.62rem; color:var(--pink); letter-spacing:1.4px; text-transform:uppercase; font-weight:700; margin-bottom:6px; }
.aca-pi-v3-w-journal h3 { margin:0 0 4px; font-size:.95rem; font-weight:700; letter-spacing:-.25px; line-height:1.25; color:var(--ink); }
.aca-pi-v3-w-journal p { font-size:.78rem; color:var(--ink-3); letter-spacing:-.1px; margin:0; }
/* ADD widget */
.aca-pi-v3-w-add { background:var(--add-grad); color:#fff; display:flex; flex-direction:column; justify-content:center; padding:22px; cursor:default; }
.aca-pi-v3-w-add .lbl { font-size:.72rem; letter-spacing:1.6px; text-transform:uppercase; font-weight:700; opacity:.92; margin-bottom:8px; color:#fff; }
.aca-pi-v3-w-add .btns { display:flex; gap:8px; flex-wrap:wrap; }
.aca-pi-v3-w-add .btns button { padding:8px 14px; background:rgba(255,255,255,.2); backdrop-filter:blur(10px); border:none; border-radius:8px; color:#fff; font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer; letter-spacing:-.1px; transition:background .15s; }
.aca-pi-v3-w-add .btns button:hover { background:rgba(255,255,255,.3); }
/* EMPTY state widget */
.aca-pi-v3-w-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; }
.aca-pi-v3-w-empty .icon { font-size:2rem; margin-bottom:8px; opacity:.5; }
.aca-pi-v3-w-empty .text { font-size:.82rem; color:var(--ink-3); letter-spacing:-.1px; line-height:1.4; }
/* ═══════════════════════════════════════════════════════════════
MISSION MODAL — v3.2.0
═══════════════════════════════════════════════════════════════ */
/* v3.38.0 — Apple-clean modal mission (match mockup HTML) */
.aca-pi-v3-modal-overlay {
position:fixed; inset:0; background:rgba(0,0,0,.5);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
z-index:9999;
display:flex; align-items:center; justify-content:center; padding:24px;
opacity:0; transition:opacity .25s ease;
}
.aca-pi-v3-modal-overlay.is-open { opacity:1; }
.aca-pi-v3-modal-overlay[data-theme="dark"] { background:rgba(0,0,0,.7); }
.aca-pi-v3-modal {
background:var(--bg);
border-radius:18px; max-width:780px; width:100%; max-height:92vh;
overflow:hidden;
display:flex; flex-direction:column;
box-shadow:0 24px 80px rgba(0,0,0,.3);
transform:scale(.96); opacity:0;
transition:transform .3s cubic-bezier(.32,.72,0,1), opacity .25s;
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',sans-serif;
}
.aca-pi-v3-modal-overlay.is-open .aca-pi-v3-modal { transform:scale(1); opacity:1; }
@media (max-width:560px){
.aca-pi-v3-modal-overlay { padding:0; align-items:flex-end; }
.aca-pi-v3-modal { max-height:96vh; border-radius:18px 18px 0 0; }
}
/* HEADER : simple white/dark bar avec close + crumb + actions */
.aca-pi-v3-mh {
padding:14px 20px;
border-bottom:1px solid var(--line);
display:flex; align-items:center; gap:12px;
background:var(--bg);
position:sticky; top:0; z-index:5;
}
.aca-pi-v3-mh-left { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.aca-pi-v3-close {
width:32px; height:32px; background:var(--bg-soft); border:none;
border-radius:50%; display:flex; align-items:center; justify-content:center;
cursor:pointer; font-size:1rem; color:var(--ink);
transition:all .15s; flex-shrink:0;
}
.aca-pi-v3-close:hover { background:var(--line); }
.aca-pi-v3-crumb {
font-size:.78rem; color:var(--ink-3); letter-spacing:-.1px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
flex:1; min-width:0;
}
.aca-pi-v3-crumb strong { color:var(--ink); font-weight:700; }
.aca-pi-v3-mh-actions { display:flex; gap:6px; flex-shrink:0; }
.aca-pi-v3-act {
display:inline-flex; align-items:center; gap:6px;
padding:7px 14px; background:var(--bg-soft);
border:1px solid var(--line); border-radius:999px;
font-family:inherit; font-size:.82rem; font-weight:600;
color:var(--ink); cursor:pointer; transition:all .15s;
-webkit-tap-highlight-color:transparent;
}
.aca-pi-v3-act:hover { background:var(--bg); border-color:var(--accent); color:var(--accent); }
.aca-pi-v3-act.primary { background:var(--ink); color:#fff; border-color:var(--ink); }
.aca-pi-v3-act.primary:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.aca-pi-v3-act.secondary { background:var(--bg-soft); color:var(--ink); }
.aca-pi-v3-act.danger { color:var(--red,#ff3b30); border-color:var(--line); background:var(--bg-soft); }
.aca-pi-v3-act.danger:hover { background:rgba(255,59,48,.06); border-color:var(--red,#ff3b30); color:var(--red,#ff3b30); }
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-act.primary { background:#fff; color:#1a1a1f; border-color:#fff; }
/* BODY : scrollable, no inner padding (sections gèrent leur padding) */
.aca-pi-v3-mb {
overflow-y:auto;
padding:0;
flex:1;
}
/* HERO : pas de gradient, padding propre, border-bottom comme iOS */
.aca-pi-v3-mhero {
background:var(--bg);
color:var(--ink);
padding:28px 24px 22px;
margin:0;
border-bottom:1px solid var(--line);
border-radius:0;
box-shadow:none;
position:relative;
}
.aca-pi-v3-mhero::before { content:none; }
.aca-pi-v3-mhero .kicker {
font-size:.66rem; letter-spacing:1.6px; text-transform:uppercase;
font-weight:700; color:var(--ink-3); margin-bottom:8px; opacity:1;
display:inline-flex; align-items:center; gap:10px;
}
.aca-pi-v3-mhero .kicker .week {
padding:2px 8px; background:var(--bg-soft);
border-radius:6px; font-size:.62rem; letter-spacing:1px; color:var(--ink-2);
}
.aca-pi-v3-mhero h1 {
margin:0;
font-size:1.85rem; font-weight:800;
letter-spacing:-.7px; line-height:1.15;
color:var(--ink); max-width:none;
}
.aca-pi-v3-mhero .goal {
margin:8px 0 16px;
font-size:.95rem; color:var(--ink-2);
line-height:1.55; letter-spacing:-.15px;
max-width:none; opacity:1;
}
.aca-pi-v3-mhero .progress-section { margin-top:0; margin-bottom:14px; }
.aca-pi-v3-mhero .progress-label {
display:flex; justify-content:space-between; margin-bottom:6px;
font-size:.66rem; font-weight:700; letter-spacing:.4px;
text-transform:uppercase; color:var(--ink-3);
}
.aca-pi-v3-mhero .progress-bar {
height:6px; background:var(--bg-soft);
border-radius:999px; overflow:hidden;
}
.aca-pi-v3-mhero .progress-bar div {
height:100%; background:var(--accent); border-radius:999px;
transition:width .4s cubic-bezier(.32,.72,0,1);
}
.aca-pi-v3-mhero .meta-row {
display:flex; gap:6px; flex-wrap:wrap;
padding-top:0; border-top:none; margin-top:14px;
align-items:center;
}
.aca-pi-v3-mhero .meta-pill {
padding:4px 10px; background:var(--bg-soft);
backdrop-filter:none; -webkit-backdrop-filter:none;
border-radius:999px;
font-size:.72rem; font-weight:600;
color:var(--ink-2); letter-spacing:-.1px;
display:inline-flex; align-items:center; gap:5px;
}
/* SECTIONS WIDGET (mw) : pas de surface card, juste padding + border-bottom */
.aca-pi-v3-mw {
background:transparent;
border-radius:0;
padding:18px 24px;
box-shadow:none;
border-bottom:1px solid var(--line);
margin:0;
}
.aca-pi-v3-mw:last-child { border-bottom:none; }
.aca-pi-v3-mw-title {
font-size:.66rem; color:var(--ink-3); letter-spacing:1.6px;
text-transform:uppercase; font-weight:700;
margin:0 0 12px;
display:flex; align-items:center; gap:10px;
}
.aca-pi-v3-mw-title .ico {
width:22px; height:22px; border-radius:6px;
display:flex; align-items:center; justify-content:center;
font-size:.78rem; flex-shrink:0;
}
/* GRID 2-col : Étapes large + Équipe 280px (fix : avant 3-col cassé) */
.aca-pi-v3-mgrid {
display:grid;
grid-template-columns:1fr 280px;
gap:24px;
margin:0;
}
@media (max-width:680px) { .aca-pi-v3-mgrid { grid-template-columns:1fr; } }
.aca-pi-v3-mgrid .aca-pi-v3-mw {
padding:0;
border-bottom:none;
}
.aca-pi-v3-mgrid .col-2 { grid-column:span 1; }
/* STEPS list — Apple iOS Reminders style */
.aca-pi-v3-step {
position:relative;
padding:12px 14px;
margin:0 -14px;
border-radius:10px;
display:flex; align-items:flex-start; gap:14px;
cursor:pointer;
transition:background .12s;
border-bottom:none;
}
.aca-pi-v3-step:hover { background:var(--bg-soft); padding-left:14px; }
.aca-pi-v3-step + .aca-pi-v3-step { margin-top:2px; }
.aca-pi-v3-step .check {
width:22px; height:22px; border:2px solid var(--ink-4);
border-radius:50%; flex-shrink:0; cursor:pointer;
transition:all .15s; position:relative; margin-top:1px;
display:flex; align-items:center; justify-content:center;
}
.aca-pi-v3-step .check:hover { border-color:var(--accent); }
.aca-pi-v3-step.done .check { background:var(--green); border-color:var(--green); }
.aca-pi-v3-step.done .check::after {
content:'✓'; color:#fff; font-size:.7rem; font-weight:800;
}
.aca-pi-v3-step .body { flex:1; min-width:0; }
.aca-pi-v3-step .label {
font-size:.95rem; font-weight:500; letter-spacing:-.2px;
color:var(--ink); line-height:1.4; margin:0;
}
.aca-pi-v3-step.done .label {
color:var(--ink-3); text-decoration:line-through;
text-decoration-thickness:1.5px; text-decoration-color:var(--ink-4);
}
.aca-pi-v3-step .context {
margin:6px 0 0;
padding:8px 10px;
background:rgba(255,204,0,.08);
border-left:2px solid rgba(255,204,0,.5);
border-radius:0 6px 6px 0;
font-size:.82rem; color:var(--ink-2); line-height:1.5;
letter-spacing:-.1px;
}
.aca-pi-v3-step.done .context { display:none; }
.aca-pi-v3-step .row {
display:flex; align-items:center; gap:6px;
margin-top:6px; flex-wrap:wrap;
}
.aca-pi-v3-step .tag {
font-size:.68rem; padding:2px 8px;
background:var(--bg-soft);
border-radius:999px; color:var(--ink-3);
font-weight:600; letter-spacing:0;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-step .tag { background:rgba(255,255,255,.08); }
/* DELIVERABLES */
.aca-pi-v3-deliv {
padding:12px 14px; background:var(--bg-soft); border-radius:10px;
margin-bottom:8px; display:flex; align-items:center; gap:12px;
cursor:pointer; transition:background .15s;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-deliv { background:rgba(255,255,255,.04); }
.aca-pi-v3-deliv:hover { background:var(--bg); }
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-deliv:hover { background:rgba(255,255,255,.06); }
.aca-pi-v3-deliv:last-child { margin-bottom:0; }
.aca-pi-v3-deliv .icon {
width:34px; height:34px; border-radius:9px;
display:flex; align-items:center; justify-content:center;
font-size:1rem; flex-shrink:0;
}
.aca-pi-v3-deliv .icon.doc { background:rgba(10,132,255,.15); color:var(--blue); }
.aca-pi-v3-deliv .icon.result { background:rgba(52,199,89,.15); color:var(--green); }
.aca-pi-v3-deliv .icon.bonus { background:rgba(191,90,242,.15); color:var(--purple); }
.aca-pi-v3-deliv .body { flex:1; min-width:0; }
.aca-pi-v3-deliv .lbl {
font-size:.68rem; color:var(--ink-3); letter-spacing:.6px;
text-transform:uppercase; font-weight:700; margin-bottom:2px;
}
.aca-pi-v3-deliv .title {
font-size:.9rem; font-weight:600; letter-spacing:-.2px; line-height:1.3;
}
/* PEOPLE in modal */
.aca-pi-v3-mperson {
display:flex; align-items:center; gap:12px; padding:8px 0;
}
.aca-pi-v3-mperson .av {
width:36px; height:36px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
color:#fff; font-weight:700; font-size:.85rem; flex-shrink:0;
background:linear-gradient(135deg,var(--pink),var(--orange));
object-fit:cover;
}
.aca-pi-v3-mperson .info { flex:1; min-width:0; }
.aca-pi-v3-mperson .name {
font-size:.88rem; font-weight:600; letter-spacing:-.2px; line-height:1.2;
}
.aca-pi-v3-mperson .role {
font-size:.72rem; color:var(--ink-3); letter-spacing:-.1px; margin-top:2px;
}
/* Coffre preview */
.aca-pi-v3-coffre-prev {
background:var(--surface); border-radius:18px;
padding:20px; box-shadow:var(--shadow); margin-bottom:18px;
}
.aca-pi-v3-coffre-prev .head {
display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.aca-pi-v3-coffre-prev h3 {
font-size:1.1rem; font-weight:700; letter-spacing:-.4px; margin:0;
}
.aca-pi-v3-coffre-prev .count {
font-size:.78rem; color:var(--ink-3); font-weight:600;
}
.aca-pi-v3-coffre-cards {
display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px;
}
.aca-pi-v3-coffre-card {
background:var(--bg-soft); border-radius:12px; overflow:hidden;
cursor:pointer; transition:transform .15s;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-coffre-card { background:rgba(255,255,255,.04); }
.aca-pi-v3-coffre-card:hover { transform:translateY(-2px); }
.aca-pi-v3-coffre-card .cover {
aspect-ratio:5/3;
background:linear-gradient(135deg,#ffd5dc,#ffe5b4);
background-size:cover; background-position:center;
}
.aca-pi-v3-coffre-card .body { padding:10px 12px; }
.aca-pi-v3-coffre-card .meta {
font-size:.62rem; color:var(--ink-3); letter-spacing:1px;
text-transform:uppercase; font-weight:700; margin-bottom:3px;
}
.aca-pi-v3-coffre-card h4 {
font-size:.82rem; font-weight:600; letter-spacing:-.2px;
line-height:1.25; margin:0;
}
.aca-pi-v3-add-coffre {
background:transparent; border:1.5px dashed var(--line);
border-radius:12px; display:flex; align-items:center; justify-content:center;
cursor:pointer; color:var(--ink-3);
font-family:inherit; font-size:.82rem; font-weight:500;
gap:6px; transition:all .15s; padding:30px 12px;
}
.aca-pi-v3-add-coffre:hover {
border-color:var(--ink-3); color:var(--ink); background:var(--bg-soft);
}
/* TOAST */
.aca-pi-v3-toast {
position:fixed; bottom:30px; left:50%; transform:translateX(-50%);
background:var(--ink); color:var(--surface);
padding:12px 22px; border-radius:12px;
font-family:-apple-system,sans-serif; font-size:.92rem;
font-weight:500; letter-spacing:-.1px;
opacity:0; transition:opacity .25s; z-index:10000; pointer-events:none;
}
.aca-pi-v3-toast.show { opacity:1; }
.aca-pi-v3[data-theme="dark"] ~ .aca-pi-v3-toast,
.aca-pi-v3-toast[data-theme="dark"] { background:#fff; color:#1a1a1f; }
/* ═══════════════════════════════════════════════════════════════
COMPOSER SHEET — v3.3.0
Slide-up iOS sheet pour ajouter au Coffre.
═══════════════════════════════════════════════════════════════ */
@keyframes acaPiV3SheetIn {
from { transform:translateY(100%); }
to { transform:translateY(0); }
}
@keyframes acaPiV3SheetOut {
from { transform:translateY(0); }
to { transform:translateY(100%); }
}
.aca-pi-v3-sheet-overlay {
position:fixed; inset:0; background:rgba(0,0,0,.5);
backdrop-filter:blur(8px); z-index:9999;
display:flex; align-items:flex-end; justify-content:center;
opacity:0; transition:opacity .25s ease;
}
.aca-pi-v3-sheet-overlay.is-open { opacity:1; }
.aca-pi-v3-sheet-overlay[data-theme="dark"] { background:rgba(0,0,0,.75); }
.aca-pi-v3-sheet {
background:var(--bg);
width:100%; max-width:780px; max-height:96vh;
border-radius:24px 24px 0 0;
display:flex; flex-direction:column; overflow:hidden;
box-shadow:var(--shadow-lg);
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',sans-serif;
animation:acaPiV3SheetIn .42s cubic-bezier(.32,.72,0,1);
}
.aca-pi-v3-sheet-overlay.is-closing .aca-pi-v3-sheet {
animation:acaPiV3SheetOut .3s cubic-bezier(.32,.72,0,1) forwards;
}
.aca-pi-v3-sheet-handle-wrap { display:flex; justify-content:center; padding:10px 0 6px; flex-shrink:0; }
.aca-pi-v3-sheet-handle { width:42px; height:5px; background:var(--ink-4); border-radius:3px; opacity:.5; }
.aca-pi-v3-sh {
padding:8px 20px 14px; border-bottom:1px solid var(--line);
display:flex; align-items:center; justify-content:space-between; gap:14px;
background:var(--surface-overlay); backdrop-filter:blur(20px);
position:sticky; top:0; z-index:5; flex-shrink:0;
}
.aca-pi-v3-sh-cancel {
background:transparent; border:none; padding:6px 0; cursor:pointer;
font-family:inherit; font-size:.92rem; color:var(--blue);
font-weight:500; letter-spacing:-.1px;
}
.aca-pi-v3-sh-title { font-size:.92rem; font-weight:700; letter-spacing:-.2px; text-align:center; flex:1; color:var(--ink); }
.aca-pi-v3-sh-title .sub {
display:block; font-size:.7rem; color:var(--ink-3); font-weight:500; margin-top:2px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.aca-pi-v3-sh-save {
padding:7px 16px; background:var(--pink); color:#fff; border:none; border-radius:8px;
font-family:inherit; font-size:.88rem; font-weight:700; cursor:pointer; letter-spacing:-.1px;
transition:transform .12s, background .15s;
}
.aca-pi-v3-sh-save:hover { transform:scale(1.03); }
.aca-pi-v3-sh-save:disabled {
background:var(--bg-soft); color:var(--ink-3); cursor:not-allowed; transform:none;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-sh-save:disabled,
.aca-pi-v3-sheet-overlay[data-theme="dark"] .aca-pi-v3-sh-save:disabled { background:rgba(255,255,255,.08); }
.aca-pi-v3-sb { overflow-y:auto; padding:20px; }
.aca-pi-v3-sw {
background:var(--surface); border-radius:18px; padding:16px 18px;
box-shadow:var(--shadow); margin-bottom:14px;
}
.aca-pi-v3-sw-title {
font-size:.66rem; color:var(--ink-3); letter-spacing:1.6px;
text-transform:uppercase; font-weight:700; margin-bottom:10px;
}
/* Segmented control (iOS) */
.aca-pi-v3-seg {
display:flex; background:var(--bg-soft); border-radius:10px; padding:3px;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-seg,
.aca-pi-v3-sheet-overlay[data-theme="dark"] .aca-pi-v3-seg { background:rgba(255,255,255,.06); }
.aca-pi-v3-seg button {
flex:1; padding:8px 6px; background:transparent; border:none;
font-family:inherit; font-size:.78rem; font-weight:600; color:var(--ink-2);
cursor:pointer; border-radius:8px; letter-spacing:-.1px;
transition:all .2s; display:flex; align-items:center; justify-content:center; gap:5px;
}
.aca-pi-v3-seg button.is-active {
background:var(--surface); color:var(--ink);
box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.aca-pi-v3-sheet-overlay[data-theme="dark"] .aca-pi-v3-seg button.is-active { background:#2c2c2e; box-shadow:0 1px 3px rgba(0,0,0,.3); }
/* Target select */
.aca-pi-v3-target {
width:100%; appearance:none; -webkit-appearance:none;
padding:11px 36px 11px 14px; background:var(--bg-soft); border:none;
border-radius:10px; font-family:inherit; font-size:.92rem;
color:var(--ink); font-weight:500; letter-spacing:-.1px; cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 14px center;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-target,
.aca-pi-v3-sheet-overlay[data-theme="dark"] .aca-pi-v3-target { background:rgba(255,255,255,.06); }
/* Title + body inputs (Apple Notes style) */
.aca-pi-v3-title-input {
width:100%; border:none; background:transparent; font-family:inherit;
font-size:1.85rem; font-weight:800; color:var(--ink);
letter-spacing:-.7px; line-height:1.15; padding:8px 0; outline:none;
}
.aca-pi-v3-title-input::placeholder { color:var(--ink-4); font-weight:800; }
.aca-pi-v3-body-input {
width:100%; min-height:140px; border:none; background:transparent;
font-family:inherit; font-size:1.05rem; color:var(--ink);
letter-spacing:-.2px; line-height:1.55; padding:8px 0; outline:none; resize:vertical;
}
.aca-pi-v3-body-input::placeholder { color:var(--ink-4); }
.aca-pi-v3-char-count {
display:flex; justify-content:space-between; align-items:center;
margin-top:4px; font-size:.7rem; color:var(--ink-3);
letter-spacing:-.1px; font-variant-numeric:tabular-nums;
}
.aca-pi-v3-draft-hint { font-style:italic; }
/* Attachments */
.aca-pi-v3-attach-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.aca-pi-v3-attach-btn {
padding:11px 14px; background:var(--bg-soft); border:none; border-radius:10px;
font-family:inherit; font-size:.86rem; font-weight:600; color:var(--ink);
cursor:pointer; letter-spacing:-.1px;
display:inline-flex; align-items:center; gap:7px;
transition:background .15s;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-attach-btn,
.aca-pi-v3-sheet-overlay[data-theme="dark"] .aca-pi-v3-attach-btn { background:rgba(255,255,255,.08); }
.aca-pi-v3-attach-btn:hover { background:var(--ink-4); }
.aca-pi-v3-sheet-overlay[data-theme="dark"] .aca-pi-v3-attach-btn:hover { background:rgba(255,255,255,.12); }
.aca-pi-v3-attach-btn .ico {
width:22px; height:22px; border-radius:6px;
display:flex; align-items:center; justify-content:center; font-size:.88rem;
}
.aca-pi-v3-attach-btn .ico.photo { background:rgba(255,107,138,.18); color:var(--pink); }
.aca-pi-v3-attach-btn .ico.audio { background:rgba(255,159,10,.18); color:var(--orange); }
.aca-pi-v3-attach-btn .ico.video { background:rgba(10,132,255,.18); color:var(--blue); }
.aca-pi-v3-filename {
font-size:.78rem; color:var(--ink-3); flex:1; min-width:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-.1px;
}
.aca-pi-v3-clearfile {
width:28px; height:28px; border:none; border-radius:50%;
background:var(--bg-soft); color:var(--ink-2); cursor:pointer;
font-size:1rem; line-height:1; transition:background .15s;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-clearfile,
.aca-pi-v3-sheet-overlay[data-theme="dark"] .aca-pi-v3-clearfile { background:rgba(255,255,255,.08); }
/* Preview */
.aca-pi-v3-preview {
margin-top:14px; position:relative; border-radius:14px; overflow:hidden;
}
.aca-pi-v3-preview img,
.aca-pi-v3-preview video { width:100%; max-height:260px; object-fit:cover; display:block; }
.aca-pi-v3-preview .remove {
position:absolute; top:10px; right:10px; width:30px; height:30px;
background:rgba(0,0,0,.6); backdrop-filter:blur(10px);
border:none; border-radius:50%; color:#fff; font-size:1rem; cursor:pointer;
}
/* Tags */
.aca-pi-v3-tags-input {
width:100%; padding:9px 12px; background:var(--bg-soft); border:none; border-radius:9px;
font-family:inherit; font-size:.86rem; color:var(--ink); outline:none; letter-spacing:-.1px;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-tags-input,
.aca-pi-v3-sheet-overlay[data-theme="dark"] .aca-pi-v3-tags-input { background:rgba(255,255,255,.06); }
.aca-pi-v3-tags-input::placeholder { color:var(--ink-3); }
.aca-pi-v3-tag-chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.aca-pi-v3-tag-chip {
padding:3px 10px 3px 12px; background:rgba(191,90,242,.15);
color:var(--purple); border-radius:6px; font-size:.74rem; font-weight:600;
display:inline-flex; align-items:center; gap:5px; letter-spacing:-.1px;
}
.aca-pi-v3-tag-chip .x { cursor:pointer; opacity:.7; }
.aca-pi-v3-tag-chip .x:hover { opacity:1; }
/* Participants */
.aca-pi-v3-parts-head {
display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px;
}
.aca-pi-v3-parts-count {
font-size:.76rem; color:var(--ink-3);
font-variant-numeric:tabular-nums; font-weight:600;
}
.aca-pi-v3-parts-list {
display:flex; gap:14px; flex-wrap:wrap; max-height:230px; overflow-y:auto;
}
.aca-pi-v3-pcell {
display:flex; flex-direction:column; align-items:center; gap:6px; width:60px;
}
.aca-pi-v3-pbtn {
background:transparent; border:none; padding:0;
width:50px; height:50px; border-radius:50%; overflow:hidden;
cursor:pointer; opacity:.5; filter:grayscale(.4);
transition:all .2s; position:relative;
}
.aca-pi-v3-pbtn img { width:100%; height:100%; display:block; object-fit:cover; }
.aca-pi-v3-pbtn .av {
width:100%; height:100%; display:flex; align-items:center; justify-content:center;
color:#fff; font-weight:700; font-size:1rem;
background:linear-gradient(135deg,var(--pink),var(--orange));
}
.aca-pi-v3-pbtn.is-on { opacity:1; filter:none; box-shadow:0 0 0 3px var(--pink); transform:scale(1.05); }
.aca-pi-v3-pname {
font-size:.7rem; color:var(--ink-3); font-weight:500;
letter-spacing:-.1px; text-align:center;
max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* iOS Switch */
.aca-pi-v3-switch-row {
display:flex; align-items:center; justify-content:space-between; padding:6px 0; gap:14px;
}
.aca-pi-v3-switch-row .text { flex:1; min-width:0; }
.aca-pi-v3-switch-row .ttl {
font-size:.95rem; font-weight:500; color:var(--ink); letter-spacing:-.2px;
}
.aca-pi-v3-switch-row .sub {
font-size:.78rem; color:var(--ink-3); margin-top:2px; letter-spacing:-.1px;
}
.aca-pi-v3-iosw {
position:relative; display:inline-block; width:48px; height:28px; flex-shrink:0;
}
.aca-pi-v3-iosw input { opacity:0; width:0; height:0; }
.aca-pi-v3-iosw-slider {
position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
background:var(--green); border-radius:28px; transition:.25s;
}
.aca-pi-v3-iosw-knob {
position:absolute; height:24px; width:24px; left:2px; bottom:2px;
background:#fff; border-radius:50%; transition:.25s;
box-shadow:0 2px 4px rgba(0,0,0,.2); transform:translateX(20px);
}
.aca-pi-v3-iosw input:not(:checked) ~ .aca-pi-v3-iosw-slider { background:var(--ink-4); }
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-iosw input:not(:checked) ~ .aca-pi-v3-iosw-slider,
.aca-pi-v3-sheet-overlay[data-theme="dark"] .aca-pi-v3-iosw input:not(:checked) ~ .aca-pi-v3-iosw-slider { background:rgba(255,255,255,.15); }
.aca-pi-v3-iosw input:not(:checked) ~ .aca-pi-v3-iosw-knob { transform:translateX(0); }
/* ═══════════════════════════════════════════════════════════════
v3.4.0 — MULTI-VIEWS + TAB BAR BOTTOM iOS
═══════════════════════════════════════════════════════════════ */
/* Views — only one visible at a time */
.aca-pi-v3-views { position:relative; }
.aca-pi-v3-view { display:none; animation:acaPiV3FadeIn .25s ease; }
.aca-pi-v3-view.is-active { display:block; }
@keyframes acaPiV3FadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
/* View headers (Missions / Coffre / Stats) */
.aca-pi-v3-view-head { margin:0 0 24px; }
.aca-pi-v3-view-head h2 { margin:0; font-size:2rem; font-weight:800; letter-spacing:-.8px; line-height:1.05; color:var(--ink); }
.aca-pi-v3-view-head .aca-pi-v3-view-sub { margin:6px 0 0; font-size:.95rem; color:var(--ink-3); letter-spacing:-.2px; }
/* Missions grid view */
.aca-pi-v3-missions-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.aca-pi-v3-mtile {
background:var(--surface); border-radius:18px; padding:18px 20px;
box-shadow:var(--shadow); cursor:pointer; transition:transform .2s, box-shadow .2s;
display:flex; flex-direction:column; gap:10px;
}
.aca-pi-v3-mtile:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.aca-pi-v3-mtile .domain { font-size:.66rem; color:var(--ink-3); letter-spacing:1.2px; text-transform:uppercase; font-weight:700; }
.aca-pi-v3-mtile h3 { margin:0; font-size:1.05rem; font-weight:700; letter-spacing:-.3px; line-height:1.25; color:var(--ink); }
.aca-pi-v3-mtile .goal { font-size:.85rem; color:var(--ink-2); line-height:1.45; margin:0; letter-spacing:-.1px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.aca-pi-v3-mtile .row { display:flex; align-items:center; gap:10px; margin-top:auto; }
.aca-pi-v3-mtile .pbar { flex:1; height:5px; background:var(--bg-soft); border-radius:3px; overflow:hidden; }
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-mtile .pbar { background:rgba(255,255,255,.08); }
.aca-pi-v3-mtile .pbar div { height:100%; border-radius:3px; transition:width .4s; }
.aca-pi-v3-mtile.is-done .pbar div { background:var(--green); }
.aca-pi-v3-mtile.is-doing .pbar div { background:var(--orange); }
.aca-pi-v3-mtile.is-todo .pbar div { background:var(--blue); }
.aca-pi-v3-mtile .pct { font-size:.74rem; font-weight:700; font-variant-numeric:tabular-nums; min-width:40px; text-align:right; color:var(--ink); }
.aca-pi-v3-mtile.is-done .pct { color:var(--green); }
.aca-pi-v3-mtile .foot { display:flex; align-items:center; justify-content:space-between; padding-top:10px; border-top:1px solid var(--line); margin-top:4px; font-size:.74rem; color:var(--ink-3); }
.aca-pi-v3-mtile .avs { display:inline-flex; }
.aca-pi-v3-mtile .avs > * { width:22px; height:22px; border-radius:50%; border:2px solid var(--surface); background:linear-gradient(135deg,var(--pink),var(--orange)); display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:700; color:#fff; object-fit:cover; }
.aca-pi-v3-mtile .avs > * + * { margin-left:-7px; }
.aca-pi-v3-mtile.is-done { opacity:.7; }
.aca-pi-v3-mtile.is-done h3 { text-decoration:line-through; text-decoration-color:var(--ink-4); }
/* Coffre grid view */
.aca-pi-v3-coffre-vgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.aca-pi-v3-ccard {
background:var(--surface); border-radius:16px; overflow:hidden;
box-shadow:var(--shadow); cursor:pointer; transition:transform .2s, box-shadow .2s;
}
.aca-pi-v3-ccard:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.aca-pi-v3-ccard .cover { aspect-ratio:5/3; background-size:cover; background-position:center; background-color:var(--bg-soft); }
.aca-pi-v3-ccard .body { padding:14px 16px; }
.aca-pi-v3-ccard .meta { font-size:.64rem; color:var(--ink-3); letter-spacing:1.2px; text-transform:uppercase; font-weight:700; margin-bottom:4px; }
.aca-pi-v3-ccard h4 { margin:0 0 6px; font-size:.95rem; font-weight:700; letter-spacing:-.25px; line-height:1.3; color:var(--ink); }
.aca-pi-v3-ccard p { font-size:.82rem; color:var(--ink-3); line-height:1.45; letter-spacing:-.1px; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.aca-pi-v3-ccard .foot { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-top:1px solid var(--line); font-size:.7rem; color:var(--ink-3); }
.aca-pi-v3-ccard .cohort-pill { background:var(--bg-soft); padding:2px 7px; border-radius:5px; font-weight:600; }
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-ccard .cohort-pill { background:rgba(255,255,255,.08); }
/* Stats view */
.aca-pi-v3-stats-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
@media (max-width:720px){ .aca-pi-v3-stats-grid { grid-template-columns:1fr; } }
.aca-pi-v3-stats-grid .col-2 { grid-column:span 2; }
@media (max-width:720px){ .aca-pi-v3-stats-grid .col-2 { grid-column:span 1; } }
/* TAB BAR BOTTOM */
.aca-pi-v3-tabbar {
position:sticky; bottom:0; left:0; right:0;
display:none;
align-items:center; justify-content:space-around;
padding:8px 0 max(8px, env(safe-area-inset-bottom));
background:var(--surface-overlay); backdrop-filter:saturate(180%) blur(24px);
border-top:1px solid var(--line);
z-index:40; margin-top:24px;
}
.aca-pi-v3-tab {
background:transparent; border:none; padding:8px 14px;
cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px;
color:var(--ink-3); font-family:inherit; font-size:.62rem;
font-weight:600; letter-spacing:-.1px; transition:color .15s;
min-width:54px; -webkit-tap-highlight-color:transparent;
}
.aca-pi-v3-tab .ico { font-size:1.35rem; line-height:1; }
.aca-pi-v3-tab.is-active { color:var(--blue); }
.aca-pi-v3-tabfab {
background:var(--ink); color:var(--surface); width:50px; height:50px;
border-radius:50%; padding:0;
box-shadow:0 4px 14px rgba(0,0,0,.2);
font-size:1.5rem; font-weight:300; gap:0;
margin-top:-14px; flex-shrink:0;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-tabfab { background:#fff; color:#1a1a1f; box-shadow:0 4px 14px rgba(0,0,0,.5); }
.aca-pi-v3-tabfab:active { transform:scale(.95); }
/* Show tab bar on mobile (≤ 720px) */
@media (max-width:720px) {
.aca-pi-v3-tabbar { display:flex; }
/* Hide standalone FAB on mobile (tab bar has its own) */
.aca-pi-v3-fab { display:none; }
/* Reserve space at bottom for content */
.aca-pi-v3-views { padding-bottom:6px; }
}
/* Desktop: hide tab bar, keep standalone FAB */
@media (min-width:721px) {
.aca-pi-v3-tabbar { display:none; }
}
/* Mobile : top safe area */
@supports (padding-top:env(safe-area-inset-top)) {
.aca-pi-v3 { padding-top:max(16px, env(safe-area-inset-top)); }
}
/* ═══════════════════════════════════════════════════════════════
v3.5.1 — LIGHTBOX MEDIA + POLISH
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-lightbox {
position:fixed; inset:0; background:rgba(0,0,0,.95);
z-index:10000; display:flex; align-items:center; justify-content:center;
opacity:0; transition:opacity .2s ease;
padding:24px;
}
.aca-pi-v3-lightbox.is-open { opacity:1; }
.aca-pi-v3-lightbox img,
.aca-pi-v3-lightbox video {
max-width:100%; max-height:100%;
object-fit:contain; border-radius:8px;
box-shadow:0 20px 80px rgba(0,0,0,.6);
}
.aca-pi-v3-lightbox audio {
width:min(560px, 92vw); border-radius:8px;
}
.aca-pi-v3-lightbox .lb-close {
position:absolute; top:24px; right:24px;
width:44px; height:44px; background:rgba(255,255,255,.15);
backdrop-filter:blur(20px); border:none; border-radius:50%;
color:#fff; font-size:1.3rem; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background .15s;
}
.aca-pi-v3-lightbox .lb-close:hover { background:rgba(255,255,255,.28); }
.aca-pi-v3-lightbox .lb-caption {
position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
max-width:90%; padding:8px 18px; background:rgba(0,0,0,.6);
backdrop-filter:blur(20px); border-radius:10px; color:#fff;
font-size:.85rem; letter-spacing:-.1px; text-align:center;
}
/* Indicateur "cliquable" sur covers Coffre */
.aca-pi-v3-ccard .cover,
.aca-pi-v3-w-journal .img,
.aca-pi-v3-coffre-card .cover { cursor:zoom-in; }
/* Empty states améliorés — polish v3.5.1 */
.aca-pi-v3-empty-illustration {
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:60px 24px; text-align:center; color:var(--ink-3);
}
.aca-pi-v3-empty-illustration .ill {
width:80px; height:80px; border-radius:50%;
background:var(--bg-soft); display:flex; align-items:center; justify-content:center;
font-size:2.4rem; margin-bottom:18px; opacity:.7;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-empty-illustration .ill { background:rgba(255,255,255,.06); }
.aca-pi-v3-empty-illustration h3 {
margin:0 0 6px; font-size:1.15rem; font-weight:700;
letter-spacing:-.4px; color:var(--ink);
}
.aca-pi-v3-empty-illustration p {
margin:0; font-size:.9rem; line-height:1.5;
color:var(--ink-3); letter-spacing:-.1px; max-width:320px;
}
.aca-pi-v3-empty-illustration .cta {
margin-top:18px; padding:10px 20px;
background:var(--ink); color:var(--surface);
border:none; border-radius:10px; font-family:inherit;
font-size:.86rem; font-weight:600; cursor:pointer;
letter-spacing:-.1px; transition:transform .12s;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-empty-illustration .cta { background:#fff; color:#1a1a1f; }
.aca-pi-v3-empty-illustration .cta:hover { transform:scale(1.03); }
/* ═══════════════════════════════════════════════════════════════
v3.5.2 — PULL-TO-REFRESH + ONBOARDING
═══════════════════════════════════════════════════════════════ */
/* Pull-to-refresh indicator (mobile) */
.aca-pi-v3-ptr {
position:absolute; top:0; left:50%;
transform:translate(-50%, -100%);
width:42px; height:42px; border-radius:50%;
background:var(--surface); box-shadow:var(--shadow);
display:flex; align-items:center; justify-content:center;
color:var(--ink-2); font-size:1.1rem;
transition:transform .2s cubic-bezier(.32,.72,0,1), opacity .15s;
z-index:30; pointer-events:none; opacity:0;
}
.aca-pi-v3-ptr.is-visible { opacity:1; }
.aca-pi-v3-ptr.is-refreshing .ico { animation:acaPiV3Spin .9s linear infinite; }
@keyframes acaPiV3Spin {
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
/* Pull-down state on view container */
.aca-pi-v3-views.is-pulling { transition:none; }
/* ONBOARDING tour */
.aca-pi-v3-onb-overlay {
position:fixed; inset:0; background:rgba(0,0,0,.7);
backdrop-filter:blur(8px); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px;
opacity:0; transition:opacity .25s ease;
}
.aca-pi-v3-onb-overlay.is-open { opacity:1; }
.aca-pi-v3-onb-card {
background:var(--bg); border-radius:24px; max-width:420px; width:100%;
padding:32px 28px 24px; box-shadow:var(--shadow-lg);
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',sans-serif;
text-align:center; color:var(--ink);
transform:scale(.94); opacity:0;
transition:transform .3s cubic-bezier(.32,.72,0,1), opacity .25s;
}
.aca-pi-v3-onb-overlay.is-open .aca-pi-v3-onb-card { transform:scale(1); opacity:1; }
.aca-pi-v3-onb-illust {
width:96px; height:96px; border-radius:50%;
background:var(--hero-grad); display:flex; align-items:center; justify-content:center;
font-size:2.6rem; margin:0 auto 22px;
box-shadow:0 8px 24px rgba(255,107,138,.25);
}
.aca-pi-v3-onb-card h2 {
margin:0 0 10px; font-size:1.55rem; font-weight:800;
letter-spacing:-.5px; line-height:1.2; color:var(--ink);
}
.aca-pi-v3-onb-card p {
margin:0 0 22px; font-size:.95rem; color:var(--ink-2);
line-height:1.55; letter-spacing:-.15px;
}
.aca-pi-v3-onb-dots {
display:flex; gap:6px; justify-content:center; margin-bottom:20px;
}
.aca-pi-v3-onb-dot {
width:7px; height:7px; border-radius:50%;
background:var(--ink-4); transition:all .25s;
}
.aca-pi-v3-onb-dot.is-active { background:var(--ink); width:22px; border-radius:4px; }
.aca-pi-v3-onb-actions { display:flex; gap:10px; justify-content:center; }
.aca-pi-v3-onb-skip {
padding:10px 14px; background:transparent; border:none;
color:var(--ink-3); font-family:inherit; font-size:.86rem;
font-weight:500; cursor:pointer; letter-spacing:-.1px;
}
.aca-pi-v3-onb-skip:hover { color:var(--ink); }
.aca-pi-v3-onb-next {
padding:11px 24px; background:var(--ink); color:var(--surface);
border:none; border-radius:10px; font-family:inherit;
font-size:.9rem; font-weight:600; cursor:pointer; letter-spacing:-.1px;
transition:transform .12s;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-onb-next { background:#fff; color:#1a1a1f; }
.aca-pi-v3-onb-next:hover { transform:scale(1.03); }
/* View swipe transition (smoother) */
.aca-pi-v3-view {
transition:opacity .25s ease, transform .3s cubic-bezier(.32,.72,0,1);
}
.aca-pi-v3-view.is-swipe-left { transform:translateX(-20px); opacity:0; }
.aca-pi-v3-view.is-swipe-right { transform:translateX(20px); opacity:0; }
/* ═══════════════════════════════════════════════════════════════
v3.6.0 — COMMAND PALETTE (⌘K)
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-cmdk-overlay {
position:fixed; inset:0; background:rgba(0,0,0,.5);
backdrop-filter:blur(8px); z-index:10001;
display:flex; align-items:flex-start; justify-content:center;
padding:88px 24px 24px;
opacity:0; transition:opacity .2s ease;
}
.aca-pi-v3-cmdk-overlay.is-open { opacity:1; }
.aca-pi-v3-cmdk {
background:var(--surface); border-radius:18px;
width:100%; max-width:620px; max-height:75vh;
overflow:hidden; box-shadow:var(--shadow-lg);
display:flex; flex-direction:column;
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',sans-serif;
transform:scale(.96); opacity:0;
transition:transform .3s cubic-bezier(.32,.72,0,1), opacity .2s;
}
.aca-pi-v3-cmdk-overlay.is-open .aca-pi-v3-cmdk { transform:scale(1); opacity:1; }
.aca-pi-v3-cmdk-search {
padding:14px 18px; border-bottom:1px solid var(--line);
display:flex; align-items:center; gap:12px;
}
.aca-pi-v3-cmdk-search .ico {
color:var(--ink-3); font-size:1.05rem;
}
.aca-pi-v3-cmdk-search input {
flex:1; background:transparent; border:none; outline:none;
font-family:inherit; font-size:1.05rem; font-weight:500;
color:var(--ink); letter-spacing:-.2px; padding:6px 0;
}
.aca-pi-v3-cmdk-search input::placeholder { color:var(--ink-3); }
.aca-pi-v3-cmdk-kbd {
padding:2px 8px; background:var(--bg-soft); border:1px solid var(--line);
border-radius:5px; font-family:'SF Mono','Menlo',monospace;
font-size:.72rem; color:var(--ink-2); flex-shrink:0;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-cmdk-kbd,
.aca-pi-v3-cmdk[data-theme="dark"] .aca-pi-v3-cmdk-kbd { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.1); }
.aca-pi-v3-cmdk-results {
overflow-y:auto; flex:1; padding:8px 0 14px;
}
.aca-pi-v3-cmdk-section { padding:6px 0; }
.aca-pi-v3-cmdk-section h4 {
margin:0; padding:8px 20px;
font-size:.66rem; color:var(--ink-3); letter-spacing:1.4px;
text-transform:uppercase; font-weight:700;
}
.aca-pi-v3-cmdk-item {
display:flex; align-items:center; gap:12px;
padding:10px 20px; cursor:pointer;
transition:background .1s;
}
.aca-pi-v3-cmdk-item:hover, .aca-pi-v3-cmdk-item.is-focused {
background:var(--bg-soft);
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-cmdk-item:hover,
.aca-pi-v3-cmdk[data-theme="dark"] .aca-pi-v3-cmdk-item:hover,
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-cmdk-item.is-focused,
.aca-pi-v3-cmdk[data-theme="dark"] .aca-pi-v3-cmdk-item.is-focused { background:rgba(255,255,255,.05); }
.aca-pi-v3-cmdk-item .ico {
width:32px; height:32px; border-radius:8px;
background:var(--bg-soft); display:flex; align-items:center; justify-content:center;
font-size:.95rem; flex-shrink:0; overflow:hidden;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-cmdk-item .ico,
.aca-pi-v3-cmdk[data-theme="dark"] .aca-pi-v3-cmdk-item .ico { background:rgba(255,255,255,.06); }
.aca-pi-v3-cmdk-item .ico img { width:100%; height:100%; object-fit:cover; }
.aca-pi-v3-cmdk-item .body { flex:1; min-width:0; }
.aca-pi-v3-cmdk-item .ttl {
font-size:.92rem; font-weight:600; color:var(--ink);
letter-spacing:-.2px; line-height:1.25;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.aca-pi-v3-cmdk-item .meta {
font-size:.74rem; color:var(--ink-3); margin-top:2px;
letter-spacing:-.1px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.aca-pi-v3-cmdk-item .arrow {
color:var(--ink-3); font-size:.85rem; opacity:0;
transition:opacity .15s;
}
.aca-pi-v3-cmdk-item:hover .arrow,
.aca-pi-v3-cmdk-item.is-focused .arrow { opacity:1; }
.aca-pi-v3-cmdk-empty {
padding:40px 20px; text-align:center; color:var(--ink-3);
}
.aca-pi-v3-cmdk-empty .icon { font-size:2rem; margin-bottom:10px; opacity:.5; }
.aca-pi-v3-cmdk-empty p { margin:0; font-size:.92rem; letter-spacing:-.1px; }
.aca-pi-v3-cmdk-foot {
padding:10px 18px; border-top:1px solid var(--line);
display:flex; align-items:center; gap:14px;
font-size:.72rem; color:var(--ink-3); letter-spacing:-.1px;
background:var(--bg-soft);
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-cmdk-foot,
.aca-pi-v3-cmdk[data-theme="dark"] .aca-pi-v3-cmdk-foot { background:rgba(255,255,255,.03); }
.aca-pi-v3-cmdk-foot kbd {
padding:1px 6px; background:var(--surface);
border:1px solid var(--line); border-radius:4px;
font-family:'SF Mono','Menlo',monospace; font-size:.66rem;
color:var(--ink-2); margin-right:5px;
}
@media (max-width:560px){
.aca-pi-v3-cmdk-overlay { padding:0; align-items:stretch; }
.aca-pi-v3-cmdk { max-width:100%; border-radius:0; max-height:100vh; }
}
/* ═══════════════════════════════════════════════════════════════
v3.7.0 — ENTRY DETAIL MODAL
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-entry-modal {
background:var(--bg); border-radius:24px;
max-width:760px; width:100%; max-height:92vh;
overflow:hidden; box-shadow:var(--shadow-lg);
display:flex; flex-direction:column;
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',sans-serif;
}
@media (max-width:560px){
.aca-pi-v3-modal-overlay .aca-pi-v3-entry-modal { max-height:96vh; border-radius:18px 18px 0 0; }
}
.aca-pi-v3-em-head {
padding:16px 24px; border-bottom:1px solid var(--line);
display:flex; align-items:center; justify-content:space-between; gap:18px;
background:var(--surface-overlay); backdrop-filter:blur(20px);
position:sticky; top:0; z-index:5;
}
.aca-pi-v3-em-head .left { display:flex; align-items:center; gap:14px; min-width:0; flex:1; }
.aca-pi-v3-em-head .author-mini {
display:flex; align-items:center; gap:10px; min-width:0;
}
.aca-pi-v3-em-head .author-mini img,
.aca-pi-v3-em-head .author-mini .av-letter {
width:32px; height:32px; border-radius:50%;
background:linear-gradient(135deg,var(--pink),var(--orange));
display:flex; align-items:center; justify-content:center;
color:#fff; font-weight:700; font-size:.78rem; flex-shrink:0;
object-fit:cover;
}
.aca-pi-v3-em-head .author-mini .name {
font-size:.86rem; font-weight:600; letter-spacing:-.2px; color:var(--ink);
line-height:1.2;
}
.aca-pi-v3-em-head .author-mini .meta {
font-size:.72rem; color:var(--ink-3); margin-top:1px; letter-spacing:-.1px;
}
.aca-pi-v3-em-body { overflow-y:auto; padding:24px 28px 28px; }
.aca-pi-v3-em-cover {
margin:-24px -28px 22px; aspect-ratio:16/10;
background-size:cover; background-position:center;
background-color:var(--bg-soft); cursor:zoom-in; position:relative;
}
.aca-pi-v3-em-cover video,
.aca-pi-v3-em-cover audio { width:100%; height:100%; display:block; }
.aca-pi-v3-em-cover.has-audio {
aspect-ratio:auto; padding:20px; cursor:default;
background:linear-gradient(135deg,var(--orange),var(--pink));
color:#fff; display:flex; align-items:center; gap:14px;
}
.aca-pi-v3-em-cover.has-audio audio {
flex:1; height:40px;
}
.aca-pi-v3-em-meta-row {
display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;
}
.aca-pi-v3-em-pill {
padding:4px 10px; background:var(--bg-soft); border-radius:6px;
font-size:.72rem; color:var(--ink-2); font-weight:600; letter-spacing:-.1px;
display:inline-flex; align-items:center; gap:5px;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-em-pill { background:rgba(255,255,255,.06); }
.aca-pi-v3-em-pill.is-portfolio { background:rgba(52,199,89,.15); color:var(--green); }
.aca-pi-v3-em-pill.is-pinned { background:rgba(255,159,10,.15); color:var(--orange); }
.aca-pi-v3-em-pill.is-final { background:rgba(10,132,255,.15); color:var(--blue); }
.aca-pi-v3-em-title {
margin:0 0 14px; font-size:1.65rem; font-weight:800;
letter-spacing:-.6px; line-height:1.2; color:var(--ink);
}
.aca-pi-v3-em-body-text {
font-size:1rem; line-height:1.6; color:var(--ink);
letter-spacing:-.15px; white-space:pre-wrap; margin:0 0 22px;
}
.aca-pi-v3-em-section {
padding:18px 0; border-top:1px solid var(--line);
}
.aca-pi-v3-em-section .lbl {
font-size:.66rem; color:var(--ink-3); letter-spacing:1.4px;
text-transform:uppercase; font-weight:700; margin-bottom:10px;
}
.aca-pi-v3-em-parts {
display:flex; gap:12px; flex-wrap:wrap;
}
.aca-pi-v3-em-part {
display:flex; align-items:center; gap:8px;
padding:6px 12px 6px 6px; background:var(--bg-soft);
border-radius:24px; font-size:.82rem; color:var(--ink);
font-weight:500; letter-spacing:-.1px;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-em-part { background:rgba(255,255,255,.06); }
.aca-pi-v3-em-part img,
.aca-pi-v3-em-part .av-letter {
width:24px; height:24px; border-radius:50%;
background:linear-gradient(135deg,var(--pink),var(--orange));
display:flex; align-items:center; justify-content:center;
color:#fff; font-weight:700; font-size:.7rem; object-fit:cover;
}
.aca-pi-v3-em-tags { display:flex; gap:6px; flex-wrap:wrap; }
.aca-pi-v3-em-tag {
padding:3px 10px; background:rgba(191,90,242,.15);
color:var(--purple); border-radius:6px; font-size:.74rem;
font-weight:600; letter-spacing:-.1px;
}
.aca-pi-v3-em-mission-link {
display:inline-flex; align-items:center; gap:8px;
padding:10px 14px; background:var(--bg-soft); border-radius:10px;
text-decoration:none; color:var(--ink); font-size:.88rem;
font-weight:600; letter-spacing:-.2px; cursor:pointer;
transition:background .15s;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-em-mission-link { background:rgba(255,255,255,.05); }
.aca-pi-v3-em-mission-link:hover { background:var(--ink-4); }
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-em-mission-link:hover { background:rgba(255,255,255,.1); }
.aca-pi-v3-em-foot {
padding:14px 24px; border-top:1px solid var(--line);
display:flex; align-items:center; justify-content:space-between; gap:12px;
background:var(--surface-overlay); backdrop-filter:blur(20px);
}
.aca-pi-v3-em-foot-actions { display:flex; gap:8px; }
.aca-pi-v3-em-foot-btn {
padding:8px 14px; background:transparent;
border:1px solid var(--line); border-radius:8px;
font-family:inherit; font-size:.82rem; font-weight:500;
color:var(--ink-2); cursor:pointer; letter-spacing:-.1px;
transition:all .15s;
}
.aca-pi-v3-em-foot-btn:hover { background:var(--surface); border-color:var(--ink-3); color:var(--ink); }
.aca-pi-v3-em-foot-btn.danger { color:var(--pink); border-color:transparent; }
.aca-pi-v3-em-foot-btn.danger:hover { background:rgba(255,107,138,.1); }
/* ═══════════════════════════════════════════════════════════════
v3.8.0 — PERSON PROFILE MODAL
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-person-modal {
background:var(--bg); border-radius:24px;
max-width:680px; width:100%; max-height:92vh;
overflow:hidden; box-shadow:var(--shadow-lg);
display:flex; flex-direction:column;
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
}
@media (max-width:560px){
.aca-pi-v3-modal-overlay .aca-pi-v3-person-modal { max-height:96vh; border-radius:18px 18px 0 0; }
}
.aca-pi-v3-pm-hero {
background:var(--hero-grad); color:#fff;
padding:36px 32px; text-align:center; position:relative;
}
.aca-pi-v3-pm-hero .close {
position:absolute; top:14px; right:14px;
width:34px; height:34px; background:rgba(255,255,255,.22);
backdrop-filter:blur(20px); border:none; border-radius:50%;
color:#fff; font-size:1rem; cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.aca-pi-v3-pm-hero .avatar {
width:96px; height:96px; border-radius:50%;
margin:0 auto 16px; border:4px solid rgba(255,255,255,.95);
object-fit:cover; box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.aca-pi-v3-pm-hero h1 {
margin:0; font-size:1.8rem; font-weight:800;
letter-spacing:-.5px; line-height:1.2; color:#fff;
}
.aca-pi-v3-pm-hero .sub {
margin-top:4px; font-size:.88rem; opacity:.9; letter-spacing:-.1px;
}
.aca-pi-v3-pm-body { overflow-y:auto; padding:24px 28px 28px; }
.aca-pi-v3-pm-stats {
display:grid; grid-template-columns:repeat(4, 1fr);
gap:12px; margin-bottom:24px;
}
@media (max-width:560px){
.aca-pi-v3-pm-stats { grid-template-columns:repeat(2, 1fr); }
}
.aca-pi-v3-pm-stat {
background:var(--surface); border-radius:14px;
padding:14px 12px; text-align:center; box-shadow:var(--shadow);
}
.aca-pi-v3-pm-stat .n {
font-size:1.6rem; font-weight:800; letter-spacing:-.5px;
color:var(--ink); font-variant-numeric:tabular-nums;
}
.aca-pi-v3-pm-stat .l {
font-size:.66rem; color:var(--ink-3); letter-spacing:.6px;
text-transform:uppercase; font-weight:700; margin-top:4px;
}
.aca-pi-v3-pm-section { margin-bottom:24px; }
.aca-pi-v3-pm-section h3 {
margin:0 0 12px; font-size:.78rem; color:var(--ink-3);
letter-spacing:1.6px; text-transform:uppercase; font-weight:700;
}
.aca-pi-v3-pm-missions {
display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
gap:10px;
}
.aca-pi-v3-pm-mtile {
background:var(--surface); border:1px solid var(--line);
border-radius:12px; padding:14px; cursor:pointer;
transition:transform .15s, border-color .15s;
}
.aca-pi-v3-pm-mtile:hover { transform:translateY(-2px); border-color:var(--ink-3); }
.aca-pi-v3-pm-mtile .domain {
font-size:.62rem; color:var(--ink-3); letter-spacing:1.1px;
text-transform:uppercase; font-weight:700; margin-bottom:5px;
}
.aca-pi-v3-pm-mtile h4 {
margin:0 0 10px; font-size:.92rem; font-weight:700;
letter-spacing:-.25px; line-height:1.25; color:var(--ink);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.aca-pi-v3-pm-mtile .pbar {
height:4px; background:var(--bg-soft); border-radius:2px; overflow:hidden;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-pm-mtile .pbar { background:rgba(255,255,255,.08); }
.aca-pi-v3-pm-mtile .pbar div { height:100%; background:var(--blue); border-radius:2px; }
.aca-pi-v3-pm-mtile.is-done .pbar div { background:var(--green); }
.aca-pi-v3-pm-mtile .foot {
display:flex; align-items:center; justify-content:space-between; margin-top:8px;
font-size:.7rem; color:var(--ink-3);
}
.aca-pi-v3-pm-mtile .foot .pct { font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.aca-pi-v3-pm-entries {
display:flex; flex-direction:column; gap:8px;
}
.aca-pi-v3-pm-entry {
display:flex; align-items:center; gap:12px;
padding:10px 12px; background:var(--surface); border-radius:12px;
cursor:pointer; transition:background .15s;
}
.aca-pi-v3-pm-entry:hover { background:var(--bg-soft); }
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-pm-entry:hover { background:rgba(255,255,255,.05); }
.aca-pi-v3-pm-entry .thumb {
width:42px; height:42px; border-radius:8px;
background:var(--bg-soft); background-size:cover; background-position:center;
flex-shrink:0; display:flex; align-items:center; justify-content:center;
font-size:1rem; color:var(--ink-3);
}
.aca-pi-v3-pm-entry .body { flex:1; min-width:0; }
.aca-pi-v3-pm-entry .ttl {
font-size:.88rem; font-weight:600; letter-spacing:-.2px; color:var(--ink);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.aca-pi-v3-pm-entry .meta {
font-size:.72rem; color:var(--ink-3); margin-top:1px; letter-spacing:-.1px;
}
.aca-pi-v3-pm-empty {
padding:20px; text-align:center; color:var(--ink-3);
font-size:.86rem; letter-spacing:-.1px;
}
/* ═══════════════════════════════════════════════════════════════
v3.11.0 — NOTIFICATIONS PANEL (drop-down depuis bell topbar)
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-notif-overlay {
position:fixed; inset:0; background:rgba(0,0,0,.3);
backdrop-filter:blur(4px); z-index:9997;
display:flex; align-items:flex-start; justify-content:flex-end;
padding:80px 24px 24px;
opacity:0; transition:opacity .2s ease;
}
.aca-pi-v3-notif-overlay.is-open { opacity:1; }
@media (max-width:560px){
.aca-pi-v3-notif-overlay { padding:0; align-items:stretch; }
}
.aca-pi-v3-notif-panel {
background:var(--surface); border-radius:18px;
width:100%; max-width:420px; max-height:75vh;
overflow:hidden; box-shadow:var(--shadow-lg);
display:flex; flex-direction:column;
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
transform:translateY(-12px); opacity:0;
transition:transform .3s cubic-bezier(.32,.72,0,1), opacity .2s;
}
.aca-pi-v3-notif-overlay.is-open .aca-pi-v3-notif-panel { transform:translateY(0); opacity:1; }
@media (max-width:560px){
.aca-pi-v3-notif-overlay .aca-pi-v3-notif-panel { max-width:100%; max-height:100vh; border-radius:0; }
}
.aca-pi-v3-notif-head {
padding:14px 18px; border-bottom:1px solid var(--line);
display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.aca-pi-v3-notif-head h3 {
margin:0; font-size:1.05rem; font-weight:700;
letter-spacing:-.3px; color:var(--ink);
}
.aca-pi-v3-notif-head .markread {
background:transparent; border:none; padding:4px 0;
font-family:inherit; font-size:.78rem; color:var(--blue);
font-weight:500; cursor:pointer; letter-spacing:-.1px;
}
.aca-pi-v3-notif-head .markread:disabled { color:var(--ink-3); cursor:not-allowed; }
.aca-pi-v3-notif-list { overflow-y:auto; flex:1; }
.aca-pi-v3-notif-item {
display:flex; align-items:flex-start; gap:12px;
padding:14px 18px; border-bottom:1px solid var(--line-soft);
cursor:pointer; transition:background .12s; position:relative;
}
.aca-pi-v3-notif-item:hover { background:var(--bg-soft); }
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-notif-item:hover,
.aca-pi-v3-notif-panel[data-theme="dark"] .aca-pi-v3-notif-item:hover { background:rgba(255,255,255,.05); }
.aca-pi-v3-notif-item.is-unread::before {
content:''; position:absolute; left:6px; top:50%;
transform:translateY(-50%); width:6px; height:6px;
background:var(--blue); border-radius:50%;
}
.aca-pi-v3-notif-item .av {
width:36px; height:36px; border-radius:50%;
background:linear-gradient(135deg,var(--pink),var(--orange));
display:flex; align-items:center; justify-content:center;
color:#fff; font-weight:700; font-size:.78rem; flex-shrink:0;
}
.aca-pi-v3-notif-item .body { flex:1; min-width:0; }
.aca-pi-v3-notif-item .txt {
font-size:.88rem; color:var(--ink); line-height:1.4;
letter-spacing:-.15px;
}
.aca-pi-v3-notif-item .txt strong { font-weight:700; }
.aca-pi-v3-notif-item .meta {
font-size:.72rem; color:var(--ink-3); margin-top:3px; letter-spacing:-.1px;
}
.aca-pi-v3-notif-empty {
padding:50px 20px; text-align:center; color:var(--ink-3);
}
.aca-pi-v3-notif-empty .icon { font-size:2rem; margin-bottom:10px; opacity:.5; }
.aca-pi-v3-notif-empty p { margin:0; font-size:.9rem; letter-spacing:-.1px; }
/* Badge bell when unread (dynamique) */
.aca-pi-v3-iconbtn .aca-pi-v3-badge[data-count] {
width:auto; height:14px; min-width:14px;
padding:0 4px; border-radius:7px;
font-size:.6rem; color:#fff; font-weight:800;
display:flex; align-items:center; justify-content:center;
top:6px; right:6px;
font-variant-numeric:tabular-nums;
}
/* ═══════════════════════════════════════════════════════════════
v3.12.0 — FOCUS MODE (Pomodoro plein écran)
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-focus {
position:fixed; inset:0; background:#0a0a0e;
z-index:10002; display:flex; flex-direction:column;
align-items:center; justify-content:center;
color:#fff; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
opacity:0; transition:opacity .35s ease;
}
.aca-pi-v3-focus.is-open { opacity:1; }
.aca-pi-v3-focus::before {
content:''; position:absolute; inset:0;
background:radial-gradient(circle at 50% 30%, rgba(255,107,138,.18), transparent 60%),
radial-gradient(circle at 50% 70%, rgba(10,132,255,.12), transparent 60%);
pointer-events:none;
}
.aca-pi-v3-focus-close {
position:absolute; top:24px; right:24px;
width:44px; height:44px; background:rgba(255,255,255,.08);
backdrop-filter:blur(20px); border:none; border-radius:50%;
color:#fff; font-size:1.2rem; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background .15s; z-index:2;
}
.aca-pi-v3-focus-close:hover { background:rgba(255,255,255,.18); }
.aca-pi-v3-focus-kicker {
font-size:.78rem; letter-spacing:2.2px; text-transform:uppercase;
font-weight:700; color:rgba(255,255,255,.65);
margin-bottom:14px; position:relative; z-index:1;
}
.aca-pi-v3-focus-title {
font-size:2rem; font-weight:700; letter-spacing:-.7px;
margin:0 0 36px; max-width:680px; text-align:center;
line-height:1.2; padding:0 24px; position:relative; z-index:1;
}
@media (max-width:560px){
.aca-pi-v3-focus-title { font-size:1.4rem; margin-bottom:24px; }
}
.aca-pi-v3-focus-ring {
position:relative; width:280px; height:280px; margin-bottom:36px; z-index:1;
}
@media (max-width:560px){
.aca-pi-v3-focus-ring { width:220px; height:220px; }
}
.aca-pi-v3-focus-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.aca-pi-v3-focus-ring .bg { stroke:rgba(255,255,255,.08); fill:none; stroke-width:8; }
.aca-pi-v3-focus-ring .fg { stroke:var(--pink); fill:none; stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset .5s linear; }
.aca-pi-v3-focus-ring .center {
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
text-align:center;
}
.aca-pi-v3-focus-ring .time {
font-size:3.8rem; font-weight:700; letter-spacing:-2px;
font-variant-numeric:tabular-nums; line-height:1; color:#fff;
}
@media (max-width:560px){
.aca-pi-v3-focus-ring .time { font-size:3rem; }
}
.aca-pi-v3-focus-ring .state {
font-size:.78rem; letter-spacing:1.6px; text-transform:uppercase;
font-weight:700; color:rgba(255,255,255,.65); margin-top:8px;
}
.aca-pi-v3-focus-ring.is-paused .fg { stroke:rgba(255,255,255,.4); }
.aca-pi-v3-focus-ring.is-done {
animation:acaPiV3FocusPulse 1.2s ease-in-out infinite;
}
@keyframes acaPiV3FocusPulse {
0%, 100% { transform:scale(1); }
50% { transform:scale(1.04); }
}
.aca-pi-v3-focus-actions {
display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
position:relative; z-index:1;
}
.aca-pi-v3-focus-btn {
padding:14px 24px; background:rgba(255,255,255,.1);
backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.18);
border-radius:30px; color:#fff; font-family:inherit;
font-size:.92rem; font-weight:600; cursor:pointer; letter-spacing:-.1px;
transition:transform .12s, background .15s;
}
.aca-pi-v3-focus-btn:hover { background:rgba(255,255,255,.18); }
.aca-pi-v3-focus-btn:active { transform:scale(.96); }
.aca-pi-v3-focus-btn.primary { background:var(--pink); border-color:var(--pink); }
.aca-pi-v3-focus-btn.primary:hover { background:#e8266f; }
.aca-pi-v3-focus-foot {
position:absolute; bottom:24px; left:0; right:0;
text-align:center; font-size:.78rem; color:rgba(255,255,255,.45);
letter-spacing:-.1px;
}
/* Focus button bar in mission modal */
.aca-pi-v3-focus-trigger {
padding:10px 16px; background:var(--ink); color:var(--surface);
border:none; border-radius:10px; font-family:inherit;
font-size:.85rem; font-weight:600; cursor:pointer; letter-spacing:-.1px;
display:inline-flex; align-items:center; gap:6px;
transition:transform .12s, background .15s;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-focus-trigger { background:#fff; color:#1a1a1f; }
.aca-pi-v3-focus-trigger:hover { transform:scale(1.03); }
/* ═══════════════════════════════════════════════════════════════
v3.13.0 — STUDENTS VIEW (Caro / admin)
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-stu-totals {
display:flex; gap:32px; padding:18px 22px;
background:var(--surface); border-radius:14px;
margin-bottom:20px; box-shadow:var(--shadow); flex-wrap:wrap;
}
.aca-pi-v3-stu-totals .stat .n {
font-size:1.6rem; font-weight:800; letter-spacing:-.5px;
font-variant-numeric:tabular-nums;
}
.aca-pi-v3-stu-totals .stat .l {
font-size:.7rem; color:var(--ink-3); letter-spacing:.4px;
text-transform:uppercase; font-weight:600; margin-top:2px;
}
.aca-pi-v3-stu-totals .stat.warn .n { color:var(--pink); }
.aca-pi-v3-stu-grid {
display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px;
}
.aca-pi-v3-stu-card {
background:var(--surface); border:1px solid var(--line);
border-radius:18px; padding:20px;
cursor:pointer; transition:transform .2s, border-color .2s, box-shadow .2s;
display:flex; flex-direction:column; gap:12px;
}
.aca-pi-v3-stu-card:hover {
transform:translateY(-3px);
border-color:var(--ink-3);
box-shadow:var(--shadow-lg);
}
.aca-pi-v3-stu-card.needs-attention {
border-color:var(--pink);
background:rgba(255,107,138,.04);
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-stu-card.needs-attention { background:rgba(255,107,138,.08); }
.aca-pi-v3-stu-head { display:flex; align-items:center; gap:12px; }
.aca-pi-v3-stu-head .av {
width:56px; height:56px; border-radius:50%;
background:linear-gradient(135deg, var(--pink), var(--orange));
display:flex; align-items:center; justify-content:center;
color:#fff; font-weight:700; font-size:1.1rem;
flex-shrink:0; object-fit:cover;
}
.aca-pi-v3-stu-head .info { flex:1; min-width:0; }
.aca-pi-v3-stu-head h3 {
margin:0; font-size:1.05rem; font-weight:700;
letter-spacing:-.3px; color:var(--ink); line-height:1.2;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.aca-pi-v3-stu-head .sub {
font-size:.74rem; color:var(--ink-3); margin-top:3px;
letter-spacing:-.1px;
}
.aca-pi-v3-stu-card .warn-badge {
font-size:.62rem; padding:2px 8px;
background:rgba(255,107,138,.18); color:var(--pink);
border-radius:6px; font-weight:700; letter-spacing:.4px;
text-transform:uppercase;
}
.aca-pi-v3-stu-progress {
display:flex; align-items:center; gap:10px;
}
.aca-pi-v3-stu-progress .pbar {
flex:1; height:6px; background:var(--bg-soft);
border-radius:3px; overflow:hidden;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-stu-progress .pbar { background:rgba(255,255,255,.08); }
.aca-pi-v3-stu-progress .pbar div {
height:100%; background:var(--green); border-radius:3px;
transition:width .5s;
}
.aca-pi-v3-stu-progress .pct {
font-size:.86rem; font-weight:700; color:var(--ink);
font-variant-numeric:tabular-nums; min-width:42px; text-align:right;
}
.aca-pi-v3-stu-mini {
display:flex; gap:12px; padding-top:10px;
border-top:1px solid var(--line); justify-content:space-between;
}
.aca-pi-v3-stu-mini .item { text-align:center; flex:1; }
.aca-pi-v3-stu-mini .n {
font-size:1.05rem; font-weight:700; color:var(--ink);
font-variant-numeric:tabular-nums; letter-spacing:-.3px;
}
.aca-pi-v3-stu-mini .l {
font-size:.62rem; color:var(--ink-3); letter-spacing:.4px;
text-transform:uppercase; font-weight:600; margin-top:2px;
}
/* ═══════════════════════════════════════════════════════════════
v3.14.0 — PWA INSTALL BANNER
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-pwa-banner {
position:fixed; bottom:24px; left:50%;
transform:translateX(-50%) translateY(120%);
max-width:480px; width:calc(100% - 32px);
background:var(--surface); border-radius:16px;
box-shadow:var(--shadow-lg); padding:14px 18px;
display:flex; align-items:center; gap:14px;
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
color:var(--ink); z-index:9996;
transition:transform .4s cubic-bezier(.32,.72,0,1);
border:1px solid var(--line);
}
.aca-pi-v3-pwa-banner.is-open { transform:translateX(-50%) translateY(0); }
.aca-pi-v3-pwa-banner .icon {
width:42px; height:42px; border-radius:11px;
background:linear-gradient(135deg, var(--pink), var(--orange));
display:flex; align-items:center; justify-content:center;
font-size:1.3rem; flex-shrink:0;
}
.aca-pi-v3-pwa-banner .body { flex:1; min-width:0; }
.aca-pi-v3-pwa-banner .ttl {
font-size:.92rem; font-weight:700; letter-spacing:-.3px;
color:var(--ink); line-height:1.2;
}
.aca-pi-v3-pwa-banner .sub {
font-size:.78rem; color:var(--ink-3); margin-top:3px; letter-spacing:-.1px;
}
.aca-pi-v3-pwa-banner .actions {
display:flex; gap:6px; align-items:center; flex-shrink:0;
}
.aca-pi-v3-pwa-banner .install-btn {
padding:8px 14px; background:var(--ink); color:var(--surface);
border:none; border-radius:10px; font-family:inherit;
font-size:.82rem; font-weight:600; cursor:pointer;
letter-spacing:-.1px; transition:background .15s;
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-pwa-banner .install-btn { background:#fff; color:#1a1a1f; }
.aca-pi-v3-pwa-banner .dismiss-btn {
width:30px; height:30px; background:transparent;
border:none; border-radius:50%; color:var(--ink-3);
font-size:1.1rem; cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.aca-pi-v3-pwa-banner .dismiss-btn:hover { background:var(--bg-soft); color:var(--ink); }
@media (max-width:560px){
.aca-pi-v3-pwa-banner { bottom:90px; } /* au-dessus de la tab bar */
}
/* iOS instructions */
.aca-pi-v3-pwa-ios-help {
font-size:.78rem; color:var(--ink-3); line-height:1.5; letter-spacing:-.1px;
}
.aca-pi-v3-pwa-ios-help kbd {
padding:1px 6px; background:var(--bg-soft); border:1px solid var(--line);
border-radius:5px; font-family:'SF Mono','Menlo',monospace;
font-size:.74rem; color:var(--ink-2);
}
/* ═══════════════════════════════════════════════════════════════
v3.15.0 — ACHIEVEMENTS / BADGES
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-w-ach { padding:20px 22px; }
.aca-pi-v3-w-ach .head {
display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px;
}
.aca-pi-v3-w-ach h3 {
margin:0; font-size:.92rem; font-weight:700; letter-spacing:-.2px;
}
.aca-pi-v3-w-ach .count {
font-size:.78rem; color:var(--ink-3); font-variant-numeric:tabular-nums; font-weight:600;
}
.aca-pi-v3-w-ach .grid {
display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
}
.aca-pi-v3-w-ach .badge {
aspect-ratio:1; border-radius:14px;
display:flex; align-items:center; justify-content:center;
font-size:1.5rem; cursor:pointer;
transition:transform .15s, opacity .2s;
position:relative;
}
.aca-pi-v3-w-ach .badge.locked {
background:var(--bg-soft); color:var(--ink-4); opacity:.5; filter:grayscale(1);
}
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-w-ach .badge.locked { background:rgba(255,255,255,.05); }
.aca-pi-v3-w-ach .badge.bronze { background:linear-gradient(135deg, #cd7f32, #a05a1f); color:#fff; }
.aca-pi-v3-w-ach .badge.silver { background:linear-gradient(135deg, #c0c0c0, #909090); color:#fff; }
.aca-pi-v3-w-ach .badge.gold { background:linear-gradient(135deg, var(--orange), #f7c52d); color:#fff; }
.aca-pi-v3-w-ach .badge:not(.locked) { box-shadow:0 4px 12px rgba(0,0,0,.12); }
.aca-pi-v3-w-ach .badge:hover { transform:scale(1.06); }
.aca-pi-v3-w-ach .badge[data-tooltip]::after {
content:attr(data-tooltip); position:absolute; bottom:calc(100% + 6px); left:50%;
transform:translateX(-50%); background:#1a1a1f; color:#fff;
font-size:.66rem; font-weight:600; padding:5px 10px;
border-radius:6px; white-space:nowrap;
opacity:0; pointer-events:none; transition:opacity .15s;
z-index:10;
}
.aca-pi-v3-w-ach .badge:hover[data-tooltip]::after { opacity:1; }
/* Unlock toast (animation) */
@keyframes acaPiV3AchUnlock {
0% { transform:translateX(-50%) translateY(80px) scale(.9); opacity:0; }
10%, 85% { transform:translateX(-50%) translateY(0) scale(1); opacity:1; }
100% { transform:translateX(-50%) translateY(-20px) scale(.96); opacity:0; }
}
.aca-pi-v3-ach-unlock {
position:fixed; bottom:32px; left:50%; transform:translateX(-50%);
background:var(--surface); color:var(--ink);
border-radius:14px; padding:14px 20px;
box-shadow:var(--shadow-lg);
display:flex; align-items:center; gap:14px;
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
z-index:10005; animation:acaPiV3AchUnlock 4s cubic-bezier(.32,.72,0,1) forwards;
border:1px solid var(--line); max-width:380px;
}
.aca-pi-v3-ach-unlock .icon {
width:46px; height:46px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:1.4rem; flex-shrink:0;
}
.aca-pi-v3-ach-unlock .body { flex:1; min-width:0; }
.aca-pi-v3-ach-unlock .ttl {
font-size:.66rem; color:var(--orange); letter-spacing:1.4px;
text-transform:uppercase; font-weight:800;
}
.aca-pi-v3-ach-unlock .name {
font-size:1rem; font-weight:700; letter-spacing:-.3px;
margin-top:2px;
}
.aca-pi-v3-ach-unlock .desc {
font-size:.78rem; color:var(--ink-3); margin-top:2px; letter-spacing:-.1px;
}
/* ═══════════════════════════════════════════════════════════════
v3.18.0 — SETTINGS SHEET (iOS-style list)
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-settings-modal {
background:var(--bg); border-radius:24px;
max-width:540px; width:100%; max-height:90vh;
overflow:hidden; box-shadow:var(--shadow-lg);
display:flex; flex-direction:column;
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
}
@media (max-width:560px){
.aca-pi-v3-modal-overlay .aca-pi-v3-settings-modal { max-height:96vh; border-radius:18px 18px 0 0; }
}
.aca-pi-v3-set-head {
padding:18px 24px; border-bottom:1px solid var(--line);
display:flex; align-items:center; justify-content:space-between;
background:var(--surface-overlay); backdrop-filter:blur(20px);
position:sticky; top:0; z-index:5;
}
.aca-pi-v3-set-head h2 {
margin:0; font-size:1.1rem; font-weight:700; letter-spacing:-.3px;
}
.aca-pi-v3-set-body { overflow-y:auto; padding:14px 18px 28px; }
.aca-pi-v3-set-group {
margin-bottom:24px;
}
.aca-pi-v3-set-group .glabel {
font-size:.66rem; color:var(--ink-3); letter-spacing:1.6px;
text-transform:uppercase; font-weight:700; padding:0 16px 8px;
}
.aca-pi-v3-set-list {
background:var(--surface); border-radius:14px; overflow:hidden;
box-shadow:var(--shadow);
}
.aca-pi-v3-set-row {
padding:14px 18px; display:flex; align-items:center; gap:14px;
border-bottom:.5px solid var(--line);
}
.aca-pi-v3-set-row:last-child { border-bottom:none; }
.aca-pi-v3-set-row .ico {
width:32px; height:32px; border-radius:8px;
display:flex; align-items:center; justify-content:center;
font-size:1rem; flex-shrink:0;
}
.aca-pi-v3-set-row .body { flex:1; min-width:0; }
.aca-pi-v3-set-row .ttl {
font-size:.95rem; font-weight:500; color:var(--ink); letter-spacing:-.2px;
}
.aca-pi-v3-set-row .sub {
font-size:.75rem; color:var(--ink-3); margin-top:2px; letter-spacing:-.1px;
}
.aca-pi-v3-set-row.clickable { cursor:pointer; transition:background .12s; }
.aca-pi-v3-set-row.clickable:hover { background:var(--bg-soft); }
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-set-row.clickable:hover { background:rgba(255,255,255,.04); }
.aca-pi-v3-set-row .chevron {
color:var(--ink-3); font-size:.9rem;
}
.aca-pi-v3-set-row .value {
font-size:.85rem; color:var(--ink-3); letter-spacing:-.1px;
}
.aca-pi-v3-set-row .small-switch {
position:relative; display:inline-block; width:42px; height:26px; flex-shrink:0;
}
.aca-pi-v3-set-row .small-switch input { opacity:0; width:0; height:0; }
.aca-pi-v3-set-row .small-switch .slider {
position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
background:var(--green); border-radius:26px; transition:.25s;
}
.aca-pi-v3-set-row .small-switch .knob {
position:absolute; height:22px; width:22px; left:2px; bottom:2px;
background:#fff; border-radius:50%; transition:.25s;
box-shadow:0 2px 4px rgba(0,0,0,.2); transform:translateX(16px);
}
.aca-pi-v3-set-row .small-switch input:not(:checked) ~ .slider { background:var(--ink-4); }
.aca-pi-v3[data-theme="dark"] .aca-pi-v3-set-row .small-switch input:not(:checked) ~ .slider { background:rgba(255,255,255,.15); }
.aca-pi-v3-set-row .small-switch input:not(:checked) ~ .knob { transform:translateX(0); }
.aca-pi-v3-set-footnote {
font-size:.72rem; color:var(--ink-3); letter-spacing:-.1px;
padding:8px 18px 0; line-height:1.45;
}
/* ═══════════════════════════════════════════════════════════════
v3.19.0 — WIDGETS REORDER (drag & drop)
═══════════════════════════════════════════════════════════════ */
/* Wiggle iOS-style animation quand grid en edit mode */
.aca-pi-v3-grid.is-edit-widgets .aca-pi-v3-w {
animation: acaPiV3Wiggle .42s ease-in-out infinite alternate;
cursor: grab;
user-select: none;
-webkit-user-select: none;
touch-action: none;
transition: transform .2s cubic-bezier(.32,.72,0,1);
}
.aca-pi-v3-grid.is-edit-widgets .aca-pi-v3-w:nth-child(odd) {
animation-direction: alternate-reverse;
}
.aca-pi-v3-grid.is-edit-widgets .aca-pi-v3-w:nth-child(3n) {
animation-delay: .07s;
}
.aca-pi-v3-grid.is-edit-widgets .aca-pi-v3-w:nth-child(2n) {
animation-delay: .14s;
}
.aca-pi-v3-grid.is-edit-widgets .aca-pi-v3-w.is-dragging {
animation: none !important;
cursor: grabbing;
opacity: .88;
transform: scale(1.04) rotate(0) !important;
box-shadow: 0 16px 48px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.18);
z-index: 100;
}
@keyframes acaPiV3Wiggle {
0% { transform: rotate(-.55deg); }
100% { transform: rotate(.55deg); }
}
/* Floating "Terminé" pill bottom-center */
.aca-pi-v3-edit-pill {
position: fixed;
bottom: calc(96px + env(safe-area-inset-bottom));
left: 50%;
transform: translateX(-50%);
background: var(--ink);
color: #fff;
padding: 13px 30px;
border-radius: 999px;
font-family: inherit;
font-size: .98rem;
font-weight: 600;
letter-spacing: -.2px;
border: none;
cursor: pointer;
z-index: 9999;
box-shadow: 0 10px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18);
display: flex;
align-items: center;
gap: 8px;
animation: acaPiV3PillUp .32s cubic-bezier(.32,.72,0,1);
-webkit-tap-highlight-color: transparent;
}
.aca-pi-v3-edit-pill:active {
transform: translateX(-50%) scale(.97);
}
.aca-pi-v3-edit-pill[data-theme="dark"] {
background: #fff;
color: var(--ink);
}
@keyframes acaPiV3PillUp {
from { transform: translate(-50%, 40px); opacity: 0; }
to { transform: translate(-50%, 0); opacity: 1; }
}
/* Desktop : pill bottom mais sans tabbar offset */
@media (min-width: 721px) {
.aca-pi-v3-edit-pill {
bottom: calc(32px + env(safe-area-inset-bottom));
}
}
/* ═══════════════════════════════════════════════════════════════
v3.20.0 — COFFRE TAB DANS /mon-academie/ (look V3 Bento)
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-coffre-tab {
background: var(--bg);
color: var(--ink);
border-radius: 16px;
padding: 28px 28px 32px;
font-family: inherit;
}
.aca-pi-v3-coffre-tab[data-theme="dark"] {
background: var(--bg);
}
.aca-pi-v3-coffre-tab-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px; margin-bottom: 20px; flex-wrap: wrap;
}
.aca-pi-v3-coffre-tab-head h1 {
margin: 0;
font-size: 2.1rem;
font-weight: 800;
letter-spacing: -.9px;
line-height: 1;
color: var(--ink);
}
.aca-pi-v3-coffre-tab-head .sub {
margin: 8px 0 0;
font-size: .92rem;
color: var(--ink-3);
letter-spacing: -.15px;
}
.aca-pi-v3-coffre-tab-stats {
display: flex; gap: 32px; padding: 16px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin-bottom: 22px; flex-wrap: wrap;
}
.aca-pi-v3-coffre-tab-stats .stat .n {
font-size: 1.5rem; font-weight: 700;
letter-spacing: -.5px; font-variant-numeric: tabular-nums;
color: var(--ink);
line-height: 1;
}
.aca-pi-v3-coffre-tab-stats .stat .l {
font-size: .68rem; color: var(--ink-3);
letter-spacing: .4px; text-transform: uppercase;
font-weight: 700; margin-top: 4px;
}
.aca-pi-v3-coffre-tab-filters {
display: flex; gap: 10px; flex-wrap: wrap;
margin-bottom: 22px; align-items: center;
}
.aca-pi-v3-coffre-tab-filters .search-wrap {
position: relative; flex: 1; min-width: 220px;
}
.aca-pi-v3-coffre-tab-filters .search-icon {
position: absolute; left: 12px; top: 50%;
transform: translateY(-50%);
font-size: .85rem; opacity: .55;
pointer-events: none;
}
.aca-pi-v3-coffre-tab-filters input[type="search"] {
width: 100%;
padding: 11px 14px 11px 36px;
background: var(--bg-soft);
border: 1px solid transparent;
border-radius: 11px;
font-family: inherit;
font-size: .92rem;
color: var(--ink);
outline: none;
transition: background .15s, border-color .15s, box-shadow .15s;
-webkit-appearance: none;
}
.aca-pi-v3-coffre-tab-filters input[type="search"]:focus {
background: var(--bg);
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(255,45,135,.12);
}
.aca-pi-v3-coffre-tab-filters select {
padding: 11px 36px 11px 14px;
background: var(--bg-soft);
border: 1px solid transparent;
border-radius: 11px;
font-family: inherit;
font-size: .88rem;
color: var(--ink);
cursor: pointer;
outline: none;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
transition: background-color .15s;
}
.aca-pi-v3-coffre-tab-filters select:hover {
background-color: var(--bg);
}
.aca-pi-v3-coffre-tab-empty {
text-align: center;
padding: 60px 20px;
color: var(--ink-3);
}
.aca-pi-v3-coffre-tab-empty .ico {
font-size: 3rem; margin-bottom: 16px; opacity: .35;
filter: grayscale(.5);
}
.aca-pi-v3-coffre-tab-empty .ttl {
margin: 0; font-size: 1.1rem; font-weight: 600;
color: var(--ink); letter-spacing: -.25px;
}
.aca-pi-v3-coffre-tab-empty .sub {
margin: 8px 0 0; font-size: .92rem;
color: var(--ink-3); letter-spacing: -.1px;
}
.aca-pi-v3-coffre-tab-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.aca-pi-v3-coffre-card {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 14px;
padding: 18px;
transition: transform .2s cubic-bezier(.32,.72,0,1), box-shadow .2s, border-color .2s;
cursor: pointer;
position: relative;
overflow: hidden;
}
.aca-pi-v3-coffre-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,.07);
border-color: var(--ink-4);
}
.aca-pi-v3-coffre-card.is-pinned {
border-color: rgba(255,159,10,.4);
background: linear-gradient(180deg, rgba(255,159,10,.04), transparent 40%);
}
.aca-pi-v3-coffre-card .card-meta {
display: flex; align-items: center; gap: 8px;
font-size: .72rem; color: var(--ink-3);
font-weight: 500; letter-spacing: -.1px;
margin-bottom: 10px;
}
.aca-pi-v3-coffre-card .card-meta .dot { opacity: .5; }
.aca-pi-v3-coffre-card .card-meta .pin {
margin-left: auto; color: var(--orange);
font-size: .9rem;
}
.aca-pi-v3-coffre-card .card-title {
margin: 0 0 6px;
font-size: 1.02rem;
font-weight: 600;
letter-spacing: -.3px;
line-height: 1.3;
color: var(--ink);
}
.aca-pi-v3-coffre-card .card-body {
font-size: .86rem;
color: var(--ink-2);
line-height: 1.5;
letter-spacing: -.1px;
margin: 0;
white-space: pre-wrap;
}
.aca-pi-v3-coffre-card .card-img {
width: 100%; height: 140px; object-fit: cover;
border-radius: 10px; margin-top: 12px; display: block;
}
.aca-pi-v3-coffre-card .card-foot {
display: flex; align-items: center; gap: 8px;
margin-top: 14px; padding-top: 12px;
border-top: 1px solid var(--line);
font-size: .72rem; color: var(--ink-3);
letter-spacing: -.1px;
}
.aca-pi-v3-coffre-card .card-foot .mission {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
flex: 1; min-width: 0;
}
.aca-pi-v3-coffre-card .card-foot .cohort-pill {
background: var(--bg-soft);
padding: 3px 8px;
border-radius: 6px;
flex-shrink: 0;
font-weight: 600;
font-size: .68rem;
color: var(--ink-2);
}
.aca-pi-v3-coffre-card .card-tags {
display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px;
}
.aca-pi-v3-coffre-card .card-tags .tag {
background: rgba(168,85,247,.12);
color: var(--purple);
font-size: .65rem;
padding: 3px 8px;
border-radius: 6px;
font-weight: 700;
letter-spacing: .2px;
}
.aca-pi-v3-coffre-tab .aca-pi-coffre-noresults {
text-align: center;
padding: 40px 20px;
color: var(--ink-3);
font-size: .95rem;
letter-spacing: -.1px;
}
/* Mobile */
@media (max-width: 600px) {
.aca-pi-v3-coffre-tab { padding: 18px 16px 22px; }
.aca-pi-v3-coffre-tab-head h1 { font-size: 1.7rem; }
.aca-pi-v3-coffre-tab-stats { gap: 20px; }
.aca-pi-v3-coffre-tab-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════
v3.21.0 — OVERRIDE LEGACY [aca_pi_my_missions_v2] AU LOOK V3
Le widget legacy utilise des inline styles dark mode (#13131f).
Le wrapper .aca-pi-v3-mymissions-wrap force la palette V3 Bento.
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-mymissions-wrap {
/* Hérite des tokens V3 via parent .aca-pi-v3 */
margin: 16px 0;
}
/* Root du widget legacy */
.aca-pi-v3-mymissions-wrap .aca-pi-my-missions {
background: var(--bg) !important;
color: var(--ink) !important;
border: 1px solid var(--line) !important;
border-radius: 16px !important;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
padding: 24px !important;
margin: 0 !important;
}
/* Header */
.aca-pi-v3-mymissions-wrap .aca-pi-my-missions > div:first-child {
border-bottom-color: var(--line) !important;
}
.aca-pi-v3-mymissions-wrap .aca-pi-my-missions h3 {
color: var(--ink) !important;
font-size: 1.15rem !important;
font-weight: 700 !important;
letter-spacing: -.35px !important;
}
.aca-pi-v3-mymissions-wrap .aca-pi-my-missions h3 > span:first-child {
background: var(--accent) !important;
height: 18px !important;
width: 4px !important;
border-radius: 3px !important;
}
/* Phrase smart */
.aca-pi-v3-mymissions-wrap .aca-pi-my-missions [style*="color:#b0b0c8"] {
color: var(--ink-2) !important;
}
.aca-pi-v3-mymissions-wrap .aca-pi-my-missions [style*="color:#7a7a92"],
.aca-pi-v3-mymissions-wrap .aca-pi-my-missions [style*="color:#888"] {
color: var(--ink-3) !important;
}
/* Tabs */
.aca-pi-v3-mymissions-wrap .acapi-tab {
background: var(--bg-soft) !important;
color: var(--ink-2) !important;
border-color: transparent !important;
border-radius: 10px !important;
padding: 8px 14px !important;
font-weight: 600 !important;
letter-spacing: -.1px !important;
}
.aca-pi-v3-mymissions-wrap .acapi-tab:hover {
background: var(--bg) !important;
color: var(--ink) !important;
}
.aca-pi-v3-mymissions-wrap .acapi-tab-active {
background: var(--accent) !important;
color: #fff !important;
}
.aca-pi-v3-mymissions-wrap .acapi-tab-active:hover {
background: var(--accent) !important;
filter: brightness(1.08);
}
/* Mission cards */
.aca-pi-v3-mymissions-wrap .acapi-mission-card {
background: var(--bg) !important;
border: 1px solid var(--line) !important;
border-radius: 14px !important;
margin-bottom: 10px !important;
transition: transform .2s cubic-bezier(.32,.72,0,1), box-shadow .2s, border-color .2s !important;
}
.aca-pi-v3-mymissions-wrap .acapi-mission-card:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0,0,0,.05);
border-color: var(--ink-4) !important;
}
.aca-pi-v3-mymissions-wrap .acapi-mission-card.acapi-expanded {
background: var(--bg-soft) !important;
border-color: var(--accent) !important;
}
.aca-pi-v3-mymissions-wrap .acapi-card-header {
color: var(--ink) !important;
}
.aca-pi-v3-mymissions-wrap .acapi-card-header h4,
.aca-pi-v3-mymissions-wrap .acapi-card-header span,
.aca-pi-v3-mymissions-wrap .acapi-card-header strong {
color: var(--ink) !important;
}
.aca-pi-v3-mymissions-wrap .acapi-card-body {
color: var(--ink-2) !important;
}
.aca-pi-v3-mymissions-wrap .acapi-card-body [style*="color:white"],
.aca-pi-v3-mymissions-wrap .acapi-card-body [style*="color:#fff"] {
color: var(--ink) !important;
}
/* Progress bars background */
.aca-pi-v3-mymissions-wrap .aca-pi-my-missions [style*="rgba(255,255,255,.06)"],
.aca-pi-v3-mymissions-wrap .aca-pi-my-missions [style*="rgba(255,255,255,.08)"],
.aca-pi-v3-mymissions-wrap .aca-pi-my-missions [style*="rgba(255,255,255,.05)"] {
background-color: var(--bg-soft) !important;
}
/* Caret */
.aca-pi-v3-mymissions-wrap .acapi-caret {
color: var(--ink-3) !important;
}
.aca-pi-v3-mymissions-wrap .acapi-card-header:hover .acapi-caret {
color: var(--accent) !important;
}
/* CTA Voir la mission complète */
.aca-pi-v3-mymissions-wrap .aca-pi-my-missions a[href] {
background: var(--bg-soft) !important;
color: var(--accent) !important;
border: 1px solid var(--line) !important;
transition: background .15s, transform .15s !important;
}
.aca-pi-v3-mymissions-wrap .aca-pi-my-missions a[href]:hover {
background: var(--bg) !important;
transform: translateY(-1px);
border-color: var(--accent) !important;
}
/* Mobile */
@media (max-width: 600px) {
.aca-pi-v3-mymissions-wrap .aca-pi-my-missions {
padding: 16px !important;
border-radius: 14px !important;
}
}
/* Quand on est dans /mon-academie/ (tab Missions) — pas de margin externe car déjà dans un pane */
.ma-zone-pane .aca-pi-v3-mymissions-wrap,
[data-zone-pane="missions"] .aca-pi-v3-mymissions-wrap {
margin: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════
v3.22.0 — EXPORT PDF BUTTON (vue Coffre)
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-view-head-coffre {
display: flex !important;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.aca-pi-v3-export-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--bg-soft);
color: var(--ink);
border: 1px solid var(--line);
border-radius: 999px;
font-family: inherit;
font-size: .82rem;
font-weight: 600;
letter-spacing: -.1px;
cursor: pointer;
transition: background .15s, border-color .15s, transform .15s;
-webkit-tap-highlight-color: transparent;
flex-shrink: 0;
}
.aca-pi-v3-export-btn:hover {
background: var(--bg);
border-color: var(--accent);
color: var(--accent);
transform: translateY(-1px);
}
.aca-pi-v3-export-btn:active {
transform: translateY(0) scale(.97);
}
.aca-pi-v3-export-btn .lbl {
letter-spacing: .3px;
}
/* Mobile : icône seule pour économiser place */
@media (max-width: 480px) {
.aca-pi-v3-export-btn { padding: 8px 12px; }
.aca-pi-v3-export-btn .lbl { display: none; }
}
/* ═══════════════════════════════════════════════════════════════
v3.24.0 — VUE COFFRE V3 : Stats + Search + Filter chips
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-coffre-stats {
display: flex;
gap: 28px;
padding: 14px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
flex-wrap: wrap;
}
.aca-pi-v3-coffre-stats[hidden] { display: none; }
.aca-pi-v3-coffre-stats .stat .n {
font-size: 1.45rem;
font-weight: 700;
letter-spacing: -.5px;
font-variant-numeric: tabular-nums;
color: var(--ink);
line-height: 1;
}
.aca-pi-v3-coffre-stats .stat .l {
font-size: .66rem;
color: var(--ink-3);
letter-spacing: .4px;
text-transform: uppercase;
font-weight: 700;
margin-top: 4px;
}
.aca-pi-v3-coffre-toolbar {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 18px;
}
.aca-pi-v3-coffre-toolbar[hidden] { display: none; }
.aca-pi-v3-coffre-search-wrap {
position: relative;
flex: 1;
min-width: 220px;
}
.aca-pi-v3-coffre-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: .82rem;
opacity: .55;
pointer-events: none;
}
.aca-pi-v3-coffre-search {
width: 100%;
padding: 10px 14px 10px 36px;
background: var(--bg-soft);
border: 1px solid transparent;
border-radius: 11px;
font-family: inherit;
font-size: .9rem;
color: var(--ink);
outline: none;
transition: background .15s, border-color .15s, box-shadow .15s;
-webkit-appearance: none;
}
.aca-pi-v3-coffre-search:focus {
background: var(--bg);
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(255,45,135,.12);
}
.aca-pi-v3-coffre-filters {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
}
.aca-pi-v3-coffre-chip {
background: var(--bg-soft);
color: var(--ink-2);
border: 1px solid transparent;
border-radius: 999px;
padding: 7px 13px;
font-family: inherit;
font-size: .78rem;
font-weight: 600;
letter-spacing: -.1px;
cursor: pointer;
transition: background .15s, color .15s, transform .15s;
-webkit-tap-highlight-color: transparent;
}
.aca-pi-v3-coffre-chip:hover {
background: var(--bg);
color: var(--ink);
}
.aca-pi-v3-coffre-chip.is-active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.aca-pi-v3-coffre-chip.is-active:hover {
background: var(--accent);
filter: brightness(1.08);
}
.aca-pi-v3-coffre-chip:active {
transform: scale(.96);
}
/* Mobile : stats compacts + filters wrap */
@media (max-width: 600px) {
.aca-pi-v3-coffre-stats { gap: 18px; padding: 12px 0; }
.aca-pi-v3-coffre-stats .stat .n { font-size: 1.2rem; }
.aca-pi-v3-coffre-toolbar { flex-direction: column; align-items: stretch; }
.aca-pi-v3-coffre-search-wrap { min-width: auto; }
.aca-pi-v3-coffre-filters { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.aca-pi-v3-coffre-chip { flex-shrink: 0; }
}
/* ═══════════════════════════════════════════════════════════════
v3.25.0 — WIDGET « MES MISSIONS » V3 NATIVE
Remplace le legacy [aca_pi_my_missions_v2] dark-mode quand au moins
une cohorte de l'enfant a le flag V3 Bento activé.
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-mymissions-native {
background: var(--bg);
color: var(--ink);
border-radius: 16px;
padding: 24px 26px 28px;
margin: 16px 0;
border: 1px solid var(--line);
box-shadow: 0 2px 12px rgba(0,0,0,.04);
font-family: inherit;
}
/* Header */
.aca-pi-v3-mm-head {
display: flex; align-items: flex-end;
justify-content: space-between; gap: 14px;
margin-bottom: 18px; flex-wrap: wrap;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.aca-pi-v3-mm-head h2 {
margin: 0;
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -.7px;
line-height: 1;
color: var(--ink);
}
.aca-pi-v3-mm-head .sub {
margin: 6px 0 0;
font-size: .85rem;
color: var(--ink-3);
letter-spacing: -.1px;
}
.aca-pi-v3-mm-counter {
display: flex; align-items: baseline; gap: 6px;
}
.aca-pi-v3-mm-counter .n {
font-size: 1.7rem; font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -.6px;
color: var(--accent);
line-height: 1;
}
.aca-pi-v3-mm-counter .l {
font-size: .7rem; color: var(--ink-3);
text-transform: uppercase; letter-spacing: 1.2px;
font-weight: 700;
}
/* Empty state */
.aca-pi-v3-mm-empty {
text-align: center;
padding: 50px 20px;
color: var(--ink-3);
}
.aca-pi-v3-mm-empty .ico {
font-size: 2.6rem; opacity: .35; margin-bottom: 14px;
}
.aca-pi-v3-mm-empty .ttl {
margin: 0; font-size: 1rem; font-weight: 600;
color: var(--ink); letter-spacing: -.2px;
}
.aca-pi-v3-mm-empty .sub {
margin: 6px 0 0; font-size: .85rem;
color: var(--ink-3); letter-spacing: -.1px;
}
/* Group par cohorte */
.aca-pi-v3-mm-group { margin-bottom: 24px; }
.aca-pi-v3-mm-group:last-child { margin-bottom: 0; }
.aca-pi-v3-mm-group-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 10px;
padding: 0 2px;
}
.aca-pi-v3-mm-group-head .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}
.aca-pi-v3-mm-group-head h3 {
margin: 0; flex: 1;
font-size: .82rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ink-2);
}
.aca-pi-v3-mm-group-head .count {
font-size: .68rem;
color: var(--ink-3);
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
}
/* Cards */
.aca-pi-v3-mm-cards {
display: grid;
gap: 10px;
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.aca-pi-v3-mm-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
.aca-pi-v3-mm-cards { grid-template-columns: repeat(3, 1fr); }
}
.aca-pi-v3-mm-card {
--prio: var(--ink-3);
display: block;
background: var(--bg);
border: 1px solid var(--line);
border-left: 3px solid var(--prio);
border-radius: 12px;
padding: 14px 16px;
text-decoration: none;
color: inherit;
transition: transform .2s cubic-bezier(.32,.72,0,1), box-shadow .2s, border-color .2s;
position: relative;
}
.aca-pi-v3-mm-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,.07);
border-color: var(--ink-4);
border-left-color: var(--prio);
}
.aca-pi-v3-mm-card.is-done {
opacity: .65;
--prio: var(--green);
}
.aca-pi-v3-mm-card.is-done .title { text-decoration: line-through; text-decoration-color: var(--ink-4); }
.aca-pi-v3-mm-card.is-progress { --prio: var(--accent); }
.aca-pi-v3-mm-card.is-todo { --prio: var(--ink-4); }
.aca-pi-v3-mm-card .head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 8px;
}
.aca-pi-v3-mm-card .domain-ico {
font-size: 1rem;
flex-shrink: 0;
}
.aca-pi-v3-mm-card .title {
flex: 1; min-width: 0;
font-size: .95rem;
font-weight: 700;
letter-spacing: -.25px;
line-height: 1.3;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
}
.aca-pi-v3-mm-card .badge {
font-size: .68rem;
font-weight: 700;
letter-spacing: -.1px;
padding: 2px 7px;
border-radius: 5px;
flex-shrink: 0;
}
.aca-pi-v3-mm-card .badge.done {
background: rgba(52,199,89,.16);
color: var(--green);
}
.aca-pi-v3-mm-card .badge.progress {
background: rgba(255,45,135,.12);
color: var(--accent);
}
.aca-pi-v3-mm-card .next-step {
display: flex; align-items: baseline; gap: 8px;
margin: 8px 0;
font-size: .8rem;
color: var(--ink-2);
letter-spacing: -.1px;
line-height: 1.4;
}
.aca-pi-v3-mm-card .next-step-label {
font-size: .62rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--ink-3);
font-weight: 700;
flex-shrink: 0;
}
.aca-pi-v3-mm-card .next-step-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Progress bar */
.aca-pi-v3-mm-card .progress-bar {
height: 4px;
background: var(--bg-soft);
border-radius: 3px;
margin: 10px 0 8px;
overflow: hidden;
}
.aca-pi-v3-mm-card .progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent), #ff6ba6);
border-radius: 3px;
transition: width .35s cubic-bezier(.32,.72,0,1);
}
.aca-pi-v3-mm-card.is-done .progress-fill {
background: var(--green);
}
.aca-pi-v3-mm-card .foot {
display: flex; align-items: center; justify-content: space-between;
font-size: .68rem;
color: var(--ink-3);
letter-spacing: -.05px;
}
.aca-pi-v3-mm-card .foot .steps {
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.aca-pi-v3-mm-card .state-tag {
font-weight: 700;
letter-spacing: .4px;
text-transform: uppercase;
}
.aca-pi-v3-mm-card .state-tag.done { color: var(--green); }
.aca-pi-v3-mm-card .state-tag.progress { color: var(--accent); }
.aca-pi-v3-mm-card .state-tag.todo { color: var(--ink-3); }
/* Mobile */
@media (max-width: 600px) {
.aca-pi-v3-mymissions-native { padding: 18px 18px 22px; border-radius: 14px; }
.aca-pi-v3-mm-head h2 { font-size: 1.35rem; }
.aca-pi-v3-mm-card { padding: 12px 14px; }
}
/* ═══════════════════════════════════════════════════════════════
v3.26.0 — PARENT DASHBOARD V3 native + EMPTY STATE V3
═══════════════════════════════════════════════════════════════ */
/* Parent Dashboard root */
.aca-pi-v3-parent-dash {
background: var(--bg);
color: var(--ink);
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
margin: 16px 0;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
font-family: inherit;
}
.aca-pi-v3-parent-dash-head {
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.aca-pi-v3-parent-dash-head h2 {
margin: 0;
font-size: 1.65rem;
font-weight: 800;
letter-spacing: -.6px;
line-height: 1;
color: var(--ink);
}
.aca-pi-v3-parent-dash-head .sub {
margin: 8px 0 0;
font-size: .9rem;
color: var(--ink-3);
letter-spacing: -.15px;
}
.aca-pi-v3-parent-dash-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
}
/* Parent card */
.aca-pi-v3-parent-card {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 14px;
padding: 18px;
transition: transform .2s cubic-bezier(.32,.72,0,1), box-shadow .2s, border-color .2s;
}
.aca-pi-v3-parent-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,.06);
border-color: var(--ink-4);
}
.aca-pi-v3-parent-card-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.aca-pi-v3-parent-card-head .avatar {
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid rgba(255, 45, 135, .35);
flex-shrink: 0;
object-fit: cover;
background: var(--bg-soft);
}
.aca-pi-v3-parent-card-head .meta {
flex: 1;
min-width: 0;
}
.aca-pi-v3-parent-card-head .name {
font-weight: 700;
font-size: 1rem;
letter-spacing: -.25px;
color: var(--ink);
line-height: 1.3;
}
.aca-pi-v3-parent-card-head .sub {
font-size: .68rem;
color: var(--ink-3);
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 700;
margin-top: 4px;
}
/* Stats grid 2x2 */
.aca-pi-v3-parent-card-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 12px;
}
.aca-pi-v3-parent-card-stats .stat {
padding: 11px;
background: var(--bg-soft);
border-radius: 10px;
text-align: center;
border: 1px solid transparent;
transition: border-color .12s;
}
.aca-pi-v3-parent-card-stats .stat:hover {
border-color: var(--line);
}
.aca-pi-v3-parent-card-stats .stat .n {
font-size: 1.35rem;
font-weight: 800;
line-height: 1;
letter-spacing: -.4px;
font-variant-numeric: tabular-nums;
}
.aca-pi-v3-parent-card-stats .stat .l {
font-size: .6rem;
color: var(--ink-3);
letter-spacing: .5px;
text-transform: uppercase;
margin-top: 6px;
font-weight: 700;
}
.aca-pi-v3-parent-card-stats .stat-streak .n { color: var(--orange); }
.aca-pi-v3-parent-card-stats .stat-streak { background: linear-gradient(135deg, rgba(255,140,0,.08), rgba(255,45,135,.06)); }
.aca-pi-v3-parent-card-stats .stat-pfeq .n { color: var(--blue); }
.aca-pi-v3-parent-card-stats .stat-pfeq { background: rgba(10,132,255,.06); }
.aca-pi-v3-parent-card-stats .stat-steps .n { color: var(--green); }
.aca-pi-v3-parent-card-stats .stat-steps { background: rgba(52,199,89,.06); }
.aca-pi-v3-parent-card-stats .stat-mood .n {
font-size: 1.05rem;
letter-spacing: 1px;
}
.aca-pi-v3-parent-card-stats .stat-mood { background: rgba(168,85,247,.06); }
.aca-pi-v3-parent-card-stats .stat-mood .l { margin-top: 9px; }
/* Alerts and OK banner */
.aca-pi-v3-parent-card-alerts {
background: rgba(255, 69, 58, .06);
border: 1px solid rgba(255, 69, 58, .25);
border-radius: 10px;
padding: 10px 12px;
}
.aca-pi-v3-parent-card-alerts .alert {
font-size: .8rem;
color: var(--red);
line-height: 1.5;
letter-spacing: -.1px;
}
.aca-pi-v3-parent-card-alerts .alert + .alert {
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid rgba(255, 69, 58, .12);
}
.aca-pi-v3-parent-card-ok {
background: rgba(52, 199, 89, .06);
border: 1px solid rgba(52, 199, 89, .22);
border-radius: 10px;
padding: 10px 12px;
font-size: .8rem;
color: var(--green);
font-weight: 600;
letter-spacing: -.1px;
}
/* Mobile */
@media (max-width: 600px) {
.aca-pi-v3-parent-dash { padding: 18px; border-radius: 14px; }
.aca-pi-v3-parent-dash-head h2 { font-size: 1.35rem; }
.aca-pi-v3-parent-dash-grid { grid-template-columns: 1fr; }
}
/* Empty state no-cohort */
.aca-pi-v3-empty-state-card {
background: var(--bg);
color: var(--ink);
border: 1px solid var(--line);
border-radius: 14px;
padding: 36px 24px;
margin: 16px 0;
text-align: center;
font-family: inherit;
}
.aca-pi-v3-empty-state-card .aca-pi-v3-empty-state-inner {
max-width: 420px;
margin: 0 auto;
}
.aca-pi-v3-empty-state-card .ico {
font-size: 2.6rem;
opacity: .55;
margin-bottom: 14px;
filter: grayscale(.4);
}
.aca-pi-v3-empty-state-card h3 {
margin: 0 0 8px;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -.3px;
color: var(--ink);
}
.aca-pi-v3-empty-state-card p {
margin: 0;
font-size: .9rem;
color: var(--ink-3);
line-height: 1.55;
letter-spacing: -.1px;
}
/* ═══════════════════════════════════════════════════════════════
v3.29.0 — VUE MISSIONS V3 : badges + states (takeable/full/locked)
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-missions-section {
grid-column: 1/-1;
margin: 18px 0 4px;
font-size: .8rem;
font-weight: 700;
color: var(--ink-3);
letter-spacing: 1.4px;
text-transform: uppercase;
}
.aca-pi-v3-missions-section:first-child { margin-top: 0; }
.aca-pi-v3-mtile {
position: relative;
}
.aca-pi-v3-mtile-badge {
position: absolute;
top: 12px;
right: 12px;
font-size: .65rem;
font-weight: 700;
letter-spacing: .3px;
padding: 3px 8px;
border-radius: 999px;
z-index: 2;
}
.aca-pi-v3-mtile-badge.badge-take {
background: var(--accent);
color: #fff;
box-shadow: 0 2px 8px rgba(255,45,135,.3);
}
.aca-pi-v3-mtile-badge.badge-full {
background: var(--bg-soft);
color: var(--ink-3);
}
.aca-pi-v3-mtile-badge.badge-locked {
background: rgba(255,159,10,.15);
color: var(--orange);
}
.aca-pi-v3-mtile-badge.badge-done {
background: rgba(52,199,89,.15);
color: var(--green);
}
.aca-pi-v3-mtile-badge.badge-mine {
background: rgba(10,132,255,.15);
color: var(--blue);
}
/* States visuels */
.aca-pi-v3-mtile.is-takeable {
border-color: rgba(255,45,135,.25);
background: linear-gradient(180deg, rgba(255,45,135,.03), transparent 50%);
cursor: pointer;
}
.aca-pi-v3-mtile.is-takeable:hover {
border-color: var(--accent);
box-shadow: 0 8px 24px rgba(255,45,135,.12);
}
.aca-pi-v3-mtile.is-locked {
opacity: .55;
background: var(--bg-soft);
}
.aca-pi-v3-mtile.is-locked:hover {
opacity: .8;
}
/* ═══════════════════════════════════════════════════════════════
v3.30.0 — COMMENTAIRES MISSION + ATTRIBUTION ÉTAPE
═══════════════════════════════════════════════════════════════ */
/* Step attribution (avatar stack + bouton + dans la step) */
.aca-pi-v3-step-attr {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
}
.aca-pi-v3-step-assignees {
display: flex;
gap: -4px;
}
.aca-pi-v3-step-assignees img,
.aca-pi-v3-step-assignees .av-letter {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid var(--bg);
background: var(--bg-soft);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .7rem;
font-weight: 700;
color: var(--ink-2);
margin-left: -4px;
object-fit: cover;
}
.aca-pi-v3-step-assignees img:first-child,
.aca-pi-v3-step-assignees .av-letter:first-child { margin-left: 0; }
.aca-pi-v3-step-assign-btn {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px dashed var(--ink-4);
background: transparent;
color: var(--ink-3);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
padding: 0;
line-height: 1;
margin-left: 4px;
transition: all .15s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.aca-pi-v3-step-assign-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: rgba(255,45,135,.06);
transform: scale(1.1);
}
/* Assign popover */
.aca-pi-v3-assign-popover {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 14px 40px rgba(0,0,0,.18);
padding: 6px;
min-width: 240px;
max-height: 320px;
overflow-y: auto;
z-index: 99999;
animation: acaPiV3PopoverIn .15s ease;
}
@keyframes acaPiV3PopoverIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.aca-pi-v3-assign-popover-head {
padding: 8px 12px;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--ink-3);
}
.aca-pi-v3-assign-popover-row {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 12px;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
font-family: inherit;
font-size: .9rem;
color: var(--ink);
text-align: left;
transition: background .12s;
}
.aca-pi-v3-assign-popover-row:hover {
background: var(--bg-soft);
}
.aca-pi-v3-assign-popover-row img,
.aca-pi-v3-assign-popover-row .av-letter {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg-soft);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .8rem;
font-weight: 700;
color: var(--ink-2);
object-fit: cover;
flex-shrink: 0;
}
/* Commentaires mission */
.aca-pi-v3-mcomments {
margin-top: 14px;
}
.aca-pi-v3-mcomments-list {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 0;
}
.aca-pi-v3-mcomment {
display: flex;
align-items: flex-start;
gap: 12px;
position: relative;
}
.aca-pi-v3-mcomment .av,
.aca-pi-v3-mcomment .av-letter {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg-soft);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .85rem;
font-weight: 700;
color: var(--ink-2);
flex-shrink: 0;
object-fit: cover;
}
.aca-pi-v3-mcomment .body {
flex: 1;
min-width: 0;
background: var(--bg-soft);
border-radius: 12px;
padding: 10px 14px;
}
.aca-pi-v3-mcomment .body .head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}
.aca-pi-v3-mcomment .body .name {
font-size: .82rem;
font-weight: 700;
color: var(--ink);
letter-spacing: -.15px;
}
.aca-pi-v3-mcomment .body .date {
font-size: .68rem;
color: var(--ink-3);
font-weight: 600;
}
.aca-pi-v3-mcomment .body .text {
margin: 0;
font-size: .9rem;
color: var(--ink);
line-height: 1.5;
letter-spacing: -.1px;
white-space: pre-wrap;
word-break: break-word;
}
.aca-pi-v3-mcomment-del {
background: transparent;
border: none;
color: var(--ink-3);
cursor: pointer;
padding: 4px;
border-radius: 6px;
font-size: .9rem;
opacity: 0;
transition: opacity .15s, color .15s, background .15s;
}
.aca-pi-v3-mcomment:hover .aca-pi-v3-mcomment-del {
opacity: 1;
}
.aca-pi-v3-mcomment-del:hover {
background: rgba(255,69,58,.1);
color: var(--red);
}
/* Form de saisie commentaire */
.aca-pi-v3-mcomment-form {
display: flex;
gap: 8px;
align-items: stretch;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.aca-pi-v3-mcomment-form textarea {
flex: 1;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 11px;
padding: 10px 14px;
font-family: inherit;
font-size: .9rem;
color: var(--ink);
resize: vertical;
min-height: 60px;
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.aca-pi-v3-mcomment-form textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(255,45,135,.12);
}
.aca-pi-v3-mcomment-send {
background: var(--accent);
color: #fff;
border: none;
border-radius: 11px;
padding: 0 22px;
font-family: inherit;
font-size: .88rem;
font-weight: 700;
cursor: pointer;
transition: filter .15s, transform .12s;
flex-shrink: 0;
}
.aca-pi-v3-mcomment-send:hover { filter: brightness(1.08); }
.aca-pi-v3-mcomment-send:active { transform: scale(.97); }
.aca-pi-v3-mcomment-send:disabled {
opacity: .5;
cursor: not-allowed;
}
/* Mobile : form en stack */
@media (max-width: 600px) {
.aca-pi-v3-mcomment-form { flex-direction: column; }
.aca-pi-v3-mcomment-send { padding: 12px; }
}
/* ═══════════════════════════════════════════════════════════════
v3.31.0 — PHOTO PROOF + LIGHTBOX + STEP ATTR EXTRAS
═══════════════════════════════════════════════════════════════ */
/* Bouton 📸 photo-preuve sur step (même style que assign) */
.aca-pi-v3-step-proof-btn {
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px dashed var(--ink-4);
background: transparent;
color: var(--ink-3);
font-size: .8rem;
cursor: pointer;
padding: 0;
line-height: 1;
margin-left: 4px;
transition: all .15s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.aca-pi-v3-step-proof-btn:hover {
border-color: var(--blue);
color: var(--blue);
background: rgba(10,132,255,.06);
transform: scale(1.1);
}
/* Photo proofs thumbnails (inline dans step) */
.aca-pi-v3-step-proofs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 8px;
}
.aca-pi-v3-step-proofs img {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 10px;
border: 1px solid var(--line);
cursor: pointer;
transition: transform .15s, box-shadow .15s;
}
.aca-pi-v3-step-proofs img:hover {
transform: scale(1.04);
box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
/* Lightbox plein écran */
.aca-pi-v3-lightbox-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.95);
z-index: 99998;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 14px;
padding: 40px;
opacity: 0;
transition: opacity .2s ease;
}
.aca-pi-v3-lightbox-overlay.is-open {
opacity: 1;
}
.aca-pi-v3-lightbox-overlay img {
max-width: 100%;
max-height: calc(100vh - 140px);
object-fit: contain;
border-radius: 14px;
box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.aca-pi-v3-lightbox-close {
position: fixed;
top: 20px;
right: 20px;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,.15);
color: #fff;
border: none;
font-size: 1.2rem;
cursor: pointer;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background .15s, transform .15s;
}
.aca-pi-v3-lightbox-close:hover {
background: rgba(255,255,255,.25);
transform: scale(1.05);
}
.aca-pi-v3-lightbox-caption {
background: rgba(255,255,255,.15);
color: #fff;
padding: 10px 18px;
border-radius: 999px;
font-size: .88rem;
max-width: 600px;
text-align: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Bouton secondary dans mh-actions (pour Invite) */
.aca-pi-v3-act.secondary {
background: var(--bg-soft);
color: var(--ink);
border: 1px solid var(--line);
}
.aca-pi-v3-act.secondary:hover {
background: var(--bg);
border-color: var(--accent);
color: var(--accent);
}
/* ═══════════════════════════════════════════════════════════════
v3.32.0 — MOOD CHECK + REORDER STEPS
═══════════════════════════════════════════════════════════════ */
/* Bouton Réorganiser dans le titre Étapes */
.aca-pi-v3-mw-title-with-action {
display: flex !important;
align-items: center;
gap: 10px;
}
.aca-pi-v3-reorder-btn {
margin-left: auto;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 999px;
padding: 4px 14px;
font-family: inherit;
font-size: .82rem;
font-weight: 700;
color: var(--ink-2);
cursor: pointer;
transition: all .15s;
}
.aca-pi-v3-reorder-btn:hover {
background: var(--bg);
border-color: var(--accent);
color: var(--accent);
}
/* Step reorder mode (wiggle animation) */
.aca-pi-v3-mw.is-reordering .aca-pi-v3-step {
animation: acaPiV3StepWiggle .42s ease-in-out infinite alternate;
cursor: grab;
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
.aca-pi-v3-mw.is-reordering .aca-pi-v3-step:nth-child(odd) {
animation-direction: alternate-reverse;
}
.aca-pi-v3-mw.is-reordering .aca-pi-v3-step.is-dragging {
animation: none !important;
cursor: grabbing;
opacity: .85;
transform: scale(1.03) !important;
box-shadow: 0 10px 32px rgba(0,0,0,.18);
z-index: 10;
}
@keyframes acaPiV3StepWiggle {
0% { transform: rotate(-.4deg); }
100% { transform: rotate(.4deg); }
}
/* Mood check overlay (bottom sheet style) */
.aca-pi-v3-mood-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.4);
z-index: 99997;
display: flex;
align-items: flex-end;
justify-content: center;
opacity: 0;
transition: opacity .22s ease;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.aca-pi-v3-mood-overlay.is-open {
opacity: 1;
}
.aca-pi-v3-mood-sheet {
background: var(--bg);
border-radius: 24px 24px 0 0;
padding: 24px 28px 40px;
max-width: 480px;
width: 100%;
text-align: center;
transform: translateY(100%);
transition: transform .32s cubic-bezier(.32,.72,0,1);
padding-bottom: calc(40px + env(safe-area-inset-bottom));
}
.aca-pi-v3-mood-overlay.is-open .aca-pi-v3-mood-sheet {
transform: translateY(0);
}
.aca-pi-v3-mood-sheet h3 {
margin: 0 0 22px;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: -.3px;
color: var(--ink);
}
.aca-pi-v3-mood-row {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 18px;
}
.aca-pi-v3-mood-btn {
flex: 1;
background: var(--bg-soft);
border: 2px solid transparent;
border-radius: 16px;
padding: 14px 8px;
font-family: inherit;
cursor: pointer;
transition: all .15s;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.aca-pi-v3-mood-btn:hover {
background: var(--bg);
border-color: var(--accent);
transform: translateY(-2px);
}
.aca-pi-v3-mood-btn .emoji {
font-size: 2.2rem;
line-height: 1;
}
.aca-pi-v3-mood-btn .lbl {
font-size: .78rem;
color: var(--ink-2);
font-weight: 600;
letter-spacing: -.1px;
}
.aca-pi-v3-mood-skip {
background: transparent;
border: none;
color: var(--ink-3);
font-family: inherit;
font-size: .88rem;
cursor: pointer;
padding: 8px;
font-weight: 500;
}
.aca-pi-v3-mood-skip:hover { color: var(--ink); }
/* ═══════════════════════════════════════════════════════════════
v3.33.0 — PRIORITY OVERRIDE PERSO + REFLECTION PROMPT
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-priority-row {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.aca-pi-v3-priority-row .lbl {
font-size: .78rem;
font-weight: 700;
color: var(--ink-3);
letter-spacing: .5px;
text-transform: uppercase;
}
.aca-pi-v3-priority-row .opts {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.aca-pi-v3-prio-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--bg-soft);
color: var(--ink-2);
border: 1px solid transparent;
border-radius: 999px;
font-family: inherit;
font-size: .78rem;
font-weight: 600;
cursor: pointer;
transition: all .15s;
}
.aca-pi-v3-prio-btn:hover {
background: var(--bg);
color: var(--ink);
}
.aca-pi-v3-prio-btn.is-active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.aca-pi-v3-prio-btn .e {
font-size: .9rem;
}
/* Reflection prompt (full screen celebration) */
.aca-pi-v3-reflection-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
z-index: 99996;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity .25s ease;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.aca-pi-v3-reflection-overlay.is-open { opacity: 1; }
.aca-pi-v3-reflection-sheet {
background: var(--bg);
border-radius: 22px;
padding: 32px 28px;
max-width: 480px;
width: 100%;
text-align: center;
transform: scale(.9);
transition: transform .3s cubic-bezier(.32,.72,0,1);
box-shadow: 0 24px 80px rgba(0,0,0,.3);
}
.aca-pi-v3-reflection-overlay.is-open .aca-pi-v3-reflection-sheet {
transform: scale(1);
}
.aca-pi-v3-reflection-sheet .celebrate {
font-size: 3.5rem;
line-height: 1;
margin-bottom: 14px;
animation: acaPiV3Celebrate .8s ease;
}
@keyframes acaPiV3Celebrate {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.3); }
100% { transform: scale(1); opacity: 1; }
}
.aca-pi-v3-reflection-sheet h3 {
margin: 0 0 8px;
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -.5px;
color: var(--ink);
}
.aca-pi-v3-reflection-sheet .sub {
margin: 0 0 18px;
font-size: .92rem;
color: var(--ink-2);
line-height: 1.5;
}
.aca-pi-v3-reflection-sheet textarea {
width: 100%;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px 14px;
font-family: inherit;
font-size: .9rem;
color: var(--ink);
resize: vertical;
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.aca-pi-v3-reflection-sheet textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(255,45,135,.12);
}
.aca-pi-v3-reflection-sheet .actions {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 18px;
}
.aca-pi-v3-reflection-sheet button {
font-family: inherit;
border: none;
border-radius: 999px;
padding: 11px 22px;
font-size: .88rem;
font-weight: 700;
cursor: pointer;
transition: all .15s;
}
.aca-pi-v3-reflection-sheet .skip {
background: var(--bg-soft);
color: var(--ink-2);
}
.aca-pi-v3-reflection-sheet .skip:hover {
background: var(--bg);
color: var(--ink);
}
.aca-pi-v3-reflection-sheet .save {
background: var(--accent);
color: #fff;
}
.aca-pi-v3-reflection-sheet .save:hover { filter: brightness(1.08); }
/* ═══════════════════════════════════════════════════════════════
v3.34.0 — LEADERBOARD WIDGET + CONFETTI BURST
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-w-leaderboard .lb-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
}
.aca-pi-v3-w-leaderboard .lb-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
background: var(--bg-soft);
transition: background .12s;
}
.aca-pi-v3-w-leaderboard .lb-row.is-me {
background: rgba(255,45,135,.08);
border: 1px solid rgba(255,45,135,.25);
}
.aca-pi-v3-w-leaderboard .lb-row .rank {
font-size: .82rem;
font-weight: 700;
color: var(--ink-3);
min-width: 26px;
text-align: center;
}
.aca-pi-v3-w-leaderboard .lb-row .av,
.aca-pi-v3-w-leaderboard .lb-row .av-letter {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--bg);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .75rem;
font-weight: 700;
color: var(--ink-2);
object-fit: cover;
flex-shrink: 0;
}
.aca-pi-v3-w-leaderboard .lb-row .name {
flex: 1;
min-width: 0;
font-size: .82rem;
font-weight: 600;
color: var(--ink);
letter-spacing: -.15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.aca-pi-v3-w-leaderboard .lb-row.is-me .name {
color: var(--accent);
}
.aca-pi-v3-w-leaderboard .lb-row .score {
font-size: .72rem;
font-weight: 700;
color: var(--ink-3);
letter-spacing: .3px;
font-variant-numeric: tabular-nums;
}
/* Confetti burst */
.aca-pi-v3-confetti {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 99999;
}
.aca-pi-v3-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 16px;
border-radius: 2px;
animation: acaPiV3ConfettiFall linear forwards;
}
@keyframes acaPiV3ConfettiFall {
0% {
transform: translateY(0) rotate(0);
opacity: 1;
}
100% {
transform: translateY(110vh) rotate(720deg);
opacity: 0.6;
}
}
/* ═══════════════════════════════════════════════════════════════
v3.35.0 — STEP LOG TIMELINE
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-mlog-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 12px;
max-height: 320px;
overflow-y: auto;
}
.aca-pi-v3-mlog-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
background: var(--bg-soft);
}
.aca-pi-v3-mlog-row .av,
.aca-pi-v3-mlog-row .av-letter {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .72rem;
font-weight: 700;
color: var(--ink-2);
object-fit: cover;
flex-shrink: 0;
}
.aca-pi-v3-mlog-row .body {
flex: 1;
min-width: 0;
}
.aca-pi-v3-mlog-row .line {
font-size: .82rem;
color: var(--ink);
line-height: 1.35;
letter-spacing: -.1px;
}
.aca-pi-v3-mlog-row .line strong {
color: var(--ink);
font-weight: 700;
}
.aca-pi-v3-mlog-row .line em {
font-style: normal;
color: var(--accent);
font-weight: 600;
}
.aca-pi-v3-mlog-row .time {
font-size: .68rem;
color: var(--ink-3);
letter-spacing: .3px;
margin-top: 2px;
font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════════
v3.37.0 — APPLE-GRADE POLISH MODAL MISSION
═══════════════════════════════════════════════════════════════ */
/* Priority pill compacte (remplace les 4 boutons full row) */
.aca-pi-v3-prio-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: var(--bg-soft);
color: var(--ink);
border: 1px solid var(--line);
border-radius: 999px;
font-family: inherit;
font-size: .78rem;
font-weight: 600;
letter-spacing: -.1px;
cursor: pointer;
transition: all .15s;
}
.aca-pi-v3-prio-pill:hover {
background: var(--bg);
border-color: var(--accent);
}
.aca-pi-v3-prio-pill .e { font-size: .9rem; line-height: 1; }
.aca-pi-v3-prio-menu {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 14px 40px rgba(0,0,0,.18);
padding: 6px;
min-width: 200px;
z-index: 99999;
animation: acaPiV3PopoverIn .15s ease;
}
.aca-pi-v3-prio-menu-row {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 12px;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
font-family: inherit;
font-size: .9rem;
color: var(--ink);
text-align: left;
transition: background .12s;
}
.aca-pi-v3-prio-menu-row:hover {
background: var(--bg-soft);
}
.aca-pi-v3-prio-menu-row.is-active {
background: rgba(255,45,135,.08);
color: var(--accent);
font-weight: 700;
}
.aca-pi-v3-prio-menu-row .e {
font-size: 1.05rem;
}
/* Hide la priority-row legacy si pill présente */
.aca-pi-v3-mhero .aca-pi-v3-priority-row {
display: none;
}
/* Disclosure (iOS-style collapsible section) */
.aca-pi-v3-disclosure {
list-style: none;
}
.aca-pi-v3-disclosure summary {
list-style: none;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
.aca-pi-v3-disclosure summary::-webkit-details-marker {
display: none;
}
.aca-pi-v3-disclosure-summary {
display: flex !important;
align-items: center;
gap: 10px;
padding: 4px 0;
transition: opacity .12s;
}
.aca-pi-v3-disclosure-summary:hover {
opacity: .8;
}
.aca-pi-v3-disclosure-summary .ico {
width: 26px;
height: 26px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .85rem;
flex-shrink: 0;
}
.aca-pi-v3-disclosure-summary .lbl {
font-size: .98rem;
font-weight: 700;
letter-spacing: -.25px;
color: var(--ink);
}
.aca-pi-v3-disclosure-summary .count {
background: var(--bg-soft);
padding: 1px 8px;
border-radius: 999px;
font-size: .7rem;
font-weight: 700;
color: var(--ink-3);
letter-spacing: .3px;
}
.aca-pi-v3-disclosure-summary .chev {
margin-left: auto;
color: var(--ink-3);
font-size: 1.1rem;
font-weight: 400;
transition: transform .2s cubic-bezier(.32,.72,0,1);
}
.aca-pi-v3-disclosure[open] .aca-pi-v3-disclosure-summary .chev {
transform: rotate(90deg);
}
/* Step rendering Apple-grade */
.aca-pi-v3-step {
position: relative;
padding: 12px 14px;
border-radius: 10px;
transition: background .15s;
margin: 0 -14px;
}
.aca-pi-v3-step:hover {
background: var(--bg-soft);
}
.aca-pi-v3-step + .aca-pi-v3-step {
border-top: 1px solid var(--line-soft, var(--line));
margin-top: 2px;
}
.aca-pi-v3-step .check {
border-radius: 50%;
border: 2px solid var(--ink-4);
transition: all .15s;
}
.aca-pi-v3-step.done .check {
background: var(--green);
border-color: var(--green);
}
.aca-pi-v3-step .label {
font-size: .95rem;
font-weight: 500;
letter-spacing: -.2px;
color: var(--ink);
line-height: 1.4;
}
.aca-pi-v3-step.done .label {
color: var(--ink-3);
text-decoration: line-through;
text-decoration-color: var(--ink-4);
}
.aca-pi-v3-step .context {
margin-top: 4px;
padding: 8px 10px;
background: rgba(255,212,0,.08);
border-left: 2px solid rgba(255,212,0,.4);
border-radius: 4px;
font-size: .82rem;
color: var(--ink-2);
line-height: 1.5;
}
/* Step attribution row : actions DISCRÈTES, visible au survol */
.aca-pi-v3-step-attr {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
opacity: .55;
transition: opacity .15s;
}
.aca-pi-v3-step:hover .aca-pi-v3-step-attr,
.aca-pi-v3-step .aca-pi-v3-step-attr:has(img),
.aca-pi-v3-step .aca-pi-v3-step-attr:has(.av-letter) {
opacity: 1;
}
.aca-pi-v3-step-assignees img,
.aca-pi-v3-step-assignees .av-letter {
width: 20px;
height: 20px;
border-width: 1.5px;
}
.aca-pi-v3-step-assign-btn,
.aca-pi-v3-step-proof-btn {
width: 20px;
height: 20px;
font-size: .72rem;
}
/* Mission widget title cleanup */
.aca-pi-v3-mw {
padding: 18px 20px;
}
.aca-pi-v3-mw-title {
font-size: .68rem !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.4px;
color: var(--ink-3) !important;
margin-bottom: 12px;
}
.aca-pi-v3-mw-title .ico {
width: 22px !important;
height: 22px !important;
border-radius: 6px;
font-size: .75rem;
}
/* Mission hero spacing */
.aca-pi-v3-mhero {
padding: 24px 24px 20px;
}
.aca-pi-v3-mhero .kicker {
font-size: .68rem !important;
text-transform: uppercase;
letter-spacing: 1.6px;
color: var(--ink-3);
font-weight: 700;
}
.aca-pi-v3-mhero h1 {
font-size: 1.8rem !important;
font-weight: 800;
letter-spacing: -.7px;
line-height: 1.15;
margin-top: 6px;
}
.aca-pi-v3-mhero .goal {
font-size: .95rem;
color: var(--ink-2);
line-height: 1.55;
letter-spacing: -.15px;
}
/* Meta pills compacts */
.aca-pi-v3-mhero .meta-row {
gap: 6px;
flex-wrap: wrap;
align-items: center;
}
.aca-pi-v3-mhero .meta-pill {
font-size: .72rem;
padding: 4px 10px;
}
/* ═══════════════════════════════════════════════════════════════
v3.45.0 — DASHBOARD APPLE-CLEAN (server-side render, match mockup 1:1)
v3.50.0 — Reset agressif vs theme prod (BuddyBoss override button/a/h1)
v3.59.0 — Apple-grade polish pass : animations + typography + skeletons + toasts
═══════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
v3.59.0 — Animation Framework (Apple-grade easing curves)
─────────────────────────────────────────────────────────── */
@keyframes apc-fade-in-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes apc-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes apc-scale-in {
from { opacity: 0; transform: scale(.96); }
to { opacity: 1; transform: scale(1); }
}
@keyframes apc-slide-up-from-bottom {
from { opacity: 0; transform: translateY(100%); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes apc-pulse-subtle {
0%, 100% { opacity: .6; }
50% { opacity: 1; }
}
@keyframes apc-radial-pulse {
0%, 100% { transform: scale(1); opacity: .6; }
50% { transform: scale(1.05); opacity: 1; }
}
@keyframes apc-progress-fill {
from { width: 0%; }
to { width: var(--apc-progress-target, 100%); }
}
@keyframes apc-checkmark-draw {
0% { stroke-dashoffset: 16; }
100% { stroke-dashoffset: 0; }
}
@keyframes apc-skeleton-shimmer {
0% { background-position: -200px 0; }
100% { background-position: calc(200px + 100%) 0; }
}
@keyframes apc-toast-slide-down {
from { opacity: 0; transform: translate(-50%, -100%); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* Easing Apple-grade : spring-like cubic-bezier */
.aca-pi-clean {
--apc-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* power-2 out */
--apc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* power-3 inout */
--apc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* back/spring */
--apc-dur-fast: 120ms;
--apc-dur-mid: 200ms;
--apc-dur-slow: 360ms;
}
/* ───────────────────────────────────────────────────────────
v3.59.0 — Stagger fade-in pour les cards (entrée échelonnée)
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-hero,
.aca-pi-clean .apc-grid > *,
.aca-pi-clean .apc-section-header,
.aca-pi-clean .apc-lb-card,
.aca-pi-clean .apc-journal-card,
.aca-pi-clean .apc-plan-week {
animation: apc-fade-in-up .42s var(--apc-ease-out) backwards;
}
.aca-pi-clean .apc-hero { animation-delay: 40ms; }
.aca-pi-clean .apc-grid > *:nth-child(1) { animation-delay: 100ms; }
.aca-pi-clean .apc-grid > *:nth-child(2) { animation-delay: 140ms; }
.aca-pi-clean .apc-grid > *:nth-child(3) { animation-delay: 180ms; }
.aca-pi-clean .apc-grid > *:nth-child(4) { animation-delay: 220ms; }
.aca-pi-clean .apc-grid > *:nth-child(5) { animation-delay: 260ms; }
.aca-pi-clean .apc-grid > *:nth-child(6) { animation-delay: 300ms; }
.aca-pi-clean .apc-section-header { animation-delay: 320ms; }
.aca-pi-clean .apc-lb-card { animation-delay: 360ms; }
.aca-pi-clean .apc-journal-card { animation-delay: 400ms; }
.aca-pi-clean .apc-plan-week:nth-of-type(1) { animation-delay: 80ms; }
.aca-pi-clean .apc-plan-week:nth-of-type(2) { animation-delay: 140ms; }
.aca-pi-clean .apc-plan-week:nth-of-type(3) { animation-delay: 200ms; }
.aca-pi-clean .apc-plan-week:nth-of-type(4) { animation-delay: 260ms; }
.aca-pi-clean .apc-plan-week:nth-of-type(5) { animation-delay: 320ms; }
.aca-pi-clean .apc-plan-week:nth-of-type(6) { animation-delay: 380ms; }
.aca-pi-clean .apc-plan-week:nth-of-type(7) { animation-delay: 440ms; }
.aca-pi-clean .apc-plan-week:nth-of-type(8) { animation-delay: 500ms; }
/* Respect prefers-reduced-motion : skip animations */
@media (prefers-reduced-motion: reduce) {
.aca-pi-clean *,
.aca-pi-clean *::before,
.aca-pi-clean *::after {
animation: none !important;
transition: none !important;
}
}
/* ───────────────────────────────────────────────────────────
v3.59.0 — Hover lift sur cards interactives (Apple Health style)
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-hero,
.aca-pi-clean .apc-tile,
.aca-pi-clean .apc-lb-row,
.aca-pi-clean .apc-journal-row,
.aca-pi-clean .apc-plan-mission {
transition: transform var(--apc-dur-mid) var(--apc-ease-out),
box-shadow var(--apc-dur-mid) var(--apc-ease-out),
border-color var(--apc-dur-mid) var(--apc-ease-out);
will-change: transform;
}
.aca-pi-clean .apc-hero[data-bind="apc-open-mission"]:hover,
.aca-pi-clean .apc-tile:hover,
.aca-pi-clean .apc-journal-row:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
border-color: var(--ink-4);
}
.aca-pi-clean .apc-plan-mission:hover {
border-color: var(--ink-4);
}
/* ───────────────────────────────────────────────────────────
v3.59.0 — Hero card : radial gradient subtle pulse + progress fill animé
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-hero::before {
animation: apc-radial-pulse 6s var(--apc-ease-in-out) infinite;
}
.aca-pi-clean .apc-hero .prog-bar > div {
animation: apc-progress-fill 1.2s var(--apc-ease-out) backwards;
animation-delay: 280ms;
transition: width var(--apc-dur-mid) var(--apc-ease-out);
}
.aca-pi-clean .apc-hero .kicker .dot {
animation: apc-pulse-subtle 2s var(--apc-ease-in-out) infinite;
}
/* ───────────────────────────────────────────────────────────
v3.59.0 — Checkbox tick : SVG-draw animation (entrée smooth)
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-plan-step-row.done .apc-plan-step-check {
transition: background-color var(--apc-dur-mid) var(--apc-ease-spring),
border-color var(--apc-dur-mid) var(--apc-ease-spring),
transform var(--apc-dur-mid) var(--apc-ease-spring);
}
.aca-pi-clean .apc-plan-step-row.done .apc-plan-step-check::after {
display: inline-block;
animation: apc-scale-in var(--apc-dur-mid) var(--apc-ease-spring) backwards;
}
.aca-pi-clean .apc-plan-step-row:not(.done) .apc-plan-step-check:hover {
border-color: var(--accent) !important;
transform: scale(1.1);
}
/* ───────────────────────────────────────────────────────────
v3.59.0 — Avatars stack hover spread (Apple Photos style)
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-plan-step-checkers {
transition: gap var(--apc-dur-mid) var(--apc-ease-spring);
}
.aca-pi-clean .apc-plan-step-checkers img,
.aca-pi-clean .apc-plan-step-checkers .av-letter {
transition: margin-left var(--apc-dur-mid) var(--apc-ease-spring),
transform var(--apc-dur-mid) var(--apc-ease-spring),
z-index 0s;
position: relative;
z-index: 1;
}
.aca-pi-clean .apc-plan-step-checkers:hover img,
.aca-pi-clean .apc-plan-step-checkers:hover .av-letter {
margin-left: 2px !important;
}
.aca-pi-clean .apc-plan-step-checkers:hover img:first-child,
.aca-pi-clean .apc-plan-step-checkers:hover .av-letter:first-child {
margin-left: 0 !important;
}
.aca-pi-clean .apc-plan-step-checkers img:hover,
.aca-pi-clean .apc-plan-step-checkers .av-letter:hover {
transform: scale(1.2);
z-index: 10;
border-color: var(--accent) !important;
}
/* ───────────────────────────────────────────────────────────
v3.59.0 — Tab bar : safe area insets (iPhone notch + home indicator)
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-tabbar {
padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
padding-left: max(12px, env(safe-area-inset-left)) !important;
padding-right: max(12px, env(safe-area-inset-right)) !important;
position: sticky;
bottom: 0;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
background: rgba(255, 255, 255, .85) !important;
z-index: 100;
}
.aca-pi-clean[data-theme="dark"] .apc-tabbar {
background: rgba(28, 28, 30, .85) !important;
}
.aca-pi-clean .apc-tab {
transition: color var(--apc-dur-fast) var(--apc-ease-out),
transform var(--apc-dur-fast) var(--apc-ease-out);
}
.aca-pi-clean .apc-tab:active { transform: scale(.92); }
.aca-pi-clean .apc-tab-fab {
transition: transform var(--apc-dur-mid) var(--apc-ease-spring),
box-shadow var(--apc-dur-mid) var(--apc-ease-out) !important;
}
.aca-pi-clean .apc-tab-fab:hover {
transform: scale(1.08) translateY(-2px) !important;
box-shadow: 0 10px 24px rgba(255, 45, 135, .55) !important;
}
.aca-pi-clean .apc-tab-fab:active {
transform: scale(.94) !important;
}
/* ───────────────────────────────────────────────────────────
v3.59.0 — Typography hierarchy (display / heading / body / caption)
+ tabular nums sur stats numériques
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-hero h1 {
font-feature-settings: "ss01" 1, "cv11" 1;
font-variation-settings: "wght" 760;
letter-spacing: -.65px !important;
}
.aca-pi-clean .apc-tile-n,
.aca-pi-clean .apc-tile-pct,
.aca-pi-clean .apc-lb-row .score,
.aca-pi-clean .apc-plan-meta .stat .n,
.aca-pi-clean .apc-hero .prog-label,
.aca-pi-clean .apc-plan-mhead .meta .pct {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.aca-pi-clean .apc-head-greet .greet,
.aca-pi-clean .apc-hero .kicker,
.aca-pi-clean .apc-section-header,
.aca-pi-clean .apc-tile-head .lbl {
font-feature-settings: "ss01" 1;
}
/* ───────────────────────────────────────────────────────────
v3.59.0 — Skeleton loaders (pour les fetches Vue Plan, Coffre, etc.)
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-skeleton,
.aca-pi-clean[data-loading="true"] .apc-skel {
background: linear-gradient(90deg,
var(--bg-soft) 0px,
var(--line) 80px,
var(--bg-soft) 160px
);
background-size: 200px 100%;
background-repeat: no-repeat;
animation: apc-skeleton-shimmer 1.4s linear infinite;
border-radius: 6px;
color: transparent;
}
.aca-pi-clean .apc-skeleton-row {
height: 14px;
margin: 8px 0;
border-radius: 4px;
}
.aca-pi-clean .apc-skeleton-circle {
border-radius: 50%;
}
/* ───────────────────────────────────────────────────────────
v3.59.0 — Toast notifications style iOS (slide-down depuis top)
─────────────────────────────────────────────────────────── */
.apc-toast-host {
position: fixed; top: 0; left: 50%; transform: translateX(-50%);
z-index: 99999;
padding: max(12px, env(safe-area-inset-top)) 16px 12px;
pointer-events: none;
}
.apc-toast {
display: flex; align-items: center; gap: 10px;
padding: 12px 18px 12px 14px;
background: rgba(28, 28, 30, .92);
color: #fff;
border-radius: 999px;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
font-size: .88rem; font-weight: 600;
box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
animation: apc-toast-slide-down .36s var(--apc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards;
pointer-events: auto;
max-width: calc(100vw - 32px);
}
.apc-toast.is-success { background: rgba(52, 199, 89, .92); }
.apc-toast.is-error { background: rgba(255, 59, 48, .92); }
.apc-toast .ico { font-size: 1.05rem; line-height: 1; }
.apc-toast.is-hiding { animation: apc-fade-in .24s var(--apc-ease-out) reverse forwards; }
/* ───────────────────────────────────────────────────────────
v3.59.0 — Modal mission : slide-up from bottom (iOS sheet feel)
─────────────────────────────────────────────────────────── */
.acm {
animation: apc-slide-up-from-bottom .42s var(--apc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
overflow: hidden;
position: relative;
}
.acm::before {
content: '';
position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
width: 36px; height: 5px;
background: var(--ink-4, #c7c7cc);
border-radius: 999px;
opacity: .55;
pointer-events: none;
z-index: 10;
}
/* ───────────────────────────────────────────────────────────
v3.59.0 — Pill « Plan du projet » : pulse subtle pour signaler
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-headlink {
transition: all var(--apc-dur-fast) var(--apc-ease-out),
transform var(--apc-dur-fast) var(--apc-ease-spring) !important;
}
.aca-pi-clean .apc-headlink:active {
transform: scale(.94) !important;
}
/* ═══════════════════════════════════════════════════════════════
v3.60.0 — SVG ICONS Apple SF-inspired (remplacent emojis structurels)
═══════════════════════════════════════════════════════════════ */
.aca-pi-clean .apc-svgico {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
width: 18px;
height: 18px;
stroke-width: 1.5;
color: inherit;
fill: none;
}
/* Tab bar bottom icons — 22px style iOS */
.aca-pi-clean .apc-tab-ico .apc-svgico {
width: 22px !important;
height: 22px !important;
}
.aca-pi-clean .apc-tab-fab .apc-svgico {
width: 22px !important;
height: 22px !important;
stroke-width: 2.5;
color: #fff !important;
}
.aca-pi-clean .apc-tab.is-active .apc-svgico {
stroke-width: 2;
}
/* Header icon buttons (search, bell) — 18px */
.aca-pi-clean .apc-iconbtn .apc-svgico {
width: 18px !important;
height: 18px !important;
}
/* Pill Plan du projet (clipboard + chevron) — 14-15px */
.aca-pi-clean .apc-headlink-ico .apc-svgico {
width: 14px !important;
height: 14px !important;
}
.aca-pi-clean .apc-headlink-arrow .apc-svgico {
width: 12px !important;
height: 12px !important;
stroke-width: 2.2;
opacity: .6;
}
.aca-pi-clean .apc-headlink:hover .apc-headlink-arrow .apc-svgico { opacity: 1; }
/* Widget head icons (flame, ring, grid, activity) — 14px in pill */
.aca-pi-clean .apc-tile-head .ico .apc-svgico {
width: 14px !important;
height: 14px !important;
}
/* "À faire aujourd'hui" check icon — 12px */
.aca-pi-clean .apc-tile-wide .apc-tile-head .ico .apc-svgico {
width: 12px !important;
height: 12px !important;
stroke-width: 2.8;
}
/* Hero CTA "Continuer →" et empty state "Voir le plan" */
.aca-pi-clean .apc-cta .apc-svgico {
width: 14px !important;
height: 14px !important;
stroke-width: 2.2;
margin-left: 2px;
transition: transform var(--apc-dur-mid) var(--apc-ease-out);
}
.aca-pi-clean .apc-cta:hover .apc-svgico {
transform: translateX(2px);
}
/* Plan view back button */
.aca-pi-clean .apc-back .apc-svgico {
width: 22px !important;
height: 22px !important;
stroke-width: 2;
}
/* Plan view expand toggle (chevron right) */
.aca-pi-clean .apc-plan-expand-toggle .arrow .apc-svgico {
width: 12px !important;
height: 12px !important;
stroke-width: 2.2;
transition: transform var(--apc-dur-mid) var(--apc-ease-out);
}
.aca-pi-clean .apc-plan-mission.expanded .apc-plan-expand-toggle .arrow .apc-svgico {
transform: rotate(90deg);
}
/* Plan view "Ouvrir la mission →" button */
.aca-pi-clean .apc-plan-open-mission .apc-svgico {
width: 13px !important;
height: 13px !important;
stroke-width: 2.2;
margin-left: 2px;
transition: transform var(--apc-dur-mid) var(--apc-ease-out);
}
.aca-pi-clean .apc-plan-open-mission:hover .apc-svgico {
transform: translateX(2px);
}
/* Coffre récent journal arrow */
.aca-pi-clean .apc-journal-arrow .apc-svgico {
width: 14px !important;
height: 14px !important;
stroke-width: 2;
color: var(--ink-4);
}
.aca-pi-clean .apc-journal-row:hover .apc-journal-arrow .apc-svgico {
color: var(--ink-3);
}
/* Empty state hero illustration — large SVG (64px) avec animation */
.aca-pi-clean .apc-empty-illustration {
display: flex;
justify-content: center;
margin-bottom: 16px;
animation: apc-scale-in .56s var(--apc-ease-spring) backwards;
}
.aca-pi-clean .apc-empty-illustration .apc-svgico {
width: 64px !important;
height: 64px !important;
color: var(--accent);
stroke-width: 1.5;
animation: apc-radial-pulse 3.5s var(--apc-ease-in-out) infinite;
}
.aca-pi-clean .apc-hero-empty {
text-align: center;
}
.aca-pi-clean .apc-hero-empty .kicker { justify-content: center; }
.aca-pi-clean .apc-hero-empty .goal {
max-width: 480px;
margin-left: auto !important;
margin-right: auto !important;
}
.aca-pi-clean .apc-hero-empty .apc-cta {
margin-left: auto;
margin-right: auto;
}
/* ═══════════════════════════════════════════════════════════════
v3.60.0 — DARK MODE pixel-perfect (Apple System Dark)
═══════════════════════════════════════════════════════════════ */
/* prefers-color-scheme: dark + data-theme="auto" → mode système iOS */
@media (prefers-color-scheme: dark) {
.aca-pi-clean[data-theme="auto"] {
--bg: #000;
--bg-soft: #1c1c1e;
--ink: #fff;
--ink-2: #d1d1d6;
--ink-3: #8e8e93;
--ink-4: #48484a;
--line: #2c2c2e;
--line-soft: #1c1c1e;
}
}
/* Tokens explicites dark (override prefers-color-scheme via data-theme="dark") */
.aca-pi-clean[data-theme="dark"] {
--bg: #000 !important;
--bg-soft: #1c1c1e !important;
--ink: #fff !important;
--ink-2: #d1d1d6 !important;
--ink-3: #8e8e93 !important;
--ink-4: #48484a !important;
--line: #2c2c2e !important;
--line-soft: #1c1c1e !important;
}
/* Shadows adaptées en dark : noir + blur + bg surface plus visible */
@media (prefers-color-scheme: dark) {
.aca-pi-clean[data-theme="auto"] .apc-hero,
.aca-pi-clean[data-theme="auto"] .apc-tile {
background: var(--bg-soft);
border-color: var(--line);
}
.aca-pi-clean[data-theme="auto"] .apc-hero:hover,
.aca-pi-clean[data-theme="auto"] .apc-tile:hover,
.aca-pi-clean[data-theme="auto"] .apc-journal-row:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
border-color: var(--ink-4);
}
.aca-pi-clean[data-theme="auto"] {
box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
}
.aca-pi-clean[data-theme="auto"] .apc-hero::before {
background: radial-gradient(circle, rgba(255, 45, 135, .14), transparent 70%);
}
/* Tab bar blur en dark */
.aca-pi-clean[data-theme="auto"] .apc-tabbar {
background: rgba(28, 28, 30, .85) !important;
border-top-color: var(--line);
}
/* Avatars border dark */
.aca-pi-clean[data-theme="auto"] .apc-plan-step-checkers img,
.aca-pi-clean[data-theme="auto"] .apc-plan-step-checkers .av-letter {
border-color: var(--bg-soft) !important;
}
/* Cohort selector menu dark */
.aca-pi-clean[data-theme="auto"] .apc-cohort-selector-menu {
background: var(--bg-soft) !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, .6) !important;
border: 1px solid var(--line);
}
/* Empty illustration glow plus visible dark */
.aca-pi-clean[data-theme="auto"] .apc-empty-illustration .apc-svgico {
filter: drop-shadow(0 0 24px rgba(255, 45, 135, .3));
}
}
.aca-pi-clean[data-theme="dark"] .apc-hero,
.aca-pi-clean[data-theme="dark"] .apc-tile {
background: var(--bg-soft);
border-color: var(--line);
}
.aca-pi-clean[data-theme="dark"] .apc-hero:hover,
.aca-pi-clean[data-theme="dark"] .apc-tile:hover,
.aca-pi-clean[data-theme="dark"] .apc-journal-row:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
border-color: var(--ink-4);
}
.aca-pi-clean[data-theme="dark"] .apc-tabbar {
background: rgba(28, 28, 30, .85) !important;
border-top-color: var(--line);
}
.aca-pi-clean[data-theme="dark"] .apc-plan-step-checkers img,
.aca-pi-clean[data-theme="dark"] .apc-plan-step-checkers .av-letter {
border-color: var(--bg-soft) !important;
}
/* Toasts adaptés dark (déjà rgba donc OK, on raffine) */
@media (prefers-color-scheme: dark) {
.apc-toast { background: rgba(58, 58, 60, .92); }
.apc-toast.is-success { background: rgba(48, 209, 88, .92); }
.apc-toast.is-error { background: rgba(255, 69, 58, .92); }
}
/* ═══════════════════════════════════════════════════════════════
v3.60.0 — FOCUS STATES Apple keyboard nav (WCAG AA)
═══════════════════════════════════════════════════════════════ */
.aca-pi-clean :focus-visible {
outline: 2px solid var(--accent) !important;
outline-offset: 2px !important;
border-radius: 6px;
}
.aca-pi-clean .apc-cta:focus-visible,
.aca-pi-clean .apc-headlink:focus-visible,
.aca-pi-clean .apc-plan-chip:focus-visible {
outline-offset: 3px !important;
}
.aca-pi-clean .apc-tab-fab:focus-visible {
outline-offset: 4px !important;
}
/* ═══════════════════════════════════════════════════════════════
v3.60.0 — POLISH FINAL — détails Apple-grade
═══════════════════════════════════════════════════════════════ */
/* Selection text style iOS */
.aca-pi-clean ::selection {
background: rgba(255, 45, 135, .25);
color: var(--ink);
}
/* Tap highlights iOS */
.aca-pi-clean * {
-webkit-tap-highlight-color: rgba(255, 45, 135, .12);
}
/* Buttons : active scale pour feedback tactile */
.aca-pi-clean button:not(.apc-tab):not(.apc-tab-fab):active {
transform: scale(.97);
transition: transform 80ms var(--apc-ease-out);
}
/* CTA Apple-style : underline hover sur les liens (subtile) */
.aca-pi-clean .apc-headlink-lbl,
.aca-pi-clean .apc-tab-lbl {
transition: color var(--apc-dur-fast) var(--apc-ease-out);
}
/* Scrollbar iOS-style (Webkit only, fallback ailleurs) */
.aca-pi-clean::-webkit-scrollbar,
.aca-pi-clean *::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.aca-pi-clean::-webkit-scrollbar-thumb,
.aca-pi-clean *::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .12);
border-radius: 999px;
}
.aca-pi-clean::-webkit-scrollbar-thumb:hover,
.aca-pi-clean *::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, .24);
}
.aca-pi-clean[data-theme="dark"]::-webkit-scrollbar-thumb,
.aca-pi-clean[data-theme="dark"] *::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .12);
}
/* Modal close button : style iOS x-circle */
.acm .acm-close {
transition: transform var(--apc-dur-fast) var(--apc-ease-spring),
background var(--apc-dur-fast) var(--apc-ease-out);
}
.acm .acm-close:hover {
transform: scale(1.1);
}
.acm .acm-close:active {
transform: scale(.92);
}
/* Backdrop blur sur les overlays */
.aca-pi-v3-modal-overlay,
.acm-overlay {
backdrop-filter: blur(8px) saturate(180%);
-webkit-backdrop-filter: blur(8px) saturate(180%);
background: rgba(0, 0, 0, .35) !important;
animation: apc-fade-in var(--apc-dur-mid) var(--apc-ease-out) backwards;
}
@media (prefers-color-scheme: dark) {
.aca-pi-v3-modal-overlay,
.acm-overlay {
background: rgba(0, 0, 0, .55) !important;
}
}
/* ═══════════════════════════════════════════════════════════════
v3.61.0 — POLISH ULTRA-FIN — Animation icons, tooltips, transitions
═══════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
Tab bar active : accent dot underneath + micro bounce
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-tab {
position: relative;
}
.aca-pi-clean .apc-tab.is-active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px rgba(255, 45, 135, .6);
animation: apc-scale-in var(--apc-dur-mid) var(--apc-ease-spring) backwards;
}
.aca-pi-clean .apc-tab.is-active .apc-tab-ico {
animation: apc-tab-bounce .42s var(--apc-ease-spring);
}
@keyframes apc-tab-bounce {
0% { transform: scale(1); }
40% { transform: scale(1.18) translateY(-2px); }
100% { transform: scale(1); }
}
/* ───────────────────────────────────────────────────────────
Widget icons subtle animation (flame flicker, ring spin)
─────────────────────────────────────────────────────────── */
@keyframes apc-flame-flicker {
0%, 100% { transform: scale(1) rotate(-1deg); }
50% { transform: scale(1.08) rotate(2deg); }
}
@keyframes apc-ring-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes apc-activity-rise {
from { transform: scaleY(0); transform-origin: bottom; }
to { transform: scaleY(1); }
}
.aca-pi-clean .apc-tile-streak .ico .apc-svgico {
animation: apc-flame-flicker 2.4s var(--apc-ease-in-out) infinite;
transform-origin: center bottom;
color: var(--accent);
}
.aca-pi-clean .apc-tile-streak:hover .ico .apc-svgico {
animation-duration: 1.2s;
}
.aca-pi-clean .apc-tile-ring .ico .apc-svgico {
color: var(--accent);
}
.aca-pi-clean .apc-tile-ring:hover .ico .apc-svgico {
animation: apc-ring-spin 1.2s var(--apc-ease-in-out);
}
.aca-pi-clean .apc-tile-stats .ico .apc-svgico {
color: var(--accent);
}
.aca-pi-clean .apc-tile-activity .ico .apc-svgico {
color: var(--accent);
}
.aca-pi-clean .apc-bars .apc-bar {
animation: apc-activity-rise .8s var(--apc-ease-out) backwards;
}
.aca-pi-clean .apc-bars .apc-bar:nth-child(1) { animation-delay: 200ms; }
.aca-pi-clean .apc-bars .apc-bar:nth-child(2) { animation-delay: 240ms; }
.aca-pi-clean .apc-bars .apc-bar:nth-child(3) { animation-delay: 280ms; }
.aca-pi-clean .apc-bars .apc-bar:nth-child(4) { animation-delay: 320ms; }
.aca-pi-clean .apc-bars .apc-bar:nth-child(5) { animation-delay: 360ms; }
.aca-pi-clean .apc-bars .apc-bar:nth-child(6) { animation-delay: 400ms; }
.aca-pi-clean .apc-bars .apc-bar:nth-child(7) { animation-delay: 440ms; }
/* ───────────────────────────────────────────────────────────
Section headers : underline reveal Apple Health style
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-section-header {
display: flex;
align-items: baseline;
gap: 8px;
position: relative;
padding-bottom: 8px;
}
.aca-pi-clean .apc-section-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 32px;
height: 2px;
background: linear-gradient(90deg, var(--accent), transparent);
border-radius: 999px;
animation: apc-underline-grow .48s var(--apc-ease-out) backwards;
animation-delay: 380ms;
}
@keyframes apc-underline-grow {
from { width: 0; opacity: 0; }
to { width: 32px; opacity: 1; }
}
/* ───────────────────────────────────────────────────────────
Tooltip Apple-style sur avatars hover (small dark bubble above)
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-plan-step-checkers img,
.aca-pi-clean .apc-plan-step-checkers .av-letter {
position: relative;
}
.aca-pi-clean .apc-plan-step-checkers img:hover::after,
.aca-pi-clean .apc-plan-step-checkers .av-letter:hover::after {
content: attr(alt) attr(title);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
padding: 4px 10px;
background: rgba(28, 28, 30, .92);
color: #fff;
font-size: .72rem;
font-weight: 600;
border-radius: 6px;
white-space: nowrap;
pointer-events: none;
z-index: 100;
animation: apc-fade-in-up var(--apc-dur-fast) var(--apc-ease-out) backwards;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
letter-spacing: .1px;
}
.aca-pi-clean .apc-plan-step-checkers img:hover::before,
.aca-pi-clean .apc-plan-step-checkers .av-letter:hover::before {
content: '';
position: absolute;
bottom: calc(100% + 3px);
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: rgba(28, 28, 30, .92);
pointer-events: none;
z-index: 100;
}
/* ───────────────────────────────────────────────────────────
Theme switcher button (à droite du selector cohorte)
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-theme-switch {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
background: var(--bg-soft) !important;
background-color: var(--bg-soft) !important;
border: 1px solid var(--line) !important;
border-radius: 50% !important;
color: var(--ink-2) !important;
cursor: pointer;
transition: all var(--apc-dur-fast) var(--apc-ease-out),
transform var(--apc-dur-fast) var(--apc-ease-spring) !important;
font-size: 1rem;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}
.aca-pi-clean .apc-theme-switch:hover {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
transform: scale(1.08);
}
.aca-pi-clean .apc-theme-switch:active {
transform: scale(.94);
}
/* ───────────────────────────────────────────────────────────
Smooth scroll global
─────────────────────────────────────────────────────────── */
.aca-pi-clean,
.aca-pi-clean * {
scroll-behavior: smooth;
}
/* ───────────────────────────────────────────────────────────
Safe area inset top pour header sticky
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-head {
padding-top: max(18px, env(safe-area-inset-top));
padding-left: max(24px, env(safe-area-inset-left));
padding-right: max(24px, env(safe-area-inset-right));
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
background: rgba(255, 255, 255, .85) !important;
}
@media (prefers-color-scheme: dark) {
.aca-pi-clean[data-theme="auto"] .apc-head {
background: rgba(28, 28, 30, .85) !important;
}
}
.aca-pi-clean[data-theme="dark"] .apc-head {
background: rgba(28, 28, 30, .85) !important;
}
/* ───────────────────────────────────────────────────────────
Modal mission interne : sections raffinées Apple-style
─────────────────────────────────────────────────────────── */
.acm .acm-mh {
padding-top: 28px !important; /* room for pull indicator */
}
.acm .acm-mw {
border-top: .5px solid var(--line, #e5e5e7);
padding: 16px 20px;
}
.acm .acm-mw:first-of-type { border-top: none; }
.acm .acm-mw-head {
font-size: .68rem;
text-transform: uppercase;
letter-spacing: 1.4px;
font-weight: 700;
color: var(--ink-3, #86868b);
margin-bottom: 10px;
}
/* ───────────────────────────────────────────────────────────
Hero loading skeleton (au cas où le fetch est lent)
─────────────────────────────────────────────────────────── */
.aca-pi-clean[data-loading="true"] .apc-hero,
.aca-pi-clean[data-loading="true"] .apc-tile,
.aca-pi-clean[data-loading="true"] .apc-lb-row,
.aca-pi-clean[data-loading="true"] .apc-journal-row {
background: linear-gradient(90deg, var(--bg-soft) 0px, var(--line) 80px, var(--bg-soft) 160px);
background-size: 200px 100%;
animation: apc-skeleton-shimmer 1.4s linear infinite;
}
/* ───────────────────────────────────────────────────────────
Detail polish — micro-spacing et separators iOS Settings
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-lb-row + .apc-lb-row,
.aca-pi-clean .apc-journal-row + .apc-journal-row {
border-top: .5px solid var(--line);
}
/* ───────────────────────────────────────────────────────────
Plan view : meta line raffinée (stat n bigger, Apple Health)
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-plan-meta {
border-bottom: .5px solid var(--line);
padding-bottom: 16px;
margin-bottom: 16px;
}
.aca-pi-clean .apc-plan-meta .stat .n {
font-size: 1.85rem !important;
font-weight: 800 !important;
letter-spacing: -.6px;
line-height: 1;
}
.aca-pi-clean .apc-plan-meta .stat .l {
margin-top: 2px;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: 1.2px;
font-weight: 600;
}
/* ───────────────────────────────────────────────────────────
Cohort selector : refinement
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-cohort-selector summary {
transition: opacity var(--apc-dur-fast) var(--apc-ease-out);
}
.aca-pi-clean .apc-cohort-selector summary:hover {
opacity: .7;
}
.aca-pi-clean .apc-cohort-selector[open] summary {
opacity: 1;
}
.aca-pi-clean .apc-cohort-selector-menu {
animation: apc-fade-in-up var(--apc-dur-mid) var(--apc-ease-out) backwards;
}
/* ═══════════════════════════════════════════════════════════════
v3.62.0 — CONFETTI, BADGES, COFFRE SHEET, POLISH ULTIME
═══════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
Confetti burst (déclenché JS quand dernière sous-tâche cochée)
─────────────────────────────────────────────────────────── */
.apc-confetti-host {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
pointer-events: none; z-index: 99998; overflow: hidden;
}
.apc-confetti-piece {
position: absolute;
width: 8px; height: 14px;
top: 50%; left: 50%;
border-radius: 2px;
animation: apc-confetti-fall var(--apc-confetti-dur, 1.6s) var(--apc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}
@keyframes apc-confetti-fall {
0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
100% { transform: translate(var(--apc-confetti-x, 0), var(--apc-confetti-y, 100vh)) rotate(var(--apc-confetti-r, 720deg)) scale(.4); opacity: 0; }
}
/* ───────────────────────────────────────────────────────────
Notification badge dot (sur bell icon)
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-iconbtn {
position: relative;
}
.aca-pi-clean .apc-iconbtn[data-has-notifs="1"]::after {
content: '';
position: absolute;
top: 6px; right: 6px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
border: 2px solid var(--bg);
box-shadow: 0 0 6px rgba(255, 45, 135, .6);
animation: apc-pulse-subtle 2s var(--apc-ease-in-out) infinite;
}
/* ───────────────────────────────────────────────────────────
Modal mission interne : style iOS Settings (sections groupées)
─────────────────────────────────────────────────────────── */
.acm .acm-section {
margin: 16px 20px;
border-radius: 12px;
background: var(--bg-soft);
overflow: hidden;
}
.acm .acm-section-header {
font-size: .68rem;
text-transform: uppercase;
letter-spacing: 1.4px;
font-weight: 700;
color: var(--ink-3);
padding: 8px 20px 4px;
margin-top: 8px;
}
.acm .acm-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
background: var(--bg);
border-bottom: .5px solid var(--line);
transition: background var(--apc-dur-fast) var(--apc-ease-out);
}
.acm .acm-row:last-child { border-bottom: none; }
.acm .acm-row:hover { background: var(--bg-soft); }
.acm .acm-row .acm-row-ico {
width: 28px; height: 28px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
color: #fff;
font-size: .9rem;
}
.acm .acm-row .acm-row-lbl {
flex: 1; font-size: .94rem; font-weight: 500;
}
.acm .acm-row .acm-row-val {
color: var(--ink-3); font-size: .88rem;
}
.acm .acm-row .acm-row-chevron {
color: var(--ink-4); font-weight: 300;
}
/* ───────────────────────────────────────────────────────────
Coffre compose sheet (slide-up depuis FAB click)
─────────────────────────────────────────────────────────── */
.apc-coffre-sheet-overlay {
position: fixed; inset: 0;
background: rgba(0, 0, 0, .35);
backdrop-filter: blur(8px) saturate(180%);
-webkit-backdrop-filter: blur(8px) saturate(180%);
z-index: 9999;
display: flex; align-items: flex-end; justify-content: center;
animation: apc-fade-in var(--apc-dur-mid) var(--apc-ease-out) backwards;
}
.apc-coffre-sheet {
background: var(--bg, #fff);
border-top-left-radius: 24px;
border-top-right-radius: 24px;
width: 100%; max-width: 480px;
padding: 12px 20px max(20px, env(safe-area-inset-bottom)) 20px;
position: relative;
animation: apc-slide-up-from-bottom .42s var(--apc-ease-spring) backwards;
box-shadow: 0 -8px 32px rgba(0, 0, 0, .2);
}
.apc-coffre-sheet::before {
content: '';
position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
width: 36px; height: 5px;
background: var(--ink-4);
border-radius: 999px;
opacity: .55;
}
.apc-coffre-sheet-title {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.42rem; font-weight: 700;
letter-spacing: -.4px; line-height: 1.15;
color: var(--ink);
margin-top: 24px; margin-bottom: 4px;
}
.apc-coffre-sheet-sub {
font-size: .88rem; color: var(--ink-3);
margin-bottom: 18px;
}
.apc-coffre-sheet-options {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
margin-bottom: 16px;
}
.apc-coffre-sheet-opt {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 16px 12px;
background: var(--bg-soft) !important;
border: 1px solid var(--line) !important;
border-radius: 14px !important;
cursor: pointer;
transition: all var(--apc-dur-fast) var(--apc-ease-out),
transform var(--apc-dur-fast) var(--apc-ease-spring) !important;
color: var(--ink) !important;
font-size: .82rem !important;
font-weight: 600 !important;
text-decoration: none !important;
}
.apc-coffre-sheet-opt:hover {
background: var(--bg) !important;
border-color: var(--accent) !important;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(255, 45, 135, .12);
}
.apc-coffre-sheet-opt:active { transform: scale(.96); }
.apc-coffre-sheet-opt .ico {
font-size: 1.6rem;
line-height: 1;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}
.apc-coffre-sheet-cancel {
display: block;
width: 100%;
padding: 12px;
background: var(--bg-soft) !important;
border: none !important;
border-radius: 12px !important;
color: var(--ink) !important;
font-size: .92rem !important;
font-weight: 600 !important;
cursor: pointer;
transition: background var(--apc-dur-fast) var(--apc-ease-out);
}
.apc-coffre-sheet-cancel:hover { background: var(--line) !important; }
.apc-coffre-sheet-cancel:active { transform: scale(.98); }
/* ───────────────────────────────────────────────────────────
Online indicator (small green dot) sur avatar
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-av {
position: relative;
}
.aca-pi-clean .apc-av[data-online="1"]::after {
content: '';
position: absolute;
bottom: 0; right: 0;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--green);
border: 2px solid var(--bg);
}
/* ───────────────────────────────────────────────────────────
Cohort selector ico (📚) : style cohérent avec autres icons
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-cohort-selector-btn .ico {
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
font-size: .9rem !important;
}
/* ───────────────────────────────────────────────────────────
Section headers Apple-style (uppercase tracking)
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-section-header {
font-size: .68rem;
text-transform: uppercase;
letter-spacing: 1.4px;
font-weight: 700;
color: var(--ink-3);
}
/* ───────────────────────────────────────────────────────────
Plan view week head : raffinement final
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-plan-week-head .num {
background: var(--accent);
color: #fff;
font-weight: 700;
letter-spacing: -.3px;
box-shadow: 0 4px 10px rgba(255, 45, 135, .25);
transition: transform var(--apc-dur-fast) var(--apc-ease-spring);
}
.aca-pi-clean .apc-plan-week:hover .apc-plan-week-head .num {
transform: scale(1.06) rotate(-4deg);
}
.aca-pi-clean .apc-plan-week-head .num.passed {
background: var(--green);
box-shadow: 0 4px 10px rgba(52, 199, 89, .25);
}
.aca-pi-clean .apc-plan-week-head .num.passed::after {
content: '✓';
font-size: .9rem;
font-weight: 800;
line-height: 1;
}
.aca-pi-clean .apc-plan-week-head .num.passed { color: transparent; position: relative; }
.aca-pi-clean .apc-plan-week-head .num.passed::after {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: #fff;
}
/* ───────────────────────────────────────────────────────────
Empty state pour Vue Plan (si pas de mission) — backup
─────────────────────────────────────────────────────────── */
.aca-pi-clean .apc-plan-empty {
text-align: center;
padding: 60px 20px;
}
.aca-pi-clean .apc-plan-empty-icon {
font-size: 3rem;
margin-bottom: 16px;
animation: apc-radial-pulse 3s var(--apc-ease-in-out) infinite;
}
.aca-pi-clean .apc-plan-empty-text {
font-size: 1rem;
color: var(--ink-3);
font-weight: 500;
max-width: 320px;
margin: 0 auto;
}
/* ═══════════════════════════════════════════════════════════════
v3.64.0 — UI AUDIT FIXES (a11y + perf + UX + design system)
═══════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
A1 — A11y : Contraste --ink-3 + focus visible + skip link
─────────────────────────────────────────────────────────── */
.aca-pi-clean {
/* Bumped --ink-3 contrast pour passer WCAG AA body 4.5:1 sur fond blanc */
--ink-3: #6e6e73; /* était #86868b, ratio 3.5:1 → maintenant 4.6:1 ✅ AA */
}
@media (prefers-color-scheme: dark) {
.aca-pi-clean[data-theme="auto"] {
--ink-3: #a0a0a8; /* mieux qu'8e8e93 sur fond noir */
}
}
.aca-pi-clean[data-theme="dark"] {
--ink-3: #a0a0a8 !important;
}
/* Skip-to-content link (visible au focus clavier) */
.apc-skip-link {
position: absolute; top: -100px; left: 0;
background: var(--accent); color: #fff;
padding: 12px 24px;
font-weight: 700;
z-index: 999999;
border-radius: 0 0 12px 0;
text-decoration: none;
transition: top .2s var(--apc-ease-out);
}
.apc-skip-link:focus-visible {
top: 0;
outline: 3px solid var(--accent);
outline-offset: 0;
}
/* ───────────────────────────────────────────────────────────
A2 — TAP TARGETS iOS HIG 44×44px (hit area étendue)
─────────────────────────────────────────────────────────── */
/* Checkbox sous-tâche : visuel 14px mais hit area 44px via padding */
.aca-pi-clean .apc-plan-step-row {
padding: 10px 0;
min-height: 44px;
cursor: pointer;
}
.aca-pi-clean .apc-plan-step-row .apc-plan-step-check {
position: relative;
}
.aca-pi-clean .apc-plan-step-row .apc-plan-step-check::before {
content: '';
position: absolute;
top: -15px; left: -15px; right: -15px; bottom: -15px;
/* hit area extended sans changer le visuel */
}
/* Header icon buttons : 44×44 */
.aca-pi-clean .apc-iconbtn {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
}
.aca-pi-clean .apc-iconbtn::before {
content: '';
position: absolute;
inset: -2px;
/* extend hit area à 44 via ::before invisible */
}
/* Theme switch : pareil */
.aca-pi-clean .apc-theme-switch {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
position: relative;
}
.aca-pi-clean .apc-theme-switch::before {
content: '';
position: absolute;
inset: -2px;
}
/* Tab bar items : min-height 56px (HIG iOS tabbar) */
.aca-pi-clean .apc-tab {
min-height: 50px !important;
padding: 8px 12px !important;
}
/* ───────────────────────────────────────────────────────────
A3 — PERFORMANCE : remplacer animations width par transform
─────────────────────────────────────────────────────────── */
@keyframes apc-progress-fill-gpu {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.aca-pi-clean .apc-hero .prog-bar > div {
animation: apc-progress-fill-gpu 1.2s var(--apc-ease-out) backwards !important;
transform-origin: left center;
width: 100% !important;
/* width réelle gérée par scaleX inline via style attribute target */
}
@keyframes apc-underline-grow-gpu {
from { transform: scaleX(0); opacity: 0; }
to { transform: scaleX(1); opacity: 1; }
}
.aca-pi-clean .apc-section-header::after {
animation: apc-underline-grow-gpu .48s var(--apc-ease-out) backwards;
animation-delay: 380ms;
transform-origin: left center;
width: 32px !important;
}
/* backdrop-filter fallback pour low-end devices */
@supports not (backdrop-filter: blur(20px)) {
.aca-pi-clean .apc-tabbar { background: rgba(255, 255, 255, .98) !important; }
.aca-pi-clean .apc-head { background: rgba(255, 255, 255, .98) !important; }
.apc-toast { background: rgba(28, 28, 30, .98) !important; }
.apc-coffre-sheet-overlay { background: rgba(0, 0, 0, .6) !important; }
.aca-pi-v3-modal-overlay, .acm-overlay { background: rgba(0, 0, 0, .6) !important; }
}
/* will-change ciblé sur cards qu'on anime souvent */
.aca-pi-clean .apc-hero,
.aca-pi-clean .apc-tile,
.aca-pi-clean .apc-tab-fab {
will-change: transform;
}
/* ───────────────────────────────────────────────────────────
A4 — UX : touch-action + body padding-bottom + scroll lock
─────────────────────────────────────────────────────────── */
.aca-pi-clean button,
.aca-pi-clean a,
.aca-pi-clean .apc-plan-step-row,
.aca-pi-clean [data-bind] {
touch-action: manipulation; /* élimine 300ms tap delay iOS */
}
/* Body : padding-bottom pour éviter overlap avec tabbar sticky */
.aca-pi-clean .apc-body {
padding-bottom: 80px; /* tabbar ~56px + safe area iPhone home indicator */
}
@supports (padding: max(0px)) {
.aca-pi-clean .apc-body {
padding-bottom: max(80px, calc(60px + env(safe-area-inset-bottom)));
}
}
/* Scroll lock body quand modal/sheet ouverte (via JS body class) */
body.apc-scroll-locked {
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
}
/* Overscroll behavior contain sur modal/sheet */
.acm, .apc-coffre-sheet {
overscroll-behavior: contain;
}
/* ───────────────────────────────────────────────────────────
B1 — Design system : normalisation tokens
─────────────────────────────────────────────────────────── */
.aca-pi-clean {
/* Spacing system 8px grid */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
/* Radius scale Apple-grade */
--radius-xs: 6px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-xl: 24px;
--radius-pill: 999px;
/* Shadow scale */
--shadow-xs: 0 1px 2px rgba(0,0,0,.04);
--shadow-sm: 0 2px 8px rgba(0,0,0,.06);
--shadow-md: 0 4px 16px rgba(0,0,0,.08);
--shadow-lg: 0 8px 24px rgba(0,0,0,.10);
--shadow-xl: 0 16px 40px rgba(0,0,0,.14);
--shadow-accent: 0 6px 16px rgba(255, 45, 135, .25);
--shadow-accent-lg: 0 10px 24px rgba(255, 45, 135, .40);
/* z-index scale (anti-collision) */
--z-base: 1;
--z-card: 10;
--z-sticky: 50;
--z-dropdown: 100;
--z-overlay: 9000;
--z-modal: 9500;
--z-toast: 9800;
--z-tooltip: 9900;
}
/* ───────────────────────────────────────────────────────────
ARIA live region pour toasts (screen readers)
─────────────────────────────────────────────────────────── */
.apc-toast-host {
/* déjà présent, on ajoute aria-live via JS au DOM insertion */
}
.apc-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;
}
/* ───────────────────────────────────────────────────────────
Responsive : mobile portrait specifics
─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
.aca-pi-clean {
border-radius: 0;
box-shadow: none;
max-width: 100%;
}
.aca-pi-clean .apc-hero { padding: 20px; }
.aca-pi-clean .apc-hero h1 { font-size: 1.5rem; }
.aca-pi-clean .apc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.aca-pi-clean .apc-tile-wide { grid-column: span 2; }
.aca-pi-clean .apc-add-quick { grid-column: span 2; }
.aca-pi-clean .apc-body { padding: 16px; }
}
/* v3.50.0 — Hard reset : theme prod (BuddyBoss / Patricia) force button & a
en bloc bleu avec background-color, padding, border-radius → masque les
emojis et casse le tab bar Apple-clean. On neutralise ici. */
.aca-pi-clean button,
.aca-pi-clean a,
.aca-pi-clean input[type="button"],
.aca-pi-clean input[type="submit"] {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
text-decoration: none !important;
text-transform: none !important;
box-shadow: none !important;
letter-spacing: normal !important;
line-height: inherit !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.aca-pi-clean h1,
.aca-pi-clean h2,
.aca-pi-clean h3,
.aca-pi-clean h4 {
text-transform: none !important;
letter-spacing: -.3px !important;
font-family: inherit !important;
color: inherit !important;
font-weight: 700 !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Emoji rendering : force la font système emoji sur les icônes/labels */
.aca-pi-clean .apc-tab-ico,
.aca-pi-clean .apc-iconbtn,
.aca-pi-clean .apc-tab-fab,
.aca-pi-clean .apc-add-quick .btns button {
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
-apple-system, BlinkMacSystemFont, "SF Pro Display",
"Helvetica Neue", sans-serif !important;
}
/* Reset ul/ol/li que certains themes stylent */
.aca-pi-clean ul,
.aca-pi-clean ol,
.aca-pi-clean li {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
/* Reset p margin par défaut du theme */
.aca-pi-clean p {
margin: 0;
background: transparent !important;
}
/* Wrapper isolation : empêche le theme de coller padding/margin/background
parasites sur les enfants directs (BuddyBoss met du `padding: 20px` sur
`.bb-template-v2 *` parfois) */
.aca-pi-clean *,
.aca-pi-clean *::before,
.aca-pi-clean *::after {
box-sizing: border-box;
}
.aca-pi-clean {
--bg:#fff;
--bg-soft:#f5f5f7;
--ink:#1d1d1f;
--ink-2:#424245;
--ink-3:#86868b;
--ink-4:#c7c7cc;
--line:#e5e5e7;
--line-soft:#f0f0f2;
--accent:#ff2d87;
--green:#34c759;
--orange:#ff9f0a;
--blue:#007aff;
--purple:#af52de;
--red:#ff3b30;
background:var(--bg);
border-radius:14px;
overflow:hidden;
max-width:980px; margin:0 auto;
box-shadow:0 4px 20px rgba(0,0,0,.06);
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',sans-serif;
color:var(--ink);
line-height:1.5;
-webkit-font-smoothing:antialiased;
}
.aca-pi-clean[data-theme="dark"] {
--bg:#1c1c1e;
--bg-soft:#2c2c2e;
--ink:#fff;
--ink-2:#d1d1d6;
--ink-3:#8e8e93;
--ink-4:#48484a;
--line:#38383a;
--line-soft:#2c2c2e;
}
/* App header */
.apc-head {
display:flex; align-items:center; justify-content:space-between;
padding:18px 24px; border-bottom:1px solid var(--line);
background:var(--bg);
}
.apc-head-greet .greet {
font-size:.66rem; color:var(--ink-3);
text-transform:uppercase; letter-spacing:1.6px; font-weight:700;
}
.apc-head-greet .name {
font-size:1.1rem; font-weight:700; color:var(--ink);
margin-top:2px; letter-spacing:-.3px;
}
.apc-head-actions { display:flex; align-items:center; gap:8px; }
/* v3.52.0 — Pill « Plan du projet » dans le header pour accès rapide à la vue Plan */
.aca-pi-clean .apc-headlink {
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
padding:6px 12px 6px 10px !important;
background:var(--bg-soft) !important;
background-color:var(--bg-soft) !important;
border:1px solid var(--line) !important;
border-radius:999px !important;
color:var(--ink) !important;
font-size:.78rem !important;
font-weight:600 !important;
letter-spacing:-.1px !important;
text-decoration:none !important;
cursor:pointer !important;
transition:all .15s !important;
white-space:nowrap !important;
line-height:1.2 !important;
}
.aca-pi-clean .apc-headlink:hover {
background:var(--accent) !important;
background-color:var(--accent) !important;
color:#fff !important;
border-color:var(--accent) !important;
transform:translateY(-1px);
}
.aca-pi-clean .apc-headlink-ico {
font-size:.95rem !important;
line-height:1 !important;
font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif !important;
}
.aca-pi-clean .apc-headlink-lbl {
font-size:.78rem !important;
font-weight:600 !important;
}
.aca-pi-clean .apc-headlink-arrow {
font-size:.95rem !important;
font-weight:300 !important;
margin-left:2px !important;
opacity:.6;
}
.aca-pi-clean .apc-headlink:hover .apc-headlink-arrow { opacity:1; }
/* Mobile : label caché, icône seule pour pas surcharger */
@media (max-width:480px) {
.aca-pi-clean .apc-headlink-lbl,
.aca-pi-clean .apc-headlink-arrow { display:none !important; }
.aca-pi-clean .apc-headlink { padding:6px 8px !important; }
}
/* v3.54.0 — Selector dropdown cohorte (Apple Settings popover) */
.aca-pi-clean .apc-cohort-selector {
position:relative;
margin-top:6px;
display:inline-block;
}
.aca-pi-clean .apc-cohort-selector summary {
list-style:none;
cursor:pointer;
}
.aca-pi-clean .apc-cohort-selector summary::-webkit-details-marker { display:none; }
.aca-pi-clean .apc-cohort-selector-btn {
display:inline-flex !important;
align-items:center !important;
gap:5px !important;
padding:4px 10px !important;
background:var(--bg-soft) !important;
background-color:var(--bg-soft) !important;
border:1px solid var(--line) !important;
border-radius:999px !important;
font-size:.72rem !important;
font-weight:600 !important;
color:var(--ink-2) !important;
cursor:pointer !important;
transition:all .15s !important;
line-height:1.2 !important;
letter-spacing:-.1px !important;
}
.aca-pi-clean .apc-cohort-selector[open] .apc-cohort-selector-btn {
background:var(--ink) !important;
background-color:var(--ink) !important;
color:var(--bg) !important;
border-color:var(--ink) !important;
}
.aca-pi-clean .apc-cohort-selector-btn:hover {
background:var(--line-soft) !important;
}
.aca-pi-clean .apc-cohort-selector[open] .apc-cohort-selector-btn:hover {
background:var(--ink-2) !important;
}
.aca-pi-clean .apc-cohort-selector-btn .ico {
font-size:.85rem !important;
font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif !important;
line-height:1 !important;
}
.aca-pi-clean .apc-cohort-selector-btn .lbl {
font-size:.72rem !important;
font-weight:600 !important;
white-space:nowrap;
max-width:200px;
overflow:hidden;
text-overflow:ellipsis;
}
.aca-pi-clean .apc-cohort-selector-btn .arrow {
font-size:.6rem !important;
opacity:.6;
margin-left:2px;
line-height:1;
}
.aca-pi-clean .apc-cohort-selector-menu {
position:absolute;
top:calc(100% + 6px);
left:0;
min-width:260px;
max-width:340px;
background:var(--bg) !important;
border:1px solid var(--line);
border-radius:14px;
padding:6px;
box-shadow:0 12px 32px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.06);
z-index:200;
max-height:340px;
overflow-y:auto;
}
.aca-pi-clean .apc-cohort-item {
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
padding:9px 12px !important;
border-radius:8px !important;
font-size:.85rem !important;
font-weight:500 !important;
color:var(--ink) !important;
text-decoration:none !important;
cursor:pointer !important;
background:transparent !important;
transition:background .12s !important;
border:none !important;
margin:0 !important;
}
.aca-pi-clean .apc-cohort-item:hover {
background:var(--bg-soft) !important;
background-color:var(--bg-soft) !important;
}
.aca-pi-clean .apc-cohort-item.is-current {
background:var(--bg-soft) !important;
background-color:var(--bg-soft) !important;
color:var(--accent) !important;
font-weight:600 !important;
}
.aca-pi-clean .apc-cohort-item .lbl {
flex:1; min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.aca-pi-clean .apc-cohort-item .check {
font-size:.95rem !important;
font-weight:700 !important;
color:var(--accent) !important;
margin-left:10px;
}
@media (max-width:480px) {
.aca-pi-clean .apc-cohort-selector-menu { min-width:240px; max-width:90vw; }
.aca-pi-clean .apc-cohort-selector-btn .lbl { max-width:140px; }
}
.aca-pi-clean .apc-iconbtn {
background:transparent !important;
background-color:transparent !important;
border:none !important;
cursor:pointer;
width:34px !important;
height:34px !important;
min-width:34px !important;
min-height:34px !important;
border-radius:50% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:var(--ink-2) !important;
font-size:1rem !important;
padding:0 !important;
transition:background .12s;
}
.aca-pi-clean .apc-iconbtn:hover {
background:var(--bg-soft) !important;
background-color:var(--bg-soft) !important;
}
.apc-av {
width:34px; height:34px; border-radius:50%;
background:linear-gradient(135deg,#ffd2e3,#ff7ab6);
color:#c20055; font-weight:700; font-size:.82rem;
display:flex; align-items:center; justify-content:center;
cursor:pointer; overflow:hidden;
}
.apc-av img { width:100%; height:100%; object-fit:cover; }
/* Body */
.apc-body { padding:24px; background:var(--bg); }
/* Hero mission semaine */
.apc-hero {
background:var(--bg);
border:1px solid var(--line);
border-radius:18px;
padding:24px 24px 22px;
margin-bottom:18px;
position:relative;
overflow:hidden;
}
.apc-hero::before {
content:''; position:absolute; top:0; right:0;
width:160px; height:160px;
background:radial-gradient(circle, rgba(255,45,135,.06), transparent 70%);
border-radius:50%; pointer-events:none;
}
.apc-hero .kicker {
display:inline-flex; align-items:center; gap:6px;
font-size:.62rem; text-transform:uppercase; letter-spacing:1.6px;
font-weight:700; color:var(--accent);
position:relative;
}
.apc-hero .kicker .dot { width:6px; height:6px; background:var(--accent); border-radius:50%; }
.aca-pi-clean .apc-hero h1 {
margin:8px 0 8px !important;
font-size:1.75rem !important;
font-weight:800 !important;
letter-spacing:-.6px !important;
line-height:1.15 !important;
color:var(--ink) !important;
max-width:560px !important;
position:relative;
text-transform:none !important;
font-family:inherit !important;
background:transparent !important;
padding:0 !important;
border:none !important;
}
.aca-pi-clean .apc-hero p.goal {
margin:0 0 16px !important;
font-size:.92rem !important;
color:var(--ink-2) !important;
line-height:1.55 !important;
letter-spacing:-.15px; max-width:520px; position:relative;
}
.apc-hero .prog-row {
display:flex; align-items:center; gap:14px;
flex-wrap:wrap; position:relative;
}
.apc-hero .prog-bar {
flex:1; min-width:200px; height:6px;
background:var(--bg-soft); border-radius:999px; overflow:hidden;
}
.apc-hero .prog-bar > div {
height:100%; background:var(--accent); border-radius:999px;
transition:width .4s cubic-bezier(.32,.72,0,1);
}
.apc-hero .prog-label {
font-size:.78rem; font-weight:700; color:var(--ink-2);
letter-spacing:-.1px; font-variant-numeric:tabular-nums;
}
.aca-pi-clean .apc-cta {
margin-top:14px !important;
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
padding:9px 16px !important;
background:var(--ink) !important;
background-color:var(--ink) !important;
color:var(--bg) !important;
border:none !important;
border-radius:999px !important;
font-size:.82rem !important;
font-weight:600 !important;
cursor:pointer;
position:relative;
transition:background .15s;
width:auto !important;
}
.aca-pi-clean .apc-cta:hover {
background:var(--accent) !important;
background-color:var(--accent) !important;
}
.aca-pi-clean .apc-hero-empty h1 {
color:var(--ink-3) !important;
font-size:1.45rem !important;
}
/* Grid widgets */
.apc-grid {
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:14px;
margin-bottom:18px;
}
@media (max-width:760px) { .apc-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px) { .apc-grid { grid-template-columns:1fr; } }
.apc-tile {
background:var(--bg);
border:1px solid var(--line);
border-radius:14px;
padding:16px 18px;
display:flex; flex-direction:column;
transition:transform .15s, box-shadow .15s, border-color .15s;
cursor:pointer; min-height:124px;
}
.apc-tile:hover {
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(0,0,0,.06);
border-color:var(--ink-4);
}
.apc-tile-head {
display:flex; align-items:center; gap:8px;
margin-bottom:8px;
}
.apc-tile-head .ico {
width:24px; height:24px; border-radius:7px;
display:flex; align-items:center; justify-content:center;
font-size:.82rem;
}
.apc-tile-head .lbl {
font-size:.62rem; color:var(--ink-3);
text-transform:uppercase; letter-spacing:1.4px; font-weight:700;
}
.apc-tile-streak .ico { background:rgba(255,159,10,.14); color:var(--orange); }
.apc-tile-ring .ico { background:rgba(0,122,255,.14); color:var(--blue); }
.apc-tile-stats .ico { background:rgba(52,199,89,.14); color:var(--green); }
.apc-tile-activity .ico { background:rgba(175,82,222,.14); color:var(--purple); }
.apc-tile-n {
font-size:2rem; font-weight:800;
letter-spacing:-.8px; color:var(--ink);
line-height:1; font-variant-numeric:tabular-nums;
}
.apc-tile-sub {
font-size:.74rem; color:var(--ink-3);
margin-top:6px; letter-spacing:-.1px;
}
/* Ring */
.apc-ring-svg { width:64px; height:64px; margin:auto auto 4px; }
.apc-ring-svg .bg { stroke:var(--bg-soft); }
.apc-ring-svg .fg {
stroke:var(--accent); stroke-linecap:round;
transform:rotate(-90deg); transform-origin:50% 50%;
transition:stroke-dashoffset .4s cubic-bezier(.32,.72,0,1);
}
.apc-tile-pct {
text-align:center; font-size:1.05rem; font-weight:800;
color:var(--ink); letter-spacing:-.3px; margin-top:-2px;
}
/* Wide tile (tasks) */
.apc-tile-wide { grid-column:span 2; }
@media (max-width:480px) { .apc-tile-wide { grid-column:span 1; } }
.apc-tasks-list { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.apc-task-row {
display:flex; align-items:center; gap:10px;
padding:8px 0; border-bottom:1px solid var(--line-soft);
}
.apc-task-row:last-child { border-bottom:none; }
.apc-task-check {
width:20px; height:20px; border-radius:50%;
border:2px solid var(--ink-4); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
}
.apc-task-row.done .apc-task-check {
background:var(--green); border-color:var(--green); color:#fff;
}
.apc-task-row.done .apc-task-check::after { content:'✓'; font-size:.66rem; font-weight:700; }
.apc-task-label { flex:1; min-width:0; font-size:.86rem; font-weight:500; }
.apc-task-row.done .apc-task-label { color:var(--ink-3); text-decoration:line-through; }
.apc-task-tag { font-size:.7rem; color:var(--ink-3); font-weight:600; }
/* Bars (activity) */
.apc-bars { display:flex; gap:4px; align-items:flex-end; margin-top:6px; height:36px; }
.apc-bar { flex:1; background:var(--bg-soft); border-radius:3px; min-height:6px; }
.apc-bar.has { background:var(--accent); opacity:.85; }
.apc-bar.has.today { opacity:1; }
.apc-days { display:flex; justify-content:space-between; margin-top:4px; }
.apc-days span {
font-size:.58rem; color:var(--ink-3);
flex:1; text-align:center; letter-spacing:.4px; font-weight:600;
}
/* Add quick */
.apc-add-quick {
background:var(--bg);
border:1.5px dashed var(--line);
border-radius:14px;
padding:18px;
display:flex; flex-direction:column; gap:8px;
align-items:flex-start;
}
.apc-add-quick .lbl { font-size:.86rem; font-weight:600; color:var(--ink); }
.apc-add-quick .btns { display:flex; gap:6px; flex-wrap:wrap; }
.aca-pi-clean .apc-add-quick .btns button {
background:var(--bg-soft) !important;
background-color:var(--bg-soft) !important;
border:none !important;
padding:7px 14px !important;
border-radius:999px !important;
font-size:.74rem !important;
font-weight:600 !important;
color:var(--ink-2) !important;
cursor:pointer;
transition:all .12s;
width:auto !important;
}
.aca-pi-clean .apc-add-quick .btns button:hover {
background:var(--bg) !important;
background-color:var(--bg) !important;
color:var(--accent) !important;
}
/* Section header */
.apc-section-header {
font-size:.62rem; color:var(--ink-3);
text-transform:uppercase; letter-spacing:1.6px;
font-weight:700; margin:24px 0 12px;
}
/* Leaderboard */
.apc-lb-card {
background:var(--bg);
border:1px solid var(--line);
border-radius:14px;
padding:18px 20px;
margin-bottom:14px;
}
.apc-lb-row {
display:flex; align-items:center; gap:10px;
padding:8px 10px; border-radius:10px;
margin-bottom:4px;
}
.apc-lb-row.is-me {
background:rgba(255,45,135,.06);
border:1px solid rgba(255,45,135,.18);
}
.apc-lb-row .rank { font-size:.85rem; min-width:28px; text-align:center; }
.apc-lb-row .av {
width:32px; height:32px; border-radius:50%;
background:linear-gradient(135deg,#cfe6ff,#5ac8fa);
color:#003a73; font-weight:700; font-size:.76rem;
display:flex; align-items:center; justify-content:center;
overflow:hidden;
}
.apc-lb-row .av img { width:100%; height:100%; object-fit:cover; }
.apc-lb-row .name { flex:1; font-size:.86rem; font-weight:600; color:var(--ink); }
.apc-lb-row.is-me .name { color:var(--accent); }
.apc-lb-row .score {
font-size:.72rem; color:var(--ink-3);
font-weight:700; font-variant-numeric:tabular-nums;
}
/* Journal recent */
.apc-journal-card {
background:var(--bg);
border:1px solid var(--line);
border-radius:14px;
padding:18px 20px;
}
.apc-journal-row {
display:flex; align-items:center; gap:12px;
padding:8px 0; border-bottom:1px solid var(--line-soft);
cursor:pointer;
}
.apc-journal-row:last-child { border-bottom:none; }
.apc-journal-row:hover { background:var(--bg-soft); border-radius:8px; margin:0 -8px; padding-left:8px; padding-right:8px; }
.apc-journal-thumb {
width:42px; height:42px; border-radius:10px;
flex-shrink:0; background-size:cover; background-position:center;
background-color:var(--bg-soft); object-fit:cover;
}
.apc-journal-thumb-placeholder {
display:flex; align-items:center; justify-content:center;
font-size:1.2rem;
}
.apc-journal-info { flex:1; min-width:0; }
.apc-journal-ttl {
font-size:.86rem; font-weight:600; color:var(--ink); line-height:1.3;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.apc-journal-meta { font-size:.7rem; color:var(--ink-3); margin-top:2px; }
.apc-journal-arrow { color:var(--ink-3); font-size:.85rem; }
/* Tab bar bottom — v3.50.0 !important ciblés pour battre theme prod */
.aca-pi-clean .apc-tabbar {
display:flex !important;
justify-content:space-around !important;
align-items:center !important;
padding:8px 12px !important;
border-top:1px solid var(--line) !important;
background:var(--bg) !important;
}
.aca-pi-clean .apc-tab {
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:2px !important;
padding:6px 12px !important;
font-size:.65rem !important;
font-weight:600 !important;
color:var(--ink-3) !important;
background:transparent !important;
border:none !important;
border-radius:0 !important;
transition:color .12s !important;
-webkit-tap-highlight-color:transparent;
width:auto !important;
height:auto !important;
text-decoration:none !important;
}
.aca-pi-clean .apc-tab:hover { color:var(--ink-2) !important; }
.aca-pi-clean .apc-tab.is-active { color:var(--accent) !important; }
.aca-pi-clean .apc-tab-ico {
font-size:1.35rem !important;
line-height:1 !important;
display:inline-block !important;
}
.aca-pi-clean .apc-tab-lbl {
font-size:.65rem !important;
line-height:1.2 !important;
font-weight:600 !important;
letter-spacing:.2px !important;
}
.aca-pi-clean .apc-tab-fab {
width:48px !important;
height:48px !important;
min-width:48px !important;
min-height:48px !important;
border-radius:50% !important;
background:var(--accent) !important;
background-color:var(--accent) !important;
color:#fff !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:1.5rem !important;
font-weight:300 !important;
line-height:1 !important;
margin-top:-12px !important;
box-shadow:0 6px 16px rgba(255,45,135,.4) !important;
border:none !important;
padding:0 !important;
}
/* ═══════════════════════════════════════════════════════════════
v3.44.0 — POLISH OVERRIDES (sub-tabs Plugin-3 + toggle theme compact)
═══════════════════════════════════════════════════════════════ */
/* Plugin-3 sub-tabs « Mes missions / Toutes les missions » dans /mon-academie/
Plugin-3 les rend avec ma-subtabs / ma-subtab — on les override pour matcher Apple */
.ma-subtabs {
display: flex !important;
gap: 6px !important;
background: transparent !important;
padding: 0 !important;
margin-bottom: 16px !important;
border-radius: 0 !important;
}
.ma-subtabs .ma-subtab {
background: var(--bg-soft, #f5f5f7) !important;
color: var(--ink-2, #424245) !important;
border: 1px solid transparent !important;
border-radius: 999px !important;
padding: 8px 16px !important;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
font-size: .82rem !important;
font-weight: 600 !important;
letter-spacing: -.1px !important;
cursor: pointer !important;
transition: all .15s !important;
text-transform: none !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent;
}
.ma-subtabs .ma-subtab:hover {
background: var(--bg, #fff) !important;
color: var(--ink, #1d1d1f) !important;
}
.ma-subtabs .ma-subtab.active,
.ma-subtabs .ma-subtab[aria-selected="true"] {
background: var(--accent, #ff2d87) !important;
color: #fff !important;
border-color: var(--accent, #ff2d87) !important;
}
/* Theme toggle Apple-style : icon menu compact au lieu de 3 boutons */
.aca-pi-v3-theme-toggle {
display: inline-flex !important;
background: var(--bg-soft) !important;
border-radius: 999px !important;
padding: 3px !important;
gap: 0 !important;
}
.aca-pi-v3-theme-toggle button {
width: 32px !important;
height: 28px !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 999px !important;
font-family: inherit !important;
font-size: .95rem !important;
cursor: pointer !important;
color: var(--ink-3) !important;
transition: all .15s !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.aca-pi-v3-theme-toggle button.is-active {
background: var(--bg) !important;
color: var(--ink) !important;
box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
}
.aca-pi-v3-theme-toggle button:hover {
color: var(--ink-2) !important;
}
/* Hide text labels in toggle, keep only icons */
.aca-pi-v3-theme-toggle button > .label,
.aca-pi-v3-theme-toggle button > span:not(.ico) {
display: none !important;
}
/* Header app spacing tighter */
.aca-pi-v3 .aca-pi-v3-header {
padding: 18px 24px !important;
}
/* Widgets : padding plus généreux */
.aca-pi-v3-w {
min-height: 110px !important;
}
/* ═══════════════════════════════════════════════════════════════
v3.43.0 — PLAN VIEW (semaines + missions + sous-tâches)
Match exact du mockup vue-projet-complete.html
═══════════════════════════════════════════════════════════════ */
.aca-pi-v3-plan-meta {
display: flex; gap: 20px; flex-wrap: wrap;
padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
margin-bottom: 18px;
}
.aca-pi-v3-plan-meta[hidden] { display: none; }
.aca-pi-v3-plan-meta .stat .n {
font-size: 1.35rem; font-weight: 800; letter-spacing: -.4px;
color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1;
}
.aca-pi-v3-plan-meta .stat .l {
font-size: .62rem; color: var(--ink-3);
text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700; margin-top: 4px;
}
.aca-pi-v3-plan-meta .stat.green .n { color: var(--green); }
.aca-pi-v3-plan-meta .stat.orange .n { color: var(--orange); }
.aca-pi-v3-plan-meta .stat.blue .n { color: var(--blue); }
.aca-pi-v3-plan-filters {
display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px;
}
.aca-pi-v3-plan-filters[hidden] { display: none; }
.aca-pi-v3-plan-chip {
background: var(--bg-soft); color: var(--ink-2);
border: 1px solid transparent; border-radius: 999px;
padding: 7px 14px; font-family: inherit; font-size: .8rem;
font-weight: 600; cursor: pointer; transition: all .12s;
-webkit-tap-highlight-color: transparent;
}
.aca-pi-v3-plan-chip:hover { background: var(--bg); color: var(--ink); }
.aca-pi-v3-plan-chip.is-active {
background: var(--accent); color: #fff; border-color: var(--accent);
}
/* Week section */
.aca-pi-v3-plan-week { margin-bottom: 18px; }
.aca-pi-v3-plan-week-head {
display: flex; align-items: baseline; gap: 12px;
padding: 14px 18px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 14px 14px 0 0;
border-bottom: none;
}
.aca-pi-v3-plan-week-head .num {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 8px;
background: var(--accent); color: #fff;
font-size: .85rem; font-weight: 800; flex-shrink: 0;
}
.aca-pi-v3-plan-week-head .num.passed { background: var(--green); }
.aca-pi-v3-plan-week-head .num.future {
background: var(--bg-soft); color: var(--ink-3);
}
.aca-pi-v3-plan-week-head h3 {
margin: 0; font-size: 1.05rem; font-weight: 700;
letter-spacing: -.3px; color: var(--ink); flex: 1;
}
.aca-pi-v3-plan-week-head .badge {
background: var(--bg-soft); padding: 3px 9px; border-radius: 999px;
font-size: .66rem; font-weight: 700; color: var(--ink-2); letter-spacing: .2px;
}
.aca-pi-v3-plan-week-head .badge.current {
background: rgba(255,45,135,.1); color: var(--accent);
}
.aca-pi-v3-plan-week-head .badge.locked {
background: rgba(255,159,10,.1); color: var(--orange);
}
.aca-pi-v3-plan-week-body {
background: var(--bg);
border: 1px solid var(--line);
border-top: 1px dashed var(--line);
border-radius: 0 0 14px 14px;
padding: 6px 14px 10px;
}
.aca-pi-v3-plan-week.is-locked { opacity: .55; }
.aca-pi-v3-plan-week.is-locked .aca-pi-v3-plan-week-body { background: var(--bg-soft); }
/* Mission row in plan */
.aca-pi-v3-plan-mission {
display: flex; flex-direction: column;
padding: 14px 8px;
border-bottom: 1px solid var(--line-soft, var(--line));
cursor: pointer;
transition: background .12s;
border-radius: 8px;
margin: 0 -4px;
}
.aca-pi-v3-plan-mission:last-child { border-bottom: none; }
.aca-pi-v3-plan-mission:hover { background: var(--bg-soft); }
.aca-pi-v3-plan-mission .plan-mhead {
display: flex; align-items: center; gap: 12px;
}
.aca-pi-v3-plan-mission .check {
width: 22px; height: 22px; border-radius: 50%;
border: 2px solid var(--ink-4); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: .7rem; font-weight: 700; color: #fff;
}
.aca-pi-v3-plan-mission.done .check { background: var(--green); border-color: var(--green); }
.aca-pi-v3-plan-mission.done .check::after { content: '✓'; }
.aca-pi-v3-plan-mission.in-progress .check {
background: rgba(255,45,135,.12); border-color: var(--accent); color: var(--accent);
}
.aca-pi-v3-plan-mission.in-progress .check::after { content: '·'; font-size: 1.2rem; }
.aca-pi-v3-plan-mission.locked .check { border-style: dashed; }
.aca-pi-v3-plan-mission.locked .check::after { content: '🔒'; font-size: .7rem; }
.aca-pi-v3-plan-mission .title {
flex: 1; min-width: 0;
font-size: .95rem; font-weight: 600;
color: var(--ink); letter-spacing: -.2px; line-height: 1.3;
}
.aca-pi-v3-plan-mission.done .title {
color: var(--ink-3);
text-decoration: line-through;
text-decoration-color: var(--ink-4);
}
.aca-pi-v3-plan-mission.locked .title { color: var(--ink-3); }
.aca-pi-v3-plan-mission .meta {
display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.aca-pi-v3-plan-mission .meta .ppl {
display: flex; align-items: center;
}
.aca-pi-v3-plan-mission .meta .ppl img,
.aca-pi-v3-plan-mission .meta .ppl .av-letter {
width: 22px; height: 22px; border-radius: 50%;
border: 1.5px solid var(--bg);
background: var(--bg-soft);
display: inline-flex; align-items: center; justify-content: center;
font-size: .62rem; font-weight: 700; color: var(--ink-2);
margin-left: -4px; object-fit: cover;
}
.aca-pi-v3-plan-mission .meta .ppl img:first-child,
.aca-pi-v3-plan-mission .meta .ppl .av-letter:first-child { margin-left: 0; }
.aca-pi-v3-plan-mission .meta .pct {
font-size: .74rem; font-weight: 700; color: var(--ink-3);
font-variant-numeric: tabular-nums; min-width: 36px; text-align: right;
}
.aca-pi-v3-plan-mission .meta .pct.done { color: var(--green); }
.aca-pi-v3-plan-mission .meta .pct.progress { color: var(--accent); }
/* Expand toggle */
.aca-pi-v3-plan-mission .plan-expand-toggle {
display: inline-flex; align-items: center; gap: 4px;
font-size: .72rem; color: var(--ink-3);
font-weight: 600;
margin-top: 6px;
padding-left: 34px;
cursor: pointer;
}
.aca-pi-v3-plan-mission .plan-expand-toggle:hover { color: var(--accent); }
.aca-pi-v3-plan-mission .plan-expand-toggle .arrow {
transition: transform .15s;
font-size: .85rem;
}
.aca-pi-v3-plan-mission.expanded .plan-expand-toggle .arrow { transform: rotate(90deg); }
/* Steps list (collapsed by default) */
.aca-pi-v3-plan-mission .plan-mission-steps {
display: none;
margin-top: 10px;
padding: 8px 0 0 34px;
border-left: 1px dashed var(--line);
margin-left: 11px;
}
.aca-pi-v3-plan-mission.expanded .plan-mission-steps { display: block; }
.plan-step-row {
display: flex; align-items: flex-start; gap: 10px;
padding: 6px 0;
font-size: .82rem; color: var(--ink-2);
line-height: 1.4;
}
.plan-step-row .plan-step-check {
width: 14px; height: 14px; border-radius: 50%;
border: 1.5px solid var(--ink-4); flex-shrink: 0; margin-top: 3px;
display: flex; align-items: center; justify-content: center;
font-size: .55rem; color: #fff; font-weight: 700;
}
.plan-step-row.done .plan-step-check { background: var(--green); border-color: var(--green); }
.plan-step-row.done .plan-step-check::after { content: '✓'; }
.plan-step-row.done {
color: var(--ink-3);
text-decoration: line-through;
text-decoration-color: var(--ink-4);
}
.plan-step-row.locked .plan-step-check { border-style: dashed; }
/* PRINT */
@media print {
.aca-pi-v3-fab, .aca-pi-v3-theme-toggle, .aca-pi-v3-iconbtn, .aca-pi-v3-tabbar, .aca-pi-v3-onb-overlay, .aca-pi-v3-ptr, .aca-pi-v3-cmdk-overlay, .aca-pi-v3-notif-overlay, .aca-pi-v3-focus, .aca-pi-v3-pwa-banner, .aca-pi-v3-ach-unlock, .aca-pi-v3-edit-pill, .aca-pi-v3-export-btn, .aca-pi-v3-coffre-toolbar, .aca-pi-v3-mcomment-form, .aca-pi-v3-step-assign-btn, .aca-pi-v3-step-proof-btn, .aca-pi-v3-assign-popover, .aca-pi-v3-lightbox-overlay, .aca-pi-v3-mood-overlay, .aca-pi-v3-reorder-btn, .aca-pi-v3-priority-row, .aca-pi-v3-prio-pill, .aca-pi-v3-prio-menu, .aca-pi-v3-reflection-overlay, .aca-pi-v3-confetti, .aca-pi-v3-plan-filters { display:none; }
.aca-pi-v3-coffre-tab-filters { display:none; }
.aca-pi-v3-disclosure[open] .aca-pi-v3-disclosure-summary .chev { display:none; }
}
/* ═══════════════════════════════════════════════════════════════
v3.46.0 — APPLE-CLEAN MODAL + PLAN VIEW (match mockups 1:1)
═══════════════════════════════════════════════════════════════ */
/* Back arrow in plan header */
.aca-pi-clean .apc-back {
width: 32px; height: 32px; border-radius: 50%;
background: var(--bg-soft); color: var(--ink);
border: none; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.2rem; text-decoration: none; margin-right: 8px;
transition: background .12s;
}
.aca-pi-clean .apc-back:hover { background: var(--ink-4); color: var(--ink); }
/* PLAN view */
.aca-pi-clean .apc-plan-meta {
display: flex; gap: 20px; flex-wrap: wrap;
align-items: flex-end;
padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
margin-bottom: 18px;
}
.aca-pi-clean .apc-plan-meta .stat .n {
font-size: 1.5rem; font-weight: 800; letter-spacing: -.4px;
color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1;
}
.aca-pi-clean .apc-plan-meta .stat .l {
font-size: .62rem; color: var(--ink-3);
text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700; margin-top: 4px;
}
.aca-pi-clean .apc-plan-meta .stat.green .n { color: var(--green); }
.aca-pi-clean .apc-plan-meta .stat.orange .n { color: var(--orange); }
.aca-pi-clean .apc-plan-meta .stat.blue .n { color: var(--blue); }
.aca-pi-clean .apc-plan-meta .stat-info {
margin-left: auto; font-size: .78rem; color: var(--ink-3);
font-weight: 600; letter-spacing: -.1px;
}
.aca-pi-clean .apc-plan-filters {
display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px;
}
.aca-pi-clean .apc-plan-chip {
background: var(--bg-soft); color: var(--ink-2);
border: 1px solid transparent; border-radius: 999px;
padding: 7px 14px; font-family: inherit; font-size: .8rem;
font-weight: 600; cursor: pointer; transition: all .12s;
-webkit-tap-highlight-color: transparent;
}
.aca-pi-clean .apc-plan-chip:hover { background: var(--bg); color: var(--ink); }
.aca-pi-clean .apc-plan-chip.is-active {
background: var(--accent); color: #fff; border-color: var(--accent);
}
/* Week section */
.aca-pi-clean .apc-plan-week { margin-bottom: 18px; }
.aca-pi-clean .apc-plan-week-head {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 14px 14px 0 0;
border-bottom: none;
}
.aca-pi-clean .apc-plan-week-head .num {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 8px;
background: var(--accent); color: #fff;
font-size: .85rem; font-weight: 800; flex-shrink: 0;
}
.aca-pi-clean .apc-plan-week-head .num.passed { background: var(--green); }
.aca-pi-clean .apc-plan-week-head .num.future {
background: var(--bg-soft); color: var(--ink-3);
}
.aca-pi-clean .apc-plan-week-head h3 {
margin: 0; font-size: 1.05rem; font-weight: 700;
letter-spacing: -.3px; color: var(--ink); flex: 1;
}
.aca-pi-clean .apc-plan-week-head .badge {
background: var(--bg-soft); padding: 3px 9px; border-radius: 999px;
font-size: .66rem; font-weight: 700; color: var(--ink-2); letter-spacing: .2px;
}
.aca-pi-clean .apc-plan-week-head .badge.current {
background: rgba(255,45,135,.1); color: var(--accent);
}
.aca-pi-clean .apc-plan-week-head .badge.locked {
background: rgba(255,159,10,.1); color: var(--orange);
}
.aca-pi-clean .apc-plan-week-body {
background: var(--bg);
border: 1px solid var(--line);
border-top: 1px dashed var(--line);
border-radius: 0 0 14px 14px;
padding: 6px 14px 10px;
}
.aca-pi-clean .apc-plan-week.is-locked { opacity: .55; }
.aca-pi-clean .apc-plan-week.is-locked .apc-plan-week-body { background: var(--bg-soft); }
/* Mission row in plan */
.aca-pi-clean .apc-plan-mission {
display: flex; flex-direction: column;
padding: 14px 8px;
border-bottom: 1px solid var(--line-soft, var(--line));
cursor: pointer;
transition: background .12s;
border-radius: 8px;
margin: 0 -4px;
}
.aca-pi-clean .apc-plan-mission:last-child { border-bottom: none; }
.aca-pi-clean .apc-plan-mission:hover { background: var(--bg-soft); }
.aca-pi-clean .apc-plan-mhead {
display: flex; align-items: center; gap: 12px;
}
.aca-pi-clean .apc-plan-mission .check {
width: 22px; height: 22px; border-radius: 50%;
border: 2px solid var(--ink-4); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: .7rem; font-weight: 700; color: #fff;
}
.aca-pi-clean .apc-plan-mission.done .check { background: var(--green); border-color: var(--green); }
.aca-pi-clean .apc-plan-mission.done .check::after { content: '✓'; }
.aca-pi-clean .apc-plan-mission.in-progress .check {
background: rgba(255,45,135,.12); border-color: var(--accent); color: var(--accent);
}
.aca-pi-clean .apc-plan-mission.in-progress .check::after { content: '·'; font-size: 1.2rem; }
.aca-pi-clean .apc-plan-mission.locked .check { border-style: dashed; }
.aca-pi-clean .apc-plan-mission.locked .check::after { content: '🔒'; font-size: .7rem; }
.aca-pi-clean .apc-plan-mission .title {
flex: 1; min-width: 0;
font-size: .95rem; font-weight: 600;
color: var(--ink); letter-spacing: -.2px; line-height: 1.3;
}
.aca-pi-clean .apc-plan-mission.done .title {
color: var(--ink-3);
text-decoration: line-through;
text-decoration-color: var(--ink-4);
}
.aca-pi-clean .apc-plan-mission.locked .title { color: var(--ink-3); }
.aca-pi-clean .apc-plan-mission .meta {
display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.aca-pi-clean .apc-plan-mission .meta .ppl {
display: flex; align-items: center;
}
.aca-pi-clean .apc-plan-mission .meta .ppl img,
.aca-pi-clean .apc-plan-mission .meta .ppl .av-letter {
width: 22px; height: 22px; border-radius: 50%;
border: 1.5px solid var(--bg);
background: var(--bg-soft);
display: inline-flex; align-items: center; justify-content: center;
font-size: .62rem; font-weight: 700; color: var(--ink-2);
margin-left: -4px; object-fit: cover;
}
.aca-pi-clean .apc-plan-mission .meta .ppl img:first-child,
.aca-pi-clean .apc-plan-mission .meta .ppl .av-letter:first-child { margin-left: 0; }
.aca-pi-clean .apc-plan-mission .meta .pct {
font-size: .74rem; font-weight: 700; color: var(--ink-3);
font-variant-numeric: tabular-nums; min-width: 36px; text-align: right;
}
.aca-pi-clean .apc-plan-mission .meta .pct.done { color: var(--green); }
.aca-pi-clean .apc-plan-mission .meta .pct.progress { color: var(--accent); }
.aca-pi-clean .apc-plan-expand-toggle {
display: inline-flex; align-items: center; gap: 4px;
font-size: .72rem; color: var(--ink-3);
font-weight: 600;
margin-top: 6px;
padding-left: 34px;
cursor: pointer;
}
.aca-pi-clean .apc-plan-expand-toggle:hover { color: var(--accent); }
.aca-pi-clean .apc-plan-expand-toggle .arrow {
transition: transform .15s;
font-size: .85rem;
}
.aca-pi-clean .apc-plan-mission.expanded .apc-plan-expand-toggle .arrow { transform: rotate(90deg); }
/* Steps list under mission row */
.aca-pi-clean .apc-plan-mission-steps {
display: none;
margin-top: 10px;
padding: 8px 0 0 34px;
border-left: 1px dashed var(--line);
margin-left: 11px;
}
.aca-pi-clean .apc-plan-mission.expanded .apc-plan-mission-steps { display: block; }
.aca-pi-clean .apc-plan-step-row {
display: flex; align-items: flex-start; gap: 10px;
padding: 6px 0;
font-size: .82rem; color: var(--ink-2);
line-height: 1.4;
}
.aca-pi-clean .apc-plan-step-row .apc-plan-step-check {
width: 14px; height: 14px; border-radius: 50%;
border: 1.5px solid var(--ink-4); flex-shrink: 0; margin-top: 3px;
display: flex; align-items: center; justify-content: center;
font-size: .55rem; color: #fff; font-weight: 700;
}
.aca-pi-clean .apc-plan-step-row.done .apc-plan-step-check { background: var(--green); border-color: var(--green); }
.aca-pi-clean .apc-plan-step-row.done .apc-plan-step-check::after { content: '✓'; }
.aca-pi-clean .apc-plan-step-row.done {
color: var(--ink-3);
text-decoration: line-through;
text-decoration-color: var(--ink-4);
}
.aca-pi-clean .apc-plan-step-row .apc-plan-step-lbl {
flex: 1; min-width: 0;
}
/* v3.53.0 — Avatars des élèves qui ont coché chaque sous-tâche (vue collective) */
.aca-pi-clean .apc-plan-step-checkers {
display: flex; align-items: center;
margin-left: auto; flex-shrink: 0;
padding-left: 8px;
}
.aca-pi-clean .apc-plan-step-checkers img,
.aca-pi-clean .apc-plan-step-checkers .av-letter {
width: 22px !important; height: 22px !important;
border-radius: 50% !important;
border: 2px solid var(--bg) !important;
margin-left: -6px;
object-fit: cover;
background: var(--bg-soft);
display: flex; align-items: center; justify-content: center;
font-size: .58rem; font-weight: 700; color: var(--ink-2);
box-sizing: border-box;
text-decoration: none !important;
}
.aca-pi-clean .apc-plan-step-checkers img:first-child,
.aca-pi-clean .apc-plan-step-checkers .av-letter:first-child {
margin-left: 0;
}
.aca-pi-clean .apc-plan-step-checkers .more {
font-size: .65rem; font-weight: 700; color: var(--ink-3);
margin-left: 6px;
background: var(--bg-soft); padding: 2px 6px;
border-radius: 999px;
}
.aca-pi-clean .apc-plan-open-mission {
margin-top: 10px;
background: var(--ink); color: var(--bg);
border: none; border-radius: 999px;
padding: 7px 14px; font-family: inherit;
font-size: .78rem; font-weight: 600; cursor: pointer;
transition: background .12s;
}
.aca-pi-clean .apc-plan-open-mission:hover { background: var(--accent); }
.aca-pi-clean .apc-plan-empty {
text-align: center; padding: 60px 24px;
color: var(--ink-3);
}
.aca-pi-clean .apc-plan-empty-icon {
font-size: 3rem; opacity: .4; margin-bottom: 12px;
}
.aca-pi-clean .apc-plan-empty-text {
font-size: .92rem;
}
/* ═══════════════════════════════════════════════════════════════
v3.46.0 — MODAL MISSION Apple-clean (match mockup mission-modal-v3.37.html)
═══════════════════════════════════════════════════════════════ */
.acm-overlay {
position: fixed; inset: 0; z-index: 99999;
background: rgba(0,0,0,.5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
padding: 24px;
animation: acm-fade .2s ease;
}
@keyframes acm-fade { from { opacity: 0; } to { opacity: 1; } }
.acm-overlay.is-closing { opacity: 0; transition: opacity .15s; }
.acm {
--bg:#fff;
--bg-soft:#f5f5f7;
--ink:#1d1d1f;
--ink-2:#424245;
--ink-3:#86868b;
--ink-4:#c7c7cc;
--line:#e5e5e7;
--line-soft:#f0f0f2;
--accent:#ff2d87;
--green:#34c759;
--orange:#ff9f0a;
--blue:#007aff;
--purple:#af52de;
--red:#ff3b30;
background: var(--bg);
border-radius: 18px;
max-width: 780px; width: 100%;
max-height: 90vh;
display: flex; flex-direction: column;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0,0,0,.3);
font-family: -apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',sans-serif;
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
animation: acm-pop .25s cubic-bezier(.32,.72,0,1);
}
@keyframes acm-pop {
from { transform: scale(.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
[data-theme="dark"] .acm {
--bg:#1c1c1e;
--bg-soft:#2c2c2e;
--ink:#fff;
--ink-2:#d1d1d6;
--ink-3:#8e8e93;
--ink-4:#48484a;
--line:#38383a;
--line-soft:#2c2c2e;
}
/* HEADER */
.acm-mh {
display: flex; align-items: center;
padding: 14px 20px;
border-bottom: 1px solid var(--line);
gap: 12px;
flex-shrink: 0;
}
.acm-close {
width: 32px; height: 32px; border-radius: 50%;
background: var(--bg-soft); border: none; color: var(--ink);
cursor: pointer; font-size: 1rem;
display: flex; align-items: center; justify-content: center;
}
.acm-close:hover { background: var(--ink-4); }
.acm-crumb {
flex: 1; font-size: .78rem; color: var(--ink-3); letter-spacing: -.1px;
}
.acm-crumb strong { color: var(--ink); font-weight: 700; }
.acm-mh-actions { display: flex; gap: 6px; flex-shrink: 0; }
.acm-act {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: 999px;
font-family: inherit; font-size: .82rem; font-weight: 600;
border: 1px solid var(--line); cursor: pointer;
transition: all .15s;
}
.acm-act.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.acm-act.primary:hover { background: var(--accent); border-color: var(--accent); }
.acm-act.secondary { background: var(--bg-soft); color: var(--ink); }
.acm-act.secondary:hover { background: var(--bg); border-color: var(--accent); color: var(--accent); }
.acm-act.danger { background: var(--bg-soft); color: var(--red); }
.acm-act.danger:hover { background: rgba(255,59,48,.08); border-color: var(--red); }
/* BODY scroll */
.acm-mb {
flex: 1; min-height: 0;
overflow-y: auto;
}
/* HERO */
.acm-mhero {
padding: 28px 24px 22px;
border-bottom: 1px solid var(--line);
}
.acm-mhero .kicker {
font-size: .66rem;
text-transform: uppercase;
letter-spacing: 1.6px;
color: var(--ink-3);
font-weight: 700;
margin-bottom: 8px;
}
.acm-mhero h1 {
margin: 0;
font-size: 1.85rem;
font-weight: 800;
letter-spacing: -.7px;
line-height: 1.15;
color: var(--ink);
}
.acm-mhero .goal {
margin: 8px 0 16px;
font-size: .95rem;
color: var(--ink-2);
line-height: 1.55;
letter-spacing: -.15px;
}
.acm-mhero .progress-section { margin-bottom: 14px; }
.acm-mhero .progress-label {
display: flex; justify-content: space-between;
font-size: .74rem; color: var(--ink-3);
letter-spacing: .4px; text-transform: uppercase;
font-weight: 700; margin-bottom: 6px;
}
.acm-mhero .progress-bar {
height: 6px; background: var(--bg-soft); border-radius: 999px; overflow: hidden;
}
.acm-mhero .progress-bar > div {
height: 100%; background: var(--accent); border-radius: 999px;
transition: width .4s cubic-bezier(.32,.72,0,1);
}
.acm-mhero .meta-row {
display: flex; align-items: center;
gap: 6px; flex-wrap: wrap;
margin-top: 14px;
}
.acm-mhero .meta-pill {
display: inline-flex; align-items: center; gap: 5px;
font-size: .72rem; font-weight: 600;
padding: 4px 10px;
background: var(--bg-soft); color: var(--ink-2);
border-radius: 999px; letter-spacing: -.1px;
}
.acm-mhero .prio-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px;
background: var(--bg-soft);
border: 1px solid var(--line); border-radius: 999px;
font-size: .78rem; font-weight: 600; color: var(--ink);
letter-spacing: -.1px; cursor: pointer;
transition: all .15s; font-family: inherit;
}
.acm-mhero .prio-pill:hover { border-color: var(--accent); background: var(--bg); }
.acm-mhero .prio-pill .e { font-size: .9rem; }
/* WIDGETS / SECTIONS */
.acm-mw {
padding: 18px 24px;
border-bottom: 1px solid var(--line);
}
.acm-mw:last-of-type { border-bottom: none; }
.acm-mw-title {
display: flex; align-items: center; gap: 10px;
font-size: .66rem;
text-transform: uppercase;
letter-spacing: 1.6px;
color: var(--ink-3);
font-weight: 700;
margin-bottom: 12px;
}
.acm-mw-title .ico {
width: 22px; height: 22px; border-radius: 6px;
display: inline-flex; align-items: center; justify-content: center;
font-size: .78rem;
}
.acm-mw-title .ico.blue { background: rgba(0,122,255,.14); color: var(--blue); }
.acm-mw-title .ico.purple { background: rgba(175,82,222,.14); color: var(--purple); }
.acm-mw-title .ico.orange { background: rgba(255,159,10,.14); color: var(--orange); }
.acm-mw-title .ico.green { background: rgba(52,199,89,.14); color: var(--green); }
.acm-mw-title .ico.pink { background: rgba(255,45,135,.14); color: var(--accent); }
/* MGRID 2-col */
.acm-mgrid {
display: grid;
grid-template-columns: 1fr 280px;
gap: 18px;
}
@media (max-width: 680px) { .acm-mgrid { grid-template-columns: 1fr; } }
.acm-mw-inner { padding: 0; }
/* STEPS */
.acm-step {
position: relative;
display: flex; gap: 14px;
padding: 12px 14px;
margin: 0 -14px;
border-radius: 10px;
transition: background .12s;
}
.acm-step:hover { background: var(--bg-soft); }
.acm-step + .acm-step { border-top: 1px solid var(--line-soft); margin-top: 2px; }
.acm-step .check {
width: 22px; height: 22px; border-radius: 50%;
border: 2px solid var(--ink-4);
flex-shrink: 0; margin-top: 1px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all .15s;
}
.acm-step .check:hover { border-color: var(--accent); }
.acm-step.done .check {
background: var(--green); border-color: var(--green); color: #fff;
}
.acm-step.done .check::after { content: '✓'; font-size: .7rem; font-weight: 700; }
.acm-step .body { flex: 1; min-width: 0; }
.acm-step .label {
font-size: .95rem; font-weight: 500; letter-spacing: -.2px;
color: var(--ink); line-height: 1.4;
}
.acm-step.done .label {
color: var(--ink-3); text-decoration: line-through;
text-decoration-color: var(--ink-4);
}
.acm-step .context {
margin-top: 6px; padding: 8px 10px;
background: rgba(255,204,0,.08);
border-left: 2px solid rgba(255,204,0,.5);
border-radius: 0 6px 6px 0;
font-size: .82rem; color: var(--ink-2);
line-height: 1.5;
}
.acm-step .step-tags {
display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap;
}
.acm-step .step-tag {
font-size: .68rem; padding: 2px 8px;
background: var(--bg-soft); color: var(--ink-3);
border-radius: 999px; font-weight: 600;
}
.acm-step .step-tag.locked-tag {
background: rgba(255,45,135,.1); color: var(--accent);
}
.acm-step .step-attr {
display: flex; align-items: center; gap: 6px;
margin-top: 8px;
opacity: .5;
transition: opacity .15s;
}
.acm-step:hover .step-attr,
.acm-step.has-assignees .step-attr { opacity: 1; }
.acm-step .step-assignees { display: flex; }
.acm-step .step-assignees img,
.acm-step .step-assignees .av-letter {
width: 20px; height: 20px; border-radius: 50%;
border: 1.5px solid var(--bg);
background: var(--bg-soft);
display: inline-flex; align-items: center; justify-content: center;
font-size: .62rem; font-weight: 700; color: var(--ink-2);
margin-left: -4px; object-fit: cover;
}
.acm-step .step-assignees img:first-child,
.acm-step .step-assignees .av-letter:first-child { margin-left: 0; }
.acm-step .step-btn {
width: 20px; height: 20px; border-radius: 50%;
border: 1px dashed var(--ink-4); background: transparent;
font-size: .72rem; color: var(--ink-3); cursor: pointer;
padding: 0; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
margin-left: 4px; transition: all .15s;
}
.acm-step .step-btn:hover {
border-color: var(--accent); color: var(--accent);
background: rgba(255,45,135,.06); transform: scale(1.15);
}
.acm-step .step-btn.proof:hover {
border-color: var(--blue); color: var(--blue); background: rgba(0,122,255,.06);
}
.acm-step.locked { opacity: .5; }
.acm-step.locked .check { border-style: dashed; }
/* PEOPLE */
.acm-person {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: 8px;
margin-bottom: 6px;
}
.acm-person:hover { background: var(--bg-soft); cursor: pointer; }
.acm-person .av,
.acm-person .av-letter {
width: 32px; height: 32px; border-radius: 50%;
background: var(--bg-soft);
display: inline-flex; align-items: center; justify-content: center;
font-size: .72rem; font-weight: 700; color: var(--ink-2);
object-fit: cover;
}
.acm-person .info { flex: 1; min-width: 0; }
.acm-person .name { font-size: .88rem; font-weight: 600; color: var(--ink); }
.acm-person .role { font-size: .7rem; color: var(--ink-3); margin-top: 2px; }
/* DELIVERABLES */
.acm-deliv {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 10px;
background: var(--bg-soft);
margin-bottom: 6px;
}
.acm-deliv .icon { font-size: 1.1rem; }
.acm-deliv .lbl {
font-size: .66rem; color: var(--ink-3);
text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.acm-deliv .title { font-size: .86rem; color: var(--ink); font-weight: 500; }
/* COFFRE TEASER */
.acm-coffre-cards {
display: grid; gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.acm-coffre-card {
border: 1px solid var(--line); border-radius: 10px;
overflow: hidden; cursor: pointer;
background: var(--bg);
}
.acm-coffre-card .cover {
height: 60px; background-size: cover; background-position: center;
background-color: var(--bg-soft);
}
.acm-coffre-card .cover.g1 { background: linear-gradient(135deg,#ff7ab6,#ff2d87); }
.acm-coffre-card .cover.g2 { background: linear-gradient(135deg,#5ac8fa,#007aff); }
.acm-coffre-card .cover.g3 { background: linear-gradient(135deg,#ffd60a,#ff9500); }
.acm-coffre-card .body { padding: 6px 8px; }
.acm-coffre-card .meta { font-size: .6rem; color: var(--ink-3); }
.acm-coffre-card h4 { margin: 2px 0 0; font-size: .74rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.acm-coffre-add {
border: 1.5px dashed var(--line); border-radius: 10px;
color: var(--ink-3); background: transparent;
display: flex; align-items: center; justify-content: center;
font-size: .78rem; font-weight: 600;
cursor: pointer; min-height: 84px;
font-family: inherit;
transition: all .15s;
}
.acm-coffre-add:hover { border-color: var(--accent); color: var(--accent); }
/* DISCLOSURES */
.acm-disclosure {
padding: 16px 24px;
border-bottom: 1px solid var(--line);
}
.acm-disclosure:last-child { border-bottom: none; }
.acm-disclosure summary {
list-style: none;
cursor: pointer; user-select: none;
}
.acm-disclosure summary::-webkit-details-marker { display: none; }
.acm-disclosure .disclosure-summary {
display: flex; align-items: center; gap: 10px;
transition: opacity .12s;
}
.acm-disclosure .disclosure-summary:hover { opacity: .8; }
.acm-disclosure .disclosure-summary .ico {
width: 26px; height: 26px; border-radius: 7px;
display: inline-flex; align-items: center; justify-content: center;
font-size: .85rem; flex-shrink: 0;
}
.acm-disclosure .disclosure-summary .lbl {
font-size: .98rem; font-weight: 700; letter-spacing: -.25px; color: var(--ink);
}
.acm-disclosure .disclosure-summary .count {
background: var(--bg-soft);
padding: 1px 8px; border-radius: 999px;
font-size: .7rem; font-weight: 700; color: var(--ink-3);
letter-spacing: .3px;
}
.acm-disclosure .disclosure-summary .chev {
margin-left: auto; color: var(--ink-3);
font-size: 1.1rem; transition: transform .2s cubic-bezier(.32,.72,0,1);
}
.acm-disclosure[open] .disclosure-summary .chev { transform: rotate(90deg); }
/* COMMENTS */
.acm-mcomments-list {
display: flex; flex-direction: column; gap: 10px;
padding: 14px 0;
}
.acm-mcomment {
display: flex; gap: 10px; align-items: flex-start;
}
.acm-mcomment .av,
.acm-mcomment .av-letter {
width: 32px; height: 32px; border-radius: 50%;
background: var(--bg-soft);
display: inline-flex; align-items: center; justify-content: center;
font-size: .74rem; font-weight: 700; color: var(--ink-2);
flex-shrink: 0; object-fit: cover;
}
.acm-mcomment .body {
flex: 1; min-width: 0;
background: var(--bg-soft); border-radius: 12px;
padding: 8px 12px;
}
.acm-mcomment .head {
display: flex; align-items: baseline; gap: 8px;
margin-bottom: 2px;
}
.acm-mcomment .name { font-size: .78rem; font-weight: 700; color: var(--ink); }
.acm-mcomment .date { font-size: .66rem; color: var(--ink-3); font-weight: 600; }
.acm-mcomment .text {
margin: 0; font-size: .86rem; color: var(--ink); line-height: 1.5;
}
.acm-mcomment-form {
display: flex; gap: 8px; align-items: stretch;
margin-top: 12px; padding-top: 12px;
border-top: 1px solid var(--line);
}
.acm-mcomment-form textarea {
flex: 1; border: 1px solid var(--line); border-radius: 11px;
padding: 10px 14px; font-family: inherit; font-size: .88rem;
resize: vertical; min-height: 48px; outline: none;
background: var(--bg); color: var(--ink);
}
.acm-mcomment-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,45,135,.12); }
.acm-mcomment-form button {
background: var(--accent); color: #fff; border: none;
border-radius: 11px; padding: 0 18px;
font-family: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
}
/* MLOG */
.acm-mlog-list { padding: 14px 0 0; display: flex; flex-direction: column; gap: 6px; }
.acm-mlog-row {
display: flex; align-items: center; gap: 10px;
padding: 7px 10px; border-radius: 8px;
background: var(--bg-soft);
}
.acm-mlog-row .av-letter {
width: 24px; height: 24px; border-radius: 50%;
background: var(--bg); border: 1px solid var(--line);
display: inline-flex; align-items: center; justify-content: center;
font-size: .66rem; font-weight: 700;
object-fit: cover;
}
.acm-mlog-row .line { font-size: .78rem; color: var(--ink); }
.acm-mlog-row .line em { font-style: normal; color: var(--accent); font-weight: 600; }
.acm-mlog-row .time { font-size: .64rem; color: var(--ink-3); margin-top: 1px; }
.acm-empty {
color: var(--ink-3); font-size: .88rem;
padding: 14px 0; text-align: center;
}
/* Mobile: réduire padding */
@media (max-width: 680px) {
.acm-overlay { padding: 12px; }
.acm-mhero { padding: 22px 18px 18px; }
.acm-mhero h1 { font-size: 1.5rem; }
.acm-mw { padding: 16px 18px; }
.acm-disclosure { padding: 14px 18px; }
.acm-mh { padding: 12px 14px; }
.acm-mh-actions { gap: 4px; }
.acm-act { padding: 6px 10px; font-size: .76rem; }
}