/* ========================================
   CONVERTISSEUR RÉPUBLICAIN — CSS GeneBase
   Adapté au design system GeneBase.fr
   Variables accent : --clr-accent (#C7901E gold)
======================================== */

/* ========================================
   VARIABLES DE THÈMES (CONVERTISSEUR)
======================================== */

:root {
  /* Thème par défaut (golden) — aligné sur --clr-accent GeneBase */
  --conv-primary:       #C7901E;
  --conv-primary-light: #E5A72A;
  --conv-primary-pale:  #f0c060;
  --conv-primary-alpha: rgba(199, 144, 30, 0.3);

  /* Fond de la carte convertisseur — design intentionnellement sombre */
  --converter-bg:       linear-gradient(135deg, #1e2d3a 0%, #2c3e50 100%);
  --converter-text:     #ffffff;
  --input-bg:           rgba(255, 255, 255, 0.08);
  --input-border:       rgba(255, 255, 255, 0.15);
  --mode-toggle-bg:     rgba(0, 0, 0, 0.2);
  --convert-btn-bg:     linear-gradient(135deg, #C7901E 0%, #E5A72A 50%, #f0c060 100%);
  --convert-btn-text:   #ffffff;
}

/* ── Thèmes alternatifs ────────────────────────────────────── */
.theme-blue {
  --conv-primary:       #2563eb;
  --conv-primary-light: #3b82f6;
  --conv-primary-pale:  #60a5fa;
  --conv-primary-alpha: rgba(37, 99, 235, 0.3);
  --converter-bg:       linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --converter-text:     #ffffff;
  --input-bg:           rgba(255, 255, 255, 0.1);
  --input-border:       rgba(255, 255, 255, 0.2);
  --mode-toggle-bg:     rgba(0, 0, 0, 0.2);
  --convert-btn-bg:     linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
}

.theme-green {
  --conv-primary:       #059669;
  --conv-primary-light: #10b981;
  --conv-primary-pale:  #34d399;
  --conv-primary-alpha: rgba(5, 150, 105, 0.3);
  --converter-bg:       linear-gradient(135deg, #0f1419 0%, #1c2f26 100%);
  --converter-text:     #ffffff;
  --input-bg:           rgba(255, 255, 255, 0.1);
  --input-border:       rgba(255, 255, 255, 0.2);
  --mode-toggle-bg:     rgba(0, 0, 0, 0.2);
  --convert-btn-bg:     linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
}

.theme-purple {
  --conv-primary:       #7c3aed;
  --conv-primary-light: #8b5cf6;
  --conv-primary-pale:  #a78bfa;
  --conv-primary-alpha: rgba(124, 58, 237, 0.3);
  --converter-bg:       linear-gradient(135deg, #2d1b69 0%, #4c1d95 100%);
  --converter-text:     #ffffff;
  --input-bg:           rgba(255, 255, 255, 0.1);
  --input-border:       rgba(255, 255, 255, 0.2);
  --mode-toggle-bg:     rgba(0, 0, 0, 0.2);
  --convert-btn-bg:     linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #a78bfa 100%);
}

.theme-red {
  --conv-primary:       #dc2626;
  --conv-primary-light: #ef4444;
  --conv-primary-pale:  #f87171;
  --conv-primary-alpha: rgba(220, 38, 38, 0.3);
  --converter-bg:       linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
  --converter-text:     #ffffff;
  --input-bg:           rgba(255, 255, 255, 0.1);
  --input-border:       rgba(255, 255, 255, 0.2);
  --mode-toggle-bg:     rgba(0, 0, 0, 0.2);
  --convert-btn-bg:     linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
}

.theme-white {
  --conv-primary:       #4a5568;
  --conv-primary-light: #718096;
  --conv-primary-pale:  #a0aec0;
  --conv-primary-alpha: rgba(74, 85, 104, 0.3);
  --converter-bg:       linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  --converter-text:     #2d3748;
  --input-bg:           rgba(255, 255, 255, 0.9);
  --input-border:       rgba(0, 0, 0, 0.15);
  --mode-toggle-bg:     rgba(0, 0, 0, 0.05);
  --convert-btn-bg:     linear-gradient(135deg, #4a5568 0%, #718096 50%, #a0aec0 100%);
}

/* ========================================
   LAYOUT PRINCIPAL
======================================== */

.conv-layout {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-4) var(--space-12);
}

/* Masquer l'historique sur mobile */
.desktop-only {
  display: block;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
}

/* ========================================
   CARTE CONVERTISSEUR
======================================== */

.converter-container {
  border-radius: var(--radius-xl);
  padding: 3px;
  background: linear-gradient(135deg, #C7901E 0%, #E5A72A 50%, #f0c060 100%);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(199, 144, 30, 0.2);
  position: relative;
}

.converter-card {
  background: var(--converter-bg);
  color: var(--converter-text);
  border-radius: calc(var(--radius-xl) - 3px);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
}

/* Barre supérieure animée */
.converter-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #C7901E, #E5A72A, #f0c060, #C7901E);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

.no-animations .converter-card::before {
  animation: none;
}

@keyframes shimmer {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 0%; }
  100% { background-position: 0% 0%; }
}

/* ========================================
   BOUTON PARAMÈTRES
======================================== */

.settings-toggle {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  width: 34px;
  height: 34px;
  cursor: pointer;
  transition: all var(--ease-base);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.settings-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  transform: scale(1.05);
}

.settings-gear {
  font-size: 1.1rem;
  transition: transform var(--ease-slow);
}

.settings-toggle:hover .settings-gear {
  transform: rotate(90deg);
}

/* ========================================
   TOGGLE MODES
======================================== */

.mode-toggle {
  display: flex;
  background: var(--mode-toggle-bg);
  border-radius: var(--radius-lg);
  padding: 4px;
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
  border: 1px solid rgba(199, 144, 30, 0.25);
}

.mode-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--ease-base);
  font-weight: 600;
  color: var(--converter-text);
  opacity: 0.65;
  font-size: var(--text-sm);
}

.mode-btn.active {
  background: linear-gradient(135deg, var(--conv-primary) 0%, var(--conv-primary-light) 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px var(--conv-primary-alpha);
  transform: translateY(-1px);
  opacity: 1;
}

.mode-btn:hover:not(.active) {
  background: var(--input-bg);
  opacity: 0.9;
}

.mode-icon { font-size: 1.15rem; }
.mode-text { font-size: 0.9rem; font-weight: 600; }

/* ========================================
   INPUTS
======================================== */

.input-section {
  margin-bottom: var(--space-8);
  position: relative;
}

.input-mode {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
  animation: fadeIn var(--ease-slow);
}

.input-mode.active {
  display: grid;
}

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

.no-animations .input-mode {
  animation: none;
}

.input-group { position: relative; }

.input-group label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--converter-text);
  opacity: 0.9;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

.input-group select {
  width: 100%;
  padding: 0.875rem 2.75rem 0.875rem 1rem;
  border: 2px solid var(--input-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  transition: border-color var(--ease-base), box-shadow var(--ease-base), transform var(--ease-base);
  background: var(--input-bg);
  color: var(--converter-text);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  cursor: pointer;
  /* Flèche personnalisée */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.input-group select:focus {
  outline: none;
  border-color: rgba(199, 144, 30, 0.7);
  box-shadow:
    0 0 0 3px rgba(199, 144, 30, 0.2),
    inset 0 2px 6px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.input-group select option {
  background: #2c3e50;
  color: #ffffff;
  padding: var(--space-2);
}

/* Thème blanc — adaptations */
.theme-white .input-group select {
  border-color: rgba(74, 85, 104, 0.3);
  color: #2d3748;
  background-color: rgba(255, 255, 255, 0.95);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%234a5568' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

.theme-white .input-group select option {
  background: #ffffff;
  color: #2d3748;
}

.theme-white .input-group select:focus {
  border-color: var(--conv-primary);
}

.theme-white .input-group label {
  color: #2d3748;
}

.theme-white .mode-btn {
  color: #4a5568;
}

.theme-white .mode-toggle {
  border-color: rgba(74, 85, 104, 0.3);
}

/* ========================================
   SECTION CONVERSION
======================================== */

.convert-section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-8);
}

.convert-btn {
  background: var(--convert-btn-bg);
  color: var(--convert-btn-text);
  border: none;
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-full);
  font-size: var(--text-lg);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  transition: all var(--ease-slow);
  box-shadow:
    0 8px 25px var(--conv-primary-alpha),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.convert-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.convert-btn:hover::before {
  left: 100%;
}

.convert-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 15px 40px var(--conv-primary-alpha),
    0 0 0 8px var(--conv-primary-alpha),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.convert-btn:active {
  transform: translateY(-1px) scale(0.98);
  transition: all 100ms ease;
}

.no-animations .convert-btn::before {
  display: none;
}

.convert-icon {
  font-size: 1.3rem;
  animation: pulse 2s infinite;
}

.no-animations .convert-icon {
  animation: none;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.12); }
}

/* Bouton reset (petite icône à droite) */
.reset-icon-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  font-size: 1.1rem;
}

.reset-icon-btn:hover {
  transform: translateY(-50%) scale(1.08);
}

/* ========================================
   RÉSULTATS
======================================== */

.result-section {
  animation: slideUp var(--ease-slow);
}

.no-animations .result-section {
  animation: none;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.result-card {
  background: linear-gradient(135deg, #1e2d3a 0%, #2c3e50 100%);
  color: #ffffff;
  border: 2px solid rgba(199, 144, 30, 0.4);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  position: relative;
  margin-top: var(--space-5);
  box-shadow:
    var(--shadow-xl),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.result-card::after {
  content: '✨';
  position: absolute;
  top: -12px;
  left: var(--space-5);
  background: linear-gradient(135deg, #C7901E 0%, #E5A72A 100%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  box-shadow: 0 2px 8px rgba(199, 144, 30, 0.4);
}

.close-result-btn {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: all var(--ease-base);
  color: #f87171;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  z-index: 2;
}

.close-result-btn:hover {
  background: rgba(220, 38, 38, 0.25);
  transform: scale(1.1);
}

.copy-result-btn {
  position: absolute;
  top: var(--space-3);
  right: 3.25rem;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: all var(--ease-base);
  color: #4ade80;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  z-index: 2;
}

.copy-result-btn:hover {
  background: rgba(34, 197, 94, 0.25);
  transform: scale(1.1);
}

.copy-result-btn.copied {
  background: rgba(34, 197, 94, 0.35);
  border-color: rgba(34, 197, 94, 0.6);
}

.result-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.result-content {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: #f0c060;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(199, 144, 30, 0.25);
  line-height: 1.3;
}

.result-extra {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  font-style: italic;
  line-height: 1.5;
}

/* ========================================
   ERREURS
======================================== */

.error-section {
  animation: shake 0.5s ease-out;
}

.no-animations .error-section {
  animation: none;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-5px); }
  75%       { transform: translateX(5px); }
}

.error-card {
  background: var(--clr-error-bg, rgba(192, 57, 43, 0.1));
  border: 2px solid var(--clr-error, #C0392B);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.error-icon {
  font-size: 1.5rem;
  animation: bounce 1s infinite;
}

.no-animations .error-icon {
  animation: none;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

.error-message {
  color: var(--clr-error, #C0392B);
  font-weight: 600;
  font-size: var(--text-sm);
}

/* ========================================
   HISTORIQUE
======================================== */

.history-section {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.history-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #ffffff;
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
}

.history-icon { font-size: 1.1rem; }

.clear-btn {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  cursor: pointer;
  transition: all var(--ease-base);
  color: #f87171;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clear-btn:hover {
  background: rgba(220, 38, 38, 0.2);
  border-color: rgba(220, 38, 38, 0.5);
  transform: scale(1.05);
}

.clear-icon { font-size: 1rem; }

.history-content {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(199, 144, 30, 0.5) transparent;
}

.history-content::-webkit-scrollbar { width: 4px; }
.history-content::-webkit-scrollbar-track { background: transparent; }
.history-content::-webkit-scrollbar-thumb {
  background: rgba(199, 144, 30, 0.5);
  border-radius: 2px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.history-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: rgba(255, 255, 255, 0.5);
}

.empty-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--space-2);
}

.history-empty p {
  margin: 0;
  font-size: var(--text-sm);
  font-style: italic;
}

.history-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all var(--ease-base);
  animation: slideInHistory var(--ease-base);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.history-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(199, 144, 30, 0.3);
}

.no-animations .history-item {
  animation: none;
}

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

.history-item-type { font-size: 1.1rem; flex-shrink: 0; }

.history-item-content {
  color: #ffffff;
  font-weight: 500;
  font-size: var(--text-xs);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-item-arrow {
  color: rgba(199, 144, 30, 0.8);
  font-weight: bold;
  flex-shrink: 0;
}

.history-item-result {
  color: #f0c060;
  font-size: var(--text-xs);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Thème blanc — historique */
.theme-white .history-title         { color: #2d3748; }
.theme-white .history-item          { background: rgba(74,85,104,0.05); border-color: rgba(74,85,104,0.2); color: #2d3748; }
.theme-white .history-item-content  { color: #2d3748; }
.theme-white .history-item-result   { color: var(--conv-primary); }
.theme-white .history-item-arrow    { color: var(--conv-primary); }
.theme-white .history-empty         { color: #718096; }
.theme-white .history-section       { border-top-color: rgba(74,85,104,0.3); }
.theme-white .clear-btn             { background: rgba(220,38,38,0.1); border-color: rgba(220,38,38,0.3); color: #dc2626; }
.theme-white .settings-toggle       { background: rgba(74,85,104,0.1); border-color: rgba(74,85,104,0.3); color: #2d3748; }
.theme-white .result-content        { color: var(--conv-primary); }
.theme-white .result-title          { color: rgba(45,55,72,0.8); }
.theme-white .result-extra          { color: rgba(45,55,72,0.65); }

/* ========================================
   MODAL PERSONNALISATION
======================================== */

.settings-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn var(--ease-base);
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.settings-modal-content {
  background: linear-gradient(135deg, #1e2d3a 0%, #2c3e50 100%);
  border-radius: var(--radius-xl);
  max-width: 480px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: var(--shadow-xl), 0 0 0 2px rgba(199, 144, 30, 0.3);
  animation: modalSlideIn var(--ease-slow);
}

@keyframes modalSlideIn {
  from { transform: translateY(-40px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.settings-modal-header {
  background: linear-gradient(135deg, #C7901E 0%, #E5A72A 100%);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
}

.settings-modal-header h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
}

.close-modal-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: all var(--ease-base);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: bold;
}

.close-modal-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

.settings-modal-body {
  padding: var(--space-6);
  color: white;
  overflow-y: auto;
  max-height: calc(80vh - 80px);
}

.setting-group { margin-bottom: var(--space-6); }

.setting-label {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-3);
}

/* Thèmes */
.theme-options {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.theme-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--ease-base);
  padding: 3px;
  background: rgba(255, 255, 255, 0.08);
}

.theme-btn:hover { transform: scale(1.12); border-color: rgba(255, 255, 255, 0.35); }
.theme-btn.active { border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }

.theme-preview {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* Taille de police */
.font-size-options {
  display: flex;
  gap: var(--space-2);
}

.font-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  cursor: pointer;
  transition: all var(--ease-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.font-btn[data-size="small"]      { font-size: 0.8rem; }
.font-btn[data-size="normal"]     { font-size: 1rem; }
.font-btn[data-size="large"]      { font-size: 1.2rem; }
.font-btn[data-size="extra-large"]{ font-size: 1.4rem; }

.font-btn:hover  { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); }
.font-btn.active { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.55); }

/* Toggle animations */
.animation-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  transition: 0.3s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .toggle-slider { background: #4ade80; }
input:checked + .toggle-slider:before { transform: translateX(26px); }

.toggle-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-sm);
}

/* Bouton reset */
.reset-btn {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  color: #f87171;
  cursor: pointer;
  transition: all var(--ease-base);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.reset-btn:hover {
  background: rgba(220, 38, 38, 0.2);
  border-color: rgba(220, 38, 38, 0.5);
}

/* ========================================
   SECTION DESCRIPTION (utilise le thème du site)
======================================== */

.calendar-description {
  background: var(--clr-bg-secondary);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-top: var(--space-8);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
}

.calendar-description h2 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--clr-accent-light);
}

.calendar-description h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--clr-primary);
  margin: var(--space-6) 0 var(--space-3);
}

.calendar-description p {
  color: var(--clr-text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

.calendar-description p:last-child { margin-bottom: 0; }

.calendar-description strong {
  color: var(--clr-text);
  font-weight: 600;
}

.calendar-description ul {
  margin: var(--space-4) 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.calendar-description li {
  color: var(--clr-text-secondary);
  line-height: 1.6;
}

/* ========================================
   VARIANTES TAILLE DE POLICE
======================================== */

.font-small   .input-group label,
.font-small   .mode-text             { font-size: 0.8rem; }
.font-small   .input-group select    { font-size: 0.875rem; }
.font-small   .result-content        { font-size: var(--text-xl); }

.font-large   .input-group label,
.font-large   .mode-text             { font-size: 1rem; }
.font-large   .input-group select    { font-size: 1.05rem; }
.font-large   .result-content        { font-size: var(--text-3xl); }

.font-extra-large .input-group label,
.font-extra-large .mode-text         { font-size: 1.1rem; }
.font-extra-large .input-group select { font-size: 1.15rem; }
.font-extra-large .result-content    { font-size: var(--text-4xl); }

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 768px) {
  .conv-hero { padding: var(--space-10) var(--space-4) var(--space-8); }
  .conv-hero__title { font-size: var(--text-3xl); }

  .conv-layout { padding: var(--space-6) var(--space-4) var(--space-12); }

  .converter-container {
    border-radius: var(--radius-lg);
    background: none;
    padding: 0;
    box-shadow: none;
  }

  .converter-card {
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
  }

  .converter-card::before { display: none; }

  .input-mode {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .input-group select {
    font-size: 16px; /* iOS zoom prevention */
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
    background-image: none;
    padding-right: var(--space-4);
    backdrop-filter: none;
    transition: none;
    transform: none;
  }

  .input-group select:focus {
    transform: none;
    box-shadow: none;
    border-color: rgba(199, 144, 30, 0.6);
    transition: none;
  }

  .input-group { transition: none; transform: none; }

  .mode-btn {
    padding: var(--space-3) var(--space-2);
    flex-direction: column;
    gap: var(--space-1);
  }

  .mode-text { font-size: 0.75rem; line-height: 1.2; }
  .mode-icon { font-size: 1rem; }

  .convert-btn {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
  }

  .result-content { font-size: var(--text-xl); }

  .calendar-description {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 480px) {
  .conv-hero__title { font-size: var(--text-2xl); }
  .conv-hero__subtitle { font-size: var(--text-base); }

  .converter-card { padding: var(--space-3); }

  .mode-toggle { margin-bottom: var(--space-4); }

  .convert-btn {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
  }

  .result-content { font-size: var(--text-lg); padding: var(--space-3); }

  .calendar-description { padding: var(--space-4); }
  .calendar-description h2 { font-size: var(--text-xl); }
  .calendar-description h3 { font-size: var(--text-base); }
  .calendar-description p  { font-size: var(--text-sm); }
}