/* ===========================
đš THEME & VARIABLES
=========================== */
:root {
--bg: #0d0d0d;
--bg-card: #1a1a1a;
--bg-elevated: #1e1e1e;
--text: #ffffff;
--text-muted: #bbbbbb;
--border: #2c2c2c;
--accent: #1E88E5;
--accent-soft: #42A5F5;
--accent-strong: #1565C0;
--btn-bg: var(--accent);
--btn-bg-hover: var(--accent-strong);
--btn-text: #ffffff;
--positive-bg: #2e7d32;
--positive-border: #66bb6a;
--negative-bg: #c62828;
--negative-border: #ef5350;
--tooltip-bg: rgba(0,0,0,0.9);
--input-bg: #222222;
--input-border: #333333;
}
/* đ Mode clair */
body.light-mode {
--bg: #f5f5f5;
--bg-card: #ffffff;
--bg-elevated: #f0f0f0;
--text: #222222;
--text-muted: #555555;
--border: #cccccc;
--accent: #1976D2;
--accent-soft: #64B5F5;
--accent-strong: #1E88E5;
--btn-bg: var(--accent);
--btn-bg-hover: var(--accent-strong);
--btn-text: #ffffff;
--positive-bg: #c8e6c9;
--positive-border: #81c784;
--negative-bg: #ffcdd2;
--negative-border: #ef9a9a;
--tooltip-bg: rgba(255,255,255,0.92);
--input-bg: #ffffff;
--input-border: #cccccc;
}
/* ===========================
𧱠BASE LAYOUT
=========================== */
html {
background: var(--bg); /* 1ïžâŁ fond racine (anti flash blanc) */
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
padding-bottom: 0;
min-height: 100vh;
position: relative;
}
.app{
width: 100%;
max-width: 1400px; /* 1400 ou 1500 si tu veux + large */
margin: 0 auto;
padding: 20px 32px; /* + confortable sur desktop */
box-sizing: border-box;
}
main.container {
margin-bottom: 0;
}
nav.top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
/* ===========================
đ„ BRAND / LOGO
=========================== */
.brand {
display: flex;
align-items: center;
font-weight: 700;
font-size: 1.8em;
letter-spacing: 1px;
text-shadow: 0 0 8px var(--accent);
}
.brand img {
height: 40px;
margin-right: 10px;
}
/* ===========================
đ BUTTONS
=========================== */
.btn {
background: var(--btn-bg);
color: var(--btn-text);
padding: 8px 16px;
border-radius: 8px;
text-decoration: none;
font-size: .95em;
transition: .3s;
box-shadow: 0 4px 20px rgba(30,136,229,.6);
border: none;
}
.btn:hover {
background: var(--btn-bg-hover);
box-shadow: 0 6px 25px rgba(30,136,229,.8);
cursor: pointer;
}
/* Petits boutons (planning, actions, etc.) */
.btn-small {
background: var(--btn-bg);
color: var(--btn-text);
border: none;
padding: 4px 10px;
border-radius: 8px;
font-size: 0.8em;
cursor: pointer;
margin: 2px 0;
}
.btn-small:hover {
background: var(--btn-bg-hover);
}
/* Bouton danger */
.btn-danger {
background: #E53935;
}
.btn-danger:hover {
background: #C62828;
}
/* Bouton vue active */
.view-toggle.view-active {
background: var(--accent-soft);
color: #fff;
}
/* Bouton logout icon uniquement */
.logout-btn {
padding: 10px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
width: 48px;
height: 48px;
box-shadow: 0 4px 20px rgba(30,136,229,.6);
transition: background 0.3s, transform 0.3s;
}
.logout-btn:hover {
background: var(--btn-bg-hover);
transform: scale(1.1);
cursor: pointer;
}
/* Bouton "Aujourd'hui" plus discret */
.btn-today {
border-radius: 999px;
padding: 4px 10px;
font-size: 0.8em;
background: #333 !important;
color: #fff !important;
box-shadow: none;
text-decoration: none;
}
.btn-today:hover {
background: #444 !important;
}
.btn-today:focus {
outline: none;
box-shadow: 0 0 0 1px #555;
}
/* ===========================
đ NOTIFICATIONS
=========================== */
.notifications {
position: relative;
cursor: default;
}
#notifBtn{
cursor: pointer;
}
.notifications .badge {
position: absolute;
top: -5px;
right: -5px;
background: #F44336;
color: #fff;
font-size: .7em;
padding: 2px 6px;
border-radius: 50%;
box-shadow: 0 0 10px #F44336;
}
.notifications .dropdown {
display: none;
position: absolute;
right: 0;
top: 36px;
background: rgba(30,30,30,.95);
backdrop-filter: blur(12px);
border-radius: 12px;
width: 320px;
max-height: 340px;
overflow-y: auto;
z-index: 99;
padding: 10px;
}
/* Carte notification */
.notifications .dropdown .info-card {
background: rgba(255,255,255,0.05);
padding: 10px 12px;
border-radius: 8px;
margin-bottom: 8px;
line-height: 1.4;
}
.notifications .dropdown .info-card strong {
display: block;
margin-bottom: 4px;
color: var(--accent-soft);
}
.notifications .dropdown .info-card p {
margin: 0;
color: #fff;
}
/* ===========================
đ§ PANELS / CARDS / GRID
=========================== */
.panel.split {
display: flex;
gap: 40px;
flex-wrap: wrap;
margin-top: 20px;
}
/* === 2 grosses cartes "Mon compte" + "Historique" === */
.dashboard-main-cards {
justify-content: space-between;
}
.dashboard-main-cards > .card {
flex: 1 1 0; /* 2 colonnes équilibrées sur grand écran */
}
/* Sur mobile / tablette : elles prennent 100% de la largeur */
@media (max-width: 1023px) {
.dashboard-main-cards {
flex-direction: column;
gap: 20px;
}
.dashboard-main-cards > .card {
flex: 1 1 100%;
width: 100%;
}
}
.panel.split .left {
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
gap: 30px;
}
.panel.split .right,
.panel.split .right.chart-container {
flex: 3;
min-width: 500px;
}
.card {
background: var(--bg-card);
backdrop-filter: blur(12px);
padding: 24px;
border-radius: 16px;
border: 1px solid var(--border);
box-shadow: 0 8px 22px rgba(30,136,229,.25);
margin-bottom: 25px;
box-sizing: border-box;
/* animation */
transition:
transform 280ms cubic-bezier(.2,.8,.2,1),
box-shadow 280ms cubic-bezier(.2,.8,.2,1);
will-change: transform;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(30,136,229,.45);
}
body.light-mode .card {
background: rgba(255,255,255,0.85) !important;
backdrop-filter: blur(12px);
box-shadow: 0 0 14px rgba(0,0,0,0.08);
}
html, body { min-height: 100%; }
/* MĂ©trique principale */
.metric {
background: linear-gradient(135deg, var(--accent), var(--accent-soft));
color: #fff;
padding: 20px;
border-radius: 16px;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 1.2em;
transition: .3s;
box-shadow: 0 0 15px rgba(66,165,245,.6);
}
.metric .value {
font-size: 1.7em;
display: flex;
align-items: center;
gap: 6px;
transition: all .5s;
}
.metric .value.up {
color: #4CAF50;
}
.metric .value.down {
color: #F44336;
}
/* Grid dâinfo (features) */
.info-grid-pro {
display: flex;
flex-wrap: wrap;
gap: 25px;
margin-top: 20px;
}
/* â
UNIQUEMENT les cases principales */
.info-grid-pro > div {
background: rgba(40,40,40,.5);
border-radius: 12px;
padding: 12px;
flex: 1 1 120px;
text-align: center;
transition: all .3s;
box-shadow: 0 0 10px rgba(66,165,245,.5);
}
.info-grid-pro > div:hover {
box-shadow: 0 0 20px rgba(66,165,245,.7);
}
.info-grid-pro i {
font-size: 2.6em;
color: #64B5F6;
margin-bottom: 8px;
}
/* ===========================
đ TABLES / CHARTS
=========================== */
.history {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.history th,
.history td {
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid var(--border);
}
.history tr:nth-child(even) {
background: rgba(255,255,255,.03);
}
.history tr:hover {
background: rgba(30,136,229,.2);
box-shadow: 0 0 10px rgba(30,136,229,.5);
border-radius: 6px;
}
#filterMonth {
background: var(--btn-bg);
color: var(--btn-text);
border: none;
padding: 6px 10px;
border-radius: 6px;
margin-bottom: 12px;
cursor: pointer;
}
/* #chart {
width: 100%;
height: 500px !important;
box-shadow: 0 0 25px rgba(66,165,245,.6);
border-radius: 12px;
background: rgba(0,0,0,.2);
} */
/* ===========================
đ FORM INPUTS
=========================== */
input[type=number] {
background: var(--input-bg);
color: var(--text);
border: 1px solid var(--input-border);
border-radius: 6px;
text-align: center;
padding: 4px;
width: 80px;
}
input[type=text],
input[type=email],
input[type=date],
textarea,
select {
background: var(--input-bg);
color: var(--text);
border: 1px solid var(--input-border);
border-radius: 6px;
padding: 6px;
width: 100%;
margin-bottom: 12px;
box-sizing: border-box;
}
textarea {
resize: vertical;
}
/* ===========================
đ§ TABS (ONGLETS)
=========================== */
/* Conteneur onglets avec slider gradient */
.tabs {
position: relative;
display: flex;
gap: 15px;
margin-top: 20px;
cursor: pointer;
border-radius: 999px;
padding: 4px;
background: #1a1a1a;
overflow: hidden;
}
.tab {
position: relative;
padding: 8px 16px;
border-radius: 999px;
font-size: 0.9em;
transition: transform .25s ease, color .25s ease, opacity .25s ease;
opacity: .7;
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
}
.tab-icon {
font-size: 1.1em;
}
.tab-label {
font-size: 0.9em;
}
.tab.active {
opacity: 1;
transform: scale(1.06);
font-weight: 600;
}
/* Barre glissante */
.tabs-slider {
position: absolute;
bottom: 4px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent-soft), #90CAF9);
left: 0;
width: 0;
transition: left .25s ease, width .25s ease;
}
/* Effet rebond sur contenu */
.tab-bounce {
animation: tabBounce .35s ease-out;
}
@keyframes tabBounce {
0% { transform: translateY(0); }
35% { transform: translateY(-5px); }
100% { transform: translateY(0); }
}
/* Wrapper pour effet fade et scroll mobile */
.tabs-wrapper {
position: relative;
overflow-x: hidden;
margin-bottom: 8px;
}
/* Slider indicateur (optionnel) */
.tabs-indicator {
position: absolute;
bottom: 0;
height: 3px;
border-radius: 999px;
background: var(--accent-soft);
width: 0;
transform: translateX(0);
opacity: 0;
transition:
transform 0.25s cubic-bezier(.22,.61,.36,1),
width 0.25s cubic-bezier(.22,.61,.36,1),
opacity 0.2s ease;
}
/* ===========================
đ TOAST CONTAINER
=========================== */
#toastContainer {
position: fixed;
top: 0;
right: 0;
z-index: 9999;
}
/* ===========================
đ
PLANNING TABLE
=========================== */
.planning-table td.pnl-positive {
color: #4CAF50;
font-weight: 600;
}
.planning-table td.pnl-negative {
color: #F44336;
font-weight: 600;
}
.planning-table tr:hover td.pnl-positive {
background: rgba(76,175,80,0.08);
}
.planning-table tr:hover td.pnl-negative {
background: rgba(244,67,54,0.08);
}
/* Boutons dâaction dans la table */
.planning-table .btn-small {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 110px;
box-sizing: border-box;
}
/* Switch vue planning (tableau / calendrier) */
.planning-view-switch {
display: flex;
gap: 10px;
margin-bottom: 10px;
justify-content: flex-start;
}
/* ===========================
đ
CALENDRIER PLANNING
=========================== */
.calendar-header {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-weight: 600;
margin-bottom: 8px;
text-align: center;
font-size: 1em;
opacity: 0.9;
}
.calendar-title {
min-width: 140px;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}
.calendar-day-name {
text-align: center;
font-size: 0.8em;
opacity: 0.7;
}
/* Case jour */
.calendar-cell {
min-height: 80px;
background: #111;
border-radius: 14px;
padding: 6px 6px 8px;
box-sizing: border-box;
position: relative;
box-shadow: 0 0 10px rgba(0,0,0,0.45);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.calendar-cell.empty {
background: transparent;
box-shadow: none;
}
.calendar-date {
font-size: 0.75em;
opacity: 0.7;
}
/* Montant affiché */
.calendar-amount,
.calendar-amount-editable {
margin-top: 4px;
font-weight: 700;
font-size: 1.05em;
line-height: 1.15;
padding: 3px 6px;
border-radius: 10px;
background: rgba(0,0,0,0.35);
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.calendar-amount-editable {
min-height: 20px;
outline: none;
cursor: text;
}
.calendar-amount-editable:focus {
box-shadow: 0 0 0 1px var(--accent-soft);
background: rgba(0,0,0,0.55);
}
/* Texte sous le montant */
.calendar-extra {
margin-top: 4px;
font-size: 0.75em;
opacity: 0.85;
}
/* Couleurs jours positifs / négatifs */
.calendar-cell.day-positive {
background: linear-gradient(145deg, rgba(56,142,60,0.9), rgba(27,94,32,0.95));
border: 1px solid #4CAF50;
color: #E8F5E9;
box-shadow: 0 0 16px rgba(76,175,80,0.55);
}
.calendar-cell.day-negative {
background: linear-gradient(145deg, rgba(211,47,47,0.9), rgba(183,28,28,0.95));
border: 1px solid #F44336;
color: #FFEBEE;
box-shadow: 0 0 16px rgba(244,67,54,0.55);
}
/* Badge Ă©change */
.tag-exchange {
display: inline-block;
background: #FFB300;
color: #000;
font-size: 0.75em;
padding: 2px 6px;
border-radius: 6px;
margin-right: 6px;
}
/* Atténuation via recherche */
.calendar-cell.dim {
opacity: 0.25;
filter: grayscale(0.6);
}
/* Jour actuel / sélectionné */
.calendar-cell.today-focus,
.calendar-cell.selected-day {
box-shadow:
0 0 0 2px #FFD54F,
0 0 18px rgba(255,213,79,0.9);
position: relative;
}
.calendar-cell.today-focus::after,
.calendar-cell.selected-day::after {
position: absolute;
right: 6px;
bottom: 6px;
font-size: 0.65em;
background: rgba(0,0,0,0.7);
padding: 2px 6px;
border-radius: 999px;
}
.calendar-cell.today-focus::after {
content: "Aujourd'hui";
}
/* .calendar-cell.selected-day::after {
content: "SĂ©lection";
} */
.calendar-cell.selected-day::after {
content: "â
";
position: absolute;
top: 6px;
right: 8px;
z-index: 20;
font-size: .9rem;
font-weight: 700;
color: #FFD54F;
text-shadow:
0 1px 2px rgba(0,0,0,.6),
0 0 6px rgba(255,193,7,.6);
pointer-events: none;
}
/* Sparkline verticale */
.calendar-sparkline {
width: 6px;
border-radius: 999px;
margin-top: 4px;
margin-bottom: 2px;
background: linear-gradient(to top, rgba(0,0,0,0.1), rgba(255,255,255,0.2));
align-self: flex-end;
opacity: 0.8;
}
/* Tooltip calendrier */
.calendar-tooltip {
position: fixed;
z-index: 9999;
background: var(--tooltip-bg);
color: var(--text);
padding: 6px 10px;
border-radius: 8px;
font-size: 0.75em;
max-width: 220px;
pointer-events: none;
box-shadow: 0 4px 15px rgba(0,0,0,0.7);
opacity: 0;
transform: translateY(4px);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.calendar-tooltip.visible {
opacity: 1;
transform: translateY(0);
}
/* Jours filtrés / animations */
.calendar-grid,
.planning-table {
animation: fadeInMonth .35s ease-out;
}
@keyframes fadeInMonth {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===========================
đ§Ÿ FORM PLANNING
=========================== */
.planning-input-card {
display: flex;
flex-wrap: wrap;
gap: 18px;
align-items: flex-start;
padding: 16px 18px;
border-radius: 14px;
background: var(--bg-card);
box-shadow: 0 0 18px rgba(30,136,229,0.35);
margin-bottom: 18px;
}
.planning-input-col {
flex: 1;
min-width: 190px;
}
.planning-input-col-large {
flex: 1.4;
min-width: 260px;
}
.planning-label {
font-size: 0.9em;
opacity: 0.9;
margin-bottom: 4px;
display: block;
}
.planning-date-wrapper,
.planning-amount-wrapper {
display: flex;
align-items: center;
gap: 8px;
background: var(--input-bg);
border-radius: 10px;
padding: 6px 10px;
border: 1px solid var(--input-border);
}
.planning-date-wrapper i,
.planning-amount-wrapper i {
font-size: 1.1em;
opacity: 0.8;
}
.planning-date-wrapper input[type="date"],
.planning-amount-wrapper input[type="number"] {
background: transparent;
border: none;
color: #fff;
width: 100%;
outline: none;
}
.planning-date-human {
margin-top: 4px;
font-size: 0.8em;
opacity: 0.7;
}
/* Couleur dynamique montant */
.planning-amount-wrapper.positive {
border-color: #4CAF50;
box-shadow: 0 0 10px rgba(76,175,80,0.4);
}
.planning-amount-wrapper.negative {
border-color: #F44336;
box-shadow: 0 0 10px rgba(244,67,54,0.4);
}
/* Boutons rapides +/- */
.planning-quick-buttons {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 0.8em;
}
.planning-quick-buttons button {
padding: 3px 8px;
border-radius: 999px;
border: 1px solid #444;
cursor: pointer;
user-select: none;
background: #1e1e1e;
color: #fff;
}
.planning-quick-buttons button:hover {
border-color: var(--accent);
box-shadow: 0 0 10px rgba(30,136,229,0.5);
}
.planning-amount-hint {
margin-top: 4px;
display: block;
font-size: 0.75em;
opacity: 0.7;
}
/* Commentaire + compteur */
.planning-comment-wrapper textarea {
width: 100%;
background: var(--input-bg);
border-radius: 10px;
border: 1px solid var(--input-border);
padding: 8px 10px;
resize: vertical;
font-size: 0.9em;
color: var(--text);
box-sizing: border-box;
}
.planning-comment-footer {
text-align: right;
font-size: 0.75em;
opacity: 0.6;
margin-top: 2px;
}
.planning-exchange-row {
margin-top: 10px;
}
.planning-exchange-label {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.8em;
opacity: 0.9;
line-height: 1.3;
}
.planning-exchange-label input {
margin-top: 2px;
}
.planning-exchange-label span small {
opacity: 0.7;
}
/* Boutons form planning */
.planning-buttons {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.planning-btn-cancel {
background: #555 !important;
}
/* ===========================
đ
MONTH SELECTOR (scroll + pills)
=========================== */
.month-selector {
display: flex;
align-items: center;
gap: 8px;
background: #1e1e1e;
padding: 4px 10px;
border-radius: 999px;
box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
.month-selector select {
background: #222;
color: #fff;
border: none;
border-radius: 999px;
padding: 4px 8px;
font-size: 0.85em;
cursor: pointer;
}
.month-selector select:focus {
outline: none;
box-shadow: 0 0 0 1px var(--accent-soft);
}
.month-picker-btn {
background: transparent;
border: none;
color: #fff;
font-size: 0.9em;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
}
.month-picker-btn i {
font-size: 1.1em;
}
.month-picker-input {
display: none;
}
/* Scroll horizontal mois */
.month-scroll {
display: flex;
overflow-x: auto;
gap: 8px;
padding: 4px 0 8px 0;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.month-pill {
flex: 0 0 auto;
scroll-snap-align: center;
border-radius: 999px;
border: 1px solid #444;
background: #1e1e1e;
color: #eee;
padding: 4px 10px;
font-size: 0.8em;
cursor: pointer;
white-space: nowrap;
}
.month-pill.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 0 10px rgba(30,136,229,0.7);
}
/* ===========================
đ± RESPONSIVE
=========================== */
/* --- Desktop & tablettes > 1023px déjà géré par défaut --- */
/* --- Tablettes (<= 1023px) --- */
@media (max-width: 1023px) {
.panel.split {
flex-direction: column;
gap: 20px;
}
.panel.split .left,
.panel.split .right {
min-width: 100% !important;
}
#chart {
height: 400px !important;
}
.info-grid-pro {
gap: 15px;
}
.info-grid-pro div {
flex: 1 1 45%;
}
}
/* --- Smartphones (< 768px) portrait --- */
@media (max-width: 767px) and (orientation: portrait) {
.panel.split {
flex-direction: column;
}
.panel.split .right.chart-container {
order: 1;
width: 100%;
margin: 15px 0;
height: 300px !important;
}
.panel.split .left {
order: 2;
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
}
.metric {
width: 100%;
min-width: 250px;
box-sizing: border-box;
}
.info-grid-pro {
flex-direction: column;
}
.info-grid-pro div {
flex: 1 1 100%;
}
/* barre dâonglets en bas type app mobile */
body {
padding-bottom: 60px;
}
.tabs {
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0;
border-radius: 0;
padding: 6px 10px 8px 10px;
background: rgba(10,10,10,0.96);
box-shadow: 0 -4px 18px rgba(0,0,0,0.7);
justify-content: space-between;
gap: 6px;
z-index: 999;
}
.tab {
flex: 1 1 auto;
text-align: center;
padding: 6px 4px;
font-size: 0.75em;
flex-direction: column;
gap: 2px;
}
.tab-icon {
font-size: 1.2em;
}
.tab.active {
transform: scale(1.08);
}
.tabs-slider {
height: 3px;
bottom: 3px;
}
main.container {
margin-bottom: 10px;
}
/* Switch vue planning centré */
.planning-view-switch {
justify-content: center;
gap: 12px;
}
.planning-view-switch .btn-small {
flex: 1 1 auto;
max-width: 140px;
padding: 10px 0;
border-radius: 12px;
font-size: 0.95em;
font-weight: 600;
}
.planning-view-switch .view-active {
background: var(--accent-soft) !important;
box-shadow: 0 0 12px rgba(66,165,245,0.8);
transform: scale(1.03);
}
.planning-input-card {
padding: 12px 10px;
}
/* Actions planning en colonne */
.planning-table td:last-child {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.planning-table td:last-child form {
width: 100%;
}
.planning-table td:last-child .btn-small {
width: 100%;
min-width: 0;
text-align: center;
}
#planningCalendarView .calendar-grid {
width: 100%;
box-sizing: border-box;
gap: 4px;
}
#planningCalendarView .calendar-cell {
padding: 4px 3px;
min-width: 0;
min-height: 75px;
border-radius: 16px;
}
#planningCalendarView .calendar-amount,
#planningCalendarView .calendar-amount-editable {
font-size: clamp(0.8em, 3.6vw, 1.05em);
line-height: 1.05;
padding: 2px 5px;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#planningCalendarView .calendar-extra {
font-size: 0.65em;
margin-top: 2px;
}
}
/* --- Smartphones & tablettes landscape --- */
@media (max-width: 1024px) and (orientation: landscape) {
.panel.split {
flex-direction: column !important;
}
.panel.split .right.chart-container {
order: 1 !important;
width: 100% !important;
margin: 10px 0;
height: 280px !important;
}
.panel.split .left {
order: 2 !important;
width: 100% !important;
}
#chart {
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
}
}
/* --- iPhone / petits Ă©crans, tabs scroll horizontal avec fade --- */
@media (max-width: 480px) and (orientation: portrait) {
.tabs-wrapper {
position: relative;
overflow-x: hidden;
margin-bottom: 8px;
}
.tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 10px;
padding: 8px 4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
display: none;
}
.tab {
flex: 0 0 auto;
padding: 10px 16px;
white-space: nowrap;
font-size: 0.9em;
border-radius: 999px;
transform-origin: center;
transition:
transform 0.22s cubic-bezier(.22,.61,.36,1),
background 0.22s ease,
color 0.22s ease;
}
.tab:active {
transform: scale(0.94);
}
.tab.active {
transform: scale(1.06);
background: var(--accent);
color: #fff;
font-weight: 600;
}
.tabs-wrapper::before,
.tabs-wrapper::after {
content: "";
position: absolute;
top: 0;
width: 25px;
height: 100%;
z-index: 5;
pointer-events: none;
}
.tabs-wrapper::before {
left: 0;
background: linear-gradient(to right, rgba(18,18,18,1), rgba(18,18,18,0));
}
.tabs-wrapper::after {
right: 0;
background: linear-gradient(to left, rgba(18,18,18,1), rgba(18,18,18,0));
}
}
/* --- iPad portrait spécifique : graphique sous les boutons --- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
.panel.split {
flex-direction: column !important;
}
.panel.split .top-buttons {
order: 1 !important;
width: 100% !important;
margin-bottom: 15px !important;
}
.panel.split .right.chart-container {
order: 2 !important;
width: 100% !important;
height: 350px !important;
margin-top: 10px !important;
}
.panel.split .left {
order: 3 !important;
width: 100% !important;
}
}
/* --- Smartphones landscape : chart plus haut --- */
@media only screen
and (max-device-width: 767px)
and (orientation: landscape) {
#chart,
.panel.split .right.chart-container {
height: 400px !important;
transition: height 0.6s ease-in-out !important;
}
}
/* Boutons MetaTrader */
.btn-platform,
.btn-download {
background: linear-gradient(90deg, #1976D2, #42A5F5);
color: white;
border: none;
padding: 12px 24px;
border-radius: 12px;
cursor: pointer;
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
transition: all 0.3s ease;
}
.btn-download {
background: linear-gradient(90deg, #424242, #616161);
}
.btn-platform:hover,
.btn-download:hover {
transform: translateY(-2px);
filter: brightness(1.2);
}
.arrow {
transition: transform 0.3s ease;
}
.btn-platform:hover .arrow,
.btn-download:hover .arrow {
transform: translateX(6px);
}
/* EmpĂȘche le dĂ©bordement sur iPhone */
.planning-table-responsive {
width: 100%;
overflow-x: auto; /* scroll horizontal si nécessaire */
-webkit-overflow-scrolling: touch; /* scroll fluide iOS */
}
/* Le tableau ne déborde plus */
.planning-table {
width: 100%;
border-collapse: collapse;
table-layout: auto; /* on laisse le navigateur gérer, plus souple pour les boutons */
}
/* Centre le texte dans toutes les cellules */
.planning-table th,
.planning-table td {
text-align: center;
vertical-align: middle;
padding: 8px;
}
/* â Garde les boutons exactement comme avant */
.planning-table .btn-small {
display: inline-flex;
justify-content: center;
align-items: center;
white-space: nowrap;
}
/* Ajuste juste pour iPhone / petits Ă©crans */
@media (max-width: 600px) {
.planning-table th:nth-child(1),
.planning-table td:nth-child(1) {
width: 30%;
}
.planning-table th:nth-child(2),
.planning-table td:nth-child(2) {
width: 25%;
}
.planning-table th:nth-child(3),
.planning-table td:nth-child(3) {
width: 15%;
}
.planning-table th:nth-child(4),
.planning-table td:nth-child(4) {
width: 30%;
}
}
.planning-table td {
padding-left: 8px;
padding-right: 8px;
}
/* Wrapper responsive (on le garde) */
.planning-table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* texte centré */
.planning-table th,
.planning-table td {
text-align: center;
vertical-align: middle;
padding: 8px 6px;
}
/* Colonne Actions : on évite que ça casse / se chevauche */
.planning-table th:nth-child(4),
.planning-table td:nth-child(4) {
white-space: nowrap;
}
/* Boutons Modifier / Supprimer â corrigĂ©s */
.planning-table .btn-small {
display: inline-flex; /* aligne icon + texte */
align-items: center;
justify-content: center;
gap: 6px; /* espace entre icĂŽne et texte */
padding: 6px 14px; /* plus de place autour du texte */
font-size: 0.85rem;
border-radius: 12px; /* arrondi propre */
white-space: nowrap; /* empĂȘche de couper le texte */
box-sizing: border-box;
min-height: 36px; /* uniforme */
}
/* Colonne Actions â aucun Ă©crasement */
.planning-table td:last-child {
white-space: nowrap;
padding-left: 10px;
padding-right: 10px;
}
/* iPhone : boutons parfaits */
@media (max-width: 480px) {
.planning-table .btn-small {
padding: 6px 12px;
font-size: 0.78rem;
min-width: 100px; /* empĂȘche le dĂ©passement */
}
.planning-table td:last-child {
display: flex;
flex-direction: column; /* un bouton par ligne */
gap: 8px;
align-items: center;
width: 100%;
}
.planning-table td:last-child form,
.planning-table td:last-child button {
width: 100%; /* pleine largeur propre */
}
}
@media (max-width: 767px) {
/* Groupe des icĂŽnes Ă droite du header */
nav.top > div:last-child {
display: flex !important;
align-items: center !important;
gap: 12px !important; /* équilibre général des espacements */
}
/* Cloche : on la décale légÚrement du titre */
.notifications {
margin-left: 8px !important;
margin-right: 2px !important;
}
/* Bouton power : normalisé */
.logout-btn {
width: 42px;
height: 42px;
margin: 0;
}
/* đ/âïž bouton : rapprochĂ© du power */
#themeToggle {
padding: 6px 8px !important;
margin-left: 0 !important;
}
}
/* Espace entre xProTrading et la cloche */
@media (max-width: 767px) {
.brand {
display: flex;
align-items: center;
gap: 10px !important; /* espace entre logo / texte / cloche */
}
.notifications {
margin-left: 10px !important; /* espace entre xProTrading et la cloche */
}
}
/* đ LisibilitĂ© des onglets en mode clair sur ORDI uniquement */
@media (min-width: 1024px) {
body.light-mode .tabs {
background: #333; /* fond un peu plus clair que le noir pur */
}
body.light-mode .tab {
color: #ffffff; /* texte blanc sur fond sombre */
opacity: 0.8;
}
body.light-mode .tab.active {
color: #ffffff; /* onglet actif bien visible */
opacity: 1;
font-weight: 600;
}
}
/* đ± Fix planning + badge Ăchange qui dĂ©cale tout (mobile) */
@media (max-width: 767px) {
/* Largeurs stables des colonnes */
.planning-table th:nth-child(1),
.planning-table td:nth-child(1) { /* Date */
width: 30%;
}
.planning-table th:nth-child(2),
.planning-table td:nth-child(2) { /* RĂ©sultat */
width: 28%;
white-space: nowrap; /* évite que le ⏠passe à la ligne */
}
.planning-table th:nth-child(3),
.planning-table td:nth-child(3) { /* Note / Ăchange */
width: 12%;
text-align: center;
}
.planning-table th:nth-child(4),
.planning-table td:nth-child(4) { /* Actions */
width: 30%;
}
/* Badge Ăchange plus compact */
.tag-exchange {
font-size: 0.7em;
padding: 1px 5px;
white-space: nowrap;
}
}
/* EmpĂȘcher la ligne RĂ©sultat de se casser en deux lignes sur iPhone */
.planning-table td:nth-child(2) {
white-space: nowrap !important;
}
/* RĂ©duction des boutons Modifier / Supprimer sur iPhone */
@media (max-width: 600px) {
.planning-table .btn-small {
padding: 4px 6px !important; /* plus petit */
font-size: 0.75em !important; /* texte plus petit */
min-width: 90px !important; /* largeur réduite */
border-radius: 8px !important; /* arrondi plus compact */
}
/* icĂŽnes dans les boutons un peu plus petites */
.planning-table .btn-small i {
font-size: 0.9em;
}
/* espace entre les 2 boutons */
.planning-table td:last-child {
gap: 4px !important;
}
}
/* Boutons ultra-compact pour iPhone */
@media (max-width: 600px) {
.planning-table .btn-small {
padding: 3px 4px !important; /* trĂšs compact */
font-size: 0.65em !important; /* texte plus petit */
min-width: 70px !important; /* réduit de 40% */
border-radius: 6px !important;
line-height: 1 !important;
}
/* icĂŽne dans les boutons encore plus petite */
.planning-table .btn-small i {
font-size: 0.75em !important;
}
/* espace minimal entre les deux boutons */
.planning-table td:last-child {
gap: 2px !important;
}
/* éviter que le texte déborde */
.planning-table .btn-small span,
.planning-table .btn-small {
white-space: nowrap;
}
}
/* Boutons version XXS pour iPhone â ultra compacts */
@media (max-width: 600px) {
.planning-table .btn-small {
padding: 2px 3px !important; /* minimal */
font-size: 0.55em !important; /* texte trĂšs petit */
min-width: 58px !important; /* encore plus réduit */
border-radius: 5px !important;
line-height: 1 !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px; /* petit espace icĂŽne/texte */
}
/* IcĂŽne encore plus petite */
.planning-table .btn-small i {
font-size: 0.65em !important;
}
/* RĂ©duction encore plus forte de l'Ă©cart entre boutons */
.planning-table td:last-child {
gap: 1px !important;
}
/* EmpĂȘche tout dĂ©bordement */
.planning-table .btn-small span,
.planning-table .btn-small {
white-space: nowrap !important;
}
}
/* đ± iPhone portrait : icĂŽnes Modifier / Supprimer bien visibles, cĂŽte Ă cĂŽte */
@media (max-width: 767px) and (orientation: portrait) {
/* Colonne Actions : icÎnes l'une à cÎté de l'autre */
.planning-table td:last-child {
display: flex !important;
flex-direction: row !important; /* cĂŽte Ă cĂŽte */
justify-content: center;
align-items: center;
gap: 8px;
padding: 4px 0;
white-space: nowrap;
}
.planning-table td:last-child form {
width: auto;
margin: 0;
}
/* Boutons = petits carrés */
.planning-table .btn-small {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
max-width: 34px !important;
padding: 0 !important;
border-radius: 8px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background-clip: padding-box;
font-size: 0 !important; /* cache le texte */
}
/* IcĂŽnes RemixIcon bien visibles */
.planning-table .btn-small i {
font-size: 18px !important;
color: #ffffff !important;
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
/* Texte "Modifier" / "Supprimer" masqué */
.planning-table .btn-small span {
display: none !important;
}
}
@media (max-width: 767px) and (orientation: portrait) {
/* Actions planning EN LIGNE (icĂŽnes cĂŽte Ă cĂŽte) */
.planning-table td:last-child {
display: flex;
flex-direction: row; /* âŹ
ïž cĂŽte Ă cĂŽte */
justify-content: center;
align-items: center;
gap: 8px; /* espace entre bleu et rouge */
}
.planning-table td:last-child form {
width: auto;
}
.planning-table td:last-child .btn-small {
width: 34px;
min-width: 34px;
max-width: 34px;
text-align: center;
}
}
/* đ± iPhone portrait : rĂ©duire la colonne Note pour recentrer tout */
@media (max-width: 767px) and (orientation: portrait) {
/* Colonne Note trĂšs compacte */
.planning-table th:nth-child(3),
.planning-table td:nth-child(3) {
width: 100% !important;
padding: 0 !important;
}
/* Colonne Actions mieux centrée */
.planning-table th:nth-child(4),
.planning-table td:nth-child(4) {
width: 100% !important;
}
}
/* Carte spĂ©cifique TradingView â responsive */
.tv-card {
width: 100%;
/* sur grand Ă©cran : max 650px, mais pas plus de 75% de la hauteur de l'Ă©cran */
height: min(75vh, 650px);
display: flex;
flex-direction: column;
}
/* Tablettes / Ă©crans moyens */
@media (max-width: 1023px) {
.tv-card {
height: min(70vh, 550px);
}
}
/* Smartphones (iPhone, etc.) */
@media (max-width: 767px) {
.tv-card {
height: 70vh; /* prend 70% de la hauteur de l'Ă©cran */
padding: 16px; /* un peu moins de padding pour gagner de la place */
}
}
/* Container interne qui âclippeâ le graphique */
.tv-wrapper {
flex: 1;
margin-top: 10px;
border-radius: 20px; /* mĂȘme arrondi que .card si besoin */
overflow: hidden; /* coupe tout ce qui dépasse */
position: relative;
}
/* Le conteneur du widget prend toute la place */
#tradingview-widget {
width: 100%;
height: 100%;
}
/* Lâiframe gĂ©nĂ©rĂ©e par TradingView hĂ©rite de lâarrondi */
#tradingview-widget iframe {
width: 100% !important;
height: 100% !important;
border-radius: 20px; /* ou inherit si tu préfÚres */
}
/* đ„ïž Mode plein Ă©cran custom */
/* EmpĂȘche la page de scroller quand le graphique est en plein Ă©cran */
body.tv-no-scroll {
overflow: hidden;
}
/* Carte TradingView en plein Ă©cran */
.tv-card.fullscreen {
position: fixed;
inset: 0; /* top:0; right:0; bottom:0; left:0 */
margin: 0;
border-radius: 0;
z-index: 9999;
/* height: 100vh; */
height: calc(var(--vh) * 100);
box-shadow: none;
}
/* Wrapper en plein Ă©cran */
.tv-card.fullscreen .tv-wrapper {
margin-top: 8px;
border-radius: 0;
}
/* Lâiframe ne garde plus lâarrondi en plein Ă©cran */
.tv-card.fullscreen #tradingview-widget iframe {
border-radius: 0;
}
/* đ± Cacher le bouton plein Ă©cran TradingView sur mobile */
@media (max-width: 767px) {
#tvFullscreenToggle {
display: none !important;
}
}
/* =========================================================
đ MODE CLAIR â RĂGLES SPĂCIFIQUES SIMPLIFIĂES
========================================================= */
/* 1ïžâŁ Inputs / selects gĂ©nĂ©riques en mode clair
(hors exceptions comme la carte Planning) */
body.light-mode input[type="text"],
body.light-mode input[type="number"],
body.light-mode input[type="date"],
body.light-mode input[type="email"],
body.light-mode textarea,
body.light-mode select {
background: var(--input-bg);
color: var(--text);
border: 1px solid var(--input-border);
}
/* 2ïžâŁ Carte formulaire Planning :
- on garde un fond sombre
- texte et champs en blanc pour la lisibilité */
/*body.light-mode .planning-input-card {
background: #111111;
color: #ffffff;
}
body.light-mode .planning-input-card .planning-label,
body.light-mode .planning-input-card .planning-date-human,
body.light-mode .planning-input-card .planning-amount-hint,
body.light-mode .planning-input-card .planning-comment-footer,
body.light-mode .planning-input-card .planning-exchange-label,
body.light-mode .planning-input-card .planning-exchange-label small {
color: #f5f5f5;
}
body.light-mode .planning-input-card input,
body.light-mode .planning-input-card textarea {
background: #191919;
color: #ffffff;
border-color: #333333;
}
body.light-mode .planning-input-card input::placeholder,
body.light-mode .planning-input-card textarea::placeholder {
color: rgba(255,255,255,0.6);
}*/
/* Boutons rapides (-50 / +50) dans le formulaire */
/*body.light-mode .planning-input-card .planning-quick-buttons button {
background: #2a2a2a;
color: #ffffff;
border: 1px solid #444444;
}*/
/* 3ïžâŁ Barre du mois / navigation Planning (mois + Choisir + Aujourd'hui) */
body.light-mode .calendar-header {
color: #111111;
}
body.light-mode .month-selector {
background: #eaeaea;
color: #111111;
}
body.light-mode .month-picker-btn {
background: #ffffff;
color: #111111;
border-radius: 999px;
padding: 4px 8px;
}
body.light-mode .btn-today {
background: #ffffff !important;
color: #111111 !important;
border: 1px solid #cccccc !important;
}
/* Pilules des mois (Janvier, FĂ©vrier, ...) */
body.light-mode .month-pill {
background: #e6e6e6;
color: #111111;
}
body.light-mode .month-pill.active {
background: var(--accent);
color: #ffffff;
}
/* 4ïžâŁ Calendrier : fond plus clair et texte lisible */
body.light-mode .calendar-cell {
background: #f7f7f7;
}
body.light-mode .calendar-date,
body.light-mode .calendar-amount,
body.light-mode .calendar-amount-editable,
body.light-mode .calendar-extra {
color: #111111;
}
/* 5ïžâŁ Tableaux History + Planning en mode clair */
body.light-mode table.history th,
body.light-mode table.history td,
body.light-mode .planning-table th,
body.light-mode .planning-table td {
background: #ffffff;
color: #111111;
}
/* Montants positifs / négatifs dans le planning (mode clair) */
body.light-mode .planning-table td.pnl-positive {
color: #1a7f2e;
}
body.light-mode .planning-table td.pnl-negative {
color: #c62828;
}
/* đ„ Cacher la barre slider des onglets uniquement sur iPhone */
@supports (-webkit-touch-callout: none) {
.tabs-slider {
display: none !important;
}
}
/* ===========================
đ SUPPORT / FAQ
=========================== */
.support-intro {
font-size: 0.95em;
opacity: 0.9;
margin-bottom: 14px;
}
/* Barre de recherche FAQ */
.faq-search-bar {
display: flex;
align-items: center;
gap: 8px;
background: rgba(20,20,20,0.9);
border-radius: 999px;
padding: 6px 10px;
border: 1px solid #333;
margin-bottom: 10px;
}
.faq-search-bar i {
opacity: 0.8;
}
.faq-search-bar input {
background: transparent;
border: none;
outline: none;
color: #fff;
width: 100%;
font-size: 0.9em;
}
body.light-mode .faq-search-bar {
background: #f4f4f4;
border-color: #d0d0d0;
}
body.light-mode .faq-search-bar input {
color: #222;
}
/* Catégories */
.support-categories {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.support-cat-btn {
border-radius: 999px;
border: 1px solid #444;
background: #1e1e1e;
color: #eee;
padding: 4px 10px;
font-size: 0.8em;
cursor: pointer;
transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.support-cat-btn:hover {
transform: translateY(-1px);
box-shadow: 0 0 10px rgba(30,136,229,0.6);
}
.support-cat-btn.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
box-shadow: 0 0 12px rgba(30,136,229,0.9);
}
body.light-mode .support-cat-btn {
background: #e9e9e9;
color: #222;
border-color: #ccc;
}
/* Accordéon */
.accordion {
margin-top: 8px;
}
.accordion-item {
background: rgba(10,10,10,0.9);
border-radius: 12px;
margin-bottom: 8px;
overflow: hidden;
border: 1px solid rgba(66,165,245,0.25);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
body.light-mode .accordion-item {
background: #ffffff;
border-color: #d0e2ff;
box-shadow: 0 0 8px rgba(0,0,0,0.08);
}
.accordion-header {
width: 100%;
border: none;
background: transparent;
color: inherit;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
cursor: pointer;
text-align: left;
font-size: 0.9em;
gap: 8px;
}
.accordion-header i {
transition: transform 0.2s ease;
flex-shrink: 0;
}
/* corps de l'accordéon : anim max-height (compatible iOS) */
.accordion-body {
max-height: 0;
overflow: hidden;
padding: 0 12px;
opacity: 0;
transition:
max-height 0.25s ease,
opacity 0.2s ease;
font-size: 0.85em;
line-height: 1.5;
}
.accordion-body ul {
padding-left: 18px;
margin-top: 4px;
margin-bottom: 6px;
}
/* Ă©tat ouvert */
.accordion-item.open .accordion-body {
opacity: 1;
padding-bottom: 10px;
}
.accordion-item.open .accordion-header i {
transform: rotate(180deg);
}
/* Mobile */
@media (max-width: 767px) {
.faq-search-bar {
padding: 6px 12px;
}
.support-categories {
gap: 4px;
}
.support-cat-btn {
font-size: 0.75em;
padding: 4px 8px;
}
}
/* đ± iPhone / petits smartphones : header compact en mode portrait */
@media (max-width: 480px) and (orientation: portrait) {
nav.top {
padding: 6px 8px;
}
/* Logo + nom un poil plus compact */
.brand {
font-size: 1.2em;
}
.brand img {
height: 32px;
margin-right: 6px;
}
/* Groupe des boutons Ă droite */
nav.top > div:last-child {
display: flex;
align-items: center;
gap: 6px; /* espace réduit entre les boutons */
flex-shrink: 0;
}
/* Bouton Guide plus petit */
#helpTourBtn {
padding: 4px 6px;
font-size: 0.7em;
white-space: nowrap; /* Ă©vite le retour Ă la ligne */
}
/* Bouton clair / sombre plus compact */
#themeToggle {
padding: 4px 6px !important;
font-size: 0.9em;
margin-left: 0 !important;
}
/* Bouton déconnexion plus petit */
.logout-btn {
width: 32px;
height: 32px;
font-size: 1.2em;
box-shadow: 0 3px 14px rgba(30,136,229,.6);
}
}
/* Onglet broker retiré */
[data-tab="brokerTab"] {
display: none !important;
}
#brokerTab {
display: none !important;
}
/* ========== OVERLAY & HIGHLIGHT DU TOUR ==========\*/
.tour-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 9990;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
/* quand le tour est actif */
.tour-overlay.visible {
opacity: 1;
pointer-events: auto;
}
/* blur lĂ©ger sur lâapp pendant le tour */
body.tour-active .app {
filter: blur(0.5px);
}
/* Ă©lĂ©ment ciblĂ© par lâĂ©tape */
.tour-highlight {
position: relative;
z-index: 9992 !important;
box-shadow: 0 0 0 3px rgba(66,165,245,0.85);
border-radius: 10px;
}
/* utilitaire */
.hidden {
display: none;
}
.tour-bubble {
position: fixed; /* on reste par rapport Ă la fenĂȘtre */
max-width: 360px;
background: #121212;
color: #fff;
border-radius: 14px;
box-shadow: 0 12px 30px rgba(0,0,0,0.5);
padding: 14px 16px 12px;
z-index: 9991;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
border: 1px solid rgba(66,165,245,0.4);
font-size: 0.9rem;
/* position de base (on va la remplacer en JS Ă chaque Ă©tape) */
top: 0;
left: 0;
transform: translateY(10px);
}
.tour-bubble.visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.tour-bubble-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
font-weight: 600;
font-size: 0.95rem;
}
.tour-close-btn {
background: transparent;
border: none;
color: #999;
cursor: pointer;
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
}
.tour-bubble-body {
margin-bottom: 10px;
}
.tour-bubble-body p {
margin: 0 0 6px 0;
line-height: 1.4;
}
.tour-step-indicator {
font-size: 0.8rem;
opacity: 0.8;
}
.tour-bubble-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.tour-btn-secondary {
background: #333;
}
/* ĂlĂ©ment surlignĂ© par le tuto */
.tour-highlight {
position: relative;
z-index: 9992 !important;
box-shadow: 0 0 0 3px rgba(66,165,245,0.85);
border-radius: 10px;
}
/* Pour faire passer le reste en dessous pendant le tuto */
body.tour-active .app {
filter: blur(0.5px);
}
/* Utils */
.hidden {
display: none;
}
.inline-help-bubble {
position: absolute;
background: #111;
border-radius: 10px;
padding: 10px 12px;
font-size: 0.85rem;
color: #fff;
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
border: 1px solid rgba(66,165,245,0.6);
z-index: 19;
display: none;
max-width: 260px;
/* position par défaut = au-dessus */
bottom: calc(100% + 10px);
right: 0;
}
.inline-help-bubble.below {
/* forcée en dessous */
top: calc(100% + 10px);
bottom: auto;
}
.planning-tip-multi {
color: #ccc;
font-style: italic;
user-select: none;
}
/* Bouton header */
nav.top {
display: flex;
justify-content: space-between;
align-items: center;
}
.top-actions {
display: flex;
align-items: center;
gap: 10px;
}
/* đ Style iOS pill */
.header-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: 999px;
border: none;
background: linear-gradient(135deg, #1E88E5, #64B5F6);
color: #fdfdfd;
font-size: 0.82rem;
cursor: pointer;
box-shadow:
0 4px 10px rgba(0,0,0,0.45),
0 0 12px rgba(33,150,243,0.7);
transition: transform .16s ease, box-shadow .16s ease;
}
.header-btn i {
font-size: 1.1rem;
}
.header-btn:hover {
transform: translateY(-1px);
box-shadow:
0 6px 16px rgba(0,0,0,0.55),
0 0 14px rgba(129,212,250,0.9);
}
/* bouton power = style iOS gris */
.logout-btn {
background: linear-gradient(135deg, #424242, #bdbdbd);
box-shadow:
0 4px 10px rgba(0,0,0,0.45),
0 0 10px rgba(250,250,250,0.35);
}
/* Bouton thĂšme â base */
#themeToggle {
transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
/* Version bouton sombre (mode dark actif) */
#themeToggle.theme-dark {
background: linear-gradient(135deg, #0d47a1, #1976d2);
color: #fff;
box-shadow: 0 0 14px rgba(25,118,210,0.8);
}
/* Version bouton clair (mode light actif) */
#themeToggle.theme-light {
background: #f5f5f5;
color: #111;
box-shadow: 0 0 10px rgba(0,0,0,0.12);
border: 1px solid #ddd;
}
/* Petit effet au survol (desktop) */
#themeToggle.theme-dark:hover,
#themeToggle.theme-light:hover {
transform: translateY(-1px);
}
/* mobile */
@media (max-width: 767px) and (orientation: portrait) {
.header-btn {
padding: 5px 10px;
font-size: 0.75rem;
}
}
/* đ± iPhone / smartphone portrait : icĂŽnes uniquement dans le header */
@media (max-width: 767px) and (orientation: portrait) {
/* On garde seulement les icĂŽnes */
.top-actions .header-btn span {
display: none !important;
}
/* Boutons plus ronds, façon icÎne */
.top-actions .header-btn {
padding: 8px !important;
width: 40px;
height: 40px;
justify-content: center;
border-radius: 999px;
}
/* IcĂŽne un peu plus grande pour bien se voir */
.top-actions .header-btn i {
font-size: 1.2rem;
}
}
/* Saut de ligne vue tableau */
#planningTableView {
margin-top: 10px;
}
/* đ± iPhone / smartphones : rĂ©duire automatiquement le montant et supprimer les ... */
@supports (-webkit-touch-callout: none) {
@media (max-width: 767px) and (orientation: portrait) {
#planningCalendarView .calendar-amount,
#planningCalendarView .calendar-amount-editable {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
font-size: clamp(0.65em, 3.2vw, 1em);
/* đ dĂ©cale le chiffre un peu plus bas dans la pastille */
padding-top: 6px;
padding-bottom: 1px;
}
}
}
#commissionLine {
margin-top: 14px; /* ajuste : 8 / 12 / 16 selon ton goût */
}
#planningSearch,
#calendarSearch {
width: 100%;
max-width: 320px;
padding: 6px 10px;
border-radius: 8px;
border: 1px solid var(--input-border);
background: var(--input-bg);
color: var(--text);
box-sizing: border-box;
}
/* ===========================
đ SUPPORT â GRID Ă 4 BLOCS
=========================== */
.support-right-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
/* Les cartes Ă droite du support ne doivent pas rajouter de marge verticale,
la grille gÚre déjà les espaces */
.support-card {
margin-bottom: 0;
}
/* Grille de boutons raccourcis */
.support-shortcuts-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.support-shortcuts-grid .btn-small {
flex: 1 1 45%;
text-align: center;
}
/* Sur mobile / tablette : les blocs passent en 1 colonne */
@media (max-width: 1023px) {
.support-right-grid {
grid-template-columns: 1fr;
}
}
/* Espace entre le texte (Mise initiale / Bonus / Gains...) et l'input */
.info-grid-pro input[type="number"] {
margin-top: 8px; /* tu peux mettre 10, 12⊠selon le rendu que tu veux */
}
/* đ HISTORY SEARCH */
/* Style de base = MODE SOMBRE */
#historySearch {
width: 100%;
max-width: 260px;
padding: 6px 12px;
border-radius: 999px;
font-size: 0.9rem;
outline: none;
transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
background: #222;
color: #fff;
border: 1px solid #444;
}
#historySearch::placeholder {
color: #aaa;
}
/* Variante en MODE CLAIR */
/* Sombre : body.light #historySearch { */
/* Clair : body.light-mode #historySearch { */
body.light-mode #historySearch {
background: #fff;
color: #000;
border: 1px solid #ccc;
}
body.light-mode #historySearch::placeholder {
color: #666;
}
/* Effet focus (optionnel mais ok) */
#historySearch:focus {
box-shadow: 0 0 0 2px rgba(66, 165, 245, 0.5);
border-color: #42A5F5;
}
/* đ¶ COMMISSION LINE */
/* Base = mode sombre */
#commissionLine {
margin-top: 10px;
padding: 10px 16px;
border-radius: 18px;
text-align: center;
transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
background: #333;
color: #eee;
}
/* Variante claire */
/* Sombre : body.light #commissionLine { */
/* Clair : body.light-mode #commissionLine { */
body.light-mode #commissionLine {
background: #ffffff;
color: #333;
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
/* â
Texte explicatif sous la saisie Commission */
.commission-help {
display: block;
margin-top: 10px; /* espace entre lâinput et le texte */
font-size: 0.7rem;
line-height: 1.4;
opacity: 0.6;
text-align: left;
}
#commissionLine {
margin-top: 12px;
font-size: 0.85rem;
}
.commission-title {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.6;
margin-bottom: 6px;
}
.commission-row {
display: flex;
justify-content: space-between;
align-items: center;
line-height: 1.4;
}
.commission-row strong {
font-weight: 600;
}
.commission-row.muted {
opacity: 0.65;
font-size: 0.8rem;
}
/* â
Bloc Commission % : centrage global */
.commission-block {
text-align: center;
}
/* Texte explicatif */
.commission-block .commission-help {
display: block;
text-align: center;
margin-top: 10px;
font-size: 0.75rem;
line-height: 1.4;
opacity: 0.6;
}
/* Champ % centré partout */
.commission-block input[type="number"] {
display: block;
margin: 8px auto 0;
text-align: center;
}
/* đ± Onglets bas â mobile (portrait + paysage) */
@media (max-width: 1024px) {
.tabs {
background: rgba(10,10,10,0.96);
}
.tab {
color: #ffffff;
opacity: 0.8;
}
.tab-icon,
.tab i {
color: #ffffff;
opacity: 0.85;
}
.tab.active {
color: #ffffff;
opacity: 1;
}
}
/* đ± TĂ©lĂ©phone en paysage : barre compacte et plus lĂ©gĂšre */
@media (max-width: 1024px) and (orientation: landscape) {
.tabs {
height: 48px;
padding: 6px 16px;
background: rgba(20, 20, 20, 0.65);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.35);
border-radius: 999px;
margin: 6px 10px calc(env(safe-area-inset-bottom, 0px) + 6px);
}
.tab {
font-size: 0.85rem;
}
.tab-icon {
font-size: 1.1rem;
}
}
@media (max-width: 480px) and (orientation: portrait) {
.tabs { overflow-x: hidden !important; }
}
.metric {
background: linear-gradient(135deg, var(--accent), var(--accent-soft));
color: #fff;
padding: 22px 24px;
border-radius: 18px;
display: flex;
flex-direction: column; /* âŹ
ïž vertical */
gap: 14px; /* âŹ
ïž espace naturel */
font-weight: 600;
box-shadow: 0 0 18px rgba(66,165,245,.6);
}
/* Texte */
.metric > div:first-child {
font-size: 0.95em;
opacity: 0.9;
line-height: 1.25;
}
/* Montant */
.metric .value {
font-size: 2em;
font-weight: 700;
white-space: nowrap;
line-height: 1;
}
/* ===== Wallet (Mon compte) â version propre ===== */
.wallet-block{
text-align: center;
}
.wallet-block small{
display: block;
margin-top: 6px;
opacity: .9;
line-height: 1.35;
}
.wallet-block.compact{
display: flex;
flex-direction: column;
gap: 8px;
}
.wallet-icon{
font-size: 1.8em;
color: var(--accent-soft);
}
.wallet-title{
font-weight: 600;
letter-spacing: .3px;
}
.wallet-lines{
font-size: .9em;
}
.wallet-line{
display: flex;
justify-content: space-between;
gap: 10px;
}
.wallet-real{
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid rgba(255,255,255,.08);
font-size: .85em;
}
.wallet-real strong{
display: block;
font-size: 1.05em;
}
.wallet-btn{
width: 100%; /* pleine largeur */
margin-top: 12px;
padding: 6px 0;
font-size: 0.85em;
display: inline-flex; /* centre icĂŽne + texte */
align-items: center;
justify-content: center;
gap: 8px;
}
/* â
Desktop uniquement : Mon compte + large, Historique + petit */
@media (min-width: 1024px) {
.dashboard-main-cards{
display:flex;
gap:20px;
align-items:stretch;
}
.dashboard-main-cards .account-card{
flex: 1.6; /* â augmente si tu veux encore + grand */
min-width: 520px; /* optionnel */
}
.dashboard-main-cards .history-card{
flex: 1; /* â plus petit */
min-width: 380px; /* optionnel */
}
}
/* ==================================
đ FONDU LENT DU FOND (PROPRE)
================================== */
:root{
--bg-dark-1:#0b0f14;
--bg-dark-2:#0d0d0d;
--theme-bg: 2.2s; /* vitesse fond */
--theme-ui: .9s; /* vitesse cards */
}
/* couche DARK */
body::before{
content:"";
position: fixed;
inset: 0;
z-index: -2;
opacity: 1;
pointer-events: none;
transition: opacity var(--theme-bg) cubic-bezier(.4,0,.2,1);
background:
radial-gradient(circle at top, rgba(66,165,245,.12), transparent 42%),
radial-gradient(circle at bottom, rgba(66,165,245,.08), transparent 45%),
linear-gradient(180deg, var(--bg-dark-1), var(--bg-dark-2));
}
/* couche LIGHT */
body::after{
content:"";
position: fixed;
inset: 0;
z-index: -1;
opacity: 0;
pointer-events: none;
transition: opacity var(--theme-bg) cubic-bezier(.4,0,.2,1);
background: linear-gradient(180deg, #f4f6f8 0%, #eef1f4 100%);
}
/* switch JS */
body.light-mode::before{ opacity: 0; }
body.light-mode::after{ opacity: 1; }
/* UI / Cards (effet wallet plus doux) */
.card, .panel, .metric, .tabs, .tab, nav.top,
input, select, textarea, button, a{
transition:
background-color var(--theme-ui) cubic-bezier(.4,0,.2,1),
color var(--theme-ui) cubic-bezier(.4,0,.2,1),
border-color var(--theme-ui) cubic-bezier(.4,0,.2,1),
box-shadow var(--theme-ui) cubic-bezier(.4,0,.2,1),
filter var(--theme-ui) cubic-bezier(.4,0,.2,1),
opacity var(--theme-ui) cubic-bezier(.4,0,.2,1);
}
/* ===== Wallet-like button (btn2) ===== */
.btn2{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border-radius:14px;
cursor:pointer;
text-decoration:none;
transition:.15s ease;
white-space:nowrap;
padding:9px 12px;
border:1px solid rgba(255,255,255,.12);
background:rgba(10,10,10,.45);
color:#fff;
}
.btn2:hover{
border-color:rgba(66,165,245,.35);
box-shadow:0 0 0 1px rgba(66,165,245,.15), 0 0 24px rgba(66,165,245,.12);
}
#themeToggle{
width:44px;
height:44px;
padding:0;
border-radius:999px;
}
#themeIcon{ font-size:18px; line-height:1; }
/* bouton thĂšme style Wallet */
#themeToggle.btn2{
padding:9px 12px;
border:1px solid rgba(255,255,255,.12);
background:rgba(10,10,10,.45);
color:#fff;
border-radius:14px;
}
#themeToggle.btn2:hover{
border-color:rgba(66,165,245,.35);
box-shadow:0 0 0 1px rgba(66,165,245,.15), 0 0 24px rgba(66,165,245,.12);
}
/* đĄ Tip planning â mode clair */
body.light-mode .planning-tip-multi {
color: #374151; /* gris foncé lisible */
background: rgba(66,165,245,0.08); /* léger fond bleu */
border-left: 4px solid #42A5F5;
padding: 8px 12px;
border-radius: 8px;
opacity: 1;
}
/* IcĂŽne đĄ un peu plus visible */
body.light-mode .planning-tip-multi::first-letter {
opacity: 1;
}
/* Couleur texte */
/* body.light-mode .planning-tip-multi {
color: #4B5563;
opacity: 0.9;
}*/
/* đĄ Tip planning â mode sombre */
body:not(.light-mode) .planning-tip-multi {
color: #E5E7EB; /* gris clair lisible */
background: rgba(66,165,245,0.15); /* bleu un peu plus présent */
border-left: 4px solid #42A5F5;
padding: 8px 12px;
border-radius: 8px;
opacity: 1;
}
/* IcĂŽne đĄ bien visible aussi */
body:not(.light-mode) .planning-tip-multi::first-letter {
opacity: 1;
}
body.light-mode .planning-tip-multi,
body:not(.light-mode) .planning-tip-multi {
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
/* ===== Currency switch (topbar) ===== */
.currency-wrap{ position:relative; display:inline-block; }
.currency-btn{
display:flex; align-items:center; gap:.5rem;
padding:.45rem .6rem;
border-radius:12px;
border:1px solid rgba(255,255,255,.10);
background: rgba(20,20,30,.55);
color:#fff;
cursor:pointer;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: transform .12s ease, border-color .12s ease;
}
.currency-btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.currency-btn i{ font-size:1.1em; opacity:.9; }
.currency-code{ font-weight:700; font-size:.85em; letter-spacing:.2px; }
.currency-symbol{
font-weight:800; font-size:.85em; opacity:.9;
padding:.14rem .42rem;
border-radius:10px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.08);
}
.currency-menu{
position:absolute; right:0; top: calc(100% + 10px);
width: 250px;
padding: .45rem;
border-radius: 16px;
border:1px solid rgba(255,255,255,.10);
background: rgba(12,12,18,.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 18px 50px rgba(0,0,0,.40);
display:none;
z-index: 9999;
}
.currency-menu.open{ display:block; }
.currency-form{ display:flex; flex-direction:column; gap:.35rem; margin:0; }
.currency-item{
display:grid;
grid-template-columns: 34px 1fr auto;
align-items:center;
gap:.6rem;
width:100%;
padding:.55rem .65rem;
border-radius: 14px;
border:1px solid transparent;
background: transparent;
color:#fff;
cursor:pointer;
text-align:left;
transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.currency-item:hover{
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.10);
transform: translateY(-1px);
}
.currency-item .ccy{
width: 34px; height: 34px;
display:flex; align-items:center; justify-content:center;
border-radius: 12px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.08);
font-weight: 900;
}
.currency-item .label{ font-weight: 900; }
.currency-item .desc{ opacity:.7; font-size:.85em; }
.gains-readonly{ text-align:center; }
.gains-field{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
margin: 6px auto 0;
padding-right: 0;
}
/* Le compteur */
.gains-counter{
min-width: 140px;
padding: 10px 14px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(10,10,10,.55);
font-weight: 800;
font-size: 1.05rem;
letter-spacing: .2px;
text-align: center;
}
/* Cadenas caché par défaut */
.gains-lock{
position:absolute;
right:-44px; /* Ă droite du bloc */
top:50%;
transform: translateY(-50%);
opacity:0;
pointer-events:none;
transition: opacity .18s ease, transform .18s ease;
font-size: 1.35em;
}
/* Apparition au hover + accessibilité clavier */
.gains-field:hover .gains-lock,
.gains-field:focus-within .gains-lock{
opacity:.9;
transform: translateY(-50%) scale(1.02);
}
.gains-hint{
display:block;
margin-top: 8px;
text-align:center;
font-size:.78em;
opacity:.7;
}
/* đ Mode clair : pastille "Gains cumulĂ©s" plus lisible */
body.light-mode .gains-counter{
background: rgba(255,255,255,0.78);
border: 1px solid rgba(0,0,0,0.10);
color: #111;
box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}
/* Optionnel : texte dâaide sous la pastille */
body.light-mode .gains-hint{
color: rgba(0,0,0,0.55);
opacity: 1;
}
/* Optionnel : cadenas un poil plus discret (sinon il ressort trop) */
body.light-mode .gains-lock{
opacity: 0; /* reste caché */
color: rgba(0,0,0,0.45);
}
body.light-mode .gains-field:hover .gains-lock,
body.light-mode .gains-field:focus-within .gains-lock{
opacity: .85;
}
/* =========================================
đŻ Input Objectif +% â MODE CLAIR UNIQUEMENT
========================================= */
/* body.light-mode = ton vrai sélecteur */
body.light-mode input#plus1TargetInput{
background-color: #ffffff !important;
color: #111111 !important;
border: 1px solid #d1d5db !important;
}
/* enlever les effets sombres hérités */
body.light-mode input#plus1TargetInput:focus{
background-color: #ffffff !important;
color: #111111 !important;
outline: none;
box-shadow: 0 0 0 2px rgba(59,130,246,.25);
}
/* flĂšches input number visibles en clair */
body.light-mode input#plus1TargetInput::-webkit-inner-spin-button,
body.light-mode input#plus1TargetInput::-webkit-outer-spin-button{
filter: invert(0);
}
/* â
FIX WALLET : 2 colonnes propres, alignées */
.wallet-lines{
width: 100%;
}
.wallet-line{
display: grid !important;
grid-template-columns: 1fr auto; /* gauche = label, droite = valeur */
align-items: center;
gap: 12px;
}
.wallet-line span{
text-align: left;
white-space: nowrap; /* Ă©vite "Mise" puis "initiale" */
}
.wallet-line strong{
text-align: right;
white-space: nowrap; /* garde "5 000,00 âŹ" sur une ligne */
}
.plus1-bar{
height: 12px;
border-radius: 999px;
background: rgba(255,255,255,.10);
overflow: hidden;
}
.plus1-bar .fill{
height: 100%;
width: 0%;
border-radius: 999px;
background: linear-gradient(90deg, #4CAF50, #42A5F5);
}
.metric {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 4px;
}
.metric-title {
font-size: 1.05rem;
font-weight: 600;
line-height: 1.2;
}
.metric-sub {
font-size: 0.8rem;
opacity: 0.7;
margin-top: -2px; /* rapproche légÚrement du titre */
font-style: italic;
opacity: 0.6;
}
.metric .value {
margin-top: 6px;
}
/* =========================================
đŻ Barre de progression +% â MODE CLAIR
========================================= */
/* fond de la barre */
body.light-mode .plus1-bar{
background: #e5e7eb !important; /* gris clair visible */
border: 1px solid #d1d5db;
}
/* remplissage */
body.light-mode .plus1-bar .fill{
background: linear-gradient(
90deg,
#3b82f6, /* bleu */
#22c55e /* vert */
) !important;
}
/* â
MODE CLAIR â FIX input date (texte visible) */
body.light-mode #planningPlus1View input[type="date"]{
background:#fff !important;
color:#111 !important;
-webkit-text-fill-color:#111 !important; /* Safari/Chrome */
border:1px solid rgba(0,0,0,.25) !important;
color-scheme: light !important; /* force style "light" */
}
/* IcĂŽne calendrier (Chrome/Safari) */
body.light-mode #planningPlus1View input[type="date"]::-webkit-calendar-picker-indicator{
filter: invert(0) !important;
opacity:.85 !important;
}
/* â
Cache l'ancien header uniquement en mobile portrait */
@media (max-width: 767px) and (orientation: portrait) {
.top-actions,
nav.top .right,
nav.top .currency-wrap,
nav.top .lang-inline,
nav.top #themeToggle,
nav.top #helpTourBtn,
nav.top .notifications,
nav.top .logout-btn {
display: none !important;
}
}
/* Bouton menu */
.mnav-btn{
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(10,10,10,.45);
color: #fff;
box-shadow: 0 8px 22px rgba(0,0,0,.35);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
cursor: pointer;
}
body.light-mode .mnav-btn{
background: rgba(255,255,255,.75);
border: 1px solid rgba(0,0,0,.08);
color: #111;
}
.mnav-btn i{ font-size: 22px; }
/* Overlay */
.mnav-overlay{
display: block !important;
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
z-index: 9997;
}
.mnav-overlay.open{
opacity: 1;
pointer-events: auto;
}
/* Panel menu (bottom sheet iOS) */
.mnav-panel{
display: block !important;
position: fixed;
left: 10px;
right: 10px;
bottom: 10px;
border-radius: 22px;
padding: 14px;
background: rgba(14,14,18,.92);
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 18px 60px rgba(0,0,0,.55);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transform: translateY(110%);
transition: transform .22s cubic-bezier(.22,.61,.36,1);
z-index: 9998;
}
body.light-mode .mnav-panel{
background: rgba(255,255,255,.88);
border: 1px solid rgba(0,0,0,.08);
}
.mnav-panel.open{
transform: translateY(0);
}
.mnav-head{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.mnav-title{
font-weight: 800;
letter-spacing: .2px;
}
.mnav-close{
width: 40px;
height: 40px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.06);
color: inherit;
cursor: pointer;
}
body.light-mode .mnav-close{
border: 1px solid rgba(0,0,0,.08);
background: rgba(0,0,0,.04);
}
.mnav-close i{ font-size: 20px; }
/* Grille */
.mnav-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.mnav-item{
display: flex;
align-items: center;
gap: 10px;
padding: 12px 12px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.06);
color: inherit;
text-decoration: none;
cursor: pointer;
font-weight: 700;
}
body.light-mode .mnav-item{
border: 1px solid rgba(0,0,0,.08);
background: rgba(0,0,0,.03);
}
.mnav-item i{
font-size: 20px;
opacity: .9;
}
.mnav-item span{
font-size: .92rem;
}
.mnav-item.danger{
border-color: rgba(244,67,54,.35);
background: rgba(244,67,54,.12);
}
.mnav-footer{
margin-top: 10px;
text-align: center;
opacity: .65;
}
/* EmpĂȘche scroll arriĂšre-plan quand menu ouvert */
body.mnav-open{
overflow: hidden;
}
/* â
Uniquement téléphone portrait */
@media (max-width: 767px) and (orientation: portrait){
.desktop-only{ display:none !important; }
.mnav-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px; height:44px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background: rgba(10,10,10,.45);
color:#fff;
font-size:1.6rem;
}
.mnav-overlay{
position:fixed; inset:0;
background: rgba(0,0,0,.6);
opacity:0;
pointer-events:none;
transition: opacity .2s ease;
z-index: 9998;
}
.mnav-overlay.open{
opacity:1;
pointer-events:auto;
display:block;
}
/* Menu complet */
/* .mnav-panel{
position:fixed; inset:0;
background: #0d0d0d;
transform: translateY(100%);
transition: transform .25s ease;
z-index: 9999;
padding: 18px;
display:block;
}
.mnav-panel.open{ transform: translateY(0); } */
/* End Menu complet */
/* Menu au 3/4 */
.mnav-panel{
inset: auto !important; /* annule inset:0 */
top: auto !important;
left: 10px !important;
right: 10px !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
border-radius: 22px !important;
max-height: min(72vh, 620px) !important;
overflow: hidden !important;
transform: translateY(110%) !important;
}
.mnav-panel.open{
transform: translateY(0) !important;
}
/* End Menu au 3/4 */
.mnav-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom: 14px;
}
.mnav-title{ font-weight:800; font-size:1.05rem; }
.mnav-close{
width:42px; height:42px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
color:#fff;
font-size:1.4rem;
}
.mnav-grid{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 12px;
}
.mnav-item{
display:flex;
align-items:center;
gap: 10px;
padding: 14px 12px;
border-radius: 16px;
border:1px solid rgba(255,255,255,.10);
background: rgba(26,26,26,.75);
color:#fff;
font-weight:700;
font-size:.95rem;
}
.mnav-item i{ font-size:1.25rem; opacity:.9; }
.mnav-item.danger{
background: rgba(198,40,40,.25);
border-color: rgba(244,67,54,.35);
}
.mnav-footer{
margin-top: 16px;
opacity: .7;
text-align:center;
}
}
/* bonus: pas de scroll derriĂšre quand menu ouvert */
body.mnav-open{ overflow:hidden; }
/* ===========================
đ± MOBILE MENU â VERSION UNIQUE (BOTTOM SHEET)
=========================== */
/* Desktop : on garde le header normal */
@media (min-width: 768px){
.desktop-only{ display:flex !important; }
.mnav-btn, .mnav-overlay, .mnav-panel{ display:none !important; }
}
/* Mobile portrait : logo + burger, menu dans panel */
@media (max-width: 767px) and (orientation: portrait){
/* On cache juste la zone desktop du header */
.desktop-only{ display:none !important; }
/* Burger */
.mnav-btn{
display:inline-flex !important;
align-items:center;
justify-content:center;
width:44px; height:44px;
border-radius:999px;
border:1px solid rgba(255,255,255,.14);
background: rgba(10,10,10,.45);
color:#fff;
box-shadow: 0 8px 22px rgba(0,0,0,.35);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
cursor:pointer;
}
body.light-mode .mnav-btn{
background: rgba(255,255,255,.75);
border: 1px solid rgba(0,0,0,.08);
color:#111;
}
.mnav-btn i{ font-size:22px; }
/* Overlay */
.mnav-overlay{
display:block !important;
position:fixed;
inset:0;
background: rgba(0,0,0,.55);
opacity:0;
pointer-events:none;
transition: opacity .2s ease;
z-index: 9997;
}
.mnav-overlay.open{
opacity:1;
pointer-events:auto;
}
/* Panel bottom sheet */
.mnav-panel{
display:block !important;
position:fixed;
left:10px;
right:10px;
bottom:10px;
border-radius:22px;
padding:14px;
background: rgba(14,14,18,.92);
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 18px 60px rgba(0,0,0,.55);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transform: translateY(110%);
transition: transform .22s cubic-bezier(.22,.61,.36,1);
z-index: 9998;
}
body.light-mode .mnav-panel{
background: rgba(255,255,255,.88);
border: 1px solid rgba(0,0,0,.08);
color:#111;
}
.mnav-panel.open{ transform: translateY(0); }
/* Head */
.mnav-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.mnav-title{
font-weight:800;
letter-spacing:.2px;
}
.mnav-close{
width:40px;
height:40px;
border-radius:999px;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.06);
color: inherit;
cursor:pointer;
}
body.light-mode .mnav-close{
border: 1px solid rgba(0,0,0,.08);
background: rgba(0,0,0,.04);
}
.mnav-close i{ font-size:20px; }
/* Panel content blocks */
.mnav-content{
padding: 0;
display:flex;
flex-direction:column;
gap:12px;
}
.mnav-section{
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 14px;
padding: 10px;
}
body.light-mode .mnav-section{
background: rgba(0,0,0,0.03);
border: 1px solid rgba(0,0,0,0.08);
}
.mnav-actions{
display:flex;
flex-direction:column;
gap:10px;
}
.mnav-actions .header-btn,
.mnav-actions .btn2,
.mnav-actions .logout-btn{
width:100%;
justify-content:flex-start;
}
.mnav-footer{
margin-top: 10px;
text-align:center;
opacity:.65;
}
/* stop scroll background */
body.mnav-open{ overflow:hidden; }
}
.app-header{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.app-header .brand{ display:flex; align-items:center; gap:10px; }
.app-header .brand-logo{ height:40px; vertical-align:middle; }
.app-header .right{ display:flex; align-items:center; gap:20px; }
.app-header .top-actions{ display:flex; align-items:center; gap:12px; }
/* Burger */
.mnav-btn{
display:none;
width:38px; height:34px;
border:1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.06);
border-radius:12px;
cursor:pointer;
align-items:center;
justify-content:center;
}
/* Dropdown open */
.notifications.open .dropdown,
.currency-wrap.open .currency-menu{ display:block; }
.dropdown, .currency-menu{ display:none; }
/* Lang style */
.lang-inline{ display:flex; align-items:center; gap:10px; }
.lang-inline .lang-link{
color:#fff; opacity:.85; padding:4px 6px; border-radius:8px;
border:1px solid transparent; background:transparent; font-weight:800; font-size:.85em;
}
.lang-inline .lang-link.active{
opacity:1; color:#FDD835; background: rgba(253,216,53,0.08); border-color: rgba(253,216,53,0.35);
}
.lang-inline .sep{ opacity:.35; user-select:none; }
/* Mobile panel layout helpers */
.mnav-content{ padding:12px; display:flex; flex-direction:column; gap:12px; }
.mnav-section{
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 14px;
padding: 10px;
}
.mnav-actions{ display:flex; flex-direction:column; gap:10px; }
.mnav-actions .header-btn, .mnav-actions .btn2, .mnav-actions .logout-btn{
width:100%;
justify-content:flex-start;
}
/* Mobile rules */
@media (max-width: 768px){
.mnav-btn{ display:inline-flex; }
#appRight{ display:none !important; } /* logo + burger seulement */
.lang-inline{ gap:8px; }
.lang-inline .lang-link{ font-size:0.78em; padding:3px 6px; }
}
/* đ Mode clair â Language switch (jaune conservĂ©) */
body.light-mode .lang-inline .lang-link{
color: #111 !important;
background: rgba(0,0,0,.08) !important;
border: 1px solid rgba(0,0,0,.14) !important;
}
body.light-mode .lang-inline .lang-link:hover{
background: rgba(0,0,0,.12) !important;
}
/* đ Langue active = JAUNE */
body.light-mode .lang-inline .lang-link.active{
color: #facc15 !important; /* jaune */
background: rgba(250,204,21,.18) !important;
border-color: rgba(250,204,21,.45) !important;
font-weight: 800;
}
/* séparateurs | */
body.light-mode .lang-inline .sep{
color: rgba(0,0,0,.35) !important;
}
/* ===========================
đ± MOBILE MENU PRO (Bottom Sheet)
=========================== */
/* Desktop */
@media (min-width: 768px){
.desktop-only{ display:flex !important; }
.mnav-btn, .mnav-overlay, .mnav-panel{ display:none !important; }
}
/* Mobile portrait */
@media (max-width: 767px) and (orientation: portrait){
.desktop-only{ display:none !important; }
.mnav-btn{
display:inline-flex !important;
align-items:center;
justify-content:center;
width:44px; height:44px;
border-radius:999px;
border:1px solid rgba(255,255,255,.14);
background: rgba(10,10,10,.45);
color:#fff;
box-shadow: 0 8px 22px rgba(0,0,0,.35);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
cursor:pointer;
}
body.light-mode .mnav-btn{
background: rgba(255,255,255,.75);
border: 1px solid rgba(0,0,0,.08);
color:#111;
}
.mnav-btn i{ font-size:22px; }
.mnav-overlay{
display:block !important;
position:fixed; inset:0;
background: rgba(0,0,0,.55);
opacity:0; pointer-events:none;
transition: opacity .2s ease;
z-index: 9997;
}
.mnav-overlay.open{ opacity:1; pointer-events:auto; }
.mnav-panel{
display:block !important;
position:fixed;
left:10px; right:10px;
bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
border-radius:22px;
padding:0;
background: rgba(14,14,18,.92);
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 18px 60px rgba(0,0,0,.55);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transform: translateY(110%);
transition: transform .22s cubic-bezier(.22,.61,.36,1);
z-index: 9998;
overflow: hidden;
}
body.light-mode .mnav-panel{
background: rgba(255,255,255,.88);
border: 1px solid rgba(0,0,0,.08);
color:#111;
}
.mnav-panel.open{ transform: translateY(0); }
.mnav-head{
display:flex;
align-items:center;
justify-content:space-between;
padding: 14px 14px 10px;
}
.mnav-title{ font-weight:900; font-size:1.05rem; }
.mnav-close{
width:42px; height:42px;
border-radius:999px;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.06);
color: inherit;
cursor:pointer;
}
body.light-mode .mnav-close{
border: 1px solid rgba(0,0,0,.08);
background: rgba(0,0,0,.04);
}
.mnav-close i{ font-size:20px; }
.mnav-content{
padding: 0 14px 14px;
max-height: min(72vh, 620px);
overflow:auto;
-webkit-overflow-scrolling: touch;
display:flex;
flex-direction:column;
gap:12px;
}
.mnav-section{
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
border-radius:16px;
padding:10px;
}
body.light-mode .mnav-section{
background: rgba(0,0,0,.03);
border: 1px solid rgba(0,0,0,.08);
}
.mnav-row{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:10px 12px;
border-radius:14px;
border:1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.18);
color: inherit;
cursor:pointer;
}
.mnav-row-left{
display:flex;
align-items:center;
gap:10px;
font-weight:800;
}
.mnav-row-left i{ font-size:20px; opacity:.95; }
.mnav-row-right{
display:flex;
align-items:center;
gap:8px;
opacity:.95;
}
.mnav-subtitle{
font-weight:800;
opacity:.8;
margin: 4px 0 8px;
font-size:.9rem;
}
/* Dropdowns inside panel */
.mnav-dropdown{
position: static !important;
width: 100% !important;
margin-top: 10px;
border-radius: 14px;
max-height: 320px;
}
/* show/hide dropdowns using .open on wrapper */
#mNotifWrap.open #mNotifDropdown{ display:block; }
#mCurrencyWrap.open #mCurrencyMenu{ display:block; }
/* Actions */
.mnav-actions{ display:flex; flex-direction:column; gap:10px; }
.mnav-action{
width:100%;
display:flex;
align-items:center;
gap:10px;
padding:12px 12px;
border-radius:14px;
border:1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.18);
color: inherit;
font-weight:800;
cursor:pointer;
}
.mnav-action i{ font-size:20px; }
.mnav-action.danger{
border-color: rgba(244,67,54,.30);
background: rgba(244,67,54,.12);
}
.mnav-footer{
margin-top: 6px;
text-align:center;
opacity:.65;
}
body.mnav-open{ overflow:hidden; }
}
/* Inputs dans menu mobile */
.mnav-search input{
width:100%;
padding:10px 12px;
border-radius:12px;
border:1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.18);
color: inherit;
outline:none;
}
body.light-mode .mnav-search input{
background: rgba(0,0,0,.04);
border:1px solid rgba(0,0,0,.10);
}
/* Empty state */
.mnav-empty{
margin:0;
padding:10px 12px;
opacity:.75;
}
/* Dropdowns dans le panel = pas en absolute */
.mnav-dropdown{
position: static !important;
width: 100% !important;
margin-top: 10px;
display:none; /* caché par défaut */
border-radius: 14px;
max-height: 320px;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
/* OUVERTURE dropdown via .open sur le wrapper */
#mNotifWrap.open #mNotifDropdown{ display:block; }
#mCurrencyWrap.open #mCurrencyMenu{ display:block; }
/* Cartes notif dans menu mobile (plus compact) */
#mNotifDropdown .info-card{
margin-bottom:8px;
border: 1px solid rgba(255,255,255,.10);
}
body.light-mode #mNotifDropdown .info-card{
border: 1px solid rgba(0,0,0,.08);
}
/* Badge notif dans ligne (si déjà badge absolu desktop) */
.mnav-row-right .badge{
position: static;
transform: none;
box-shadow: none;
border-radius: 999px;
padding: 3px 8px;
font-weight: 900;
}
@media (max-width: 767px) and (orientation: portrait){
/* on cache uniquement la langue du header (desktop) */
#appRight .lang-inline{ display:none !important; }
/* et on FORCE celle du panel Ă rester visible / cliquable */
#mnavPanel .lang-inline{
display:flex !important;
pointer-events:auto !important;
opacity:1 !important;
}
#mnavPanel .lang-inline a{
pointer-events:auto !important;
}
}
@media (max-width: 767px) and (orientation: portrait){
/* Centrage langue dans le menu mobile */
#mnavPanel .lang-inline{
justify-content: center;
width: 100%;
margin-top: 6px;
}
#mnavPanel .lang-inline .lang-link{
font-size: 0.9rem;
padding: 6px 10px;
}
#mnavPanel .lang-inline .sep{
margin: 0 4px;
}
}
@media (max-width: 767px) and (orientation: portrait){
.mnav-btn{ position: relative; }
.mnav-badge{
position:absolute;
top:-6px;
right:-6px;
min-width:18px;
height:18px;
padding:0 5px;
display:flex;
align-items:center;
justify-content:center;
font-size:11px;
font-weight:900;
color:#fff;
background:#F44336;
border-radius:999px;
border:2px solid rgba(0,0,0,.35);
box-shadow:0 0 10px rgba(244,67,54,.55);
}
body.light-mode .mnav-badge{
border-color: rgba(255,255,255,.95);
}
}
/* ================================
FIX DEVISE â MOBILE PORTRAIT
================================ */
@media (max-width: 767px) and (orientation: portrait) {
.top-actions,
nav.top .right,
nav.top .currency-wrap,
nav.top .lang-inline,
nav.top #themeToggle,
nav.top #helpTourBtn,
nav.top .notifications,
nav.top .logout-btn {
display: none !important;
}
}
/* ================================
đ± DEVISE â PLEINE LARGEUR (MOBILE)
================================ */
@media (max-width: 767px) and (orientation: portrait) {
/* Wrapper devise */
#mnavPanel .mnav-currency,
#mnavPanel .currency-wrap {
width: 100%;
}
/* Bouton "Devise" */
#mnavPanel #mCurrencyBtn {
width: 100%;
justify-content: space-between;
}
/* Menu des devises */
#mnavPanel #mCurrencyMenu {
width: 100%;
}
/* Boutons devise */
#mnavPanel .currency-item {
width: 100%;
}
}
/* =====================================================
đ MODE CLAIR â FIX COULEURS INTERNES (DEVICES / MENUS)
===================================================== */
body.light-mode {
/* Panels / dropdowns (devise, notif, menu mobile) */
.currency-menu,
.dropdown,
.mnav-panel,
.mnav-section,
.mnav-dropdown {
background: #ffffff !important;
color: #111111 !important;
border-color: rgba(0,0,0,0.08) !important;
}
/* Boutons internes (lignes) */
.currency-item,
.mnav-row,
.mnav-action {
background: #f6f7f9 !important;
color: #111111 !important;
border-color: rgba(0,0,0,0.08) !important;
}
.currency-item:hover,
.mnav-row:hover,
.mnav-action:hover {
background: #eef2f7 !important;
}
/* IcĂŽnes */
.currency-item i,
.mnav-row i,
.mnav-action i {
color: #111111 !important;
opacity: .85;
}
/* Symboles / badges */
.currency-symbol,
.badge,
.mnav-badge {
background: #e5e7eb !important;
color: #111111 !important;
border-color: rgba(0,0,0,0.1) !important;
box-shadow: none !important;
}
/* Inputs (search notif, etc.) */
input,
select,
textarea {
background: #ffffff !important;
color: #111111 !important;
border: 1px solid rgba(0,0,0,0.15) !important;
}
input::placeholder {
color: rgba(0,0,0,0.45) !important;
}
/* Cartes notification */
.info-card {
background: #f5f6f8 !important;
color: #111111 !important;
border-color: rgba(0,0,0,0.08) !important;
}
.info-card strong {
color: #1E88E5 !important;
}
}
@media (max-width: 768px) and (orientation: portrait) {
#themeIconMobile{
font-size: 22px; /* ajuste 20-26 */
line-height: 1;
}
}
/* đ± Mobile portrait â fond moins blanc en mode clair */
@media (max-width: 768px) and (orientation: portrait) {
body.light-mode .mnav-panel{
background: linear-gradient(
180deg,
#f2f3f5 0%,
#ededf0 100%
) !important;
}
/* cartes / sections */
body.light-mode .mnav-section{
background: rgba(0,0,0,0.03) !important;
}
/* boutons (devise, notifications, etc.) */
body.light-mode .mnav-row{
background: rgba(0,0,0,0.04) !important;
}
}
@media (max-width: 768px) and (orientation: portrait) {
#themeToggleMobile{
width:100%;
background:transparent;
border:none;
padding:0;
}
#themeToggleMobile .mnav-row-left span{
font-size:1rem; /* mĂȘme taille */
font-weight:500; /* mĂȘme graisse */
color: var(--text); /* mĂȘme couleur */
letter-spacing:0.2px;
}
#themeIconMobile{
font-size:1.2em; /* icÎne légÚrement visible */
}
}
.mnav-action{
display:flex;
align-items:center;
justify-content:flex-start;
gap:12px;
width:100%;
}
.mnav-action .mnav-chevron{
margin-left:auto;
opacity:.65;
font-size:20px;
}
.mnav-right-label{
margin-left:auto;
opacity:.7;
font-size:13px;
}
/* đŽ Badge notifications â couleur fixe mĂȘme en mode clair */
.badge,
.mnav-badge {
background-color: #e53935; /* rouge */
color: #fff;
}
/* sécurité si un style light-mode écrase */
body.light-mode .badge,
body.light-mode .mnav-badge {
background-color: #e53935;
color: #fff;
}
/* â
FIX badge notif : rester ROUGE mĂȘme en mode clair */
body.light-mode .notifications .badge,
body.light-mode .mnav-badge{
background: #F44336 !important;
color: #fff !important;
box-shadow: 0 0 10px rgba(244,67,54,.55) !important;
}
/* (optionnel) le petit contour comme en dark */
body.light-mode .mnav-badge{
border: 2px solid rgba(0,0,0,.35) !important;
}
html { scroll-behavior: smooth; }
#overview, #planning, #planning-plus1, #support { scroll-margin-top: 90px; }
/* ===========================
â
PLUS1 â base (tous Ă©crans)
- Date plus grosse
- OK plus petit
- Aligné verticalement
=========================== */
#planningPlus1View .plus1-form{
display:flex;
align-items:center;
gap:10px;
}
/* Date + OK sur la mĂȘme ligne */
#planningPlus1View .plus1-date{
display:flex;
align-items:center;
gap:10px;
}
/* â
CASE DATE = plus grosse partout */
#planningPlus1View .plus1-date-input{
width: 240px !important; /* un peu plus large */
margin-bottom: 0 !important;
height: 48px !important; /* đ„ plus gros partout */
padding: 0 14px !important;
font-size: 15px !important;
line-height: normal !important;
box-sizing: border-box;
}
/* â
BOUTON OK = plus petit partout */
#planningPlus1View .plus1-ok{
margin: 0 !important;
height: 38px !important; /* đ„ plus petit */
padding: 0 12px !important;
font-size: 13px !important;
line-height: 1 !important;
display:inline-flex;
align-items:center;
justify-content:center;
}
/* đ± Mobile : garder alignĂ© et Ă©viter que ça casse */
@media (max-width: 480px){
#planningPlus1View .plus1-form{
flex-wrap: nowrap;
gap: 10px;
width: 100%;
}
#planningPlus1View .plus1-date{
flex: 1;
min-width: 0;
}
#planningPlus1View .plus1-date-input{
width: 100% !important; /* prend la place dispo */
min-width: 0;
font-size: 16px !important; /* iOS safe (Ă©vite zoom) */
}
#planningPlus1View .plus1-ok{
flex: 0 0 auto;
}
}
/* đ± Mobile portrait â empĂȘcher le ":" de passer Ă la ligne */
@media (max-width: 480px){
#planningPlus1View .plus1-label{
white-space: nowrap; /* đ„ empĂȘche le retour Ă la ligne */
flex-shrink: 0; /* đ„ garde sa largeur */
line-height: 1;
}
#planningPlus1View .plus1-date{
align-items: center; /* alignement vertical propre */
}
}
/* â
Harmoniser l'espace entre Vue Tableau et Vue Calendrier (mobile portrait) */
@media (max-width: 767px) and (orientation: portrait){
#planningTableView,
#planningCalendarView{
margin-top: 0 !important;
padding-top: 0 !important;
}
#planningTableView .calendar-header,
#planningCalendarView .calendar-header{
margin-top: 8px !important; /* mĂȘme espace */
margin-bottom: 8px !important; /* mĂȘme espace */
}
}
/* =========================================
đ FLĂCHES MOIS â STYLE PRO (Tableau + Calendrier)
Cible : .cal-nav-btn
Desktop = compact
Mobile portrait = encore plus compact + centre shrink
========================================= */
#planningTableView .calendar-header .cal-nav-btn,
#planningCalendarView .calendar-header .cal-nav-btn{
width: 34px;
height: 34px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1E88E5, #64B5F6);
color: #fff;
text-decoration: none;
border: none;
cursor: pointer;
font-size: 20px;
font-weight: 700;
line-height: 1;
box-shadow:
0 6px 18px rgba(30,136,229,.45),
inset 0 0 0 1px rgba(255,255,255,.15);
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#planningTableView .calendar-header .cal-nav-btn:hover,
#planningCalendarView .calendar-header .cal-nav-btn:hover{
transform: translateY(-2px);
filter: brightness(1.08);
box-shadow:
0 10px 26px rgba(30,136,229,.65),
inset 0 0 0 1px rgba(255,255,255,.25);
}
#planningTableView .calendar-header .cal-nav-btn:active,
#planningCalendarView .calendar-header .cal-nav-btn:active{
transform: translateY(0);
box-shadow:
0 4px 14px rgba(30,136,229,.45),
inset 0 0 0 1px rgba(255,255,255,.2);
}
/* đ± Mobile portrait : flĂšches compactes + centre qui rĂ©trĂ©cit */
@media (max-width: 767px) and (orientation: portrait){
#planningTableView .calendar-header,
#planningCalendarView .calendar-header{
gap: 8px;
}
#planningTableView .calendar-header .cal-nav-btn,
#planningCalendarView .calendar-header .cal-nav-btn{
width: 30px;
height: 30px;
border-radius: 10px;
font-size: 18px;
flex: 0 0 auto;
}
#planningTableView .calendar-header .month-selector,
#planningCalendarView .calendar-header .month-selector{
flex: 1 1 auto;
min-width: 0;
}
#planningTableView .month-picker-btn span,
#planningCalendarView .month-picker-btn span{
font-size: 0.9em;
}
}
/* CSS pour centrer lâicĂŽne nickel */
#planningTableView .calendar-header .cal-nav-btn i,
#planningCalendarView .calendar-header .cal-nav-btn i{
font-size: 22px;
line-height: 1;
}
@media (max-width: 767px) and (orientation: portrait){
#planningTableView .calendar-header .cal-nav-btn i,
#planningCalendarView .calendar-header .cal-nav-btn i{
font-size: 20px;
}
}
/* =========================================
đ± MOBILE PORTRAIT â HEADER (Tableau + Calendrier)
Prev | (month-selector centré) | Next
Aujourd'hui en dessous
========================================= */
@media (max-width: 767px) and (orientation: portrait){
/* --- TABLE --- */
#planningTableView .calendar-header{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
row-gap:8px;
margin-top:8px;
}
#planningTableView .month-prev{ order:1; }
#planningTableView .month-selector{
order:2;
flex:1;
min-width:0;
display:flex;
justify-content:center; /* centre le bloc mois */
}
#planningTableView .month-next{ order:3; }
#planningTableView .btn-today{
order:4;
width:100%;
text-align:center;
margin-top:4px;
}
/* --- CALENDAR --- */
#planningCalendarView .calendar-header{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
row-gap:8px;
margin-top:8px;
}
#planningCalendarView .month-prev{ order:1; }
#planningCalendarView .month-selector{
order:2;
flex:1;
min-width:0;
display:flex;
justify-content:center;
}
#planningCalendarView .month-next{ order:3; }
#planningCalendarView .btn-today{
order:4;
width:100%;
text-align:center;
margin-top:4px;
}
}
@media (max-width: 767px) and (orientation: portrait) {
/* đ Reset layout global mobile */
html {
overflow-x: clip;
}
body {
overflow-x: clip;
}
/* đ„ L'app ne doit PAS ajouter de padding en mobile */
.app {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: none !important;
margin: 0 !important;
}
/* đ Le centrage + safe-area est gĂ©rĂ© ICI */
main.container {
padding-left: calc(12px + env(safe-area-inset-left));
padding-right: calc(12px + env(safe-area-inset-right));
box-sizing: border-box;
}
/* đïž Calendrier : jamais couper ombres / arrondis */
#planningCalendarView {
overflow-x: visible !important;
overflow-y: visible !important;
max-width: 100%;
}
#planningCalendarView .calendar-grid {
overflow: visible !important;
}
/* đĄïž SĂ©curitĂ© anti-100vw / dĂ©bordements */
.app,
main.container,
.panel,
.card,
#planningCalendarView {
width: 100%;
max-width: 100%;
}
}
/* â
Harmonise le fond de la table avec la card */
#planningTableView .planning-table,
#planningTableView .planning-table thead,
#planningTableView .planning-table tbody,
#planningTableView .planning-table tr,
#planningTableView .planning-table th,
#planningTableView .planning-table td {
background: transparent !important;
}
/* La card porte le fond */
#planningTableView .card {
background: var(--bg-card);
}
/* ================================
đŻ GUIDE / TOUR â VERSION PRO
Basée sur --bg-card / --text / --border
================================ */
/* Overlay */
body.light-mode .tour-overlay{
background: rgba(0,0,0,0.25);
}
body:not(.light-mode) .tour-overlay{
background: rgba(0,0,0,0.55);
}
/* Bulle */
.tour-bubble{
background: var(--bg-card);
color: var(--text);
border: 1px solid var(--border);
box-shadow: 0 12px 30px rgba(0,0,0,0.35);
/* đ Pas de flou dans la bulle */
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* SĂ©parateurs */
.tour-bubble-header,
.tour-bubble-footer{
border-color: var(--border);
}
/* â
Back button joli + responsive */
.back-btn{
display:inline-flex;
align-items:center;
gap:8px;
height:40px;
padding:0 12px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background:rgba(10,10,10,.45);
color:#fff;
text-decoration:none;
transition:.15s ease;
}
.back-btn:hover{
border-color:rgba(66,165,245,.35);
box-shadow:0 0 0 1px rgba(66,165,245,.15), 0 0 24px rgba(66,165,245,.12);
transform:translateY(-1px);
}
.back-btn i{ font-size:1.2rem; line-height:1; }
.back-btn .back-text{
font-weight:800;
letter-spacing:.2px;
}
/* đ± Mobile : icĂŽne seule */
@media (max-width: 480px){
.back-btn{
width:36px;
padding:0;
justify-content:center;
border-radius:999px;
}
.back-btn .back-text{ display:none; }
}
.back-btn:focus-visible{
outline:none;
box-shadow:
0 0 0 3px rgba(66,165,245,.45),
0 0 24px rgba(66,165,245,.18);
}
.back-btn:hover i{
transform:translateX(-2px);
transition:transform .15s ease;
}
.notifications .dropdown{
z-index: 12000 !important;
}
/* â
Force l'ouverture du dropdown notif (Ă©vite conflits display:none) */
nav.top .notifications.open .dropdown{
display:block !important;
}
/* â
Badge notifications â menu mobile (mode clair) */
body.light-mode #mnavPanel #mNotifBadge,
body.light-mode #mnavBtn .mnav-badge{
background: #F44336 !important;
color: #fff !important;
box-shadow: 0 0 10px rgba(244,67,54,.55);
border-color: rgba(0,0,0,.25);
}
/* =========================
đ NOTIFICATIONS PRO (header_app)
========================= */
.notif-pro-head{ padding:10px 12px 6px; }
.notif-pro-title{
display:flex; align-items:center; gap:8px;
font-weight:950; letter-spacing:.2px;
}
.notif-pro-sub{ margin-top:4px; font-size:12px; opacity:.7; }
.notif-pro-badge{
display:inline-flex; align-items:center; justify-content:center;
min-width:22px; height:18px; padding:0 6px;
border-radius:999px;
background: rgba(66,165,245,.18);
border: 1px solid rgba(66,165,245,.35);
font-size:12px; font-weight:900;
}
.notif-pro-search{
display:flex; align-items:center; gap:10px;
padding:10px 12px;
border-radius:14px;
border:1px solid rgba(255,255,255,.10);
background:rgba(0,0,0,.22);
margin: 8px 10px 10px;
}
.notif-pro-search i{ opacity:.75; }
.notif-pro-search input{
width:100%; border:0; outline:0;
background:transparent; color:#fff;
font-size:14px;
}
.notif-pro-list{
display:flex;
flex-direction:column;
gap:10px;
padding: 0 10px 10px;
max-height: 360px;
overflow:auto;
}
.notif-pro-item{
display:flex;
gap:12px;
padding:12px;
border-radius:16px;
border:1px solid rgba(255,255,255,.10);
background:rgba(0,0,0,.18);
}
.notif-pro-item.unread{
border-color: rgba(66,165,245,.30);
background: linear-gradient(180deg, rgba(66,165,245,.14), rgba(0,0,0,.14));
}
.notif-pro-dot{
width:8px; height:8px; margin-top:7px;
border-radius:999px; background:#42A5F5;
box-shadow:0 0 0 3px rgba(66,165,245,.12);
flex:0 0 auto;
}
.notif-pro-ico{
width:38px; height:38px;
border-radius:14px;
display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.10);
flex:0 0 auto;
}
.notif-pro-body{ width:100%; min-width:0; }
.notif-pro-top{
display:flex; align-items:flex-start; justify-content:space-between;
gap:10px;
}
.notif-pro-ttl{
font-weight:950;
font-size:14px;
line-height:1.2;
}
.notif-pro-time{
font-size:12px;
font-weight:800;
opacity:.7;
white-space:nowrap;
}
.notif-pro-text{
margin-top:4px;
font-size:13px;
opacity:.82;
line-height:1.35;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Actions (desktop dropdown only) */
.notif-pro-actions{
display:flex;
gap:8px;
margin-top:10px;
flex-wrap:wrap;
}
.notif-pro-btn{
padding:7px 10px;
border-radius:10px;
font-weight:900;
font-size:12px;
border:1px solid rgba(66,165,245,.35);
background: rgba(66,165,245,.14);
color:#fff;
cursor:pointer;
}
.notif-pro-btn.ghost{
border:1px solid rgba(255,255,255,.12);
background: transparent;
opacity:.9;
}
.notif-pro-btn.danger{
border-color: rgba(239,83,80,.35);
background: rgba(239,83,80,.12);
}
/* Mobile adaptation */
.notif-pro-list.mnav{ max-height: 420px; }
.notif-pro-search.mnav{ margin: 0; }
/* Scroll propre notifications */
#notifDropdown{
max-height: 520px;
overflow: hidden;
}
.notif-pro-list{
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.2) transparent;
}
/* ===== Type chips ===== */
.notif-chip{
display:inline-flex; align-items:center;
padding:4px 8px; border-radius:999px;
font-size:11px; font-weight:950;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.06);
opacity:.95;
}
.notif-pro-item[data-type="wallet"] .notif-pro-ico{ background:rgba(66,165,245,.10); }
.notif-pro-item[data-type="trading"] .notif-pro-ico{ background:rgba(0,230,154,.10); }
.notif-pro-item[data-type="wallet"] .notif-chip,
#notifModalType.wallet{ border-color:rgba(66,165,245,.30); background:rgba(66,165,245,.12); }
.notif-pro-item[data-type="trading"] .notif-chip,
#notifModalType.trading{ border-color:rgba(0,230,154,.28); background:rgba(0,230,154,.10); }
.notif-pro-item[data-type="system"] .notif-chip,
#notifModalType.system{ border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06); }
/* ===== Modal ===== */
.notif-modal{
position:fixed; inset:0;
display:none;
z-index:50000;
}
.notif-modal.open{ display:block; }
.notif-modal-overlay{
position:absolute; inset:0;
background:rgba(0,0,0,.55);
backdrop-filter: blur(8px);
}
.notif-modal-card{
position:relative;
width:min(560px, calc(100% - 24px));
margin: calc(env(safe-area-inset-top) + 80px) auto 0;
border-radius: 22px;
border:1px solid rgba(255,255,255,.12);
background: rgba(10,14,24,.96);
box-shadow: 0 30px 90px rgba(0,0,0,.55);
overflow:hidden;
transform: translateY(10px);
opacity:0;
animation: notifPop .18s ease forwards;
}
@keyframes notifPop{ to{ transform:translateY(0); opacity:1; } }
.notif-modal-head{
display:flex; align-items:flex-start; justify-content:space-between;
gap:12px;
padding:14px 14px 10px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.notif-modal-left{ display:flex; gap:12px; align-items:flex-start; }
.notif-modal-ico{
width:44px; height:44px; border-radius:16px;
display:flex; align-items:center; justify-content:center;
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.06);
font-size:20px;
}
.notif-modal-title{ font-weight:1000; font-size:16px; line-height:1.2; }
.notif-modal-meta{ display:flex; gap:8px; align-items:center; margin-top:6px; }
.notif-modal-time{ font-size:12px; font-weight:800; opacity:.7; }
.notif-modal-close{
width:40px; height:40px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background:transparent;
color:#fff;
cursor:pointer;
}
.notif-modal-body{
padding:14px;
font-size:14px;
line-height:1.5;
opacity:.92;
white-space:pre-wrap;
}
.notif-modal-actions{
display:flex; gap:10px; justify-content:flex-end;
padding:12px 14px 14px;
border-top:1px solid rgba(255,255,255,.08);
}
@media (max-width: 520px){
.notif-modal-card{ margin-top: calc(env(safe-area-inset-top) + 64px); }
}
.notif-modal{
position: fixed;
inset: 0;
display: none; /* IMPORTANT */
align-items: center;
justify-content: center;
z-index: 9999;
}
.notif-modal.open{ display: flex; }
.notif-modal-overlay{
position: absolute;
inset: 0;
background: rgba(0,0,0,.45);
}
.notif-modal-card{
position: relative;
z-index: 1;
}
.notif-modal{
z-index: 99999 !important;
}
.notifications .dropdown{
z-index: 1000;
}
:root{
/* DARK MODE â gris profond uniforme */
--nm-bg: rgba(18, 20, 24, .82); /* overlay gris foncé */
--nm-card: rgba(22, 24, 28, .96); /* card gris foncé */
--nm-border: rgba(255,255,255,.08);
--nm-line: rgba(255,255,255,.10);
--nm-text: rgba(255,255,255,.94);
--nm-muted: rgba(255,255,255,.60);
--nm-chip: rgba(255,255,255,.08);
}
body.light-mode{
--nm-bg: rgba(10, 12, 18, .35); /* overlay light (moins agressif) */
--nm-card: rgba(255,255,255,.96); /* card light */
--nm-border: rgba(10,12,18,.14); /* â
bordures visibles */
--nm-line: rgba(10,12,18,.10); /* â
séparateurs/lignes */
--nm-text: rgba(10,12,18,.92);
--nm-muted: rgba(10,12,18,.60);
--nm-chip: rgba(10,12,18,.06);
}
/* overlay derriĂšre le modal */
.notif-modal{
position: fixed;
inset: 0;
z-index: 9999;
display: none;
}
.notif-modal.open{ display: block; }
.notif-modal-overlay{
position: absolute;
inset: 0;
background: var(--nm-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* la carte */
.notif-modal-card{
position: relative;
width: min(720px, calc(100% - 28px));
margin: 10vh auto 0;
background: var(--nm-card);
color: var(--nm-text);
border: 1px solid var(--nm-border);
border-radius: 18px;
box-shadow: 0 18px 70px rgba(0,0,0,.35);
}
/* textes */
.notif-modal-title{ color: var(--nm-text); }
.notif-modal-body{ color: var(--nm-text); }
.notif-modal-time{ color: var(--nm-muted); }
/* chip */
.notif-chip{
background: var(--nm-chip);
border: 1px solid var(--nm-border);
color: var(--nm-text);
}
.notif-modal-close{
background: transparent;
border: 1px solid var(--nm-border);
color: var(--nm-text);
border-radius: 12px;
}
.notif-pro-btn.ghost{
border: 1px solid var(--nm-border);
color: var(--nm-text);
background: transparent;
}
/* BASE */
.notif-pro-btn.danger{
color: #b91c1c; /* rouge lisible */
background: rgba(185, 28, 28, .10);
border: 1px solid rgba(185, 28, 28, .35);
font-weight: 600;
}
.notif-pro-btn.danger i{
color: inherit;
}
/* HOVER */
.notif-pro-btn.danger:hover{
background: rgba(185, 28, 28, .18);
border-color: rgba(185, 28, 28, .55);
}
/* DARK MODE */
body:not(.light-mode) .notif-pro-btn.danger{
color: #fca5a5;
background: rgba(220, 38, 38, .18);
border-color: rgba(220, 38, 38, .45);
}
body:not(.light-mode) .notif-pro-btn.danger:hover{
background: rgba(220, 38, 38, .28);
border-color: rgba(220, 38, 38, .65);
}
.notif-modal-close{
cursor: pointer;
transition: background .2s, border-color .2s;
}
.notif-modal-close:hover{
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.18);
}
/* lignes de séparation internes */
.notif-modal-head{
border-bottom: 1px solid var(--nm-line);
}
.notif-modal-actions{
border-top: 1px solid var(--nm-line);
}
/* si tu as des ârowsâ ou items */
.notif-pro-item{
border: 1px solid var(--nm-border);
}
.notif-pro-item + .notif-pro-item{
border-top: 1px solid var(--nm-line);
}
/* si tu as un hr */
.notif-modal-card hr{
border: 0;
border-top: 1px solid var(--nm-line);
}
/* ===== Notif EMPTY state ===== */
.notif-empty{
margin: 10px 10px 12px;
padding: 14px 14px;
border-radius: 14px;
font-size: .95rem;
display: flex;
align-items: center;
gap: 10px;
opacity: .95;
animation: notifFadeIn .15s ease-out both;
/* sombre (par défaut) */
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
color: rgba(255,255,255,.85);
}
.notif-empty:before{
content: "â
";
font-size: 1.05rem;
}
/* clair */
body.light-mode .notif-empty{
background: rgba(0,0,0,.04);
border: 1px solid rgba(0,0,0,.10);
color: rgba(0,0,0,.78);
}
/* petites âlignesâ visibles dans la liste (clair + sombre) */
.notif-pro-list{
border-top: 1px solid rgba(255,255,255,.08);
}
body.light-mode .notif-pro-list{
border-top: 1px solid rgba(0,0,0,.08);
}
.notif-pro-item{
border-bottom: 1px solid rgba(255,255,255,.08);
}
body.light-mode .notif-pro-item{
border-bottom: 1px solid rgba(0,0,0,.08);
}
/* animation */
@keyframes notifFadeIn{
from{ transform: translateY(-4px); opacity: 0; }
to{ transform: translateY(0); opacity: .95; }
}
/* ===== Currency : Wallet-like dans le menu mobile (TEL PORTRAIT) ===== */
@media (max-width: 767px) and (orientation: portrait){
/* Dropdown = plein Ă©cran du panel (PAS absolute) */
#mnavPanel #mCurrencyMenu{
position: static !important;
width: 100% !important;
left: auto !important;
right: auto !important;
transform: none !important;
max-height: 55vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 767px) and (orientation: portrait){
/* â
ONLY DASHBOARD */
body.page-dashboard #mnavPanel #mCurrencyWrap{
width: 100%;
padding: 10px;
border-radius: 22px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
}
body.page-dashboard #mnavPanel #mCurrencyBtn{
width: 100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 16px;
border-radius:18px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
}
/* â
Le menu reste dropdown mais âpropreâ, avec scroll seulement si trop long */
body.page-dashboard #mnavPanel #mCurrencyMenu{
width: 100%;
margin-top: 12px;
padding: 12px;
border-radius: 22px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
max-height: 55vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
body.page-dashboard #mnavPanel #mCurrencyMenu .currency-item{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px;
border-radius:18px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.10);
margin-bottom: 10px;
}
body.page-dashboard #mnavPanel #mCurrencyMenu .currency-item:last-child{ margin-bottom:0; }
body.page-dashboard #mnavPanel #mCurrencyMenu .currency-item .currency-icon{
width: 52px;
height: 52px;
border-radius: 16px;
display:grid;
place-items:center;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
flex: 0 0 52px;
font-size: 26px;
line-height: 1;
}
body.page-dashboard #mnavPanel #mCurrencyMenu .currency-item .currency-code{
font-weight: 800;
font-size: 18px;
letter-spacing: .4px;
white-space: nowrap;
}
body.page-dashboard #mnavPanel #mCurrencyMenu .currency-item .currency-right{
font-weight: 700;
opacity: .75;
white-space: nowrap;
}
body.page-dashboard #mnavPanel #mCurrencyMenu .currency-item.active,
body.page-dashboard #mnavPanel #mCurrencyMenu .currency-item.is-active{
background: rgba(66,165,245,.12);
border-color: rgba(66,165,245,.55);
}
}
/* ================================
DASHBOARD â MENU MOBILE â DEVISE (Wallet-like)
Fix: overflow droite + typo + cards + scroll iOS
================================ */
@media (max-width: 767px) and (orientation: portrait){
/* 1) EmpĂȘche tout overflow horizontal du menu */
html, body { overflow-x: hidden; }
/* Si ton panneau menu mobile est dans #mnavPanel (souvent), on le sécurise */
#mnavPanel{
max-width: 100vw;
overflow-x: hidden; /* stop le débordement droite */
box-sizing: border-box;
}
/* 2) Le wrapper devise doit rester dans le panneau */
#mCurrencyWrap{
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* 3) Typo identique âwallet-likeâ */
#mCurrencyWrap,
#mCurrencyWrap *{
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
letter-spacing: -0.01em;
}
/* 4) Bouton devise : mĂȘme look wallet */
#mCurrencyBtn{
width: 100%;
max-width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-radius: 18px;
border: 1px solid rgba(0,0,0,.08);
background: rgba(255,255,255,.65);
backdrop-filter: blur(10px);
font-weight: 700;
font-size: 18px;
color: #111;
}
/* 5) Dropdown : NE DOIT PAS sortir Ă droite */
#mCurrencyMenu{
/* on neutralise tout positionnement âdropdownâ qui dĂ©cale */
position: static !important;
left: auto !important;
right: auto !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
margin-top: 12px;
padding: 12px;
border-radius: 22px;
border: 1px solid rgba(0,0,0,.08);
background: rgba(255,255,255,.55);
backdrop-filter: blur(14px);
/* scroll interne */
max-height: min(56vh, calc(100vh - 260px));
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
/* au cas oĂč un parent a transform et crĂ©e un âlayout wideâ */
contain: layout paint;
}
/* 6) Items âcardsâ comme ton wallet */
#mCurrencyMenu .currency-item{
width: 100%;
max-width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 16px;
margin: 10px 0;
border-radius: 22px;
border: 1px solid rgba(0,0,0,.10);
background: rgba(255,255,255,.80);
color: #111;
font-weight: 700;
font-size: 18px;
}
/* Sous-texte Ă droite (ex: Europe / UK) */
#mCurrencyMenu .currency-item .muted,
#mCurrencyMenu .currency-item small{
font-weight: 600;
font-size: 16px;
opacity: .65;
}
/* IcĂŽne âpillâ Ă gauche (si ton HTML a un bloc icĂŽne) */
#mCurrencyMenu .currency-item .icon,
#mCurrencyMenu .currency-item .currency-icon{
width: 54px;
height: 54px;
border-radius: 18px;
display: grid;
place-items: center;
background: rgba(0,0,0,.06);
border: 1px solid rgba(0,0,0,.08);
flex: 0 0 auto;
}
}
/* ===== Dashboard : Devise style Wallet (moins de rectangles) ===== */
@media (max-width: 767px) and (orientation: portrait){
/* â
Supprime le grand cadre autour (1 rectangle en moins) */
#mnavPanel #mCurrencyWrap{
padding:0 !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
/* â
1 seul rectangle : la ligne "Devise" */
#mnavPanel #mCurrencyBtn{
width:100%;
height:64px;
border-radius:18px;
padding:14px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
background: rgba(255,255,255,.30);
border: 1px solid rgba(0,0,0,.10);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}
/* â EnlĂšve chevron si prĂ©sent (sur ta capture wallet il nây en a pas) */
#mnavPanel #mCurrencyBtn .ri-arrow-down-s-line,
#mnavPanel #mCurrencyBtn .ri-arrow-right-s-line,
#mnavPanel #mCurrencyBtn .chevron{
display:none !important;
}
/* â
1 seul rectangle : le menu scroll (la grande liste) */
#mnavPanel #mCurrencyMenu{
position: static !important;
width:100% !important;
transform:none !important;
margin-top:12px;
max-height: 55vh;
overflow:auto;
-webkit-overflow-scrolling: touch;
padding:14px;
border-radius:22px;
background: rgba(255,255,255,.22);
border: 1px solid rgba(0,0,0,.08);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
/* â
Items propres (câest normal dâavoir des ârectanglesâ ici) */
#mnavPanel #mCurrencyMenu .currency-item{
width:100%;
border-radius:22px;
padding:16px 18px;
margin-bottom:12px;
background: rgba(255,255,255,.60);
border: 1px solid rgba(0,0,0,.08);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}
#mnavPanel #mCurrencyMenu .currency-item:last-child{ margin-bottom:0; }
}
/* ===== WALLET â rĂ©duire lâespace entre devises (mobile portrait) ===== */
@media (max-width: 767px) and (orientation: portrait){
/* Liste devises dans la page Wallet */
.currency-menu .currency-item{
margin-bottom:0 !important;
padding: 14px 16px !important;
}
}
/* â
Currency : Ă©tat actif (Dashboard + Wallet) */
.currency-item.active{
border-color: rgba(66,165,245,.55) !important;
background: rgba(66,165,245,.14) !important;
box-shadow: 0 0 0 2px rgba(66,165,245,.12) !important;
}
/* Pastille à gauche un peu plus marquée */
.currency-item.active .ccy{
border-color: rgba(66,165,245,.45) !important;
background: rgba(66,165,245,.18) !important;
}
/* Option : petit check Ă droite */
.currency-item.active::after{
content:"â";
font-weight:900;
opacity:.95;
}
/* â
Wallet: on garde le symbole caché dans le header, mais visible dans le menu mobile */
@media (max-width: 480px) and (orientation: portrait) {
body.wallet-page .top-actions .currency-symbol {
display: none !important;
}
body.wallet-page #mnavPanel .currency-symbol {
display: inline-flex !important;
}
}
.currency-item.active{
background: rgba(66,165,245,.14) !important;
border-color: rgba(66,165,245,.35) !important;
box-shadow: 0 0 0 2px rgba(66,165,245,.12) inset;
}
.currency-item.active .ccy{
border-color: rgba(66,165,245,.35) !important;
}
.currency-item{
position: relative;
}
.currency-item .check{
position: absolute;
left: 16px;
bottom: 14px;
font-size: 16px;
font-weight: 900;
color: #111;
}
/* visible uniquement si actif */
.currency-item:not(.active) .check{
display: none;
}
.currency-item.active::after{
content: "â";
position: absolute;
left: 16px;
bottom: 14px;
font-size: 16px;
font-weight: 900;
color: #111;
}
/* devise active : check Ă droite */
.currency-item{
position: relative;
}
.currency-item.active::after{
content: "â";
position: absolute;
right: 18px; /* distance du bord droit */
top: 50%;
transform: translateY(-50%);
font-size: 18px;
font-weight: 900;
color: #111; /* sombre en mode clair */
}
/* mode sombre */
body:not(.light-mode) .currency-item.active::after{
color: #fff;
}
.currency-item.active::after{
content: "â";
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 900;
background: rgba(66,165,245,.15);
color: #1E88E5;
}
/* â
COCHE A DROITE (DESKTOP + MOBILE) â VERSION GRID PRO */
.currency-item{
display: grid !important;
grid-template-columns: 34px 1fr auto 30px !important; /* derniĂšre colonne = coche */
align-items: center !important;
position: relative !important;
}
/* Si tu utilises â */
.currency-item .check{
position: static !important; /* annule absolute */
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
grid-column: 4 !important; /* colonne de droite */
justify-self: end !important;
align-self: center !important;
font-weight: 900 !important;
font-size: 18px !important;
}
/* Si tu utilises le pseudo ::after */
.currency-item.active::after{
content: "â" !important;
position: static !important; /* IMPORTANT : plus en absolute */
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
grid-column: 4 !important; /* colonne de droite */
justify-self: end !important;
align-self: center !important;
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(66,165,245,.15);
color: #1E88E5;
font-weight: 900;
font-size: 14px;
}
/* Mode sombre */
body:not(.light-mode) .currency-item.active::after{
color: #fff !important;
}
/* â
iOS / Dashboard: double scroll (panel + menu interne) */
#mnavPanel{
height: calc(var(--vh, 1vh) * 100) !important;
overflow: hidden !important; /* important: empĂȘche le panel de tout capter */
}
#mnavPanel .mnav-content{
height: calc(var(--vh, 1vh) * 100 - 64px) !important; /* 64px â header du menu */
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
/* fermé = ton CSS existant gÚre l'affichage */
#mCurrencyWrap.open #mCurrencyMenu{
max-height: 42vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
#mNotifWrap.open #mNotifDropdown{
max-height: 42vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
/* =========================================
đ MENU MOBILE â DARK MODE UNIFIĂ (WALLET)
========================================= */
/* Overlay sombre profond */
body:not(.light-mode) .mnav-overlay{
background: rgba(0,0,0,.65) !important;
backdrop-filter: blur(10px);
}
/* Panel principal */
body:not(.light-mode) .mnav-panel{
background: linear-gradient(180deg,#0b0e14 0%,#07090d 100%) !important;
border: 1px solid rgba(255,255,255,.08) !important;
box-shadow: 0 25px 70px rgba(0,0,0,.55) !important;
color: rgba(255,255,255,.92) !important;
}
/* Header du panel */
body:not(.light-mode) .mnav-head{
border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
/* Bouton fermer */
body:not(.light-mode) .mnav-close{
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.12) !important;
color: #fff !important;
}
/* Sections */
body:not(.light-mode) .mnav-section{
background: rgba(255,255,255,.03) !important;
border: 1px solid rgba(255,255,255,.06) !important;
}
/* Lignes (Notif / Devise / Theme / etc.) */
body:not(.light-mode) .mnav-row,
body:not(.light-mode) .mnav-action{
background: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.92) !important;
}
/* Hover */
body:not(.light-mode) .mnav-row:hover,
body:not(.light-mode) .mnav-action:hover{
background: rgba(255,255,255,.08) !important;
}
/* IcĂŽnes */
body:not(.light-mode) .mnav-row i,
body:not(.light-mode) .mnav-action i{
color: rgba(255,255,255,.85) !important;
}
/* Dropdowns internes (notif / devise) */
body:not(.light-mode) .mnav-dropdown,
body:not(.light-mode) .currency-menu,
body:not(.light-mode) .dropdown{
background: #0b0e14 !important;
border: 1px solid rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.92) !important;
}
/* Items devise */
body:not(.light-mode) .currency-item{
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.92) !important;
}
body:not(.light-mode) .currency-item.active{
background: rgba(64,150,255,.18) !important;
border-color: rgba(64,150,255,.45) !important;
}
/* Badge notification */
body:not(.light-mode) .mnav-badge,
body:not(.light-mode) .notifications .badge{
background:#ff3b30 !important;
color:#fff !important;
}
/* đ± Tel + portrait : agrandir le texte "Notifications" (ligne du menu) */
@media (pointer: coarse) and (orientation: portrait) {
#mnavPanel #mNotifBtn .mnav-row-left span {
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
}
/* Et si tu veux pareil pour Guide / ThĂšme / DĂ©connexion (actions) */
#mnavPanel .mnav-actions .mnav-action span {
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
}
}
@media (pointer: coarse) and (orientation: portrait) {
#mnavPanel .mnav-section-title,
#mnavPanel .mnav-section > :first-child {
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
}
}
/* đ±đ Dashboard â assombrir le cadre AUTOUR DES DEVISES */
@media (pointer: coarse) and (orientation: portrait) {
body:not(.light-mode) #mnavPanel .currency-menu,
body:not(.light-mode) #mnavPanel .dropdown,
body:not(.light-mode) #mnavPanel .currency-list {
/* cadre plus sombre */
border: 1px solid rgba(255,255,255,.05) !important;
/* supprime le glow clair */
box-shadow: none !important;
/* fond plus dark */
background: #0b0e14 !important;
}
}
/* =========================
đ
Calendar header â FIX mobile iOS
========================= */
.calendar-header{
position: relative; /* crée un stacking context */
z-index: 1;
}
/* bouton Date / Choisir */
.calendar-header .month-picker-btn{
position: relative;
z-index: 3; /* au-dessus des overlays / pseudo-elements */
}
/* empĂȘche les overlays dĂ©coratifs de capter les taps */
.calendar-header::before,
.calendar-header::after{
pointer-events: none;
}
@media (max-width: 480px) and (orientation: portrait) {
td.date-cell {
white-space: nowrap;
word-break: keep-all;
overflow-wrap: normal;
}
}
/* đ± Portrait tĂ©lĂ©phone : badge en dessous mais largeur auto */
@media (max-width: 480px) and (orientation: portrait) {
#plus1GoalTitle {
flex-wrap: wrap;
}
#plus1StatusTag {
width: auto; /* â plus 100% */
display: inline-flex; /* taille au contenu */
margin-top: 8px;
padding: 6px 12px; /* badge plus compact */
align-self: flex-start;
white-space: nowrap;
}
}
#plus1StatusTag {
border-radius: 999px;
font-size: 0.9em;
}
/* ===== iPhone portrait : FIX UNIQUEMENT pour les liens du menu mobile ===== */
#mnavPanel .mnav-actions a.mnav-action{
display:flex; /* comme tes boutons */
align-items:center;
gap:10px;
width:100%;
max-width:100%;
box-sizing:border-box;
text-decoration:none !important; /* enlĂšve le soulignement iOS */
}
/* â
Boutons header (liens) : jamais souligné */
a.header-btn,
a.mnav-action {
text-decoration: none !important;
}
/* â
Ătats navigateur (sinon iOS/Safari peut re-souligner) */
a.header-btn:hover,
a.header-btn:focus,
a.header-btn:active,
a.header-btn:visited,
a.mnav-action:hover,
a.mnav-action:focus,
a.mnav-action:active,
a.mnav-action:visited {
text-decoration: none !important;
}
/* â
Au cas oĂč le hĂ©rite d'un underline */
a.header-btn span,
a.mnav-action span {
text-decoration: none !important;
}
/* Currency dropdown â desktop */
.currency-wrap .currency-menu {
display: none;
}
.currency-wrap.is-open .currency-menu {
display: block;
}
/* Currency dropdown â mobile */
#mCurrencyWrap .currency-menu {
display: none;
}
#mCurrencyWrap.open .currency-menu {
display: block;
}
/* ===== xProTrading header_app : UI unifiée ===== */
.app-header{
position: sticky;
top: 0;
z-index: 60;
background: var(--panel);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(10px);
}
/* zone droite */
.app-header .right .top-actions{
display:flex;
align-items:center;
gap:10px;
}
/* Base = mĂȘme style pour TOUS les contrĂŽles */
.app-header .header-btn,
.app-header .currency-btn,
.app-header .icon-btn,
.app-header .btn2,
.app-header .logout-btn{
display:inline-flex;
align-items:center;
gap:8px;
height:40px;
padding:0 12px;
border-radius:12px;
border:1px solid var(--border);
background: var(--card);
color: var(--text);
font-weight:800;
font-size:14px;
line-height:1;
cursor:pointer;
transition: transform .08s ease, background .15s ease, border-color .15s ease;
text-decoration:none;
user-select:none;
}
.app-header .header-btn:hover,
.app-header .currency-btn:hover,
.app-header .icon-btn:hover,
.app-header .btn2:hover,
.app-header .logout-btn:hover{
background: var(--card2, var(--card));
border-color: color-mix(in srgb, var(--border) 55%, var(--primary) 45%);
}
.app-header .header-btn:active,
.app-header .currency-btn:active,
.app-header .icon-btn:active,
.app-header .btn2:active,
.app-header .logout-btn:active{
transform: translateY(1px);
}
/* Boutons icĂŽne (cloche, logout, theme si tu veux) */
.app-header .icon-btn,
.app-header .logout-btn,
.app-header .btn2{
width:40px;
padding:0;
justify-content:center;
}
/* IcÎnes : cohérence */
.app-header .header-btn i,
.app-header .currency-btn i,
.app-header .icon-btn i,
.app-header .logout-btn i{
font-size:1.15em;
opacity:.95;
}
/* Badge notif = plus âpremiumâ */
.app-header .badge{
position:absolute;
top:-6px;
right:-6px;
min-width:18px;
height:18px;
padding:0 6px;
border-radius:999px;
font-size:12px;
font-weight:900;
background: var(--danger, #ff4d4d);
color:#fff;
border:2px solid var(--panel);
}
/* ===== Lang inline : la rendre âboutonâ aussi ===== */
.app-header .lang-inline{
display:inline-flex;
align-items:center;
height:40px;
padding:0 10px;
border-radius:12px;
border:1px solid var(--border);
background: var(--card);
gap:8px;
}
.app-header .lang-inline .sep{
opacity:.35;
}
.app-header .lang-inline .lang-link{
display:inline-flex;
align-items:center;
height:28px;
padding:0 10px;
border-radius:10px;
font-weight:900;
color: var(--muted, var(--text));
text-decoration:none;
}
.app-header .lang-inline .lang-link:hover{
background: color-mix(in srgb, var(--card) 60%, transparent 40%);
}
.app-header .lang-inline .lang-link.active{
background: color-mix(in srgb, var(--primary) 16%, transparent 84%);
color: var(--text);
border:1px solid color-mix(in srgb, var(--primary) 35%, var(--border) 65%);
}
/* ===== Currency dropdown : rendre le menu raccord cards ===== */
.app-header .currency-menu{
background: var(--panel);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 14px 45px rgba(0,0,0,.28);
padding: 10px;
}
.app-header .currency-item{
border-radius:12px;
border:1px solid transparent;
background: transparent;
transition: background .15s ease, border-color .15s ease;
}
.app-header .currency-item:hover{
background: color-mix(in srgb, var(--card) 60%, transparent 40%);
border-color: color-mix(in srgb, var(--border) 65%, transparent 35%);
}
.app-header .currency-item.active{
background: color-mix(in srgb, var(--primary) 16%, transparent 84%);
border-color: color-mix(in srgb, var(--primary) 30%, var(--border) 70%);
}
/* ===== Account topnav : onglets settings/profile plus âtabsâ ===== */
.app-header .account-topnav{
display:inline-flex;
gap:8px;
padding:4px;
border-radius:14px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--card) 70%, transparent 30%);
}
.app-header .account-topnav .header-btn{
height:34px;
padding:0 10px;
border-radius:12px;
border:1px solid transparent; /* tabs */
background: transparent;
}
.app-header .account-topnav .header-btn.active{
background: var(--card);
border-color: color-mix(in srgb, var(--primary) 25%, var(--border) 75%);
}
/* â
Theme = bouton carré (icÎne) */
.app-header #themeToggle{
width: 44px; /* taille carrée */
height: 44px;
padding: 0 !important;
border-radius: 12px; /* carré arrondi (pas rond) */
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Optionnel : icĂŽne un peu plus visible */
.app-header #themeToggle #themeIcon{
font-size: 18px;
line-height: 1;
}
.app-header .logout-btn{
width: 44px;
height: 44px;
padding: 0 !important;
border-radius: 12px;
display:inline-flex;
align-items:center;
justify-content:center;
}
/* Sécurité : hauteur unique pour tout le header */
.app-header .header-btn,
.app-header .icon-btn,
.app-header .currency-btn{
height: 44px;
}
/* ===== Bouton RETOUR (header gauche) ===== */
.app-header .back-btn{
height: 44px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--card);
color: var(--text);
border: 1px solid var(--border);
font-weight: 800;
text-decoration: none;
transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
/* IcĂŽne seule â carrĂ© */
.app-header .back-btn:not ĐżĐŸĐșĐ°Đ·Đ°ŃŃ span{
width: 44px;
padding: 0;
justify-content: center;
border-radius: 12px;
}
/* IcĂŽne + texte â pill */
.app-header .back-btn span{
padding-right: 6px;
}
.app-header .back-btn{
padding: 0 14px;
border-radius: 14px;
}
/* Hover / active cohérent */
.app-header .back-btn:hover{
background: var(--card2, var(--card));
border-color: color-mix(in srgb, var(--border) 55%, var(--primary) 45%);
}
.app-header .back-btn:active{
transform: translateY(1px);
}
/* IcĂŽne */
.app-header .back-btn i{
font-size: 18px;
line-height: 1;
}
/* Header fixe, mais aligné à la page (PAS au viewport) */
nav.top.app-header{
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 10000;
}
/* Le contenu du header = largeur de la page */
/* nav.top.app-header .top-inner{
max-width: 1400px;
margin: 0 auto;
padding: 0 32px;
box-sizing: border-box;
} */
/* mobile */
/* @media (max-width: 980px){
nav.top.app-header .top-inner{
padding: 0 16px;
}
} */
nav.top.app-header .top-inner{
max-width: var(--app-max);
margin: 0 auto;
padding: 0 var(--app-pad);
box-sizing: border-box;
}
@media (min-width: 1024px){
nav.top.app-header .top-inner{ padding: 0 var(--app-pad-desktop); }
}
/* =========================================
HEADER â CONTENU ALIGNĂ COMME LA PAGE
========================================= */
nav.top.app-header{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
/* đ mĂȘme logique que le container principal */
padding-left: clamp(16px, calc((100vw - 1280px) / 2 + 16px), 32px);
padding-right: clamp(16px, calc((100vw - 1280px) / 2 + 16px), 32px);
}
/* ===== LOGO ===== */
nav.top.app-header .brand{
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
/* ===== BOUTONS ===== */
nav.top.app-header .top-actions{
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
/* Anti Ă©tirement */
nav.top.app-header .top-actions > *,
nav.top.app-header .brand > *{
flex: 0 0 auto;
}
body.page-dashboard,
body.page-app{
padding-top: 50px; /* đ„ hauteur rĂ©elle du header */
}
/* đ± Phone LANDSCAPE: mode compact = uniquement burger */
@media (max-height: 520px) and (orientation: landscape){
/* cache toute la zone actions desktop (boutons Ă droite) */
nav.top.app-header .right.desktop-only{
display: none !important;
}
/* garde le burger visible */
nav.top.app-header .mnav-btn{
display: inline-flex !important;
}
/* réduit logo + titre pour que ça tienne */
nav.top.app-header .brand{
gap: 8px;
}
nav.top.app-header .brand-logo{
height: 32px;
width: auto;
}
nav.top.app-header .brand-full{
font-size: 28px; /* ajuste si besoin */
line-height: 1;
white-space: nowrap;
}
/* padding du header un peu plus léger */
nav.top.app-header{
padding-top: calc(8px + env(safe-area-inset-top)) !important;
padding-bottom: 8px !important;
}
}
/* đ± PHONE LANDSCAPE = COMPORTEMENT MOBILE COMPLET */
@media (max-height: 520px) and (orientation: landscape){
/* Autorise le menu burger */
#mnavPanel{
display: block !important;
}
/* Overlay OK */
#mnavOverlay{
display: block !important;
}
/* Le body peut ĂȘtre bloquĂ© comme en portrait */
body.mnav-open{
overflow: hidden;
}
}
@media (max-height: 520px) and (orientation: landscape){
#mnavPanel{
transform: translateX(100%);
transition: transform .3s ease;
}
#mnavPanel.open{
transform: translateX(0);
}
}
/* =========================================================
â
PHONE LANDSCAPE â HEADER MINIMAL + MENU COMPACT
(ne sâapplique PAS sur desktop / tablette)
========================================================= */
/* 1) Détecter "téléphone" en paysage */
@media (max-width: 932px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
/* ===== HEADER : garder seulement burger ===== */
/* Cache toutes les actions desktop (cloche, boutons, devise etc.) */
nav.top #appRight{ display:none !important; }
/* Garde le bouton burger visible */
nav.top #mnavBtn{ display:inline-flex !important; }
/* Range brand + burger proprement */
nav.top{
padding-left: 14px !important;
padding-right: 14px !important;
min-height: 52px !important;
gap: 10px !important;
}
/* Brand plus compact (logo + texte) */
nav.top .brand{
display:flex !important;
align-items:center !important;
gap: 8px !important;
min-width: 0 !important;
}
nav.top .brand .brand-logo{
height: 28px !important;
width: auto !important;
flex: 0 0 auto !important;
}
nav.top .brand .brand-full{
font-size: 1.05rem !important;
white-space: nowrap !important;
}
/* Si tu as un back button : on le compacte aussi */
nav.top .back-btn{
width: 36px !important;
height: 36px !important;
padding: 0 !important;
border-radius: 999px !important;
}
nav.top .back-btn span{ display:none !important; }
/* Burger compact + badge */
nav.top .mnav-btn{
width: 40px !important;
height: 40px !important;
border-radius: 14px !important;
flex: 0 0 auto !important;
}
nav.top .mnav-btn i{ font-size: 1.25rem !important; }
/* ===== MENU (panel) : plus compact en paysage ===== */
#mnavPanel{
height: min(92dvh, 420px) !important;
border-radius: 16px 16px 0 0 !important;
}
#mnavPanel .mnav-head{
padding: 16px 14px 10px !important;
}
#mnavPanel .mnav-title{
font-size: 0.95rem !important;
opacity: .92 !important;
}
#mnavPanel .mnav-close{
width: 38px !important;
height: 38px !important;
border-radius: 14px !important;
}
#mnavPanel .mnav-content{
padding: 10px 12px 14px !important;
}
/* Sections moins "grosses" */
#mnavPanel .mnav-section{
padding: 10px !important;
border-radius: 16px !important;
}
/* Rows plus denses */
#mnavPanel .mnav-row,
#mnavPanel .mnav-action{
padding: 10px 10px !important;
border-radius: 14px !important;
min-height: 44px !important;
font-size: 0.95rem !important;
}
#mnavPanel .mnav-row i,
#mnavPanel .mnav-action i{
font-size: 1.15rem !important;
}
/* Dropdowns (notifs/devise) moins hauts */
#mnavPanel .mnav-dropdown{
max-height: 240px !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* Footer petit */
#mnavPanel .mnav-footer{
padding-top: 10px !important;
opacity: .75 !important;
}
}
/* BONUS : si ton CSS desktop force .desktop-only visible,
ça garantit quâen mobile (portrait + paysage) on ne voit pas #appRight */
@media (max-width: 932px){
.desktop-only{ display:none !important; }
}
/* =========================================================
FIX: flĂšche retour + boutons compte/paramĂštres (account-topnav)
========================================================= */
/* 1) Header: jamais de retour Ă la ligne */
nav.top{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
flex-wrap: nowrap !important;
}
/* 2) Brand: peut rétrécir sans casser */
nav.top .brand{
display:flex !important;
align-items:center !important;
gap:10px !important;
min-width: 0 !important;
flex: 1 1 auto !important;
}
/* Logo/texte ne doivent pas casser la ligne */
nav.top .brand .brand-full{
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 220px; /* ajuste si tu veux */
}
/* 3) FlĂšche retour: taille fixe, ne doit pas Ă©largir */
nav.top .back-btn{
flex: 0 0 auto !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
height: 40px !important;
width: 40px !important;
padding: 0 !important;
border-radius: 14px !important;
}
nav.top .back-btn span{
display:none !important; /* garde juste lâicĂŽne pour Ă©viter le bug */
}
/* 4) Zone droite: ne doit jamais wrap */
nav.top .right{
flex: 0 0 auto !important;
min-width: 0 !important;
}
nav.top .top-actions{
display:flex !important;
align-items:center !important;
flex-wrap: nowrap !important;
gap: 10px !important;
}
/* 5) account-topnav: compact + pas de wrap */
nav.top .account-topnav{
display:flex !important;
align-items:center !important;
gap: 8px !important;
flex-wrap: nowrap !important;
max-width: 520px; /* limite pour Ă©viter quâil explose */
overflow: hidden !important; /* Ă©vite quâil pousse le reste */
}
/* Les boutons dans account-topnav: pas de retour ligne */
nav.top .account-topnav .header-btn{
white-space: nowrap !important;
flex: 0 0 auto !important;
}
/* 6) MOBILE (portrait + paysage) : on cache la nav compte du header (menu burger uniquement) */
@media (max-width: 932px){
nav.top .account-topnav{ display:none !important; }
}
/* =========================
â
MENU BURGER (mobile) : espace "Compte" / "ParamĂštres"
========================= */
/* Espace standard entre sections dans le panel */
#mnavPanel .mnav-section{
padding-top: 12px;
padding-bottom: 12px;
}
/* Le titre de section (ex: "Compte") */
#mnavPanel .mnav-subtitle{
margin: 0 0 10px 0; /* âŹ
ïž espace sous le titre */
padding: 0 2px; /* léger confort */
line-height: 1.2;
}
/* La section compte : un poil plus dâair */
#mnavPanel .mnav-section.mnav-account .mnav-subtitle{
margin-bottom: 12px; /* âŹ
ïž Ă©vite "collĂ©" */
}
/* Le 1er item juste aprĂšs le titre */
#mnavPanel .mnav-section.mnav-account .mnav-row:first-of-type{
margin-top: 6px; /* âŹ
ïž espace entre "Compte" et "ParamĂštres" */
}
/* Optionnel : espace entre les lignes compte */
#mnavPanel .mnav-section.mnav-account .mnav-row{
margin-top: 6px;
}
/* =========================================
FIX bouton ParamĂštres â mobile paysage
========================================= */
@media (max-width: 1024px) and (orientation: landscape){
/* bouton ParamĂštres dans la page Compte */
.mnav-account .mnav-row,
.mnav-account .mnav-row-settings{
background: transparent !important;
box-shadow: none !important;
border: none !important;
text-decoration: none !important;
}
/* supprime le soulignement du texte */
.mnav-account .mnav-row span,
.mnav-account .mnav-row-settings span{
text-decoration: none !important;
}
/* empĂȘche Ă©tat iOS focus/active */
.mnav-account .mnav-row:focus,
.mnav-account .mnav-row:active{
background: transparent !important;
box-shadow: none !important;
outline: none !important;
}
}
/* =========================================
MOBILE : uniformiser "ParamĂštres" avec les autres
========================================= */
/* ParamĂštres = vraie card comme ThĂšme / DĂ©connexion */
.mnav-account .mnav-row,
.mnav-account .mnav-row-settings{
display: flex;
align-items: center;
width: 100%;
min-height: 56px;
padding: 14px 16px;
border-radius: 16px;
background: #f7f8fa;
gap: 12px;
}
/* icĂŽne Ă gauche */
.mnav-account .mnav-row i,
.mnav-account .mnav-row-settings i{
font-size: 20px;
}
/* texte */
.mnav-account .mnav-row span,
.mnav-account .mnav-row-settings span{
font-weight: 500;
text-decoration: none;
}
/* flĂšche Ă droite */
.mnav-account .mnav-row-right{
margin-left: auto;
opacity: .55;
}
/* â
Anti-débordement global dans le menu mobile */
#mnavPanel,
#mnavPanel *{
box-sizing: border-box;
}
#mnavPanel .mnav-content{
overflow-x: hidden; /* empĂȘche tout scroll horizontal */
}
/* â
Les sections ne doivent jamais dépasser */
#mnavPanel .mnav-section{
width: 100%;
max-width: 100%;
}
/* â
FIX "ParamÚtres" (Compte) : largeur safe + pas de dépassement */
#mnavPanel .mnav-account .mnav-row,
#mnavPanel .mnav-account .mnav-row-settings{
width: 100%;
max-width: 100%;
min-width: 0;
/* si tu avais mis padding large, garde-le mais sans dépasser */
padding: 14px 16px;
/* important: pour que le 100% reste dans le cadre */
display: flex;
align-items: center;
gap: 12px;
overflow: hidden; /* coupe si un texte déborde */
}
/* â
EmpĂȘche le texte de pousser la flĂšche dehors */
#mnavPanel .mnav-account .mnav-row-left{
min-width: 0;
flex: 1 1 auto;
}
#mnavPanel .mnav-account .mnav-row-left span{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* flĂšche Ă droite fixe */
#mnavPanel .mnav-account .mnav-row-right{
flex: 0 0 auto;
margin-left: auto;
}
/* =========================================
Burger menu â corriger titre + croix trop collĂ©s (mobile paysage)
========================================= */
@media (max-height: 520px) and (orientation: landscape){
.mnav-head{
padding-top: 18px !important;
padding-bottom: 14px !important;
}
.mnav-title{
margin-top: 2px;
}
.mnav-close{
margin-top: 20px;
}
}
/* =========================================
MOBILE PORTRAIT : burger carré (light + dark)
========================================= */
@media (orientation: portrait){
/* Base (mode sombre par défaut) */
#mnavBtn{
width: 44px;
height: 44px;
padding: 0 !important;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
/* DARK */
background: rgba(18,18,22,.92);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 8px 22px rgba(0,0,0,.45);
color: rgba(255,255,255,.92);
-webkit-tap-highlight-color: transparent;
}
#mnavBtn i{
font-size: 22px;
line-height: 1;
}
/* Badge notif */
#mnavBtn .mnav-badge{
top: -4px;
right: -4px;
}
/* LIGHT (quand body.light-mode est actif) */
body.light-mode #mnavBtn{
background: #ffffff;
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 6px 18px rgba(0,0,0,.18);
color: rgba(0,0,0,.85);
}
}
/* =========================================
HEADER : boutons avec ombre uniforme (sans bleuté)
========================================= */
.app-header .header-btn,
.app-header .icon-btn,
.app-header .logout-btn,
.app-header #themeToggle,
.app-header #mnavBtn,
.app-header .back-btn{
background: transparent;
border: none;
/* OMBRE UNIFORME */
box-shadow: 0 4px 14px rgba(0,0,0,.15);
border-radius: 12px;
transition: box-shadow .18s ease, transform .12s ease;
}
/* Hover / active */
.app-header .header-btn:hover,
.app-header .icon-btn:hover,
.app-header .logout-btn:hover,
.app-header #themeToggle:hover,
.app-header #mnavBtn:hover,
.app-header .back-btn:hover{
box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.app-header .header-btn:active,
.app-header .icon-btn:active,
.app-header .logout-btn:active,
.app-header #themeToggle:active,
.app-header #mnavBtn:active,
.app-header .back-btn:active{
transform: translateY(1px);
box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
/* DARK MODE : ombre plus douce */
body:not(.light-mode) .app-header .header-btn,
body:not(.light-mode) .app-header .icon-btn,
body:not(.light-mode) .app-header .logout-btn,
body:not(.light-mode) .app-header #themeToggle,
body:not(.light-mode) .app-header #mnavBtn,
body:not(.light-mode) .app-header .back-btn{
box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
/* ================================
HEADER: texte/logo + back SANS BLEU / SANS GLOW
(Ă coller en FIN de CSS)
================================ */
/* 1) Texte "xProTrading" -> simple */
nav.top.app-header .brand-full{
color: var(--text) !important; /* blanc en dark, noir en light si var--text change */
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
text-shadow: none !important;
filter: none !important;
padding: 0 !important;
}
/* 2) Bouton retour (le lien + icĂŽne + texte) -> simple */
nav.top.app-header .back-btn,
nav.top.app-header .back-btn i,
nav.top.app-header .back-btn span{
color: var(--text) !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
text-shadow: none !important;
filter: none !important;
}
/* 3) EmpĂȘche le bleu au hover/active/focus sur le bouton retour */
nav.top.app-header .back-btn:hover,
nav.top.app-header .back-btn:active,
nav.top.app-header .back-btn:focus,
nav.top.app-header .back-btn:focus-visible{
color: var(--text) !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
}
/* 4) Si tu as un "glow" global sur les liens du header, on neutralise seulement dans .brand */
nav.top.app-header .brand a,
nav.top.app-header .brand a:hover,
nav.top.app-header .brand a:active,
nav.top.app-header .brand a:focus,
nav.top.app-header .brand a:focus-visible{
background: transparent !important;
box-shadow: none !important;
outline: none !important;
}
/* ==============================
BACK BUTTON = ICON BTN (like bell)
============================== */
nav.top.app-header .brand a.back-btn{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:44px !important;
height:44px !important;
padding:0 !important;
border-radius:14px !important;
border:1px solid rgba(255,255,255,.12) !important;
background: rgba(10,10,10,.45) !important; /* mĂȘme style que tes btn2/currency */
color:#fff !important;
box-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
text-decoration:none !important;
transition: .15s ease !important;
}
nav.top.app-header .brand a.back-btn i{
font-size:1.6em !important; /* comme ta cloche */
color:inherit !important;
opacity:1 !important;
}
/* Hover = glow léger (comme tes autres boutons header) */
nav.top.app-header .brand a.back-btn:hover{
border-color: rgba(66,165,245,.35) !important;
box-shadow:
0 0 0 1px rgba(66,165,245,.15),
0 0 24px rgba(66,165,245,.12) !important;
transform: translateY(-1px) !important;
}
nav.top.app-header .brand a.back-btn:active{
transform: translateY(0) !important;
}
/* âïž Light mode */
body.light-mode nav.top.app-header .brand a.back-btn{
background: rgba(0,0,0,.06) !important;
border-color: rgba(0,0,0,.10) !important;
color:#111 !important;
box-shadow: 0 10px 28px rgba(0,0,0,.10) !important;
}
body.light-mode nav.top.app-header .brand a.back-btn:hover{
border-color: rgba(30,136,229,.35) !important;
box-shadow:
0 0 0 1px rgba(30,136,229,.12),
0 0 22px rgba(30,136,229,.10) !important;
}
/* FlĂšche retour â taille Ă©quilibrĂ©e */
nav.top.app-header .brand a.back-btn i{
font-size: 1em !important; /* au lieu de 1.6em */
line-height: 1 !important;
}
/* =========================
LANG ACTIVE â STYLE UNIQUE (light + dark)
========================= */
/* reset minimal */
#appHeader .lang-inline .lang-link{
background: transparent;
box-shadow: none;
}
/* â
actif = premium soft PARTOUT */
#appHeader .lang-inline .lang-link.active{
background: rgba(255,213,74,.16) !important;
color: #FFD54A !important;
box-shadow: inset 0 0 0 1px rgba(255,213,74,.55) !important;
border-radius: 12px;
}
/* =========================
LANG (dark) : rendre le "gris" visible
========================= */
/* DARK : boutons non actifs visibles (gris soft) */
body:not(.light-mode) #appHeader .lang-inline .lang-link{
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.14) !important;
color: rgba(255,255,255,.86) !important;
}
/* DARK : actif reste jaune premium */
body:not(.light-mode) #appHeader .lang-inline .lang-link.active{
background: rgba(255,213,74,.16) !important;
color: #FFD54A !important;
box-shadow: inset 0 0 0 1px rgba(255,213,74,.55) !important;
border-color: transparent !important;
}
/* =========================
LANG SWITCH â MOBILE (menu burger)
========================= */
#mnavPanel .lang-inline{
display: inline-flex;
align-items: center;
padding: 6px;
border-radius: 16px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
}
#mnavPanel .lang-inline .lang-link{
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
min-width: 48px;
padding: 0 14px;
border-radius: 12px;
font-weight: 700;
letter-spacing: .4px;
text-decoration: none;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
color: rgba(255,255,255,.88);
}
/* actif = jaune premium */
#mnavPanel .lang-inline .lang-link.active{
background: rgba(255,213,74,.16) !important;
color: #FFD54A !important;
box-shadow: inset 0 0 0 1px rgba(255,213,74,.55) !important;
border-color: transparent !important;
}
/* séparateur */
#mnavPanel .lang-inline .sep{
color: transparent;
width: 1px;
height: 22px;
background: rgba(255,255,255,.28);
display: inline-block;
margin: 0 8px;
}
/* =========================
LANG â vraie carte (mobile)
========================= */
#mnavPanel .lang-inline{
width: 100%;
padding: 16px;
border-radius: 18px;
background: #f7f8fa; /* mĂȘme fond que les autres cards */
border: 1px solid #e3e6ea; /* vrai cadre visible */
}
/* dark mode */
body:not(.light-mode) #mnavPanel .lang-inline{
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.22);
}
/* =========================================
SURFACES (cards / menus / dropdowns)
========================================= */
/* Light */
body.light-mode{
--surface-bg: #ffffff;
--surface-border: rgba(0,0,0,.10);
}
/* Dark */
body:not(.light-mode){
--surface-bg: rgba(255,255,255,.06);
--surface-border: rgba(255,255,255,.22); /* <- mĂȘme esprit que ta carte Langue */
}
/* =========================================
MOBILE MENU ONLY (NO DESKTOP IMPACT)
========================================= */
/* Sections (cards blanches / dark soft) */
#mnavPanel .mnav-section{
background: var(--surface-bg) !important;
border: 1px solid var(--surface-border) !important;
}
/* Lignes internes (Guide / ThĂšme / Compte / etc.) */
#mnavPanel .mnav-row,
#mnavPanel .mnav-action,
#mnavPanel .mnav-account .mnav-row,
#mnavPanel .mnav-account .mnav-row-settings{
background: var(--surface-bg) !important;
border: 1px solid var(--surface-border) !important;
}
/* Devise (mobile uniquement) */
#mnavPanel #mCurrencyWrap .mnav-row,
#mnavPanel #mCurrencyWrap .currency-menu{
background: var(--surface-bg) !important;
border: 1px solid var(--surface-border) !important;
}
/* Notifications (mobile uniquement) */
#mnavPanel #mNotifDropdown{
background: var(--surface-bg) !important;
border: 1px solid var(--surface-border) !important;
}
/* Langue (mobile) */
#mnavPanel .lang-inline{
background: var(--surface-bg) !important;
border: 1px solid var(--surface-border) !important;
}
/* =========================
MOBILE PAYSAGE + LIGHT
Fond global du menu (overlay + panel) en gris
Cards restent blanches
========================= */
@media (orientation: landscape) and (max-width: 1024px){
/* 1) Le âfond de pageâ (overlay) */
body.light-mode.mnav-open #mnavOverlay,
body.light-mode.mnav-open #mnavOverlay.open{
background: #f7f8fa !important;
opacity: 1 !important;
}
/* 2) Fond du panneau (derriĂšre les sections) */
body.light-mode.mnav-open #mnavPanel{
background: #f7f8fa !important;
}
/* 3) IMPORTANT : on ne grise PAS les sections/cards */
body.light-mode.mnav-open #mnavPanel .mnav-content{
background: transparent !important;
}
}
/* =========================
MOBILE MENU â Compte
Align font-weight ParamĂštres
========================= */
#mnavPanel .mnav-account .mnav-row span,
#mnavPanel .mnav-account .mnav-row-settings span{
font-weight: 600 !important;
}
/* =========================
MOBILE PAYSAGE
Restore font-weight menu
========================= */
@media (orientation: landscape) and (max-width: 1024px){
/* Tous les textes principaux du menu */
#mnavPanel .mnav-row span,
#mnavPanel .mnav-action span,
#mnavPanel .mnav-row-left span,
#mnavPanel .mnav-account .mnav-row span,
#mnavPanel .mnav-account .mnav-row-settings span,
#mnavPanel .lang-inline .lang-link,
#mnavPanel .mnav-title,
#mnavPanel .mnav-subtitle{
font-weight: 600 !important;
}
/* Textes secondaires (valeurs Ă droite : Clair / Sombre) */
#mnavPanel .mnav-right-label,
#mnavPanel .mnav-row-right{
font-weight: 400 !important;
}
}
/* =========================
MOBILE MENU â TYPO UNIFIĂE
Portrait = Paysage
========================= */
/* Espacement icĂŽne â texte */
#mnavPanel .mnav-row-left{
gap: 10px; /* Ă©quilibre naturel */
}
/* Texte menu (tous items) */
#mnavPanel .mnav-row span,
#mnavPanel .mnav-action span,
#mnavPanel .mnav-account .mnav-row span,
#mnavPanel .mnav-account .mnav-row-settings span,
#mnavPanel .lang-inline .lang-link{
font-size: 19px !important;
font-weight: 600 !important;
}
/* =========================
MOBILE MENU â ESPACEMENT TEXTE (VRAI FIX)
========================= */
#mnavPanel .mnav-row-left span{
margin-left: 4px;
}
/* =========================
MOBILE MENU â PAYSAGE
Espacement icĂŽne â texte UNIQUEMENT
========================= */
@media (orientation: landscape) and (max-width: 1024px){
#mnavPanel .mnav-row-left span{
margin-left: 14px; /* + dâair en paysage */
}
}
/* đ„ FIX texte vertical cassĂ© dans ligne vide (iOS mobile) */
.planning-table tr.empty-row td.empty-cell{
display: table-cell !important;
width: auto !important;
max-width: none !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
text-align: center;
}
/* Bloc message vide (ligne vide) */
.planning-table tr.empty-row td.empty-cell{
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: normal !important;
text-align: center;
padding: 18px 12px;
}
/* Card message vide */
.empty-msg{
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
justify-content: center;
}
.empty-title{
font-weight: 800;
font-size: 1.02rem;
}
.empty-sub{
opacity: .75;
font-size: .92rem;
line-height: 1.35;
max-width: 520px;
}
/* bouton CTA */
.empty-cta{
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.tour-overlay.hidden{
pointer-events: none !important;
}
.tour-bubble.hidden{
pointer-events: none !important;
}
.tabs-slider{
pointer-events: none !important;
}
.empty-cell, .empty-msg, .empty-cta {
pointer-events: auto !important;
}
.empty-cta {
position: relative;
z-index: 5;
}
/* đŻ Halo d'aide sur le champ montant */
@keyframes haloPulse {
0% {
box-shadow: 0 0 0 0 rgba(66,165,245,0.55);
}
70% {
box-shadow: 0 0 0 14px rgba(66,165,245,0);
}
100% {
box-shadow: 0 0 0 0 rgba(66,165,245,0);
}
}
.input-halo {
position: relative;
animation: haloPulse 1.2s ease-out 1;
border-color: #42A5F5 !important;
}
/* Vue semaine calendrier */
.weekcal-lines{
display:flex;
flex-direction:column;
gap:10px;
}
.weekcal-line{
display:flex;
align-items:center;
gap:12px;
padding:10px 10px;
border-radius:14px;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
}
.weekcal-line.pnl-positive{
border-color: rgba(76,175,80,.35);
background: rgba(76,175,80,.08);
}
.weekcal-line.pnl-negative{
border-color: rgba(244,67,54,.35);
background: rgba(244,67,54,.08);
}
.weekcal-line-left{
width:150px;
display:flex;
flex-direction:column;
gap:6px;
min-width:150px;
}
.weekcal-weekbadge{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
padding:4px 10px;
border-radius:999px;
border:1px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.18);
font-weight:800;
}
.weekcal-weekmeta{
font-size:.85em;
opacity:.8;
}
.weekcal-line-days{
flex:1;
display:grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap:8px;
}
.weekcal-mini{
border-radius:12px;
border:1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.14);
padding:8px 6px;
text-align:center;
min-height:54px;
}
.weekcal-mini.pnl-positive{
border-color: rgba(76,175,80,.35);
background: rgba(76,175,80,.10);
}
.weekcal-mini.pnl-negative{
border-color: rgba(244,67,54,.35);
background: rgba(244,67,54,.10);
}
.weekcal-mini.out-month{
opacity:.35;
filter:saturate(.5);
}
.mini-top{
font-weight:800;
font-size:.9em;
opacity:.9;
}
.mini-amt{
margin-top:6px;
font-size:.85em;
opacity:.9;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.weekcal-line-right{
width:170px;
min-width:170px;
text-align:right;
font-weight:900;
}
/* =====================================
FLĂCHES NAV â FIX (espacement identique)
===================================== */
.cal-nav-arrow,
.cal-nav-btn{
background: none;
border: 0;
/* đ„ IMPORTANT : plus de padding variable */
padding: 0;
width: 44px; /* hitbox fixe */
height: 44px;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
}
/* IcĂŽne = mĂȘme taille partout */
.cal-nav-arrow i,
.cal-nav-btn i{
font-size: 28px;
line-height: 1;
}
/* Couleurs selon TON thĂšme */
body:not(.light-mode) .cal-nav-arrow,
body:not(.light-mode) .cal-nav-btn,
body:not(.light-mode) .cal-nav-arrow i,
body:not(.light-mode) .cal-nav-btn i{
color: rgba(255,255,255,.65);
}
body.light-mode .cal-nav-arrow,
body.light-mode .cal-nav-btn,
body.light-mode .cal-nav-arrow i,
body.light-mode .cal-nav-btn i{
color: #666;
}
/* Hover lisible (ton opacity:.1 fait âdisparaĂźtreâ) */
.cal-nav-arrow:hover,
.cal-nav-btn:hover{
opacity: .75;
}
/* Click */
.cal-nav-arrow:active,
.cal-nav-btn:active{
transform: scale(.92);
}
/* Focus clean */
.cal-nav-arrow:focus,
.cal-nav-btn:focus,
.cal-nav-arrow:focus-visible,
.cal-nav-btn:focus-visible{
outline: none;
}
/* Table stable */
.planning-table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
.planning-table th,
.planning-table td {
vertical-align: middle;
}
/* Mobile portrait: hauteur identique partout */
@media (max-width: 768px) {
.planning-table th,
.planning-table td {
padding: 0; /* on enlĂšve le padding du td */
height: 56px; /* ajuste (48/56/60) */
}
.planning-table td .cell {
height: 56px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 12px; /* padding déplacé ici */
box-sizing: border-box;
width: 100%;
}
}
/* Si "Ăchanges" est sticky Ă droite */
.planning-table td.col-exchanges,
.planning-table th.col-exchanges {
position: sticky;
right: 0;
z-index: 2;
background: #f3f4f6; /* mĂȘme fond que ton style */
}
/* đ± Mobile portrait uniquement : ESPACE entre colonnes sans casser les hauteurs */
@media (max-width: 480px) and (orientation: portrait){
/* On garde collapse (important pour ton fix hauteur + sticky) */
.planning-table{
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
/* espace entre colonnes via "gouttiĂšre" transparente */
.planning-table th,
.planning-table td{
padding: 0; /* on laisse le padding Ă .cell */
height: 56px;
vertical-align: middle;
border-right: 6px solid transparent; /* đ espace */
background-clip: padding-box;
}
.planning-table th:last-child,
.planning-table td:last-child{
border-right: 0;
}
/* le contenu reste dans .cell (hauteur stable) */
.planning-table td .cell{
height: 56px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
box-sizing: border-box;
width: 100%;
}
/* entĂȘtes : si tu n'as pas de .cell dans | , on gĂšre directement */
.planning-table th{
padding: 10px 6px; /* un peu dâair */
white-space: normal; /* évite "JoursEntrées..." collé */
line-height: 1.1;
text-align: center;
}
}
.planning-table td.col-exchanges .cell{
width: 100%;
}
/* đ± Mobile portrait uniquement : scroll horizontal pour SEMAINE CALENDRIER */
@media (max-width: 768px) and (orientation: portrait) {
.week-scroll-x{
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
width: 100%;
}
/* important : donne une vraie largeur au calendrier semaine */
.week-scroll-x > .weekcal-lines{
min-width: 880px;
}
}
/* đ Si tu veux un scroll plus âconfortâ (jours plus larges), monte Ă 920px. */
/* ============================
Planning header responsive
=> Date en dessous sur mobile
============================ */
@media (max-width: 480px) {
.calendar-header{
display: grid !important;
grid-template-columns: 44px 1fr 44px;
grid-template-rows: auto auto;
align-items: center;
gap: 8px;
width: 100%;
max-width: 100%;
}
/* â
hitbox flĂšches propre */
.calendar-header .cal-nav-arrow{
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.calendar-header .cal-nav-arrow.prev{ grid-column: 1; grid-row: 1; justify-self: start; }
.calendar-header .cal-nav-arrow.next{ grid-column: 3; grid-row: 1; justify-self: end; }
.calendar-header .month-selector{
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 0;
}
.calendar-header .calendar-title{
width: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.calendar-header .month-picker-btn{
width: 100%;
max-width: 100%; /* â
sécurité */
justify-content: center;
padding: 10px 12px;
border-radius: 12px;
}
.calendar-header .btn-today{
grid-column: 1 / 4;
grid-row: 2;
width: 100%;
text-align: center;
justify-self: stretch;
}
.calendar-header .month-picker-input{
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
}
/* =========================================
FIX iOS : 1 seul scroll wrapper pour le tableau
========================================= */
/* Le wrapper externe gĂšre le scroll */
#planningTableView .week-scroll-x{
overflow-x: auto !important;
overflow-y: visible !important;
-webkit-overflow-scrolling: touch;
width: 100%;
}
/* Le wrapper interne NE DOIT PAS scroll (sinon iOS bug) */
#planningTableView .planning-table-wrapper{
overflow: visible !important;
}
/* Le tableau doit avoir une largeur mini pour activer le scroll proprement */
#planningTableView table.history.planning-table{
min-width: 720px; /* ajuste: 640/700/760 selon ton goût */
width: 100%;
border-collapse: collapse;
table-layout: auto !important; /* <- IMPORTANT : Ă©vite lâĂ©crasement sur iOS */
}
/* EmpĂȘche les valeurs de casser la mise en page */
#planningTableView table.history.planning-table td:nth-child(2){
white-space: nowrap;
}
#planningTableView table.history.planning-table td:nth-child(4){
white-space: nowrap;
}
/* =========================
DESKTOP ONLY â fix flĂšches (alignement stable)
========================= */
@media (min-width: 900px){
.calendar-header{
height: 52px; /* ligne fixe */
min-height: 52px;
align-items: center; /* centre verticalement */
}
.calendar-header .cal-nav-arrow,
.calendar-header .cal-nav-btn{
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
line-height: 1;
}
.calendar-header .cal-nav-arrow i,
.calendar-header .cal-nav-btn i{
display: block;
line-height: 1;
}
}
@media (min-width: 900px){
.calendar-header{
position: relative;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
}
.calendar-header .month-selector{
flex: 0 1 auto;
}
.calendar-header .cal-nav-arrow.prev{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.calendar-header .cal-nav-arrow.next{
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.calendar-header .btn-today{
position: absolute;
right: 44px; /* réserve la place de la flÚche next */
top: 50%;
transform: translateY(-50%);
}
}
/* Le bouton devient la référence */
#notifBtn.icon-btn{
position: relative;
}
/* Badge dans l'angle haut-droite */
#notifBtn .badge{
position: absolute;
top: -6px;
right: -6px;
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
line-height: 18px;
font-size: 11px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
/* optionnel mais joli */
border: 2px solid rgba(255,255,255,.75);
}
/* Si la bordure en dark mode gĂšne */
/* body.dark #notifBtn .badge{ border-color: rgba(0,0,0,.35); }
body.light #notifBtn .badge{ border-color: rgba(255,255,255,.85); } */
/* =========================================================
WEEKCAL â META (icĂŽnes / infos)
========================================================= */
.weekcal-weekmeta{
display:flex;
align-items:center;
gap:8px;
font-weight:700;
opacity:.9;
}
.weekcal-weekmeta i{ font-size:16px; opacity:.95; }
.weekcal-weekmeta .dot{ opacity:.6; margin:0 4px; }
/* =========================================================
WEEK CALENDAR â INTENSITĂ + (mĂȘmes couleurs que jour, + fort)
========================================================= */
/* Ligne semaine gagnante */
.weekcal-line.pnl-positive{
background: rgba(76,175,80,.22); /* plus intense */
border: 2px solid rgba(76,175,80,.75);
}
/* Ligne semaine perdante */
.weekcal-line.pnl-negative{
background: rgba(244,67,54,.20); /* plus intense */
border: 2px solid rgba(244,67,54,.75);
}
/* (option) neutre */
.weekcal-line.pnl-neutral{
background: rgba(0,0,0,.06);
border: 2px solid rgba(0,0,0,.12);
}
/* Mini-jours (cases dans la semaine) */
.weekcal-mini.pnl-positive{
background: rgba(76,175,80,.28);
border: 2px solid rgba(76,175,80,.85);
}
.weekcal-mini.pnl-negative{
background: rgba(244,67,54,.26);
border: 2px solid rgba(244,67,54,.85);
}
.weekcal-mini.pnl-neutral{
background: rgba(0,0,0,.06);
border: 2px solid rgba(0,0,0,.10);
}
/* =========================================================
đš SEMAINE EN COURS = OUTLINE / HALO ONLY (PAS DE FOND)
========================================================= */
.weekcal-line.is-current-week{
background: inherit !important; /* conserve vert/rouge de base */
border: 2px solid rgba(255,193,7,.90) !important;
box-shadow:
0 0 0 4px rgba(255,193,7,.28), /* halo jaune externe */
0 10px 22px rgba(0,0,0,.25); /* ombre */
}
/* Sécurité : si un style plus spécifique mettait un fond */
.weekcal-line.is-current-week.pnl-positive,
.weekcal-line.is-current-week.pnl-negative,
.weekcal-line.is-current-week.pnl-neutral{
background: inherit !important;
}
/* =========================================================
đš JOUR DU JOUR (dans weekcal) = OUTLINE / HALO ONLY
========================================================= */
.weekcal-mini.is-today{
background: inherit !important; /* conserve vert/rouge/gris du mini-jour */
border: 2px solid rgba(255,193,7,.90) !important;
box-shadow:
0 0 0 3px rgba(255,193,7,.22), /* halo jaune */
0 6px 14px rgba(0,0,0,.18);
}
/* =========================================================
đš SĂLECTION (jour calendrier / mini semaine) = OUTLINE ONLY
(aucun fond jaune)
========================================================= */
.calendar-cell.is-selected,
.weekcal-mini.is-selected{
background: inherit !important; /* garde la couleur perf */
border: 2px solid rgba(255,193,7,.95) !important;
box-shadow:
0 0 0 4px rgba(255,193,7,.28),
0 10px 22px rgba(0,0,0,.25);
}
/* Option âencore plus netâ sur le calendrier mois */
.calendar-cell.is-selected{
outline: 2px solid rgba(255,193,7,.55);
outline-offset: 2px;
}
/* đ± Mobile portrait uniquement */
@media (max-width: 768px) and (orientation: portrait) {
.chart-container {
touch-action: pan-y;
}
}
/* =========================================================
WEEKCAL â Jours hors mois (mini cases out-month)
=> pointillés + plus discret (comme le calendrier mois)
========================================================= */
/* Light */
body.light-mode .weekcal-mini.out-month{
background: rgba(0,0,0,.055);
border: 1px dashed rgba(0,0,0,.18);
opacity: .65;
}
/* Dark */
body:not(.light-mode) .weekcal-mini.out-month{
background: rgba(255,255,255,.045);
border: 1px dashed rgba(255,255,255,.14);
opacity: .45;
}
/* â
Tooltip Chart (HTML) */
.chart-tooltip {
position: fixed;
z-index: 99999;
pointer-events: none;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.78);
color: #fff;
font-size: 14px;
line-height: 1.35;
white-space: pre-line; /* respecte \n */
overflow-wrap: anywhere; /* wrap fort */
max-width: 92vw; /* đ± mobile */
max-height: 70vh;
overflow: auto;
box-sizing: border-box;
}
.chart-tooltip .tt-title{
font-weight: 800;
font-size: 16px;
margin-bottom: 8px;
}
.chart-tooltip .tt-row{
display:flex;
align-items:flex-start;
gap:10px;
margin: 6px 0;
}
.chart-tooltip .tt-swatch{
width: 14px;
height: 14px;
border-radius: 4px;
margin-top: 2px;
flex: 0 0 14px;
border: 2px solid rgba(255,255,255,.75);
background: transparent;
}
.chart-tooltip .tt-text{
flex: 1;
min-width: 0;
}
.chart-tooltip .tt-info{
opacity: .85;
margin-top: 2px;
}
/* base: padding symétrique */
main.container{
box-sizing: border-box;
width: 100%;
padding-left: 16px;
padding-right: 16px;
}
/* iPhone paysage (et tel en général) */
@media (max-width: 1024px) and (orientation: landscape){
main.container{
padding-left: calc(12px + env(safe-area-inset-left));
padding-right: calc(12px + env(safe-area-inset-right));
}
}
.calendar-cell.empty{
opacity: .35; /* visible mais discret */
background: rgba(0,0,0,.03); /* light */
border: 1px dashed rgba(0,0,0,.08);
}
body:not(.light-mode) .calendar-cell.empty{
background: rgba(255,255,255,.04); /* dark */
border: 1px dashed rgba(255,255,255,.10);
}
/* ===========================
CALENDAR CELL â SPACING TIGHT
=========================== */
.calendar-cell{
position: relative;
overflow: hidden;
padding: 10px 12px 20px 12px; /* âŹ
ïž moins dâespace en bas */
border-radius: 16px;
}
/* Montant */
.calendar-amount{
margin-top: 20px;
margin-bottom: 6px; /* âŹ
ïž rĂ©duit */
line-height: 1.15;
}
/* "1 trade(s)" */
.calendar-extra{
margin-top: 4px;
margin-bottom: 4px; /* âŹ
ïž rĂ©duit */
line-height: 1.15;
}
/* Barre */
.calendar-sparkline{
position: absolute;
left: 12px;
right: 12px;
bottom: 6px; /* âŹ
ïž remonte la barre */
height: 5px; /* âŹ
ïž un peu plus fine */
border-radius: 999px;
max-width: calc(100% - 24px);
opacity: 0.9;
}
/* Couleur seulement */
.calendar-cell.day-positive .calendar-sparkline{
background: rgba(76,175,80,.9);
}
.calendar-cell.day-negative .calendar-sparkline{
background: rgba(244,67,54,.9);
}
.calendar-legend {
margin-top: 10px;
font-size: 0.8em;
opacity: 0.75;
text-align: center;
}
/* Centre uniquement le montant + devise */
.calendar-amount {
display: block;
width: 100%;
text-align: center;
font-weight: 600;
line-height: 1.2;
margin: 0;
}
/* .calendar-amount {
margin-top: 10px;
} */
.calendar-amount {
transform: translateY(4px);
}
/* â
iPhone / tel portrait ONLY : pill montant + sparkline + badge sélection */
@media (max-width: 480px) and (orientation: portrait){
/* cellule : marge bas pour barre + badge */
.calendar-cell{
padding: 10px 12px 34px 12px;
overflow: visible; /* badge jamais coupé */
}
/* â
pill grise du montant (contenteditable) */
.calendar-cell .calendar-amount.calendar-amount-editable{
display: flex !important;
align-items: center !important; /* â
centrage vertical */
justify-content: flex-start !important; /* â
lecture gauche â droite */
height: 24px !important; /* â
hauteur = centrage visible */
padding: 0 16px 0 6px !important; /* â
moins dâespace haut/bas */
/* top right bottom left */
margin-top: 8px !important; /* â
monte/descend le bloc */
margin-bottom: 4px !important;
line-height: 1 !important;
font-weight: 600;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
text-align: left !important;
transform: none !important; /* â
annule tout translateY */
}
/* texte trades : léger espace avant la barre */
.calendar-extra{
margin-top: 6px;
margin-bottom: 12px;
line-height: 1.1;
}
/* sparkline : un peu plus bas, pas collée au texte */
.calendar-sparkline{
bottom: 10px;
height: 5px;
}
/* badge sélection (si pseudo-élément) : jamais coupé */
.calendar-cell.selected::after,
.calendar-cell.is-selected::after,
.calendar-cell::after{
max-width: calc(100% - 20px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 5;
}
}
/* â
Trades line (icĂŽne + chiffre + label) */
.calendar-extra{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin-top:12px; /* espace sous le montant (desktop) */
font-size:.75em;
opacity:.85;
}
.trade-icon{
font-size:1em;
line-height:1;
}
.trade-count-num{
font-weight:700;
line-height:1;
}
.trade-count-label{
opacity:.8;
line-height:1;
}
/* couleurs (si tu veux garder) */
.trade-win{ color:#4CAF50; }
.trade-loss{ color:#F44336; }
.trade-flat{ color:#999; }
/* đ± iPhone portrait : garder icĂŽne + chiffre, cacher le mot + un peu plus compact */
@media (max-width:480px) and (orientation:portrait){
.trade-count-label{ display:none; }
.calendar-extra{ gap:5px; margin-top:8px; }
.trade-count-num{ font-size:.9em; }
}
/* cellule */
.calendar-cell{
position:relative;
}
/* barre */
.calendar-sparkline{
position:absolute;
top:28px; /* ajuste si besoin */
height:4px;
border-radius:999px;
opacity:.9;
z-index:2;
}
/* â
JOUR GAGNANT â droite */
.calendar-cell.day-positive .calendar-sparkline{
left:50%;
width:var(--spark);
background:#4CAF50;
}
/* â
JOUR PERDANT â gauche */
.calendar-cell.day-negative .calendar-sparkline{
right:50%;
width:var(--spark);
background:#F44336;
}
/* jour neutre â pas de barre */
.calendar-cell.neutral .calendar-sparkline{
display:none;
}
.calendar-cell{ position:relative; }
.calendar-cell.is-selected::after{
content:"SĂ©lection";
position:absolute;
top:6px;
right:8px;
z-index:20;
font-size:.72rem;
font-weight:600;
padding:4px 8px;
border-radius:999px;
background:rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.25);
color:#fff;
pointer-events:none;
}
.calendar-cell.is-selected > div[style*="top:4px"][style*="right:6px"]{
top:30px !important;
}
.calendar-cell{ position:relative; }
.exchange-icon{
position:absolute;
top:6px;
right:6px;
z-index:9;
font-size:0.9em;
opacity:.8;
}
/* quand la case est sĂ©lectionnĂ©e â on laisse la place au badge SĂ©lection */
.calendar-cell.is-selected .exchange-icon{
top:28px;
}
/* la cellule doit ĂȘtre le repĂšre */
.calendar-cell{ position:relative; }
/* â Ătoile sĂ©lection â reset TOTAL (aucun contour, aucun badge) */
.calendar-cell.selected-day::after{
content: "â
";
position: absolute;
top: 6px;
right: 8px;
z-index: 50;
/* đ„ RESET COMPLET */
padding: 0 !important;
margin: 0 !important;
background: none !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
filter: none !important;
border-radius: 0 !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
display: inline-block !important;
line-height: 1 !important;
/* đš STYLE ĂTOILE */
color: #FFD54F;
text-shadow:
0 1px 2px rgba(0,0,0,.55),
0 0 6px rgba(255,193,7,.55);
pointer-events: none;
}
@media (max-width: 480px) and (orientation: portrait){
.calendar-cell.selected-day::after{
right: 4px;
top: 4px;
}
}
.calendar-cell{ position:relative; }
.exchange-icon{
position:absolute;
top:10px; /* â descend un peu */
right:12px; /* â sâĂ©loigne du bord */
font-size:22px; /* un poil plus lisible */
opacity:.9;
z-index:10;
}
/* đ± Mobile portrait uniquement */
@media (max-width:480px) and (orientation:portrait){
.exchange-icon{
top:8px; /* un peu plus haut */
right:0; /* encore safe avec l'arrondi */
font-size:18px; /* plus discret */
opacity:.85;
}
}
.exchange-icon--week{
display:inline-block;
margin: 0 6px 0 2px; /* espace autour */
transform: translateY(1px);
opacity:.85;
font-size: 16px;
}
.week-exchange-icon{
position: static !important;
display: inline-block;
margin: 0 6px 0 2px;
transform: translateY(1px);
opacity: .85;
font-size: 16px;
}
.weekcal-weekmeta{
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap; /* âŹ
ïž empĂȘche le retour Ă la ligne */
}
.weekcal-weekmeta span{
white-space: nowrap;
}
.weekcal-weekmeta .currency{
white-space: nowrap;
}
.weekcal-weekmeta .exch-amt{
white-space: nowrap;
}
.brand-link{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
color:inherit;
min-width: 0;
}
.brand-link:hover{ opacity:.92; }
.brand-link .brand-full{ white-space:nowrap; }
.info-modal-body{
padding: 14px;
font-size: 14px;
line-height: 1.45;
opacity: .95;
white-space: pre-line; /* format du texte */
max-height: 60vh; /* limite la hauteur */
overflow-y: auto; /* scroll si nécessaire */
}
/* =========================================================
iPad (portrait + paysage) â ligne moyenne plus basse
========================================================= */
@media (min-width: 768px) and (max-width: 1180px) and (hover: none) and (pointer: coarse){
body.page-dashboard .calendar-cell .calendar-sparkline{
top: 80px !important;
bottom: auto !important;
transform: none !important;
}
} |