.theme-switching,
.theme-switching * {
  transition: none !important;
  animation: none !important;
}

:root {  
/* 🌙 MODE SOMBRE */  
--bg-main: #000000;  
--orb-1: rgba(56, 189, 248, 0.15);  
--orb-2: rgba(142, 68, 173, 0.12);  
--card-bg: rgba(20, 20, 25, 0.6);  
--card-border-glow: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(56, 189, 248, 0.25) 100%);  
--card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 255, 255, 0.06);  
--hero-glow: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(56, 189, 248, 0.15) 45%, transparent 70%);  
--title-color: #ffffff;  
--title-shadow: 0 0 25px rgba(255, 255, 255, 0.55), 0 0 50px rgba(56, 189, 248, 0.3);  
--subtitle-color: #d1d1d6;  
--text-primary: #f5f5f7;  
--text-secondary: #86868b;  
--text-tertiary: #6e6e73;  
--navbar-bg: rgba(255, 255, 255, 0.08);  
--navbar-border: rgba(255, 255, 255, 0.1);  
--input-bg: rgba(0, 0, 0, 0.4);  
--input-border: rgba(255, 255, 255, 0.12);  
--input-glow: rgba(56, 189, 248, 0.3);  
--btn-theme-bg: rgba(255, 255, 255, 0.08);  
--btn-theme-border: rgba(255, 255, 255, 0.15);  
--switch-active-bg: #34c759; 

--history-btn-bg: #ffffff;  
--history-btn-color: #000000;  
--font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;  
--mono-font: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace;  
}  

/* ☀️ MODE CLAIR DESIGN APPLE GLASS */  
body.light-mode {  
--bg-main: #f2f2f7;  
--orb-1: rgba(0, 122, 255, 0.18);  
--orb-2: rgba(175, 82, 222, 0.15);  
--card-bg: rgba(255, 255, 255, 0.72);  
--card-border-glow: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(0, 122, 255, 0.2) 100%);  
--card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8), 0 20px 50px rgba(0, 0, 0, 0.06), 0 2px 10px rgba(0, 0, 0, 0.02);  
--hero-glow: radial-gradient(circle, rgba(0, 122, 255, 0.1) 0%, transparent 70%);  
--title-color: #1c1c1e;  
--title-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);  
--subtitle-color: #48484a;  
--text-primary: #1c1c1e;  
--text-secondary: #48484a;  
--text-tertiary: #8e8e93;  
--navbar-bg: rgba(255, 255, 255, 0.65);  
--navbar-border: rgba(0, 0, 0, 0.08);  
--input-bg: rgba(242, 242, 247, 0.8);  
--input-border: rgba(0, 0, 0, 0.08);  
--input-glow: rgba(0, 122, 255, 0.3);  
--btn-theme-bg: rgba(255, 255, 255, 0.7);  
--btn-theme-border: rgba(0, 0, 0, 0.08);  
--switch-active-bg: #007aff; 

--history-btn-bg: #007aff;  
--history-btn-color: #ffffff;  
}  

* {  
box-sizing: border-box;  
margin: 0;  
padding: 0;  
font-family: var(--font-family);  
-webkit-font-smoothing: antialiased;  
-moz-osx-font-smoothing: grayscale;  
}  

html, body {  
min-height: 100vh;  
overflow-x: hidden;  
overflow-y: auto;  
}  

body {  
background-color: var(--bg-main);  
color: var(--text-primary);  
display: flex;  
flex-direction: column;  
align-items: center;  
transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.5s ease;  
padding: 20px;  
padding-bottom: 130px;  
position: relative;  
}  

.bg-orb {  
position: fixed;  
border-radius: 50%;  
z-index: -1;  
animation: float 20s infinite ease-in-out alternate;  
pointer-events: none; 
}  
.orb-1 {  
width: 55vw; height: 55vw;  
background: radial-gradient(circle, var(--orb-1) 0%, transparent 70%);  
top: -18%; left: 0%;  
}  

.orb-2 {  
width: 50vw; height: 50vw;  
background: radial-gradient(circle, var(--orb-2) 0%, transparent 70%);  
bottom: -18%; right: -5%;  
animation-delay: -5s;  
}  

@keyframes float {  
0% { transform: translate(0, 0) scale(1); }  
50% { transform: translate(30px, -40px) scale(1.1); }  
100% { transform: translate(-20px, 20px) scale(0.95); }  
}  

.header-container {  
width: 100%;  
display: flex;  
justify-content: center;  
z-index: 1000;  
margin-top: 10px;  
}  

@media (max-width: 640px) {
  .header-container {
    justify-content: flex-start;
    padding: 0 4px;
  }
  .navbar {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .navbar::-webkit-scrollbar { display: none; }
  .nav-link {
    padding: 6px 12px;
    font-size: 12px;
    flex-shrink: 0;
  }
}

.navbar {  
display: flex;  
gap: 8px;  
background: var(--navbar-bg);  
padding: 4px;  
border-radius: 40px;  
border: 1px solid var(--navbar-border);  
backdrop-filter: blur(20px);  
-webkit-backdrop-filter: blur(20px);  
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);  
transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;  
}  

.nav-link {  
color: var(--text-secondary);  
text-decoration: none;  
padding: 6px 16px;  
font-size: 13px;  
font-weight: 500;  
border-radius: 20px;  
white-space: nowrap;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);  
cursor: pointer;
}  

.nav-link:hover {  
color: var(--text-primary);  
transform: translateY(-1px);  
}  

.nav-link.active {  
background-color: #007aff;  
color: #ffffff;  
font-weight: 600;  
box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);  
}  

.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown-trigger {
  border: none;
  background: none;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-dropdown-chevron {
  font-size: 9px;
  transition: transform 0.2s ease;
}

.nav-dropdown.open .nav-dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-bg);
  border: 1px solid var(--input-border);
  border-radius: 14px;
  padding: 6px;
  min-width: 220px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  z-index: 100;
}

.nav-dropdown.open .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.nav-dropdown-item i { width: 14px; text-align: center; }

.nav-dropdown-item:hover {
  background-color: var(--input-bg);
}

.nav-dropdown-item.active {
  color: #007aff;
  font-weight: 700;
}

.page-view {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.page-view.hidden {
display: none !important;
}

.hero-container {  
display: flex;  
flex-direction: column;  
align-items: center;  
justify-content: center;  
margin: 50px 0 20px 0;  
position: relative;  
padding: 10px 20px;  
animation: fadeInDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;  
z-index: 10;  
}  

@keyframes fadeInDown {  
from { opacity: 0; transform: translateY(-20px); }  
to { opacity: 1; transform: translateY(0); }  
}  

.hero-title {  
position: relative;  
z-index: 2;  
font-size: 34px;  
line-height: 1.1;  
font-weight: 700;  
letter-spacing: -0.02em;  
color: var(--title-color);  
text-align: center;  
margin-bottom: 6px;  
text-shadow: var(--title-shadow);  
transition: color 0.3s ease, text-shadow 0.3s ease;  
}  

.hero-subtitle {  
position: relative;  
z-index: 2;  
font-size: 15px;  
font-weight: 600;  
color: var(--subtitle-color);  
transition: color 0.3s ease;  
}  

.generators-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  max-width: 1000px;
  width: 100%;
}

.generator-hub-card {
  background: var(--card-bg);
  border: 1px solid var(--input-border);
  border-radius: 26px;
  padding: 40px 30px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

.generator-hub-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 122, 255, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.generator-hub-card:active { transform: translateY(-1px) scale(0.98); }

.generator-hub-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #007aff, #5856d6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 20px;
  box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
}

.generator-hub-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.generator-hub-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.hub-features-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 1000px;
  width: 100%;
  margin-top: 40px;
}

.hub-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 20px;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.hub-feature-item i {
  color: #007aff;
  font-size: 13px;
}

.qr-preview-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 20px;
  min-height: 200px;
}

#qr-canvas {
  max-width: 100%;
  border-radius: 12px;
  display: none;
}

#qr-canvas.visible {
  display: block;
}

.qr-empty-hint {
  font-size: 13px;
  color: var(--text-tertiary);
}

.qr-empty-hint.hidden-hint {
  display: none;
}

.card {  
position: relative;  
background: var(--card-bg);  
border-radius: 28px;  
width: 100%;  
max-width: 900px;  
padding: 28px 32px;  
backdrop-filter: blur(40px);  
-webkit-backdrop-filter: blur(40px);  
box-shadow: var(--card-shadow);  
transition: background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);  
animation: scaleUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;  
margin-bottom: 20px;  
}  

.card::after {  
content: "";  
position: absolute;  
inset: -1px;  
border-radius: 29px;  
padding: 1px;  
background: var(--card-border-glow);  
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);  
mask-composite: exclude;  
pointer-events: none;  
transition: background 0.4s ease;  
}  

.generator-grid {  
display: grid;  
grid-template-columns: 1fr 260px;  
gap: 32px;  
align-items: stretch;  
}  

@media (max-width: 768px) {  
  .generator-grid {  
    grid-template-columns: 1fr;  
    gap: 24px;  
  }  
  .history-section {  
    border-left: none !important;  
    border-top: 1px solid rgba(0, 0, 0, 0.08);  
    padding-left: 0 !important;  
    padding-top: 20px;  
  }  
}  

.result-box {  
background: var(--input-bg);  
border: 1px solid var(--input-border);  
border-radius: 16px;  
padding: 12px 16px;  
display: flex;  
align-items: center;  
justify-content: space-between;  
margin-bottom: 8px;  
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);  
position: relative;  
overflow: hidden;  
}  

.result-box:hover {
  border-color: rgba(0, 122, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

body:not(.light-mode) .result-box:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.password-display {  
font-family: var(--mono-font);  
font-size: 16px;  
color: var(--text-primary);  
word-break: break-all;  
font-weight: 600;  
transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;  
margin-right: 12px;  
letter-spacing: 0.05em;  
}  

.password-display.generated {
  animation: passwordPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes passwordPop {
  0%   { transform: scale(1); color: var(--text-primary); }
  30%  { transform: scale(1.08); color: #007aff; }
  100% { transform: scale(1); color: var(--text-primary); }
}

/* VÉRIFICATEUR DE FUITES */

.breach-input {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
}

.breach-input::placeholder {
  color: var(--text-tertiary);
  font-weight: 500;
  letter-spacing: normal;
}

.btn-generate .fa-shield-halved.checking {
  animation: shieldSpin 0.9s linear infinite;
}

@keyframes shieldSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.breach-result {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  animation: passwordPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.breach-result.visible {
  display: flex;
}

.breach-result i {
  margin-top: 2px;
}

.breach-result.safe {
  background: rgba(52, 199, 89, 0.12);
  color: #248a3d;
  border: 1px solid rgba(52, 199, 89, 0.3);
}

.breach-result.compromised {
  background: rgba(255, 59, 48, 0.12);
  color: #d70015;
  border: 1px solid rgba(255, 59, 48, 0.3);
}

.breach-result.error {
  background: rgba(255, 149, 0, 0.12);
  color: #b25000;
  border: 1px solid rgba(255, 149, 0, 0.3);
}

body:not(.light-mode) .breach-result.safe { color: #34c759; }
body:not(.light-mode) .breach-result.compromised { color: #ff453a; }
body:not(.light-mode) .breach-result.error { color: #ff9f0a; }

.breach-privacy-note {
  margin-top: 16px;
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.breach-privacy-note i {
  margin-top: 2px;
}


.password-display.masked {  
filter: blur(6px);  
opacity: 0.6;  
user-select: none;  
}  

/* Même règle pour les mots de passe de l'historique : avant, .masked n'était
   défini que pour .password-display, donc le bouton œil de l'historique
   togglait bien la classe en JS mais ça ne changeait rien visuellement. */
.pwd-text {
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.pwd-text.masked {
  filter: blur(5px);
  opacity: 0.55;
  user-select: none;
}

.action-group {  
display: flex;  
align-items: center;  
gap: 8px;  
flex-shrink: 0;  
z-index: 2;  
}  

.btn-toggle-mask, .btn-copy {  
cursor: pointer;  
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);  
}  

.btn-toggle-mask {  
background: rgba(255, 255, 255, 0.08);  
border: 1px solid rgba(255, 255, 255, 0.1);  
color: var(--text-secondary);  
width: 32px; height: 32px;  
border-radius: 50%;  
display: flex; align-items: center; justify-content: center;  
}  

body.light-mode .btn-toggle-mask {  
background: rgba(255, 255, 255, 0.8);  
border-color: rgba(0, 0, 0, 0.08);  
color: var(--text-secondary);  
}  

.btn-toggle-mask:hover:not(:disabled) {  
color: var(--text-primary);  
transform: scale(1.1) rotate(10deg);  
}  

.btn-toggle-mask:disabled {  
opacity: 0.4;  
cursor: not-allowed;  
}  

.btn-copy {  
background: var(--text-primary);  
color: var(--bg-main);  
border: none;  
padding: 6px 14px;  
border-radius: 20px;  
font-size: 12px;  
font-weight: 600;  
height: 32px;  
}  

body.light-mode .btn-copy {  
background: #007aff;  
color: #ffffff;  
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);  
}  

.btn-copy:hover {  
transform: scale(1.05);  
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);  
}  
.btn-copy:active { transform: scale(0.95); }  

.strength-container { margin-bottom: 20px; }  

.strength-bar-container {  
height: 6px;  
background: rgba(0, 0, 0, 0.06);  
border-radius: 3px;  
overflow: hidden;  
position: relative;  
}  

body:not(.light-mode) .strength-bar-container { background: rgba(255, 255, 255, 0.08); }  

.strength-bar {  
height: 100%;  
width: 0%;  
background: transparent;  
border-radius: 3px;  
transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s ease, box-shadow 0.4s ease;  
}  

.strength-info {  
display: flex; justify-content: space-between;  
font-size: 11px; color: var(--text-tertiary);  
margin-top: 6px; font-weight: 500;  
transition: color 0.3s ease;  
}  

.crack-time-display {  
font-size: 11px;  
color: var(--text-secondary);  
margin-top: 8px;  
font-weight: 500;  
line-height: 1.4;  
display: flex;
flex-direction: column;
gap: 4px;
}  

.crack-time-row {
display: flex;
justify-content: space-between;
gap: 8px;
}

.crack-time-row i {
width: 14px;
text-align: center;
opacity: 0.6;
margin-right: 2px;
}

.crack-time-display strong {  
color: var(--text-primary);  
}  

.reuse-warning {  
display: none;  
margin-top: 8px;  
font-size: 12px;  
color: #ff3b30;  
background: rgba(255, 59, 48, 0.1);  
border: 1px solid rgba(255, 59, 48, 0.25);  
padding: 6px 12px;  
border-radius: 10px;  
animation: fadeIn 0.3s ease-in-out;  
}  

@keyframes fadeIn {  
from { opacity: 0; transform: translateY(-4px); }  
to { opacity: 1; transform: translateY(0); }  
}  

input[type="range"] {  
-webkit-appearance: none;  
width: 100%; height: 4px;  
background: rgba(0, 0, 0, 0.1);  
border-radius: 2px; outline: none;  
margin-top: 8px;  
}  
body:not(.light-mode) input[type="range"] { background: rgba(255, 255, 255, 0.12); }  

input[type="range"]::-webkit-slider-thumb {  
-webkit-appearance: none;  
width: 20px; height: 20px;  
border-radius: 50%; background: #ffffff;  
cursor: pointer;  
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);  
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;  
}  

.switch {  
position: relative; display: inline-block;  
width: 38px; height: 20px;  
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);  
}  
.switch input { opacity: 0; width: 0; height: 0; }  
.slider {  
position: absolute; cursor: pointer;  
top: 0; left: 0; right: 0; bottom: 0;  
background-color: rgba(0, 0, 0, 0.12);  
transition: .3s cubic-bezier(0.16, 1, 0.3, 1);  
border-radius: 20px;  
}  
body:not(.light-mode) .slider { background-color: rgba(255, 255, 255, 0.15); }  
.slider:before {  
position: absolute; content: "";  
height: 14px; width: 14px;  
left: 3px; bottom: 3px;  
background-color: white;  
transition: .3s cubic-bezier(0.16, 1, 0.3, 1);  
border-radius: 50%;  
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);  
}  
input:checked + .slider { background-color: var(--switch-active-bg); }  
input:checked + .slider:before { transform: translateX(18px); }  

.checkbox-item {  
display: flex; align-items: center; justify-content: space-between;  
padding: 6px 12px; font-size: 13px; color: var(--text-primary);  
border-radius: 12px;  
cursor: pointer;  
border: 1px solid transparent;  
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);  
}  

.checkbox-item:hover {  
background: rgba(0, 122, 255, 0.06);  
border-color: rgba(0, 122, 255, 0.12);  
transform: translateX(6px);  
}  

.btn-generate {  
width: 100%; background: #007aff; color: #ffffff;  
border: none; padding: 14px; border-radius: 16px;  
font-weight: 600; font-size: 14px; cursor: pointer;  
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);  
display: flex; justify-content: center; align-items: center; gap: 8px;  
box-shadow: 0 4px 15px rgba(0, 122, 255, 0.25);  
margin-top: 10px;  
}  

body:not(.light-mode) .btn-generate {  
background: #ffffff; color: #000000;  
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);  
}  

.btn-generate:hover {  
transform: translateY(-2px);  
box-shadow: 0 8px 25px rgba(0, 122, 255, 0.35);  
}  

/* Icône flèches (générateur de mots de passe) : un tour complet à chaque génération */
.btn-generate .fa-arrows-rotate.spin-once {
  animation: spinOnce 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes spinOnce {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Icône dé (générateur de nombres) : un petit lancer de dé à chaque génération */
.btn-generate .fa-dice.roll-once {
  animation: diceRoll 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes diceRoll {
  0%   { transform: rotate(0deg) scale(1); }
  20%  { transform: rotate(-25deg) scale(1.15); }
  40%  { transform: rotate(20deg) scale(1.15); }
  60%  { transform: rotate(-15deg) scale(1.1); }
  80%  { transform: rotate(10deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}

.history-section {  
border-left: 1px solid rgba(0, 0, 0, 0.08); padding-left: 24px;  
display: flex; flex-direction: column;  
height: 100%;  
}  
body:not(.light-mode) .history-section { border-left-color: rgba(255, 255, 255, 0.08); }  

.history-header {  
display: flex;  
align-items: center;  
justify-content: space-between;  
margin-bottom: 12px;  
}  

.history-actions {  
display: flex;  
align-items: center;  
gap: 6px;  
}  

.btn-history-mask, .btn-history-clear {  
background: none;  
border: none;  
color: var(--text-tertiary);  
cursor: pointer;  
font-size: 12px;  
padding: 2px 4px;  
transition: color 0.2s ease, transform 0.2s ease;  
}  

.btn-history-mask:hover {
  color: #007aff;
  transform: scale(1.15) rotate(-8deg);
}

.btn-history-clear:hover {
  color: #ff3b30;
  transform: scale(1.15) rotate(8deg);
}

.btn-history-mask.pulse, .btn-history-clear.pulse {
  animation: historyIconPulse 0.4s ease;
}

@keyframes historyIconPulse {
  0%   { transform: scale(1) rotate(0); }
  35%  { transform: scale(1.35) rotate(-10deg); }
  65%  { transform: scale(0.9) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}

.history-list {  
list-style: none; display: flex; flex-direction: column; gap: 8px;  
height: 304px;  
flex-grow: 0;  
flex-shrink: 0;  
overflow-y: auto;  
overflow-x: hidden;  
padding-right: 4px;  
scrollbar-width: thin;  
scrollbar-color: rgba(0, 0, 0, 0.25) transparent;  
}  

.history-list::-webkit-scrollbar { width: 7px; }
.history-list::-webkit-scrollbar-track { background: transparent; }
.history-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}
.history-list::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.4); }

body:not(.light-mode) .history-list { scrollbar-color: rgba(255, 255, 255, 0.5) transparent; }
body:not(.light-mode) .history-list::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.5); }
body:not(.light-mode) .history-list::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.7); }

.history-item {  
font-family: var(--mono-font); font-size: 12px;  
background: var(--input-bg);  
padding: 0 12px;  
border-radius: 12px;  
color: var(--text-secondary);  
border: 1px solid var(--input-border); cursor: pointer;  
display: flex; justify-content: space-between; align-items: center;  
flex-wrap: nowrap;
overflow: hidden;
transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;  
height: 44px;  
min-height: 44px;
max-height: 44px;
flex-shrink: 0;
width: 100%;
box-sizing: border-box;
}  

.history-item:hover {
  border-color: rgba(0, 122, 255, 0.4);
  background: var(--input-bg-hover, var(--input-bg));
  transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

body:not(.light-mode) .history-item:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.history-item span.pwd-text {  
white-space: nowrap;  
overflow: hidden;  
text-overflow: ellipsis;  
margin-right: 8px;  
flex: 1;
min-width: 0;
}  

.history-item-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
flex-wrap: nowrap;
white-space: nowrap;
}

.history-copy-btn, .history-delete-btn {  
background-color: var(--history-btn-bg);  
color: var(--history-btn-color);  
border: none;  
width: 26px;  
height: 26px;  
border-radius: 50%;  
display: flex;  
align-items: center;  
justify-content: center;  
opacity: 0;  
transition: opacity 0.3s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;  
flex-shrink: 0;
}  

.history-item:hover .history-copy-btn,
.history-item:hover .history-delete-btn {  
opacity: 1;  
}  

.history-delete-btn:hover {
background-color: #ff3b30;
color: #fff;
transform: scale(1.15) rotate(-8deg);
box-shadow: 0 0 10px rgba(255, 59, 48, 0.6);
}

.history-delete-btn:active {
transform: scale(0.9);
}

.history-item.deleting {
animation: historyItemDelete 0.35s ease forwards;
pointer-events: none;
}

@keyframes historyItemDelete {
0% {
  background-color: var(--input-bg);
  transform: scale(1);
  opacity: 1;
  max-height: 44px;
  margin-bottom: 0;
}
30% {
  background-color: rgba(255, 59, 48, 0.25);
  border-color: rgba(255, 59, 48, 0.5);
  transform: scale(1.02);
}
100% {
  background-color: rgba(255, 59, 48, 0.25);
  border-color: rgba(255, 59, 48, 0.5);
  transform: scale(0.9) translateX(30px);
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: -8px;
}
}

/* -------------------------------------------
   DASHBOARD COMPTE & NOUVELLES FONCTIONNALITÉS
------------------------------------------- */
.profile-dashboard {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  width: 100%;
}

@media (max-width: 768px) {
  .profile-dashboard { grid-template-columns: 1fr; }
}

.account-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid var(--input-border);
  padding-right: 16px;
}

@media (max-width: 768px) {
  .account-nav {
    border-right: none;
    border-bottom: 1px solid var(--input-border);
    padding-right: 0;
    padding-bottom: 16px;
    flex-direction: row;
    overflow-x: auto;
  }
}

.account-nav-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
  text-align: left;
  white-space: nowrap;
}

.account-nav-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.account-nav-btn.active {
  background: #007aff;
  color: #ffffff;
  font-weight: 600;
}

.account-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.account-section.hidden { display: none !important; }

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.section-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* AVATAR & UPLOAD COMPONENT */
.avatar-selection-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}

.profile-avatar-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007aff, #af52de);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #ffffff;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  position: relative;
}

.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-btn-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.btn-upload-file {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-upload-file:hover {
  background: rgba(255, 255, 255, 0.2);
}

.avatar-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.avatar-preset-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: white;
}

.avatar-preset-btn:hover { transform: scale(1.1); }

.account-form-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.stat-card {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 14px;
  padding: 14px 16px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 122, 255, 0.4);
}

.stat-card-value {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--mono-font);
  color: #007aff;
}

.stat-card-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.about-section {
  margin-bottom: 26px;
}

.about-section:last-child {
  margin-bottom: 0;
}

.about-section .section-title {
  font-size: 16px;
  margin-bottom: 8px;
}

.about-text {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.btn-link-small {
  background: none;
  border: none;
  color: #007aff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
}

.btn-link-small:hover {
  text-decoration: underline;
}

.recovery-codes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.recovery-code-item {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  font-family: var(--mono-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.account-field {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.account-field:hover {
  border-color: rgba(0, 122, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.account-field:focus-within {
  border-color: #007aff;
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.account-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.account-field input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  width: 100%;
}

.range-fields {
  display: flex;
  gap: 12px;
  margin-bottom: 4px;
}

.range-fields .account-field {
  flex: 1;
  min-width: 0;
}

.btn-save-settings {
  background: #007aff;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
}

.btn-save-settings:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

/* HISTORIQUE ET LIEUX DE CONNEXION */
.location-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.location-item {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.location-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.location-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 122, 255, 0.15);
  color: #007aff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.location-details {
  display: flex;
  flex-direction: column;
}

.location-place {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.location-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.location-badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: 600;
}

.location-badge.active {
  background: rgba(52, 199, 89, 0.2);
  color: #34c759;
}

/* COFFRE FORT DE MOTS DE PASSE */
.vault-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.vault-search {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 20px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 12px;
}

.vault-search input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  width: 100%;
}

.account-field select {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  width: 100%;
  cursor: pointer;
}

.vault-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.vault-category-pill {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.vault-category-pill:hover {
  border-color: rgba(0, 122, 255, 0.4);
  transform: translateY(-1px);
}

.vault-category-pill.active {
  background: #007aff;
  border-color: #007aff;
  color: #fff;
}

.vault-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0, 122, 255, 0.12);
  color: #007aff;
  margin-top: 3px;
  width: fit-content;
}

.vault-info {
  gap: 3px;
}

.entry-type-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.entry-type-pill {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 10px 8px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.entry-type-pill i { font-size: 15px; }

.entry-type-pill:hover { border-color: rgba(0, 122, 255, 0.4); }

.entry-type-pill.active {
  background: #007aff;
  border-color: #007aff;
  color: #fff;
}

.custom-fields-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  margin-bottom: 8px;
}

.custom-fields-header label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.custom-field-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.custom-field-row input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
}

.custom-field-row .cf-label { flex: 0 0 38%; }
.custom-field-row .cf-value { flex: 1; }

.custom-field-row .cf-remove {
  background: none;
  border: none;
  color: #ff3b30;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
  padding: 4px;
}

.vault-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}

.vault-tag-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(142, 142, 147, 0.15);
  color: var(--text-tertiary);
}

.vault-entry-type-icon {
  display: inline-flex;
  width: 20px;
  color: var(--text-tertiary);
}

.vault-totp-code {
  font-family: var(--mono-font);
  font-weight: 700;
  font-size: 13px;
  color: #007aff;
  letter-spacing: 0.05em;
}

.vault-item-wrapper {
  display: flex;
  flex-direction: column;
}

.vault-item-details {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 10px 14px;
  margin-top: -8px;
  margin-bottom: 8px;
}

.vault-item-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 3px 0;
  color: var(--text-secondary);
}

.vault-item-detail-row strong {
  color: var(--text-primary);
  font-family: var(--mono-font);
}

.vault-toolbar-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.btn-vault-secondary {
  background: transparent;
  border: 1px solid var(--input-border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-vault-secondary:hover {
  border-color: rgba(0, 122, 255, 0.4);
  color: #007aff;
  transform: translateY(-1px);
}

.vault-audit-summary {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.vault-audit-summary.visible {
  display: flex;
}

.vault-audit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.vault-audit-row.ok { background: rgba(52, 199, 89, 0.12); color: #248a3d; }
.vault-audit-row.warning { background: rgba(255, 149, 0, 0.12); color: #b25000; }
.vault-audit-row.danger { background: rgba(255, 59, 48, 0.12); color: #d70015; }
body:not(.light-mode) .vault-audit-row.ok { color: #34c759; }
body:not(.light-mode) .vault-audit-row.warning { color: #ff9f0a; }
body:not(.light-mode) .vault-audit-row.danger { color: #ff453a; }

.vault-item-warning-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  width: fit-content;
}

.vault-item-warning-badge.weak { background: rgba(255, 59, 48, 0.12); color: #d70015; }
.vault-item-warning-badge.reused { background: rgba(255, 149, 0, 0.12); color: #b25000; }
.vault-item-warning-badge.old { background: rgba(255, 214, 10, 0.15); color: #8a6d00; }
body:not(.light-mode) .vault-item-warning-badge.weak { color: #ff453a; }
body:not(.light-mode) .vault-item-warning-badge.reused { color: #ff9f0a; }
body:not(.light-mode) .vault-item-warning-badge.old { color: #ffd60a; }

.vault-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.vault-list::-webkit-scrollbar { width: 7px; }
.vault-list::-webkit-scrollbar-track { background: transparent; }
.vault-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}
.vault-list::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.4); }

body:not(.light-mode) .vault-list { scrollbar-color: rgba(255, 255, 255, 0.5) transparent; }
body:not(.light-mode) .vault-list::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.5); }
body:not(.light-mode) .vault-list::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.7); }

.vault-item {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vault-info {
  display: flex;
  flex-direction: column;
}

.vault-site {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.vault-user {
  font-size: 12px;
  color: var(--text-secondary);
}

.vault-actions {
  display: flex;
  gap: 8px;
}

.btn-vault-action {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-vault-action:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

/* LOGIN VIEW */
.login-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.btn-auth-submit {
width: 100%;
background: linear-gradient(135deg, #007aff, #af52de);
color: #ffffff;
border: none;
padding: 14px;
border-radius: 16px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 122, 255, 0.25);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.btn-auth-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 122, 255, 0.4);
}

.btn-auth-submit.logout {
background: rgba(255, 59, 48, 0.15);
color: #ff3b30;
border: 1px solid rgba(255, 59, 48, 0.3);
box-shadow: none;
margin-top: 10px;
}

.btn-register-open {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--input-border);
padding: 12px;
border-radius: 16px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.btn-register-open:hover {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.05);
}

.modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
display: flex;
align-items: center;
justify-content: center;
z-index: 5000;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
padding: 20px;
}

.modal-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.modal-content {
background: var(--card-bg);
border: 1px solid var(--input-border);
border-radius: 28px;
padding: 28px;
width: 100%;
max-width: 420px;
box-shadow: var(--card-shadow);
transform: scale(0.9);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
}

.modal-overlay.active .modal-content {
transform: scale(1);
}

.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.modal-title {
font-size: 20px;
font-weight: 700;
color: var(--title-color);
}

.btn-modal-close {
background: rgba(255, 255, 255, 0.1);
border: none;
color: var(--text-secondary);
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}

.btn-modal-close:hover {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.2);
}

.toast {  
position: fixed; bottom: 40px;  
background: rgba(29, 29, 31, 0.9); color: #ffffff;  
padding: 12px 24px; border-radius: 30px;  
font-size: 13px; font-weight: 500;  
display: flex; align-items: center; gap: 10px;  
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);  
backdrop-filter: blur(15px);  
opacity: 0; transform: translateY(40px) scale(0.9);  
transition: opacity 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);  
pointer-events: none; z-index: 6000;  
border: 1px solid rgba(255, 255, 255, 0.1);  
}  

body.light-mode .toast {  
background: rgba(255, 255, 255, 0.9); color: #1c1c1e;  
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.06);  
}  

.toast.show { opacity: 1; transform: translateY(0) scale(1); }  

.btn-theme {
background: var(--btn-theme-bg); border: 1px solid var(--btn-theme-border);  
color: var(--text-primary); padding: 8px 20px;  
font-size: 13px; font-weight: 500; border-radius: 30px;  
cursor: pointer; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;  
backdrop-filter: blur(10px); display: flex; align-items: center; gap: 8px;  
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);  
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 50;
}  
.btn-theme:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }  
.btn-theme:active { transform: translateX(-50%) scale(0.95); }  

.lang-dropdown {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
}

.btn-lang {
background: var(--btn-theme-bg); border: 1px solid var(--btn-theme-border);
color: var(--text-primary); padding: 6px 18px 6px 6px; font-size: 13px; font-weight: 600; border-radius: 30px;
cursor: pointer; transition: transform 0.2s ease, box-shadow 0.3s ease;
backdrop-filter: blur(10px); display: flex; align-items: center; gap: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
width: 100%;
}
.btn-lang:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
.btn-lang:active { transform: scale(0.95); }

.lang-dropdown-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--input-border);
  border-radius: 16px;
  padding: 6px;
  min-width: 170px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* Ouverture au survol (souris), en plus du clic (tactile/clavier) */
.lang-dropdown:hover .lang-dropdown-menu,
.lang-dropdown.open .lang-dropdown-menu {
  display: block;
  animation: fadeInDown 0.2s ease;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.lang-option:hover {
  background-color: var(--input-bg);
}

.lang-option.active {
  color: #007aff;
  font-weight: 700;
}

#btn-lang-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

body:not(.light-mode) #btn-lang-flag {
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 640px) {
  .lang-dropdown { right: 12px; bottom: 12px; }
  .btn-lang { padding: 6px 14px 6px 6px; }
  .btn-theme { bottom: 12px; }
}

/* ACCESSIBILITÉ : contour de focus visible au clavier, même sur les
   éléments où un "outline: none" a été mis pour la souris (Tab reste
   toujours visible, seul le clic à la souris n'affiche rien). */
a, button, input, select, textarea, [tabindex] {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #007aff !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 10px;
  z-index: 9999;
  background: #007aff;
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 10px;
}