/* Réservation d'un rendez-vous : page plein écran, aux couleurs de Hozana Immigration. Animations coupées si l'appareil le demande. */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../../../../themes/hozana-theme/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../../../../themes/hozana-theme/assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

html:has(.hzb) { background: #0b1626; }
body:has(.hzb) { margin: 0; min-height: 100vh; background: #0b1626; }
.hzb {
  --r: #e23a43; --r-f: #c8202b; --r-c: #ff8a8f; --m: #0b1626; --m2: #12233a; --m3: #1a3150;
  --t: #eef3fa; --t2: #b8c4d6; --t3: #8d9bb0; --bord: rgb(255 255 255 / .14); --verre: rgb(18 35 58 / .72);
  --ok: #39d98a; --wa: #25d366; --rayon: 22px;
  position: relative; min-height: 100vh; overflow: hidden; color: var(--t);
  font: 16.5px/1.6 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
  background: radial-gradient(120% 90% at 85% -10%, #1d3b66 0, transparent 55%), radial-gradient(90% 80% at -10% 110%, #3a1220 0, transparent 50%), var(--m);
  isolation: isolate;
}
.hzb *, .hzb *::before, .hzb *::after { box-sizing: border-box; }
.hzb :focus-visible { outline: 3px solid var(--r-c); outline-offset: 3px; border-radius: 10px; }
.hzb .hzb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Décor animé : halos et constellation */
.hzb-fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hzb-halo { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: hzb-flotte 18s ease-in-out infinite alternate; }
.hzb-halo.a { width: 46vmax; height: 46vmax; left: -12vmax; top: -10vmax; background: radial-gradient(circle, #c8202b 0, transparent 65%); }
.hzb-halo.b { width: 40vmax; height: 40vmax; right: -14vmax; top: 18vh; background: radial-gradient(circle, #2b6ad1 0, transparent 65%); animation-duration: 22s; animation-delay: -6s; }
.hzb-halo.c { width: 30vmax; height: 30vmax; left: 30vw; bottom: -16vmax; background: radial-gradient(circle, #7a2bd1 0, transparent 70%); opacity: .35; animation-duration: 26s; }
.hzb-grille { position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 30%, #000 0, transparent 75%); }
.hzb-etoiles { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes hzb-flotte { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vw, 5vh, 0) scale(1.15); } }

/* En-tête */
.hzb-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1240px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 40px); }
.hzb-marque { display: inline-flex; align-items: center; gap: 12px; color: var(--t); text-decoration: none; font-weight: 800; letter-spacing: .01em; }
.hzb-marque img { width: 42px; height: 42px; border-radius: 12px; background: #fff; padding: 4px; }
.hzb-marque small { display: block; font-weight: 600; font-size: 11px; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; color: var(--r-c); }
.hzb-lien-wa { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; color: #04230f; background: var(--wa); font-weight: 750; font-size: 14.5px; text-decoration: none; box-shadow: 0 12px 30px -12px rgb(37 211 102 / .7); transition: transform .25s, box-shadow .25s; }
.hzb-lien-wa:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgb(37 211 102 / .85); }

/* Mise en page */
.hzb-scene { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: start; max-width: 1240px; margin: 0 auto; padding: clamp(12px, 3vw, 40px) clamp(16px, 4vw, 40px) 64px; }
.hzb-intro { position: sticky; top: 28px; padding-top: clamp(4px, 3vh, 40px); }
.hzb-sur { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--bord); border-radius: 999px; background: rgb(255 255 255 / .05); color: var(--t2); font-size: 13px; font-weight: 650; letter-spacing: .04em; }
.hzb-sur i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgb(57 217 138 / .6); animation: hzb-pouls 2.2s infinite; }
@keyframes hzb-pouls { 0% { box-shadow: 0 0 0 0 rgb(57 217 138 / .55); } 70% { box-shadow: 0 0 0 10px rgb(57 217 138 / 0); } 100% { box-shadow: 0 0 0 0 rgb(57 217 138 / 0); } }
.hzb h1 { margin: 18px 0 16px; font-size: clamp(36px, 5.2vw, 64px); line-height: 1.04; letter-spacing: -.035em; font-weight: 850; }
.hzb h1 em { font-style: normal; background: linear-gradient(100deg, #fff 0, var(--r-c) 35%, #ffd2d4 50%, var(--r) 65%, #fff 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hzb-reflet 7s ease-in-out infinite; }
@keyframes hzb-reflet { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.hzb-chapo { max-width: 520px; margin: 0 0 28px; color: var(--t2); font-size: 18px; }
.hzb-atouts { display: grid; gap: 12px; margin: 0 0 30px; padding: 0; list-style: none; }
.hzb-atouts li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--bord); border-radius: 16px; background: linear-gradient(135deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02)); backdrop-filter: blur(8px); }
.hzb-atouts .ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 21px; background: linear-gradient(135deg, rgb(226 58 67 / .3), rgb(43 106 209 / .25)); }
.hzb-atouts b { display: block; font-size: 15.5px; }
.hzb-atouts span { color: var(--t3); font-size: 14px; }
.hzb-confiance { display: flex; flex-wrap: wrap; gap: 10px 20px; color: var(--t3); font-size: 13.5px; }
.hzb-confiance span::before { content: "✓"; color: var(--ok); font-weight: 800; margin-right: 6px; }

/* Carte du parcours */
.hzb-carte { position: relative; border-radius: calc(var(--rayon) + 6px); padding: 1px; background: linear-gradient(140deg, rgb(255 255 255 / .35), rgb(255 255 255 / .06) 40%, rgb(226 58 67 / .45)); box-shadow: 0 40px 90px -40px rgb(0 0 0 / .75), 0 0 0 1px rgb(255 255 255 / .03); }
.hzb-carte::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60%; height: 60%; background: radial-gradient(circle, rgb(226 58 67 / .35), transparent 70%); filter: blur(30px); z-index: -1; animation: hzb-flotte 12s ease-in-out infinite alternate; }
.hzb-interieur { position: relative; border-radius: calc(var(--rayon) + 5px); background: var(--verre); backdrop-filter: blur(18px) saturate(1.3); padding: clamp(20px, 3.4vw, 36px); min-height: 520px; }
.hzb-progres[hidden] { display: none; }
.hzb-progres { display: flex; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: e; }
.hzb-progres li { flex: 1; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.hzb-progres li::before { content: ""; display: block; height: 4px; border-radius: 4px; margin-bottom: 8px; background: rgb(255 255 255 / .12); transition: background .5s; }
.hzb-progres li.fait::before { background: linear-gradient(90deg, var(--r-f), var(--r)); }
.hzb-progres li.en-cours { color: var(--t); }
.hzb-progres li.en-cours::before { background: linear-gradient(90deg, var(--r-f), var(--r) 60%, rgb(255 255 255 / .12) 60%); background-size: 200% 100%; animation: hzb-charge 1.2s ease-out forwards; }
@keyframes hzb-charge { from { background-position: 100% 0; } to { background-position: 0 0; } }
.hzb h2:focus { outline: none; }
.hzb h2 { margin: 0 0 6px; font-size: clamp(23px, 2.6vw, 29px); line-height: 1.2; letter-spacing: -.02em; font-weight: 800; outline: none; }
.hzb .hzb-aide { margin: 0 0 20px; color: var(--t2); font-size: 15px; }

/* Entrée d'une étape : les éléments arrivent l'un après l'autre */
.hzb-etape > * { animation: hzb-entre .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes hzb-entre { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* Jours et heures */
.hzb-jours { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; margin: 0 -2px 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.hzb-jour { flex: none; scroll-snap-align: start; width: 78px; padding: 12px 6px; border-radius: 16px; border: 1px solid var(--bord); background: rgb(255 255 255 / .04); color: var(--t); cursor: pointer; text-align: center; font: inherit; transition: transform .25s, border-color .25s, background .25s, box-shadow .25s; }
.hzb-jour small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.hzb-jour b { display: block; font-size: 26px; line-height: 1.1; margin: 2px 0; }
.hzb-jour span { font-size: 12.5px; color: var(--t2); }
.hzb-jour:hover { transform: translateY(-3px); border-color: rgb(255 255 255 / .3); }
.hzb-jour[aria-pressed=true] { background: linear-gradient(160deg, var(--r), var(--r-f)); border-color: transparent; box-shadow: 0 16px 34px -14px rgb(226 58 67 / .85); }
.hzb-jour[aria-pressed=true] small, .hzb-jour[aria-pressed=true] span { color: #ffe4e5; }
.hzb-heures { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr)); gap: 10px; margin: 0 0 8px; }
.hzb-heure { position: relative; padding: 13px 10px; border-radius: 14px; border: 1px solid var(--bord); background: rgb(255 255 255 / .05); color: var(--t); font-weight: 700; font-size: 16px; line-height: 1.2; cursor: pointer; transition: transform .2s, background .25s, border-color .25s, box-shadow .25s; animation: hzb-entre .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
.hzb-heure small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--t3); }
.hzb-heure:hover { transform: translateY(-2px) scale(1.02); border-color: var(--r-c); background: rgb(226 58 67 / .12); }
.hzb-heure[aria-pressed=true] { background: #fff; color: var(--m); border-color: #fff; box-shadow: 0 0 0 4px rgb(226 58 67 / .45), 0 18px 36px -14px rgb(0 0 0 / .7); }
.hzb-heure[aria-pressed=true] small { color: #4a5a70; }
.hzb-fuseau { font-size: 13px; color: var(--t3); margin: 6px 0 0; }

/* Champs */
.hzb-grille2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hzb-champ { position: relative; display: block; }
.hzb-champ.plein { grid-column: 1 / -1; }
.hzb-champ > span { display: block; margin: 0 0 6px; font-size: 13.5px; font-weight: 650; color: var(--t2); }
.hzb-champ > span em { font-style: normal; font-weight: 500; color: var(--t3); }
.hzb input:not([type=checkbox]):not([type=radio]), .hzb select, .hzb textarea { width: 100%; max-width: 100%; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--bord); background: rgb(5 14 26 / .55); color: var(--t); font: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s, background .2s; }
.hzb select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--t2) 50%), linear-gradient(135deg, var(--t2) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.hzb select option { color: #0b1626; }
.hzb textarea { min-height: 96px; resize: vertical; }
.hzb input::placeholder, .hzb textarea::placeholder { color: #6f7f96; }
.hzb input:focus, .hzb select:focus, .hzb textarea:focus { outline: none; border-color: var(--r-c); background: rgb(5 14 26 / .8); box-shadow: 0 0 0 4px rgb(226 58 67 / .25); }
.hzb [aria-invalid=true] { border-color: #ff6b73 !important; box-shadow: 0 0 0 4px rgb(255 107 115 / .2) !important; }
.hzb-tel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; }
.hzb-tel .indicatif { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--bord); border-right: 0; border-radius: 14px 0 0 14px; background: rgb(255 255 255 / .06); font-weight: 700; color: var(--t2); min-width: 64px; }
.hzb-tel input { border-radius: 0 14px 14px 0 !important; }

/* Choix sous forme de cartes */
.hzb-question { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.hzb-question legend { margin: 0 0 10px; padding: 0; font-weight: 750; font-size: 16px; }
.hzb-question legend small { display: block; font-weight: 500; font-size: 13.5px; color: var(--t3); }
.hzb-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 10px; }
.hzb-option { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 34px 12px 14px; border-radius: 14px; border: 1px solid var(--bord); background: rgb(255 255 255 / .04); cursor: pointer; transition: transform .2s, border-color .25s, background .25s, box-shadow .25s; font-size: 14.5px; line-height: 1.35; }
.hzb-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hzb-option .e { flex: none; font-size: 22px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.hzb-option:hover { transform: translateY(-2px); border-color: rgb(255 255 255 / .3); }
.hzb-option:has(input:checked) { border-color: var(--r); background: linear-gradient(135deg, rgb(226 58 67 / .24), rgb(226 58 67 / .08)); box-shadow: 0 14px 30px -18px rgb(226 58 67 / .9); }
.hzb-option:has(input:checked) .e { transform: scale(1.25) rotate(-6deg); }
.hzb-option:has(input:checked)::after { content: "✓"; position: absolute; top: 8px; right: 10px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--r); color: #fff; font-size: 12px; font-weight: 800; animation: hzb-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.hzb-option:has(input:focus-visible) { outline: 3px solid var(--r-c); outline-offset: 2px; }
@keyframes hzb-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* Récapitulatif */
.hzb-recap { display: grid; gap: 10px; margin: 0 0 20px; padding: 16px; border-radius: 18px; background: rgb(255 255 255 / .05); border: 1px solid var(--bord); }
.hzb-recap div { display: flex; gap: 12px; align-items: baseline; }
.hzb-recap dt { flex: none; width: 110px; color: var(--t3); font-size: 13.5px; }
.hzb-recap dd { margin: 0; font-weight: 650; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; flex: 1; }
.hzb-recap .modif { margin-left: auto; color: var(--r-c); background: none; border: 0; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hzb-case { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 0; font-size: 14px; color: var(--t2); cursor: pointer; }
.hzb-case input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--r); }
.hzb-case a { color: var(--r-c); }
.hzb-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Boutons */
.hzb-actions { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 24px; flex-wrap: wrap; }
.hzb-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 26px; border: 0; border-radius: 999px; font-weight: 750; font-size: 16px; line-height: 1.2; cursor: pointer; text-decoration: none; overflow: hidden; transition: transform .25s, box-shadow .25s, opacity .2s; }
.hzb-btn.principal { color: #fff; background: linear-gradient(135deg, var(--r), var(--r-f)); box-shadow: 0 18px 40px -16px rgb(226 58 67 / .95); }
.hzb-btn.principal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%); transform: translateX(-100%); animation: hzb-balaye 3.2s ease-in-out infinite; }
.hzb-btn.principal:hover { transform: translateY(-2px); box-shadow: 0 24px 46px -16px rgb(226 58 67 / 1); }
.hzb-btn.secondaire { color: var(--t); background: rgb(255 255 255 / .07); border: 1px solid var(--bord); }
.hzb-btn.secondaire:hover { background: rgb(255 255 255 / .12); }
.hzb-btn.wa { color: #04230f; background: var(--wa); box-shadow: 0 18px 40px -16px rgb(37 211 102 / .9); }
.hzb-btn.wa:hover { transform: translateY(-2px); }
.hzb-btn:disabled { opacity: .6; cursor: wait; }
.hzb-btn .rond { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgb(255 255 255 / .35); border-top-color: #fff; animation: hzb-tourne .8s linear infinite; }
@keyframes hzb-balaye { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes hzb-tourne { to { transform: rotate(360deg); } }
.hzb-erreur { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: rgb(255 82 90 / .14); border: 1px solid rgb(255 107 115 / .4); color: #ffd1d4; font-weight: 600; font-size: 14.5px; }
.hzb-erreur:empty { display: none; }

/* Succès */
.hzb-succes { text-align: center; }
.hzb-coche { width: 96px; height: 96px; margin: 6px auto 16px; }
.hzb-coche circle { fill: none; stroke: var(--ok); stroke-width: 4; stroke-dasharray: 290; stroke-dashoffset: 290; animation: hzb-trace .8s cubic-bezier(.6, 0, .3, 1) forwards; }
.hzb-coche path { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: hzb-trace .45s .65s cubic-bezier(.6, 0, .3, 1) forwards; }
.hzb-coche { filter: drop-shadow(0 10px 30px rgb(57 217 138 / .55)); }
@keyframes hzb-trace { to { stroke-dashoffset: 0; } }
.hzb-date-grande { display: inline-block; margin: 6px 0 16px; padding: 12px 20px; border-radius: 16px; background: rgb(255 255 255 / .07); border: 1px solid var(--bord); font-size: 18px; font-weight: 750; }
.hzb-elan { position: relative; margin: 22px 0 18px; padding: 22px; border-radius: 22px; text-align: left; background: linear-gradient(140deg, rgb(37 211 102 / .2), rgb(37 211 102 / .05) 60%), rgb(255 255 255 / .04); border: 1px solid rgb(37 211 102 / .45); overflow: hidden; }
.hzb-elan::before { content: ""; position: absolute; inset: -60% -20% auto auto; width: 70%; height: 140%; background: radial-gradient(circle, rgb(37 211 102 / .3), transparent 65%); animation: hzb-flotte 9s ease-in-out infinite alternate; }
.hzb-elan > * { position: relative; }
.hzb-elan h3 { margin: 0 0 6px; font-size: 20px; }
.hzb-elan p { margin: 0 0 14px; color: var(--t2); }
.hzb-gains { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; }
.hzb-comment { margin: 0 0 6px !important; color: var(--t) !important; }
.hzb-gestes { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 6px; color: var(--t2); font-size: 15px; }
.hzb-gestes li::marker { color: var(--wa); font-weight: 800; }
.hzb-mot { display: inline-block; padding: 1px 8px; border-radius: 8px; background: rgb(37 211 102 / .18); color: #c9f7dc; font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; }
.hzb-note { margin: 14px 0 0 !important; font-size: 13px; color: var(--t3) !important; }
.hzb-elan .badge { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; background: var(--wa); color: #04230f; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; animation: hzb-pouls-vert 2s infinite; }
@keyframes hzb-pouls-vert { 0% { box-shadow: 0 0 0 0 rgb(37 211 102 / .6); } 70% { box-shadow: 0 0 0 12px rgb(37 211 102 / 0); } 100% { box-shadow: 0 0 0 0 rgb(37 211 102 / 0); } }
.hzb-suite { display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; text-align: left; counter-reset: s; }
.hzb-suite li { position: relative; padding: 0 0 16px 46px; color: var(--t2); font-size: 14.5px; counter-increment: s; }
.hzb-suite li::before { content: counter(s); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgb(255 255 255 / .08); border: 1px solid var(--bord); color: var(--t); font-weight: 800; font-size: 13px; }
.hzb-suite li::after { content: ""; position: absolute; left: 15px; top: 30px; bottom: 2px; width: 1px; background: var(--bord); }
.hzb-suite li:last-child::after { display: none; }
.hzb-suite b { display: block; color: var(--t); }
.hzb-liens { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.hzb-compte { display: flex; justify-content: center; gap: 10px; margin: 8px 0 18px; }
.hzb-compte div { min-width: 72px; padding: 10px 8px; border-radius: 14px; background: rgb(255 255 255 / .06); border: 1px solid var(--bord); }
.hzb-compte b { display: block; font-size: 26px; line-height: 1.1; }
.hzb-compte span { font-size: 11.5px; color: var(--t3); text-transform: uppercase; letter-spacing: .08em; }
.hzb-confettis { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.hzb-chargement { display: grid; gap: 10px; }
.hzb-chargement i { display: block; height: 52px; border-radius: 14px; background: linear-gradient(90deg, rgb(255 255 255 / .05), rgb(255 255 255 / .12), rgb(255 255 255 / .05)); background-size: 200% 100%; animation: hzb-reflet 1.4s linear infinite; }
.hzb-pied { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 28px; color: var(--t3); font-size: 13px; }
.hzb-pied a { color: var(--t2); }

@media (max-width: 960px) {
  .hzb-scene { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* Sur téléphone, le parcours vient juste après le titre ; les atouts suivent. */
  .hzb-intro { display: contents; }
  .hzb-sur, .hzb h1, .hzb-chapo { order: 0; }
  .hzb h1 { margin: 4px 0 0; }
  .hzb-chapo { margin: 0; font-size: 16.5px; }
  .hzb-carte { order: 1; }
  .hzb-atouts { order: 2; margin: 8px 0 0; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
  .hzb-confiance { order: 3; }
  .hzb-sur { justify-self: start; }
}
@media (max-width: 560px) {
  .hzb-grille2 { grid-template-columns: minmax(0, 1fr); }
  .hzb-progres li { font-size: 10.5px; letter-spacing: .03em; }
  .hzb-progres li:not(.en-cours) { color: transparent; }
  .hzb-progres li:not(.en-cours)::before { margin-bottom: 0; }
  .hzb-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hzb-option { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 28px 12px 12px; font-size: 13.5px; }
  .hzb-question[data-cle=objectif] .hzb-options, .hzb-question[data-cle=canal] .hzb-options { grid-template-columns: minmax(0, 1fr); }
  .hzb-question[data-cle=objectif] .hzb-option, .hzb-question[data-cle=canal] .hzb-option { flex-direction: row; align-items: center; }
  .hzb-lien-wa span { display: none; }
  .hzb-actions .hzb-btn { flex: 1 1 auto; }
  .hzb-recap div { flex-wrap: wrap; }
  .hzb-recap dt { width: auto; }
  .hzb-interieur { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hzb *, .hzb *::before, .hzb *::after { animation: none !important; transition: none !important; }
  .hzb-coche circle, .hzb-coche path { stroke-dashoffset: 0; }
}

/* ==========================================================================
   Version lumineuse (12/11/2026) : la carte de réservation devient claire et vive sur le fond sombre,
   les atouts prennent chacun leur couleur, le décor se réchauffe (halo doré, feuilles d'érable).
   Aucun flou recalculé : dégradés seulement.
   ========================================================================== */
.hzb { --m: #0f2140; background: radial-gradient(120% 90% at 85% -10%, #2a5590 0, transparent 55%), radial-gradient(90% 80% at -10% 110%, #5a1a2a 0, transparent 52%), radial-gradient(60% 50% at 55% 105%, rgb(242 169 59 / .22) 0, transparent 60%), var(--m); }
.hzb-halo { filter: none; opacity: .6; }
.hzb-halo.a { background: radial-gradient(circle, rgb(226 58 67 / .75) 0, transparent 62%); }
.hzb-halo.b { background: radial-gradient(circle, rgb(64 132 240 / .7) 0, transparent 62%); }
.hzb-halo.c { background: radial-gradient(circle, rgb(242 169 59 / .7) 0, transparent 66%); opacity: .45; }

/* Feuilles d'érable qui tombent doucement */
.hzb-feuille { position: absolute; top: -10%; left: calc(6% + var(--i) * 16%); width: calc(20px + var(--i) * 3px); aspect-ratio: 1; opacity: .5;
  background: var(--c, #e23a43); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-21 -21 42 42'%3E%3Cpath d='M-.45 20.15l.45-8.63a.95.95 0 0 0-1.11-.98l-8.59 1.51 1.16-3.2a.65.65 0 0 0-.2-.73l-9.41-7.62 2.12-.99a.65.65 0 0 0 .34-.79l-1.86-5.72 5.42 1.15a.65.65 0 0 0 .73-.38l1.05-2.47 4.23 4.54a.65.65 0 0 0 1.11-.57l-2.04-10.52 3.27 1.89a.65.65 0 0 0 .91-.27L0-20.15l3.32 6.52a.65.65 0 0 0 .91.27l3.27-1.89-2.04 10.52a.65.65 0 0 0 1.11.57l4.23-4.54 1.05 2.47a.65.65 0 0 0 .73.38l5.42-1.15-1.86 5.72a.65.65 0 0 0 .34.79l2.12.99-9.41 7.62a.65.65 0 0 0-.2.73l1.16 3.2-8.59-1.51a.95.95 0 0 0-1.11.98l.45 8.63z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-21 -21 42 42'%3E%3Cpath d='M-.45 20.15l.45-8.63a.95.95 0 0 0-1.11-.98l-8.59 1.51 1.16-3.2a.65.65 0 0 0-.2-.73l-9.41-7.62 2.12-.99a.65.65 0 0 0 .34-.79l-1.86-5.72 5.42 1.15a.65.65 0 0 0 .73-.38l1.05-2.47 4.23 4.54a.65.65 0 0 0 1.11-.57l-2.04-10.52 3.27 1.89a.65.65 0 0 0 .91-.27L0-20.15l3.32 6.52a.65.65 0 0 0 .91.27l3.27-1.89-2.04 10.52a.65.65 0 0 0 1.11.57l4.23-4.54 1.05 2.47a.65.65 0 0 0 .73.38l5.42-1.15-1.86 5.72a.65.65 0 0 0 .34.79l2.12.99-9.41 7.62a.65.65 0 0 0-.2.73l1.16 3.2-8.59-1.51a.95.95 0 0 0-1.11.98l.45 8.63z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: hzb-chute calc(16s + var(--i) * 3s) linear infinite; animation-delay: calc(var(--i) * -4.3s); }
.hzb-feuille:nth-child(odd) { --c: #f2a93b; opacity: .42; }
@keyframes hzb-chute { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(5vw, 60vh, 0) rotate(200deg); } 100% { transform: translate3d(-3vw, 125vh, 0) rotate(420deg); } }

/* Pastille et atouts : chacun sa couleur */
.hzb-sur { background: rgb(57 217 138 / .14); border-color: rgb(57 217 138 / .45); color: #d6f8e5; }
.hzb-atouts li { backdrop-filter: none; border-color: var(--a-bord); background: linear-gradient(135deg, var(--a-fond), rgb(255 255 255 / .05)); transition: transform .3s, box-shadow .3s; }
.hzb-atouts li:hover { transform: translateX(4px); box-shadow: 0 16px 34px -20px var(--a-ombre); }
.hzb-atouts li:nth-child(1) { --a-fond: rgb(226 58 67 / .3); --a-bord: rgb(255 138 143 / .5); --a-ombre: rgb(226 58 67 / .9); --a-ic: linear-gradient(135deg, #ff6b73, #c8202b); }
.hzb-atouts li:nth-child(2) { --a-fond: rgb(242 169 59 / .28); --a-bord: rgb(255 200 110 / .5); --a-ombre: rgb(242 169 59 / .9); --a-ic: linear-gradient(135deg, #ffd27a, #e38b12); }
.hzb-atouts li:nth-child(3) { --a-fond: rgb(57 217 138 / .24); --a-bord: rgb(110 235 170 / .5); --a-ombre: rgb(37 211 102 / .9); --a-ic: linear-gradient(135deg, #6ff0a8, #18a85a); }
.hzb-atouts .ic { background: var(--a-ic); box-shadow: 0 10px 22px -10px var(--a-ombre), inset 0 1px 0 rgb(255 255 255 / .45); }
.hzb-atouts span { color: var(--t2); }

/* La carte de réservation : claire, vive, liseré dégradé */
.hzb-carte { padding: 2px; background: linear-gradient(140deg, #ff6b73, #ffc24d 45%, #5d9bff); box-shadow: 0 40px 90px -36px rgb(0 0 0 / .7), 0 0 0 6px rgb(255 255 255 / .06); }
.hzb-carte::before { background: radial-gradient(circle, rgb(255 194 77 / .45), transparent 70%); filter: none; }
.hzb-interieur { --t: #13223a; --t2: #46576f; --t3: #5a6a80; --bord: #e2e8f1; --r-c: #c8202b;
  color: var(--t); background: radial-gradient(120% 60% at 100% 0, #fff3e6 0, transparent 55%), radial-gradient(90% 50% at 0 100%, #eef4ff 0, transparent 60%), #fff; backdrop-filter: none; }
.hzb-interieur h2 { color: #0f1d33; }
.hzb-progres li::before { background: #e6ebf3; }
.hzb-progres li.en-cours::before { background: linear-gradient(90deg, var(--r-f), var(--r) 60%, #e6ebf3 60%); background-size: 200% 100%; }
.hzb-progres li.fait::before { background: linear-gradient(90deg, #ffb13d, var(--r)); }
.hzb-jour { background: #f5f8fc; border-color: var(--bord); }
.hzb-jour:hover { border-color: #ffb3b6; background: #fff; box-shadow: 0 12px 24px -16px rgb(226 58 67 / .6); }
.hzb-jour[aria-pressed=true] { background: linear-gradient(160deg, #ff5a63, var(--r-f)); color: #fff; }
.hzb-heure { background: #f5f8fc; border-color: var(--bord); color: var(--t); }
.hzb-heure:hover { background: #fff4f4; border-color: #ff8a8f; }
.hzb-heure[aria-pressed=true] { background: linear-gradient(160deg, #1b3a66, #0f2140); color: #fff; border-color: transparent; box-shadow: 0 0 0 4px rgb(255 194 77 / .55), 0 18px 36px -14px rgb(15 33 64 / .6); }
.hzb-heure[aria-pressed=true] small { color: #ffd98f; }
.hzb-interieur input:not([type=checkbox]):not([type=radio]), .hzb-interieur select, .hzb-interieur textarea { background-color: #f6f8fc; border-color: #d9e1ec; color: var(--t); }
.hzb-interieur input:focus, .hzb-interieur select:focus, .hzb-interieur textarea:focus { background-color: #fff; border-color: #ff8a8f; box-shadow: 0 0 0 4px rgb(226 58 67 / .15); }
.hzb-interieur input::placeholder, .hzb-interieur textarea::placeholder { color: #8d99ab; }
.hzb-tel .indicatif { background: #eef2f8; border-color: #d9e1ec; color: var(--t2); }
.hzb-option { background: #f6f8fc; border-color: var(--bord); color: var(--t); }
.hzb-option:hover { border-color: #ffb3b6; background: #fff; }
.hzb-option:has(input:checked) { background: linear-gradient(135deg, #fff0f0, #fff8ef); border-color: var(--r); box-shadow: 0 14px 30px -20px rgb(226 58 67 / .8); }
.hzb-recap { background: #f6f8fc; border-color: var(--bord); }
.hzb-btn.secondaire { background: #eef2f8; border-color: #d9e1ec; color: var(--t); }
.hzb-btn.secondaire:hover { background: #e4eaf3; }
.hzb-interieur .hzb-erreur { background: #fff0f1; border-color: #ffb3b8; color: #a3121c; }
.hzb-interieur .hzb-date-grande { background: linear-gradient(135deg, #fff3e6, #eef4ff); border-color: #f1dcc4; }
.hzb-interieur .hzb-elan { background: linear-gradient(140deg, #e6fbef, #f4fdf8 60%); border-color: #9be6bd; }
.hzb-interieur .hzb-elan::before { background: radial-gradient(circle, rgb(37 211 102 / .22), transparent 65%); }
.hzb-interieur .hzb-mot { background: #d6f6e4; color: #0b5a30; }
.hzb-interieur .hzb-suite li::before, .hzb-interieur .hzb-compte div { background: #f3f6fb; border-color: var(--bord); }
.hzb-interieur .hzb-coche path { stroke: #18a85a; }
.hzb-interieur .hzb-chargement i { background: linear-gradient(90deg, #eef2f8, #f9fbfd, #eef2f8); background-size: 200% 100%; }

/* ==========================================================================
   Juste milieu (12/11/2026) : carte bleu-gris clair, tuiles blanches bien séparées, texte foncé dans tous les états
   (survol, focus, sélection), aucune couleur imposée par un autre thème.
   ========================================================================== */
.hzb button { font-family: inherit; text-transform: none; }
.hzb-carte { background: linear-gradient(140deg, #ff6b73, #ffc24d 45%, #5d9bff); }
.hzb-interieur { --t: #13223a; --t2: #3d4d64; --t3: #55657c; --bord: #c3cfdf;
  background: linear-gradient(160deg, #e9eff7 0%, #dde6f2 100%); }
.hzb-progres li::before { background: #c9d4e3; }
.hzb-progres li.en-cours::before { background: linear-gradient(90deg, var(--r-f), var(--r) 60%, #c9d4e3 60%); background-size: 200% 100%; }
.hzb .hzb-jour, .hzb .hzb-heure, .hzb .hzb-option, .hzb .hzb-recap { background: #fff; border: 1px solid #c3cfdf; color: #13223a; box-shadow: 0 2px 0 #c9d4e3; }
.hzb .hzb-jour:hover, .hzb .hzb-jour:focus-visible, .hzb .hzb-heure:hover, .hzb .hzb-heure:focus-visible, .hzb .hzb-option:hover { background: #fff6f6; border-color: #e23a43; color: #13223a; box-shadow: 0 10px 22px -14px rgb(226 58 67 / .7); }
.hzb .hzb-jour small, .hzb .hzb-heure small { color: #55657c; }
.hzb .hzb-jour span { color: #3d4d64; }
.hzb .hzb-jour[aria-pressed=true], .hzb .hzb-jour[aria-pressed=true]:hover { background: linear-gradient(160deg, #ff5a63, #c8202b); border-color: transparent; color: #fff; }
.hzb .hzb-jour[aria-pressed=true] small, .hzb .hzb-jour[aria-pressed=true] span { color: #ffe4e5; }
.hzb .hzb-heure[aria-pressed=true], .hzb .hzb-heure[aria-pressed=true]:hover { background: linear-gradient(160deg, #1b3a66, #0f2140); border-color: transparent; color: #fff; }
.hzb .hzb-heure[aria-pressed=true] small { color: #ffd98f; }
.hzb .hzb-option:has(input:checked) { background: #fff1ef; border-color: #e23a43; color: #13223a; }
.hzb-interieur input:not([type=checkbox]):not([type=radio]), .hzb-interieur select, .hzb-interieur textarea { background-color: #fff; border-color: #b9c6d8; }
.hzb-tel .indicatif { background: #f1f5fa; border-color: #b9c6d8; }
.hzb .hzb-btn.secondaire, .hzb .hzb-btn.secondaire:hover { background: #fff; border: 1px solid #b9c6d8; color: #13223a; }
.hzb .hzb-btn.principal, .hzb .hzb-btn.principal:hover, .hzb .hzb-btn.principal:focus { color: #fff; }
.hzb .hzb-btn.wa, .hzb .hzb-btn.wa:hover { color: #04230f; }
.hzb .hzb-recap .modif, .hzb .hzb-recap .modif:hover { background: none; color: #c8202b; box-shadow: none; }
.hzb-interieur .hzb-date-grande, .hzb-interieur .hzb-suite li::before, .hzb-interieur .hzb-compte div { background: #fff; border-color: #c3cfdf; }
.hzb-interieur .hzb-elan { background: linear-gradient(140deg, #dff7ea, #eefbf4 60%); border-color: #7fd6a6; }
@media (max-width: 960px) { .hzb-halo { animation: none; } .hzb-feuille:nth-child(n+8) { display: none; } }
/* Le décor (feuilles, halos) ne doit jamais faire glisser la page sur le côté, même quand un champ prend le focus. */
.hzb, .hzb-fond { overflow: clip; }
.hzb a { color: inherit; }
.hzb-pied a, .hzb-case a { color: var(--r-c); }
.hzb-pied a { color: var(--t2); }
.hzb .hzb-lien-wa, .hzb .hzb-lien-wa:hover { color: #04230f; }