
.jt-cadre { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); min-width: 0; }

.jt-bandeau { --jt-bandeau-haut: clamp(260px, 40vh, 440px); position: relative; isolation: isolate; width: 100%; align-self: stretch;
  min-height: var(--jt-bandeau-haut); display: flex; align-items: center; overflow: hidden; color: var(--primary);
  padding-block: clamp(36px, 6vh, 72px); background: #EEF0FF; }
.jt-bandeau::before, .jt-bandeau::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(8px); pointer-events: none; }
.jt-bandeau::before { width: min(70vw, 820px); aspect-ratio: 1; right: -18%; top: -55%;
  background: radial-gradient(circle, color-mix(in srgb, var(--jt-accent, var(--accent)) 26%, transparent) 0%, transparent 68%); }
.jt-bandeau::after { width: min(55vw, 620px); aspect-ratio: 1; left: -14%; bottom: -60%;
  background: radial-gradient(circle, rgba(16, 185, 129, .20) 0%, transparent 70%); }
.jt-bandeau > .jt-cadre { position: relative; }
.jt-bandeau.is-centre { text-align: center; }
.jt-bandeau.is-centre .jt-bandeau-intro { margin-inline: auto; }
.jt-bandeau.is-sombre { background: linear-gradient(135deg, #141C3A 0%, var(--primary) 45%, color-mix(in srgb, var(--jt-accent, var(--accent)) 70%, var(--primary)) 100%); color: #fff; }
.jt-bandeau.is-sombre::after { background: radial-gradient(circle, rgba(16, 185, 129, .28) 0%, transparent 70%); }
.jt-bandeau.is-sarcelle { --jt-accent: #0F766E; background: linear-gradient(135deg, #0B4F4A 0%, #0F766E 55%, #14B8A6 100%); color: #fff; }
.jt-bandeau.is-grand { --jt-bandeau-haut: clamp(380px, 68vh, 720px); align-items: flex-end; }

.jt-bandeau h1 { font-size: clamp(30px, 4.4vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; color: inherit; max-width: 18ch; }
.jt-bandeau.is-centre h1 { margin-inline: auto; }
.jt-bandeau-intro { margin-top: 14px; max-width: 62ch; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #475569; }
.is-sombre .jt-bandeau-intro, .is-sarcelle .jt-bandeau-intro { color: rgba(255, 255, 255, .86); }
.jt-bandeau-liens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.jt-bandeau.is-centre .jt-bandeau-liens { justify-content: center; }
.jt-bandeau-liens a { font-size: 14px; font-weight: 700; padding: 9px 16px; border-radius: 100px; background: rgba(242, 244, 244, .7); color: var(--primary); text-decoration: none; }
.jt-bandeau-liens a:hover { background: #F2F4F4; }
.is-sombre .jt-bandeau-liens a, .is-sarcelle .jt-bandeau-liens a { background: rgba(242, 244, 244, .14); color: #fff; }
.is-sombre .jt-bandeau-liens a:hover, .is-sarcelle .jt-bandeau-liens a:hover { background: rgba(242, 244, 244, .26); }

.jt-recherche { margin-top: clamp(22px, 3.4vh, 34px); display: flex; align-items: stretch; background: #F2F4F4; border-radius: 18px; padding: 6px;
  box-shadow: 0 18px 44px rgba(20, 28, 58, .14), 0 0 0 1px rgba(20, 28, 58, .05); max-width: 1040px; color: var(--primary); text-align: left; }
.jt-bandeau.is-centre .jt-recherche { margin-inline: auto; }
.jt-recherche > * { min-width: 0; }
.jt-recherche .jt-champ { flex: 1 1 0; display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 54px; position: relative; }
.jt-recherche .jt-champ + .jt-champ::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: #D9DDE6; }
.jt-recherche .jt-champ.is-large { flex-grow: 2.2; }
.jt-recherche .jt-champ svg { width: 19px; height: 19px; flex-shrink: 0; color: #576579; }
.jt-recherche input, .jt-recherche select { border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 500; color: inherit; width: 100%;
  min-width: 0; height: 100%; }
.jt-recherche select { cursor: pointer; }
.jt-recherche input::placeholder { color: #8A94A8; }
.jt-recherche .jt-case { flex: 0 0 auto; gap: 8px; font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.jt-recherche .jt-case input { width: 18px; height: 18px; accent-color: var(--jt-accent, var(--accent)); }
.jt-recherche button { flex: 0 0 auto; border: 0; border-radius: 13px; padding: 0 26px; min-height: 54px; font: inherit; font-size: 15.5px; font-weight: 800;
  background: var(--jt-accent, var(--accent)); color: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.jt-recherche button:hover { filter: brightness(.9); }
.jt-recherche button svg { width: 18px; height: 18px; }
.jt-recherche:focus-within { box-shadow: 0 18px 44px rgba(20, 28, 58, .16), 0 0 0 3px color-mix(in srgb, var(--jt-accent, var(--accent)) 35%, transparent); }
.jt-raz { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700; color: inherit; opacity: .8; }

.jt-section { padding-block: clamp(32px, 5vw, 56px); }
.jt-section-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(18px, 2.6vw, 28px); }
.jt-section-tete h2 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.02em; color: var(--primary); }
.jt-section-tete p { color: var(--text-muted); font-size: 15px; margin-top: 4px; }

@media (max-width: 820px) {
  .jt-recherche { flex-direction: column; padding: 8px; gap: 4px; border-radius: 18px; }
  .jt-recherche .jt-champ { min-height: 50px; background: #EAEDF1; border-radius: 12px; }
  .jt-recherche .jt-champ + .jt-champ::before { content: none; }
  .jt-recherche button { justify-content: center; min-height: 50px; }
  .jt-bandeau h1 { max-width: none; }
}

.jt-dialogue { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; margin: auto; padding: clamp(22px, 3vw, 32px);
  border: 0; border-radius: 22px; background: #F2F4F4; color: var(--primary); box-shadow: 0 30px 80px rgba(15, 20, 45, .35); }
.jt-dialogue:not([open]) { display: none; }
.jt-dialogue[open]:not(:modal) { position: fixed; inset: 0; z-index: 1200; }
.jt-dialogue::backdrop { background: rgba(15, 20, 45, .55); backdrop-filter: blur(3px); }
.jt-dialogue h2 { font-size: clamp(20px, 2.2vw, 24px); font-weight: 800; letter-spacing: -.02em; padding-right: 40px; }
.jt-dialogue-fermer { position: absolute; top: 12px; right: 12px; }
.jt-dialogue-fermer button { width: 40px; height: 40px; border: 0; border-radius: 12px; background: #E5E9ED; color: var(--primary); display: grid; place-items: center; cursor: pointer; }
.jt-dialogue-fermer button:hover { background: #D8DDE6; }
.jt-dialogue-fermer svg { width: 18px; height: 18px; }
.jt-dialogue-intro { margin-top: 10px; font-size: 15px; line-height: 1.6; color: #475569; }
.jt-dialogue-intro strong { color: var(--primary); }
.jt-dialogue-erreur { margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: #F1E8E8; color: #991B1B; font-size: 14px; font-weight: 600; }
.jt-dialogue-form { display: grid; gap: 14px; margin-top: 18px; }
.jt-dialogue-form label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 700; }
.jt-dialogue-form input, .jt-dialogue-form textarea { width: 100%; font: inherit; font-size: 15px; font-weight: 500; color: var(--primary); padding: 12px 14px;
  border: 1px solid #DDE1EC; border-radius: 12px; background: #F2F4F4; }
.jt-dialogue-form textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.jt-dialogue-form input:focus, .jt-dialogue-form textarea:focus { outline: 0; border-color: var(--jt-accent, var(--accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--jt-accent, var(--accent)) 15%, transparent); }
.jt-dialogue-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.jt-dialogue-form .jt-dialogue-actions { margin-top: 4px; }
.jt-dialogue-btn { flex: 1 1 180px; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 13px;
  border: 1px solid #DDE1EC; background: #F2F4F4; color: var(--primary); font: inherit; font-size: 15px; font-weight: 800; text-decoration: none; cursor: pointer; }
.jt-dialogue-btn:hover { background: #EAEDF1; }
.jt-dialogue-btn.is-plein { background: var(--jt-accent, var(--accent)); border-color: transparent; color: #fff; }
.jt-dialogue-btn.is-plein:hover { filter: brightness(.9); }
.jt-dialogue-note { margin-top: 16px; font-size: 13.5px; color: #576579; line-height: 1.55; }
.jt-dialogue-note a { color: var(--jt-accent, var(--accent)); font-weight: 700; }

body:has(.jt-cadre) .nav-container, body:has(.of-wrap) .nav-container { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); box-sizing: border-box; }
.jt-bandeau, .jt-bandeau.is-sombre, .jt-bandeau.is-sarcelle { --jt-accent: #4F46E5; background: linear-gradient(160deg, #141C3A 0%, #1E2A52 55%, #2B3A7A 100%); color: #fff; }
.jt-bandeau::before, .jt-bandeau.is-sombre::before, .jt-bandeau.is-sarcelle::before { background: radial-gradient(circle, rgba(111, 162, 255, .28) 0%, transparent 68%); }
.jt-bandeau::after, .jt-bandeau.is-sombre::after, .jt-bandeau.is-sarcelle::after { background: radial-gradient(circle, rgba(111, 162, 255, .12) 0%, transparent 70%); }
.jt-bandeau .jt-bandeau-intro { color: rgba(255, 255, 255, .86); }
.jt-bandeau .jt-bandeau-liens a { background: rgba(242, 244, 244, .12); color: #fff; }
.jt-bandeau .jt-bandeau-liens a:hover { background: rgba(242, 244, 244, .24); }
.jt-bandeau .jt-raz { color: #fff; }
.jt-bandeau.jt-bandeau h1, .jt-bandeau.jt-bandeau h2 { color: #fff; }
