:root {
  --paper: #f2efe7;
  --white: #fff;
  --sage: #aab9ae;
  --sage-soft: #dfe5df;
  --teal: #496b70;
  --teal-dark: #304e52;
  --ink: #172522;
  --muted: #5f6d68;
  --line: rgba(23, 37, 34, .18);
  --danger: #9a433d;
}

html { background: var(--paper); }
body {
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal-dark); }
h1, h2, h3 { color: var(--ink); letter-spacing: -.045em; }
h1 { font-weight: 650; }

header {
  padding: 24px max(24px, calc((100% - 1160px) / 2));
  color: var(--ink);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
header::after { display: none; }
header h1, header > div { color: var(--ink); }
header h1 { margin: 0 0 12px; }
header:has(.site-button) { padding: 76px max(24px, calc((100% - 1160px) / 2)) 30px; }
header a { color: var(--teal-dark) !important; background: transparent; border: 1px solid var(--teal); }
.header-links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }

main { width: min(980px, calc(100% - 40px)); }
.card, .box {
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: none;
}
.card:hover { box-shadow: none; }

button, .button, header a, .site-button, .account-button {
  border-radius: 999px;
  font-family: inherit;
  font-weight: 720;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
button:hover, .button:hover, header a:hover { transform: translateY(-1px); box-shadow: none; }
button:active, .button:active, header a:active { transform: scale(.98); }
.primary, button:not(.secondary):not(.danger):not(.link):not(.site-button):not(.account-button):not(.password-toggle) {
  color: var(--white);
  background: var(--teal);
}
.primary:hover, button:not(.secondary):not(.danger):not(.link):not(.site-button):not(.account-button):not(.password-toggle):hover {
  background: var(--teal-dark);
}
.secondary, .button.secondary {
  color: var(--teal-dark);
  background: transparent;
  border: 1px solid var(--teal);
}
.danger { color: var(--danger); background: transparent; border: 1px solid rgba(154, 67, 61, .35); }

input, select, textarea {
  color: var(--ink);
  background: rgba(255, 255, 255, .76);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(73, 107, 112, .16);
  border-color: var(--teal);
  box-shadow: none;
  transform: none;
}

nav {
  background: rgba(170, 185, 174, .34);
  border: 1px solid var(--line);
  box-shadow: none;
}
nav button {
  color: var(--ink);
  background: transparent;
  border: 0;
  box-shadow: none;
}
nav button:hover { color: var(--white); background: var(--teal); }

.site-button, .account-button {
  box-sizing: border-box;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  color: var(--teal-dark) !important;
  background: transparent !important;
  border: 1px solid var(--teal);
  box-shadow: none;
  font-size: 14px;
  line-height: 1.2;
}
.site-button:hover, .account-button:hover { color: var(--teal-dark) !important; background: var(--sage-soft) !important; }
.site-button[hidden] { display: none; }

header:has(.site-button) { padding-top: 68px; padding-bottom: 20px; }
.app-nav {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  gap: 7px;
  margin: 14px auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  box-shadow: none;
}
.app-nav > button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 14px;
  color: var(--teal-dark) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 999px;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}
.app-nav > button:hover { color: var(--teal-dark) !important; background: var(--sage-soft) !important; }
.app-nav > button[aria-current="page"] { border-color: #4b8293 !important; color: #315f6e !important; background: rgba(75,130,147,.08) !important; }

.badge { border-radius: 999px; }
.vert { color: #315d49; background: #dfe9e1; }
.orange { color: #705923; background: #eee5ca; }
.rouge { color: #a12525; background: #fce8e5; border: 1px solid #e8b4ad; }
.cycle-card, details { background: rgba(223, 229, 223, .5); border-color: var(--line); }
.cycle-card:has(.badge.rouge) { background: #fff7f5; border-color: #e8b4ad; }
.info, .lead, .card p { color: var(--muted); }

.box { padding: 34px; }
.box h1 { margin-bottom: 8px; color: var(--ink); }
.box > p:first-of-type { color: var(--muted); }
.link { color: var(--teal-dark); background: transparent; }
.consent a { color: var(--teal-dark); }
.password-toggle { color: var(--teal-dark); background: transparent; }
.ic-privacy-manage { width: auto !important; }
.box button[onclick="inscription()"] { color: var(--teal-dark); background: transparent; border: 1px solid var(--teal); }

.brand { color: var(--ink); letter-spacing: .08em; text-transform: uppercase; }
.brand img { display: none; }
.hint { color: var(--ink); background: var(--sage-soft); border: 1px solid var(--line); }
.back { color: var(--teal-dark); }

#map { border: 1px solid var(--line); border-radius: 20px; }

@media (max-width: 640px) {
  main { width: min(100% - 24px, 980px); padding-left: 0; padding-right: 0; }
  header { padding-left: 16px; padding-right: 16px; }
  header:has(.site-button) { padding: calc(68px + env(safe-area-inset-top)) 16px 16px; }
  .app-nav { width: 100%; justify-content: flex-start; overflow-x: auto; gap: 4px; }
  .app-nav > button { min-height: 42px; padding: 8px 12px; font-size: 13px; }
  .card, .box { border-radius: 16px; }
  .box { width: min(100% - 28px, 430px); padding: 24px 20px; }
  .site-button, .account-button { font-size: 12px; padding: 7px 9px; }
  .ic-privacy-manage { min-height: 38px; }
}