/* ==========================================================================
   HostAura — pages internes : formulaires, contact, simulateur, légal, 404
   ========================================================================== */

/* ---------- Formulaires ---------- */
.form-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: grid; gap: 0.5rem; align-content: start; }
.field label { font-size: 0.88rem; font-weight: 600; }
.field .req { color: var(--danger); margin-left: 0.15rem; }
.field .hint { font-size: 0.8rem; color: var(--text-mute); }
.input {
  width: 100%; padding: 0.85rem 1rem; border-radius: 12px; background: var(--bg); color: var(--text);
  border: 1px solid var(--line-strong); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.input::placeholder { color: var(--text-mute); opacity: 0.75; }
.input:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line-strong)); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-solid) 20%, transparent); }
.input:user-invalid { border-color: var(--danger); }
.input:user-invalid:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 20%, transparent); }
textarea.input { min-height: 9.5rem; resize: vertical; line-height: 1.55; }
select.input { appearance: none; padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a94b5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.95rem center; }
select.input option { background: var(--surface); color: var(--text); }
input[type="date"].input { min-height: 3.05rem; }
.form-foot { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; margin-top: 1.6rem; }
.form-foot small { color: var(--text-mute); font-size: 0.8rem; max-width: 24rem; line-height: 1.5; }
.form-foot small a { text-decoration: underline; text-underline-offset: 3px; }
.btn .spin { display: none; width: 1.05em; height: 1.05em; border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.4); border-top-color: #fff; animation: spin 0.7s linear infinite; }
.btn.loading .spin { display: block; }
.btn.loading .i, .btn.loading .arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.seg { display: inline-flex; gap: 0.25rem; padding: 0.3rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.seg button { padding: 0.65rem 1.2rem; border-radius: 999px; font-size: 0.92rem; font-weight: 600; color: var(--text-dim); transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line-strong); }
.seg button:hover { color: var(--text); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact-info { display: grid; gap: 1rem; position: sticky; top: calc(var(--header-h) + 2rem); }
.contact-info h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.contact-info > p { color: var(--text-dim); }
.info-card { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.25rem; transition: border-color 0.25s, transform 0.3s var(--ease); }
a.info-card:hover { border-color: var(--brand); transform: translateX(4px); }
.info-card small { display: block; font: 500 0.72rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mute); margin-bottom: 0.4rem; }
.info-card strong { font-weight: 600; font-size: 1.02rem; }
.next-steps { margin-top: 0.8rem; display: grid; gap: 1rem; }
.next-steps h2 { font: 600 0.78rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.next-steps ol { display: grid; gap: 0.9rem; counter-reset: n; }
.next-steps li { display: grid; grid-template-columns: 1.9rem 1fr; gap: 0.9rem; color: var(--text-dim); font-size: 0.95rem; line-height: 1.5; }
.next-steps li::before { counter-increment: n; content: counter(n); display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; font: 600 0.8rem/1 var(--font-mono); color: var(--brand); background: var(--surface-2); border: 1px solid var(--line-strong); }
.next-steps li strong { color: var(--text); font-weight: 600; }
.form-card { padding: clamp(1.4rem, 3vw, 2.4rem); }
.form-card .seg { margin-bottom: 1.8rem; }
.form-card [role="tabpanel"][hidden] { display: none; }
.form-done { text-align: center; padding: 2.5rem 1rem; display: grid; gap: 1rem; justify-items: center; }
.form-done .icon-chip { width: 4rem; height: 4rem; border-radius: 50%; color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.form-done .icon-chip .i { width: 1.9rem; height: 1.9rem; stroke-width: 2.4; }
.form-done h2 { font-size: 1.7rem; }
.form-done p { color: var(--text-dim); max-width: 26rem; }
.simu-hint { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.2rem; margin-bottom: 1.5rem; border-radius: var(--r-m); background: color-mix(in srgb, var(--brand-solid) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand-solid) 28%, transparent); font-size: 0.93rem; color: var(--text-dim); }
.simu-hint .i { color: var(--brand); margin-top: 0.1em; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } .contact-info { position: static; } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } .form-foot .btn { width: 100%; white-space: normal; text-align: center; height: auto; padding-block: 0.85rem; } }

/* ---------- Simulateur de prix ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: 2rem; align-items: start; }
.scope-note { align-items: center; display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.1rem 1.3rem; margin-bottom: 1.6rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); color: var(--text-dim); font-size: 0.95rem; }
.scope-note .i { color: var(--brand); margin-top: 0.15em; }
.scope-note a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.stepper { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1.4rem; }
.stepper button { position: relative; display: grid; gap: 0.35rem; padding: 0.9rem 1rem; text-align: left; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); transition: border-color 0.25s, background 0.25s; }
.stepper button small { font: 600 0.7rem/1 var(--font-mono); letter-spacing: 0.08em; color: var(--text-mute); }
.stepper button span { font: 600 0.95rem/1.2 var(--font-display); letter-spacing: -0.01em; }
.stepper button[aria-selected="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand-solid) 9%, var(--surface)); }
.stepper button[aria-selected="true"] small { color: var(--brand); }
.stepper button.done small::after { content: " ✓"; color: var(--ok); }
.calc-panel { padding: clamp(1.3rem, 3vw, 2.2rem); display: grid; gap: 2.2rem; }
.calc-panel[hidden] { display: none; }
.group > h2 { font: 600 1.12rem/1.3 var(--font-display); letter-spacing: -0.015em; margin-bottom: 0.9rem; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.group > h2 small { font: 500 0.78rem/1 var(--font-body); color: var(--text-mute); }
.opts { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.opt { position: relative; display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.95rem 1.05rem; border-radius: 14px; background: var(--bg); border: 1px solid var(--line-strong); cursor: pointer; font-size: 0.93rem; line-height: 1.45; transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.opt:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--line-strong)); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt::before { content: ""; flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); transition: all 0.2s; }
.opt.cb::before { border-radius: 6px; }
.opt:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand-solid) 10%, var(--bg)); }
.opt:has(input:checked)::before { border-color: var(--brand-solid); background: var(--brand-solid) radial-gradient(circle, #fff 32%, transparent 36%); }
.opt.cb:has(input:checked)::before { background: var(--brand-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 80% no-repeat; }
.opt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.opt:has(input:disabled) { opacity: 0.75; cursor: default; }
.range { display: grid; gap: 0.8rem; }
.range-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.range-top output { font: 600 1.05rem/1 var(--font-mono); color: var(--brand); }
input[type="range"] { width: 100%; height: 1.5rem; background: none; appearance: none; cursor: pointer; --p: 0%; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--brand-solid) var(--p), var(--line-strong) var(--p)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: var(--line-strong); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--brand-solid); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 1.4rem; height: 1.4rem; margin-top: -0.55rem; border-radius: 50%; background: #fff; border: 3px solid var(--brand-solid); box-shadow: var(--shadow-md); transition: transform 0.2s; }
input[type="range"]::-moz-range-thumb { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; border: 3px solid var(--brand-solid); box-shadow: var(--shadow-md); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.range-ticks { display: flex; justify-content: space-between; color: var(--text-mute); font: 500 0.75rem/1 var(--font-mono); padding-inline: 0.3rem; }
.panel-nav { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.5rem; }

.calc-summary { position: sticky; top: calc(var(--header-h) + 1.5rem); padding: 1.6rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.calc-summary .btn { white-space: normal; text-align: center; width: 100%; padding-block: 0.8rem; height: auto; }
.calc-summary h2 { font: 600 0.78rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.progress { display: grid; gap: 0.5rem; font-size: 0.85rem; color: var(--text-mute); }
.progress .track { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.progress .fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad-brand); transition: width 0.5s var(--ease); }
.recap { display: grid; gap: 0.45rem; max-height: 15rem; overflow: auto; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--text-dim); }
.recap:empty { display: none; }
.recap li { display: flex; gap: 0.6rem; line-height: 1.4; }
.recap li b { flex: none; font-weight: 600; color: var(--text); }
.calc-summary .disclaimer { font-size: 0.78rem; line-height: 1.5; color: var(--text-mute); }
.calc-summary .reset { justify-self: start; font-size: 0.85rem; color: var(--text-mute); text-decoration: underline; text-underline-offset: 3px; }
.calc-summary .reset:hover { color: var(--brand); }
.calc-bar { display: none; }
@media (max-width: 1020px) {
  .calc { grid-template-columns: 1fr; }
  .calc-summary { position: static; }
  .calc-bar { display: flex; position: fixed; inset: auto 0 0 0; z-index: 90; gap: 1rem; align-items: center; justify-content: space-between; padding: 0.8rem var(--gutter) calc(0.8rem + env(safe-area-inset-bottom)); background: var(--glass); border-top: 1px solid var(--line); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }
  .calc-bar small { display: block; font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 0.3rem; }
  .calc-bar strong { font: 600 0.9rem/1.3 var(--font-body); letter-spacing: 0; display: block; white-space: nowrap; }
  body.has-calc-bar .site-footer { padding-bottom: 5rem; }
}
@media (max-width: 640px) { .stepper { grid-template-columns: repeat(2, 1fr); } }

/* Simulateur : choix du type de projet, résumé sans prix, coordonnées */
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.type-card { display: grid; gap: 0.6rem; align-content: start; padding: 1.5rem; text-align: left; cursor: pointer; }
.type-card strong { font: 600 1.2rem/1.2 var(--font-display); letter-spacing: -0.02em; margin-top: 0.4rem; }
.type-card > span:not(.icon-chip) { color: var(--text-dim); font-size: 0.93rem; line-height: 1.5; }
.type-card .go { position: absolute; right: 1.3rem; top: 1.4rem; color: var(--text-mute); transition: transform 0.3s var(--ease), color 0.2s; }
.type-card:hover .go { transform: translateX(4px); color: var(--brand); }
@media (max-width: 900px) { .type-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .type-grid { grid-template-columns: 1fr; } }
.sum-type { display: flex; gap: 0.9rem; align-items: center; }
.sum-type strong { display: block; font: 600 1.15rem/1.2 var(--font-display); letter-spacing: -0.015em; }
.mail-note { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1rem; border-radius: var(--r-m); background: color-mix(in srgb, var(--brand-solid) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand-solid) 24%, transparent); font-size: 0.86rem; color: var(--text-dim); line-height: 1.5; }
.mail-note .i { color: var(--brand); margin-top: 0.12em; flex: none; }
.lead-p { margin-top: -0.3rem; color: var(--text-dim); max-width: 38rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.group > h2 small, .field label small { font: 500 0.78rem/1 var(--font-body); color: var(--text-mute); }
.spin.dark { display: block; border-color: var(--line-strong); border-top-color: var(--brand); flex: none; width: 1.2rem; height: 1.2rem; }
.calc-done { max-width: 40rem; margin-inline: auto; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.2rem, 4vw, 2.5rem); }
.calc-done .row { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 0.8rem; }

/* ---------- Pages légales ---------- */
.doc-meta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.4rem; padding: 0.45rem 0.9rem; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font: 500 0.82rem/1 var(--font-mono); color: var(--text-mute); }
.doc-layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.doc-toc { position: sticky; top: calc(var(--header-h) + 2rem); }
.doc-toc h2 { font: 600 0.75rem/1 var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 1rem; }
.doc-toc ol { display: grid; border-left: 1px solid var(--line-strong); }
.doc-toc a { display: block; padding: 0.5rem 0 0.5rem 1rem; margin-left: -1px; border-left: 2px solid transparent; font-size: 0.88rem; line-height: 1.35; color: var(--text-mute); transition: color 0.2s, border-color 0.2s; }
.doc-toc a:hover { color: var(--text); }
.doc-toc a.on { color: var(--brand); border-left-color: var(--brand); font-weight: 600; }
.doc-body { max-width: 46rem; }
.doc-body h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: 3rem 0 1rem; padding-top: 0.5rem; }
.doc-body h2:first-child { margin-top: 0; }
.doc-body p, .doc-body li { color: var(--text-dim); line-height: 1.75; }
.doc-body p + p, .doc-body p + ul, .doc-body ul + p { margin-top: 1rem; }
.doc-body ul { display: grid; gap: 0.7rem; margin-top: 1rem; padding-left: 1.3rem; list-style: disc; }
.doc-body li::marker { color: var(--brand); }
.doc-body a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.doc-back { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; } .doc-toc { display: none; } }

/* ---------- Pages d'état (404, désabonnement) ---------- */
.state { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 100svh; padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem; text-align: center; }
.state-inner { position: relative; z-index: 1; max-width: 36rem; display: grid; gap: 1.2rem; justify-items: center; }
.state .big { font: 700 clamp(6rem, 22vw, 12rem)/0.9 var(--font-display); letter-spacing: -0.06em; }
.state h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.state p { color: var(--text-dim); }
.state .row { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 0.8rem; }
.state .icon-chip { width: 4.2rem; height: 4.2rem; border-radius: 50%; color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.state .icon-chip .i { width: 2rem; height: 2rem; stroke-width: 2.4; }
.state .code { text-align: left; font-size: 0.85rem; margin-top: 0.5rem; width: min(100%, 26rem); }