/* ==========================================================================
   theme_moderne.css — Thème « verre clair » (glassmorphism) + effets 3D
   Chargé en dernier dans le <head> de toutes les pages.
   Couleurs claires et transparentes, profondeur (ombres douces),
   boutons en relief avec élévation au survol.
   ========================================================================== */

:root {
  --verre: rgba(255, 255, 255, 0.55);
  --verre-fort: rgba(255, 255, 255, 0.75);
  --verre-bord: rgba(255, 255, 255, 0.65);
  --accent: #5F9EA0;
  --accent-verre: rgba(95, 158, 160, 0.28);
  --accent-clair: rgba(95, 158, 160, 0.15);
  --texte: #23404a;
  --ombre-douce: 0 10px 30px rgba(31, 68, 84, 0.12);
  --ombre-3d: 0 6px 0 rgba(35, 64, 74, 0.18), 0 14px 28px rgba(31, 68, 84, 0.18);
  --rayon: 18px;
}

/* --------------------------- Fond général clair ------------------------- */
body {
  background: linear-gradient(135deg, #eaf6f6 0%, #f5f0fa 45%, #e8f3fb 100%) !important;
  background-attachment: fixed !important;
  color: var(--texte);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------- Verre ---------------------------------- */
.ret1,
.modal-content,
.w3-modal-content,
.w3-card, .w3-card-4,
#corp .entete,
form {
  background: var(--verre) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--verre-bord) !important;
  border-radius: var(--rayon) !important;
  box-shadow: var(--ombre-douce) !important;
}

/* ------------------------- En-tête de l'application --------------------- */
.titre {
  background: linear-gradient(135deg, rgba(95,158,160,0.55), rgba(122,186,200,0.35)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: none !important;
  border: 1px solid var(--verre-bord) !important;
  border-radius: 22px !important;
  box-shadow: var(--ombre-douce) !important;
}

.titre .entete {
  background: var(--verre-fort) !important;
  border: 1px solid var(--verre-bord) !important;
  border-radius: 999px !important;
  color: var(--texte) !important;
  box-shadow: 0 4px 0 rgba(35,64,74,0.10), 0 10px 20px rgba(31,68,84,0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.titre .entete:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 7px 0 rgba(35,64,74,0.12), 0 18px 30px rgba(31,68,84,0.18);
  background: rgba(255,255,255,0.9) !important;
}

/* ------------------------------ Menu latéral ---------------------------- */
.menu {
  background: linear-gradient(160deg, rgba(255,255,255,0.75), rgba(233,246,247,0.55)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid var(--verre-bord);
  border-radius: 22px !important;
  box-shadow: var(--ombre-douce) !important;
}

/* Boutons du menu : relief 3D clair */
.menu .button,
.button {
  background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(226,243,244,0.75)) !important;
  color: var(--texte) !important;
  border: 1px solid rgba(255,255,255,0.8) !important;
  border-bottom: 1px solid rgba(95,158,160,0.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 0 rgba(95,158,160,0.25), 0 12px 22px rgba(31,68,84,0.10);
  transform: translateY(0) perspective(600px) rotateX(0deg);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.menu .button:hover,
.button:hover {
  background: linear-gradient(145deg, #ffffff, rgba(207,236,238,0.9)) !important;
  transform: translateY(-5px) perspective(600px) rotateX(6deg);
  box-shadow: 0 10px 0 rgba(95,158,160,0.30), 0 22px 34px rgba(31,68,84,0.18);
}
.menu .button:active,
.button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(95,158,160,0.30), 0 8px 14px rgba(31,68,84,0.12);
}

/* Bouton actif : liseré clair lumineux */
.button.active {
  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(214,240,242,0.9)) !important;
  border-left: 5px solid var(--accent) !important;
  border-right: none !important;
  box-shadow: 0 8px 0 rgba(95,158,160,0.35), 0 18px 30px rgba(31,68,84,0.20), 0 0 22px rgba(95,158,160,0.25);
}

/* ------------------------------ Tableaux -------------------------------- */
table {
  border: none !important;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--verre) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--ombre-douce);
  border-collapse: separate !important;
  border-spacing: 0;
}
thead tr, tr:first-child,
th {
  background: var(--accent-verre) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #17434a !important;
  text-shadow: none !important;
  border: none !important;
}
td {
  background: rgba(255,255,255,0.35);
  border-bottom: 1px solid rgba(95,158,160,0.12) !important;
}
tbody tr, .tbody tr {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
tbody tr:hover, .tbody tr:hover {
  background: rgba(255,255,255,0.85) !important;
  transform: translateY(-2px) scale(1.002);
  box-shadow: 0 8px 18px rgba(31,68,84,0.12);
}

/* ------------------------- Boutons d'action ----------------------------- */
.btn, .but, .payer, .commande, button[type="submit"], input[type="submit"] {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 0 rgba(35,64,74,0.16), 0 10px 20px rgba(31,68,84,0.14);
  transform: translateY(0);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn:hover, .but:hover, .payer:hover, .commande:hover,
button[type="submit"]:hover, input[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 rgba(35,64,74,0.16), 0 16px 28px rgba(31,68,84,0.20);
  filter: brightness(1.06);
}
.btn:active, .but:active, .payer:active, .commande:active,
button[type="submit"]:active, input[type="submit"]:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(35,64,74,0.16), 0 6px 12px rgba(31,68,84,0.14);
}

/* --------------------------- Champs de saisie --------------------------- */
input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="email"], select, textarea, .form-control {
  background: rgba(255,255,255,0.65) !important;
  border: 1px solid rgba(95,158,160,0.30) !important;
  border-radius: 12px !important;
  color: var(--texte) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  background: rgba(255,255,255,0.95) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(95,158,160,0.18), 0 8px 18px rgba(31,68,84,0.10) !important;
  outline: none !important;
}

/* ----------------------- Cartes du tableau de bord ---------------------- */
#corp .entete {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#corp .entete:hover {
  transform: translateY(-8px) perspective(700px) rotateX(4deg);
  box-shadow: 0 22px 44px rgba(31,68,84,0.20) !important;
}
#corp .nombre {
  border-top: 5px solid rgba(95,158,160,0.45) !important;
  background: transparent !important;
}

/* --------------------------- Navigation mobile -------------------------- */
.topnav {
  background: linear-gradient(135deg, rgba(95,158,160,0.85), rgba(122,186,200,0.7)) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  box-shadow: var(--ombre-douce);
}
.topnav a { border-radius: 10px; }

/* ------------------------------ Divers ---------------------------------- */
h1, h2, h3 { color: #1c4a55; }

/* Titres de page avec léger relief */
h1 {
  text-shadow: 0 2px 0 rgba(255,255,255,0.8), 0 6px 14px rgba(31,68,84,0.15);
}

/* Liens */
a { color: #35707d; }
a:hover { color: var(--accent); }

/* Cases à cocher plus douces */
input[type="checkbox"] {
  accent-color: var(--accent);
  width: 17px; height: 17px;
}

/* Barre de défilement discrète */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.3); }
::-webkit-scrollbar-thumb {
  background: rgba(95,158,160,0.45);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.5);
}
::-webkit-scrollbar-thumb:hover { background: rgba(95,158,160,0.7); }

/* ------------------------- Page de connexion ---------------------------- */
.login-page {
  background:
    linear-gradient(135deg, rgba(234,246,246,0.88), rgba(245,240,250,0.88), rgba(232,243,251,0.88)),
    url("dossier/avatar1.png") center/cover no-repeat fixed !important;
  min-height: 100vh;
}
.login-page form {
  background: rgba(255,255,255,0.45) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.7) !important;
  box-shadow: 0 24px 60px rgba(31,68,84,0.20) !important;
}
.login-page .container {
  background: transparent !important;
}
.login-page .pulse-text h2,
.login-page .pulse-text p {
  color: #1c4a55 !important;
  text-shadow: 0 2px 0 rgba(255,255,255,0.9), 0 8px 18px rgba(31,68,84,0.20);
}
.login-page button {
  background: linear-gradient(145deg, #7db8ba, var(--accent)) !important;
  box-shadow: 0 6px 0 #4a7f81, 0 14px 26px rgba(31,68,84,0.25) !important;
}
.login-page button:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 #4a7f81, 0 20px 34px rgba(31,68,84,0.30) !important;
}
.login-page button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #4a7f81, 0 8px 14px rgba(31,68,84,0.20) !important;
}

/* ==========================================================================
   Typographie uniforme — même police et même échelle de tailles partout
   (les icônes Font Awesome ne sont pas concernées : balises <i> exclues)
   ========================================================================== */

html { font-size: 16px; }

body, table, th, td, input, select, textarea, button,
a, p, span, div, label, li, h1, h2, h3, h4, h5, h6 {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { font-size: 15px; line-height: 1.5; }

/* Texte courant et tableaux : taille unique */
table, th, td, p, li, label, a, span, div { font-size: 15px; }

/* Hiérarchie des titres harmonisée */
h1 { font-size: 26px !important; font-weight: 700; }
h2 { font-size: 20px !important; font-weight: 600; }
h3 { font-size: 17px !important; font-weight: 600; }
h4, h5, h6 { font-size: 15px !important; font-weight: 600; }

/* Champs et boutons : taille unique et lisible */
input, select, textarea, .form-control { font-size: 15px !important; }
button, .btn, .but, .payer, .commande { font-size: 15px !important; font-weight: 600; }

/* Exceptions conservées : bannière principale et chiffres du tableau de bord */
.titre h2 { font-size: 34px !important; }
.titre .entete span { font-size: 20px !important; }
#corp .nombre { font-size: 42px !important; }

/* Mobile : base légèrement réduite, champs à 16px (anti-zoom iOS) */
@media (max-width: 768px) {
  body, table, th, td, p, li, label, a, span, div { font-size: 14px; }
  input, select, textarea, .form-control { font-size: 16px !important; }
  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }
  .titre h2 { font-size: 26px !important; }
}

/* Impression : fond blanc, sans effets */
@media print {
  body { background: #ffffff !important; }
  table, .ret1, .menu, .titre, form, #corp .entete {
    background: #ffffff !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}