/* ERICALSHOP — composants maison (Tailwind gère le reste) */

:root { color-scheme: light; }

/* ---------------------------------------------------- menu du profil */
.menu-lien {
  display: block;
  padding: .8rem 1rem;
  font-weight: 600;
  color: #0D2240;
}
.menu-lien:hover { background: #F4F7FB; }

/* ---------------------------------------------------- barre du bas */
.onglet {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .6rem .25rem; border-radius: 1rem;
  font-size: 11px; font-weight: 700; color: #94A3B8;
  transition: background .15s, color .15s;
}
.onglet-actif { background: #0D2240; color: #fff; }

/* ---------------------------------------------------- formulaires */
.champ {
  width: 100%; height: 3.25rem; border: 0; border-radius: 1rem;
  background: #F4F7FB; padding: 0 1rem;
  font-size: 15px; font-weight: 600; color: #0D2240;
  outline: 2px solid transparent; transition: outline-color .15s, background .15s;
}
.champ:focus { background: #fff; outline-color: rgba(59,130,246,.45); }
.champ::placeholder { color: #A9B6C8; font-weight: 500; }
select.champ { appearance: none; background-image: none; }

.champ-libelle {
  display: block; margin-bottom: .4rem;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: #94A3B8;
}

.etape-carte { background: #fff; border-radius: 1.5rem; padding: 1rem; box-shadow: 0 1px 3px rgba(13,34,64,.06); }

.choix-operateur {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem; padding: .85rem .5rem; border-radius: 1.25rem;
  background: #F4F7FB; cursor: pointer;
  outline: 2px solid transparent; transition: outline-color .15s, background .15s;
}
.choix-operateur:hover { background: #EAF1FB; }
.choix-operateur:has(input:checked) { background: #D0E1F9; outline-color: #3B82F6; }

/* ---------------------------------------------------- stepper */
#stepper li { position: relative; }
#stepper li::before {
  content: ""; position: absolute; top: 14px; left: calc(-50% + 16px); right: calc(50% + 16px);
  height: 2px; background: #E2E8F0;
}
#stepper li:first-child::before { display: none; }
.puce {
  position: relative; z-index: 1;
  width: 28px; height: 28px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: 0 0 0 1px #E2E8F0; color: #94A3B8;
  font-size: 12px; font-weight: 800;
}
li.etape-faite .puce { background: #0D2240; color: #fff; box-shadow: none; }
li.etape-active .puce { background: #3B82F6; color: #fff; box-shadow: none; }

/* ---------------------------------------------------- divers */
.bouton-copie.copie-ok { background: #10B981 !important; color: #fff !important; }
.montant-rapide:active { transform: scale(.97); }

/* ---------------------------------------------------- toasts de confirmation */
#zone-toasts {
  position: fixed; left: 0; right: 0; top: .75rem; z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 0 1rem; pointer-events: none;
}
.toast {
  width: fit-content; max-width: 30rem;
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem; border-radius: 1rem;
  background: #0D2240; color: #fff; font-size: 13px; font-weight: 700;
  box-shadow: 0 10px 25px rgba(13,34,64,.25);
  animation: toast-in .22s ease-out;
}
.toast-ok { background: #10B981; }
.toast-erreur { background: #EF4444; }
.toast-part { animation: toast-out .25s ease-in forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-.75rem) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-out { to { opacity: 0; transform: translateY(-.5rem) scale(.98); } }

/* ---------------------------------------------------- écran de chargement */
.voile-chargement {
  position: fixed; inset: 0; z-index: 70; padding: 1.5rem;
  background: rgba(10,22,40,.55);
  display: flex; align-items: center; justify-content: center;
}
.carte-chargement {
  width: 100%; max-width: 20rem; text-align: center; background: #fff;
  border-radius: 1.5rem; padding: 1.5rem 1.25rem;
  box-shadow: 0 20px 40px rgba(13,34,64,.3);
}
.rond-chargement {
  display: block; width: 38px; height: 38px; margin: 0 auto 1rem;
  border: 3px solid #D0E1F9; border-top-color: #3B82F6; border-radius: 999px;
  animation: tourner .8s linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg); } }

/* ---------------------------------------------------- thème sombre */
html.dark { color-scheme: dark; }
html.dark body { background: #0A1628; color: #E8EEF7; }
html.dark header { background: rgba(10,22,40,.95); border-color: rgba(255,255,255,.08); }
html.dark .bg-white { background: #12263F !important; }
html.dark .bg-\[\#F4F7FB\] { background: #0F2036 !important; }
html.dark .bg-\[\#F4F7FB\]\/95 { background: rgba(10,22,40,.95) !important; }
html.dark .champ { background: #0F2036; color: #E8EEF7; }
html.dark .champ:focus { background: #12263F; }
html.dark .text-slate-400, html.dark .text-slate-500 { color: #8FA3BF !important; }
html.dark .text-slate-600 { color: #B6C6DD !important; }
html.dark .text-slate-300 { color: #6E809B !important; }
html.dark .text-\[\#0D2240\] { color: #E8EEF7 !important; }
html.dark .text-\[\#0D2240\]\/60 { color: rgba(232,238,247,.72) !important; }
html.dark .text-\[\#0D2240\]\/75 { color: rgba(232,238,247,.82) !important; }
html.dark .bg-\[\#D0E1F9\] { background: #1C3B63 !important; }
html.dark .bg-\[\#8EC3B0\] { background: #1E4A3C !important; }
html.dark .bg-\[\#8EC3B0\]\/40 { background: rgba(30,74,60,.55) !important; }
html.dark .bg-orange-50 { background: #3A2A15 !important; }
html.dark .bg-orange-50\/40 { background: rgba(58,42,21,.6) !important; }
html.dark .bg-emerald-50, html.dark .bg-red-50,
html.dark .bg-amber-50, html.dark .bg-blue-50 { background: rgba(255,255,255,.08) !important; }
html.dark .carte-chargement { background: #12263F; }
html.dark .divide-slate-100 > * + * { border-color: rgba(255,255,255,.07); }
html.dark .onglet { color: #8FA3BF; }
html.dark .onglet-actif { background: #3B82F6; color: #fff; }
html.dark .menu-lien { color: #E8EEF7; }
html.dark .menu-lien:hover { background: #0F2036; }