:root{
  --bg: #0b2a3a;
  --card-bg: rgba(255,255,255,0.14);
  --card-bd: rgba(255,255,255,0.25);
  --brand: #08668b;
  --brand-strong: #05516e;
  --focus: #0ea5e9;
  --white: #ffffff;
}
*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0; background: var(--bg); color:#0f2e3a;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

/* ===== PAGE HEADER avec ligne animée conservée ===== */
.pageContentHeader{
  position: fixed;
  left: 0; top: 50px; z-index: 10; width: 100%;
  background: #fff;
  border-top: 5px solid green;         /* ligne visible par défaut */
  padding-top: 10px;
  box-shadow: 0px 1px 10px 1px rgba(184,184,184,.75);
  -moz-box-shadow: 0px 1px 10px 1px rgba(184,184,184,.75);
  -webkit-box-shadow: 0px 1px 10px 1px rgba(184,184,184,.75);
  -webkit-animation: change_border_top_color 25s infinite;
  -moz-animation: change_border_top_color 25s infinite;
  -o-animation: change_border_top_color 25s infinite;
  animation: change_border_top_color 25s infinite;
}
@keyframes change_border_top_color{
  0%   { border-top-color: #16a34a; }
  25%  { border-top-color: #0ea5e9; }
  50%  { border-top-color: #f59e0b; }
  75%  { border-top-color: #ef4444; }
  100% { border-top-color: #16a34a; }
}

.page-bg{ position: fixed; inset:0; z-index:-1;
  background:
	linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)) ,
	radial-gradient(1200px 600px at 10% -10%, #2b7da6 0%, transparent 60%),
	radial-gradient(1000px 500px at 110% 10%, #5bc0eb 0%, transparent 55%),
	var(--bg);
}

.container{ width:min(1100px,92vw); margin:0 auto; }

/* Titre dans la barre */
.header-title{ margin:0; color:#e19c60; text-align:center; font-weight:800;
  font-size: clamp(20px, 3.5vw, 28px);
}

/* ===== Layout principal ===== */
.wrap{ min-height:100dvh; display:grid; grid-template-rows: 100px 1fr auto; }
main{ padding-top: 30px; } /* espace sous la barre fixe */

.grid{
  display:grid; gap: clamp(20px, 2.5vw, 40px);
  grid-template-columns: 1.1fr 1fr; align-items:center;
  padding: clamp(28px,5vw,60px) 0;
}
@media (max-width: 960px){ .grid{ grid-template-columns: 1fr; } }

.intro{ color:#eaf7ff; }
.intro h2{ margin:0 0 .25rem; font-size: clamp(22px,3.5vw,30px); font-weight:800; }
.intro p{ line-height:1.6; color:#d5eaf6; margin:.35rem 0 0; }
.intro .brand{ color:#fff; font-weight:800; }

/* ===== Carte / formulaire ===== */
.card{
  width:100%;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background: var(--card-bg); border:1px solid var(--card-bd);
  border-radius:16px; padding: clamp(18px,3vw,28px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25); color:#f7fbff;
}
.card h3{ margin:0 0 1rem; font-weight:700; font-size:clamp(18px,3vw,22px); color:#fff; }
.req{ font-size:.9rem; color:#b9d7e6; text-align:right; margin-top:-6px; margin-bottom:12px; }

/* Harmoniser les champs générés par createStandardInputField_v3 */
.formLogin label{ font-weight:600; color:#eef8ff; }
.formLogin input[type="text"],
.formLogin input[type="email"],
.formLogin input[type="password"],
.formLogin input[type="search"],
.formLogin select, .formLogin textarea{
  width:100%; border-radius:12px; border:1px solid rgba(255,255,255,.25);
  padding:12px 14px; background:#fff; color:#0f2e3a;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.formLogin input:focus, .formLogin select:focus, .formLogin textarea:focus{
  border-color: var(--focus); box-shadow: 0 0 0 4px rgba(14,165,233,.18);
  outline:none; background:#fff;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:12px; padding:12px 16px; font-weight:700; cursor:pointer;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ width:100%; background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%); color:#fff; box-shadow:0 6px 16px rgba(8,102,139,.35); }

.actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; flex-wrap:wrap; }
.link{ color:#e6f6ff; font-weight:600; text-decoration:underline; }

.its_modal_response{ margin-bottom:10px; }

.go-top{ position:fixed; right:16px; bottom:16px; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.9);
  box-shadow:0 6px 16px rgba(0,0,0,.25); color:#ffffff !important; text-decoration:none; font-size:20px;
}
#pageContentWrapper h2 { color: #e19c60; }
.toolbarFixed{background: rgb(255 255 255 / 60%);}
.pageContentHeader{background:var(--card-bg); padding-left: 0px;}