/* estimation_tunnel.css — Tunnel d'estimation public Althenor.
   Charte graphique Althenor (©Nolan Miton V1.3) : police GILROY, formes arrondies,
   Blanc Minéral. Couleur de marque (Vert Impérial) REMPLACÉE par un bleu impérial
   (choix Vincent : du bleu, pas de vert). Mobile-first, 100% responsive. */

@font-face { font-family: "Gilroy"; src: url("/static/fonts/gilroy/Gilroy-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("/static/fonts/gilroy/Gilroy-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("/static/fonts/gilroy/Gilroy-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("/static/fonts/gilroy/Gilroy-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("/static/fonts/gilroy/Gilroy-Heavy.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --et-blue: #15407A;          /* bleu impérial (remplace le Vert Impérial #0A401C) */
  --et-blue-d: #0E2E59;
  --et-blue-l: #E4EAF3;        /* tint de sélection */
  --et-cream: #EEEDE2;         /* Blanc Minéral (charte) */
  --et-bg: #FAF9F4;            /* fond chaud proche du Blanc Minéral */
  --et-ink: #22303F;
  --et-title: #13294A;
  --et-muted: #6F7682;
  --et-border: #DCD9CE;        /* bordure tirée du crème */
  --et-ok: #15803D;
  --et-err: #B3261E;
  --et-radius: 14px;
  --et-shadow: 0 1px 3px rgba(14, 46, 89, .08), 0 10px 28px rgba(14, 46, 89, .07);
  --et-font: "Gilroy", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--et-bg); color: var(--et-ink);
  font-family: var(--et-font); font-weight: 500;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: contain;
}

img, svg, canvas { max-width: 100%; }

/* ── Header + barre de progression ─────────────────────────────────────── */
.et-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-left)) 12px;
  background: #fff; border-bottom: 1px solid var(--et-border);
}
.et-logo-link { display: inline-flex; align-items: center; flex-shrink: 0; }
.et-logo-img { height: 30px; width: auto; display: block; }
.et-back {
  border: 0; background: transparent; color: var(--et-blue);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 4px 6px;
  border-radius: 8px; flex-shrink: 0;
}
.et-back[hidden] { display: none; }
.et-back:hover { background: var(--et-blue-l); }
.et-progress { flex: 1; height: 6px; background: var(--et-cream); border-radius: 999px; overflow: hidden; }
.et-progress-fill { display: block; height: 100%; width: 0; background: var(--et-blue); border-radius: 999px; transition: width .4s ease; }

/* ── Scène + animation d'écran ─────────────────────────────────────────── */
.et-main { flex: 1; padding: 26px 16px 40px; }
.et-stage { max-width: 600px; margin: 0 auto; }
.et-screen { animation: et-in .35s ease; }
@keyframes et-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Titres / textes (Gilroy) ──────────────────────────────────────────── */
.et-h1 { font-weight: 800; color: var(--et-title); font-size: 1.85rem; line-height: 1.15; letter-spacing: -.01em; margin: 6px 0 6px; }
.et-q { font-weight: 800; color: var(--et-title); font-size: 1.5rem; line-height: 1.2; letter-spacing: -.01em; margin: 4px 0 18px; }
.et-sub { color: var(--et-muted); margin: 0 0 18px; font-size: 1rem; font-weight: 500; }
.et-info {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--et-cream); border-radius: 12px; padding: 12px 14px;
  color: #5d6b54; font-size: .86rem; margin-top: 16px; font-weight: 500;
}
.et-info .et-i { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--et-blue); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .72rem; }

/* ── Cartes d'option ───────────────────────────────────────────────────── */
.et-options { display: grid; gap: 12px; }
.et-card {
  position: relative; display: flex; align-items: center; gap: 14px;
  background: #fff; border: 2px solid var(--et-border); border-radius: var(--et-radius);
  padding: 16px; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.et-card:hover { border-color: var(--et-blue); box-shadow: var(--et-shadow); }
.et-card.is-selected { border-color: var(--et-blue); background: var(--et-blue-l); }
.et-card-ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: var(--et-cream); color: var(--et-blue); display: grid; place-items: center; font-size: 1.35rem; }
.et-card-label { flex: 1; font-weight: 600; }
.et-card-stars { color: var(--et-blue); letter-spacing: 2px; font-size: 1.1rem; }
.et-radio { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--et-border); transition: all .15s; }
.et-card.is-selected .et-radio { border-color: var(--et-blue); background: var(--et-blue); box-shadow: inset 0 0 0 4px #fff; }

/* ── Pastilles (étage) ─────────────────────────────────────────────────── */
.et-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.et-pill { min-width: 56px; padding: 12px 14px; text-align: center; background: #fff; border: 2px solid var(--et-border); border-radius: 12px; cursor: pointer; font-weight: 600; transition: all .15s; }
.et-pill:hover { border-color: var(--et-blue); }
.et-pill.is-selected { border-color: var(--et-blue); background: var(--et-blue); color: #fff; }

/* ── Cases à cocher (annexes) ──────────────────────────────────────────── */
.et-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.et-check { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid var(--et-border); border-radius: var(--et-radius); padding: 14px; cursor: pointer; transition: all .15s; }
.et-check:hover { border-color: var(--et-blue); }
.et-check.is-selected { border-color: var(--et-blue); background: var(--et-blue-l); }
.et-check-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--et-cream); color: var(--et-blue); display: grid; place-items: center; flex-shrink: 0; }
.et-check-label { flex: 1; font-weight: 600; font-size: .95rem; }
.et-box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--et-border); flex-shrink: 0; display: grid; place-items: center; color: #fff; font-size: .8rem; }
.et-check.is-selected .et-box { background: var(--et-blue); border-color: var(--et-blue); }

/* ── Champs de saisie ──────────────────────────────────────────────────── */
.et-field { margin-bottom: 14px; }
.et-field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: .92rem; color: var(--et-title); }
.et-input, .et-suffix-input input { width: 100%; padding: 13px 14px; font-size: 16px; font-family: var(--et-font); font-weight: 500; border: 2px solid var(--et-border); border-radius: 11px; background: #fff; color: var(--et-ink); }
.et-input:focus, .et-suffix-input input:focus { outline: none; border-color: var(--et-blue); }
.et-suffix-input { position: relative; }
.et-suffix-input .et-suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--et-muted); font-weight: 600; pointer-events: none; }
.et-row { display: flex; gap: 12px; }
.et-row > * { flex: 1; }

/* Autocomplete d'adresse */
.et-adr-wrap { position: relative; }
.et-suggestions { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: #fff; border: 2px solid var(--et-blue); border-top: 0; border-radius: 0 0 11px 11px; max-height: 240px; overflow: auto; display: none; box-shadow: var(--et-shadow); }
.et-suggestion { padding: 11px 14px; cursor: pointer; font-size: .95rem; }
.et-suggestion:hover, .et-suggestion.is-active { background: var(--et-blue-l); }

/* Carte Leaflet */
.et-map { height: 240px; border-radius: var(--et-radius); border: 1px solid var(--et-border); margin: 4px 0 12px; }
.et-pin { background: var(--et-blue); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--et-blue), 0 2px 6px rgba(0,0,0,.3); }

/* ── Boutons ───────────────────────────────────────────────────────────── */
.et-actions { margin-top: 22px; display: flex; gap: 12px; }
.et-btn { flex: 1; padding: 15px 18px; border: 0; border-radius: 11px; font-size: 1.05rem; font-weight: 700; cursor: pointer; font-family: var(--et-font); transition: background .15s, opacity .15s; }
.et-btn-primary { background: var(--et-blue); color: #fff; }
.et-btn-primary:hover { background: var(--et-blue-d); }
.et-btn-primary:disabled { background: var(--et-cream); color: #b0ab98; cursor: default; }
.et-btn-ghost { background: #fff; color: var(--et-ink); border: 2px solid var(--et-border); }
.et-btn-ghost:hover { border-color: var(--et-blue); color: var(--et-blue); }

/* ── Mention RGPD / messages ───────────────────────────────────────────── */
.et-rgpd { color: var(--et-muted); font-size: .78rem; margin-top: 16px; text-align: center; font-weight: 500; }
.et-rgpd a { color: var(--et-blue); }
.et-msg { margin-top: 14px; padding: 11px 13px; border-radius: 9px; font-size: .9rem; display: none; }
.et-msg.is-err { display: block; background: #fdecea; color: var(--et-err); }
.et-hp { position: absolute; left: -9999px; }
.et-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: .9rem; font-weight: 500; }
.et-consent input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--et-blue); }

/* ── Écran de calcul (animation) ───────────────────────────────────────── */
.et-calc { text-align: center; padding: 24px 0; }
.et-spinner { width: 54px; height: 54px; margin: 0 auto 22px; border-radius: 50%; border: 5px solid var(--et-cream); border-top-color: var(--et-blue); animation: et-spin 1s linear infinite; }
@keyframes et-spin { to { transform: rotate(360deg); } }
.et-calc-steps { list-style: none; padding: 0; margin: 18px auto 0; max-width: 380px; text-align: left; }
.et-calc-steps li { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: var(--et-muted); opacity: .5; transition: opacity .3s; font-weight: 500; }
.et-calc-steps li.is-done { opacity: 1; color: var(--et-ink); }
.et-calc-steps li .et-tick { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--et-border); display: grid; place-items: center; color: #fff; font-size: .8rem; }
.et-calc-steps li.is-done .et-tick { background: var(--et-blue); border-color: var(--et-blue); }

/* ── Écran code e-mail ─────────────────────────────────────────────────── */
.et-code-input { width: 100%; max-width: 260px; margin: 6px auto 0; display: block; text-align: center; letter-spacing: .5em; font-size: 1.5rem; font-weight: 700; font-family: var(--et-font); padding: 14px; border: 2px solid var(--et-border); border-radius: 11px; }
.et-code-input:focus { outline: none; border-color: var(--et-blue); }
.et-link { background: none; border: 0; color: var(--et-blue); cursor: pointer; font-size: .9rem; font-family: var(--et-font); text-decoration: underline; }

/* ── Écran résultat (fourchette volontairement large, sans €/m²) ───────── */
.et-result { text-align: center; }
.et-result-card { background: #fff; border: 1px solid var(--et-border); border-radius: 18px; padding: 28px 20px; box-shadow: var(--et-shadow); margin-top: 8px; }
.et-result-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; }
.et-tag { background: var(--et-cream); color: var(--et-blue-d); border-radius: 999px; padding: 5px 13px; font-size: .82rem; font-weight: 600; }
.et-result-label { color: var(--et-muted); font-size: .95rem; margin-bottom: 6px; font-weight: 500; }
.et-range { font-weight: 800; color: var(--et-blue); font-size: 2.1rem; line-height: 1.15; letter-spacing: -.01em; }
.et-result-note { color: var(--et-muted); font-size: .85rem; margin-top: 18px; font-weight: 500; }

/* ── Écran prise de rendez-vous (créneaux simples) ─────────────────────── */
.et-rdv-label { display: block; font-weight: 700; color: var(--et-title); font-size: .92rem; margin: 0 0 10px; }
.et-days { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 22px; -webkit-overflow-scrolling: touch; }
.et-day { flex: 0 0 auto; min-width: 92px; padding: 12px 10px; text-align: center; background: #fff; border: 2px solid var(--et-border); border-radius: 12px; cursor: pointer; font-family: var(--et-font); font-weight: 600; font-size: .9rem; color: var(--et-ink); text-transform: capitalize; transition: all .15s; }
.et-day:hover { border-color: var(--et-blue); }
.et-day.is-selected { border-color: var(--et-blue); background: var(--et-blue); color: #fff; }
.et-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.et-slots-hint { grid-column: 1 / -1; color: var(--et-muted); font-weight: 500; font-size: .9rem; margin: 0; padding: 4px 0; }
.et-slot { padding: 12px 6px; text-align: center; background: #fff; border: 2px solid var(--et-border); border-radius: 11px; cursor: pointer; font-family: var(--et-font); font-weight: 600; color: var(--et-ink); transition: all .15s; }
.et-slot:hover { border-color: var(--et-blue); }
.et-slot.is-selected { border-color: var(--et-blue); background: var(--et-blue); color: #fff; }
.et-confirm-ic { width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%; background: var(--et-ok); color: #fff; display: grid; place-items: center; font-size: 2rem; font-weight: 800; }
.et-confirm-slot { font-weight: 800; color: var(--et-blue); font-size: 1.5rem; margin: 8px 0; }
.et-confirm-slot::first-letter { text-transform: uppercase; }

/* ── Footer (repris du site althenor.fr) ───────────────────────────────── */
.et-footer { background: var(--et-blue-d); color: var(--et-cream); margin-top: 40px; padding: 34px max(16px, env(safe-area-inset-left)) calc(22px + env(safe-area-inset-bottom)); }
.et-footer-inner { max-width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-start; }
.et-footer-logo { height: 34px; width: auto; }
.et-footer-cols { display: flex; flex-wrap: wrap; gap: 24px 48px; flex: 1; }
.et-footer-col { display: flex; flex-direction: column; gap: 7px; font-size: .9rem; font-weight: 500; }
.et-footer-col p { margin: 0; line-height: 1.55; }
.et-footer-col a { color: var(--et-cream); text-decoration: none; opacity: .85; }
.et-footer-col a:hover { opacity: 1; text-decoration: underline; }
.et-footer-legal { max-width: 900px; margin: 22px auto 0; font-size: .76rem; color: rgba(238,237,226,.6); border-top: 1px solid rgba(238,237,226,.18); padding-top: 14px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .et-h1 { font-size: 1.55rem; }
  .et-q { font-size: 1.3rem; }
  .et-checks { grid-template-columns: 1fr; }
  .et-actions { flex-direction: column-reverse; }
  .et-range { font-size: 1.7rem; }
  .et-slots { grid-template-columns: repeat(3, 1fr); }
  .et-confirm-slot { font-size: 1.25rem; }
}

/* ── Page d'accueil (landing marketing) ────────────────────────────────── */
.et-stage.et-stage--full { max-width: none; }
body.et-mode-landing .et-main { padding: 0; }
.et-landing { width: 100%; }

.et-hero { background: linear-gradient(180deg, var(--et-cream) 0%, #fff 100%); padding: 54px 16px 44px; }
.et-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.et-hero-title { font-weight: 800; color: var(--et-title); font-size: 2.7rem; line-height: 1.06; letter-spacing: -.02em; margin: 0 0 20px; }
.et-hl { color: var(--et-blue); }
.et-hero-bullets { list-style: none; padding: 0; margin: 0 0 26px; display: inline-flex; flex-direction: column; gap: 9px; text-align: left; color: var(--et-ink); font-weight: 600; font-size: .98rem; }
.et-hero-label { display: block; font-weight: 700; color: var(--et-title); margin-bottom: 8px; }
.et-hero-search { max-width: 540px; margin: 0 auto; }
.et-hero-cta { max-width: 540px; margin: 14px auto 0; display: block; }
.et-hero-inner .et-rgpd { max-width: 540px; margin: 14px auto 0; }

.et-wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.et-section { padding: 48px 0; }
.et-sec-title { font-weight: 800; color: var(--et-title); font-size: 1.7rem; text-align: center; letter-spacing: -.01em; margin: 0 0 28px; }
.et-args { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.et-arg { background: #fff; border: 1px solid var(--et-border); border-radius: var(--et-radius); padding: 24px 20px; text-align: center; }
.et-arg-ic { width: 54px; height: 54px; border-radius: 14px; background: var(--et-cream); color: var(--et-blue); display: grid; place-items: center; font-size: 1.5rem; margin: 0 auto 14px; }
.et-arg h3 { font-weight: 800; color: var(--et-title); font-size: 1rem; margin: 0 0 8px; }
.et-arg p { color: var(--et-muted); font-size: .88rem; margin: 0; font-weight: 500; line-height: 1.5; }

.et-band { background: var(--et-cream); padding: 48px 0; }
.et-band .et-wrap { max-width: 740px; text-align: center; }
.et-band h2 { font-weight: 800; color: var(--et-title); font-size: 1.6rem; margin: 0 0 14px; }
.et-band p { color: var(--et-ink); font-weight: 500; line-height: 1.65; margin: 0; }

.et-faq { max-width: 740px; margin: 0 auto; }
.et-faq-item { border-bottom: 1px solid var(--et-border); }
.et-faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 18px 0; font-family: var(--et-font); font-weight: 700; font-size: 1.02rem; color: var(--et-title); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.et-faq-plus { color: var(--et-blue); font-size: 1.4rem; flex-shrink: 0; transition: transform .2s; line-height: 1; }
.et-faq-item.is-open .et-faq-plus { transform: rotate(45deg); }
.et-faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; color: var(--et-muted); font-weight: 500; line-height: 1.6; }
.et-faq-item.is-open .et-faq-a { max-height: 320px; padding-bottom: 18px; }

@media (max-width: 760px) {
  .et-hero-title { font-size: 2.05rem; }
  .et-args { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .et-args { grid-template-columns: 1fr; }
}