/* ═══════════════════════════════════════════════════════════
   SG BÂTIMENT — Parcours de demande de devis
   S'appuie sur les variables de sg-batiment-style.css
   ═══════════════════════════════════════════════════════════ */

#sgDevis { max-width: 780px; }

.sgd-card {
  background: var(--white);
  border: 1px solid var(--border-s);
  border-radius: var(--r);
  padding: 40px 40px 32px;
  box-shadow: var(--sh-s);
}

/* ── Progression : un filet, pas une barre colorée ────────── */
.sgd-prog { margin-bottom: 30px; }
.sgd-prog-lbl {
  font-family: 'Oswald', sans-serif;
  font-weight: 500; text-transform: uppercase; letter-spacing: .12em;
  font-size: .68rem; color: var(--ink-l); margin-bottom: 8px;
}
.sgd-prog-bar { height: 2px; background: var(--stone); position: relative; }
.sgd-prog-bar i {
  position: absolute; inset: 0 auto 0 0;
  background: var(--orange); transition: width .35s cubic-bezier(.4,0,.2,1);
}

/* ── Titres ───────────────────────────────────────────────── */
.sgd-h {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: -.005em;
  line-height: 1.06; font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  color: var(--ink); text-align: left; margin-bottom: 10px;
}
.sgd-sub {
  color: var(--ink-m); font-size: .95rem; line-height: 1.6;
  margin-bottom: 28px; max-width: 56ch;
}
.sgd-qlbl {
  font-family: 'Oswald', sans-serif;
  font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
  font-size: .72rem; color: var(--ink-s);
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
  margin: 26px 0 14px;
}
.sgd-qlbl:first-child { margin-top: 0; }

/* ── Choix ────────────────────────────────────────────────── */
.sgd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sgd-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sgd-grid-3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 18px; }
.sgd-grid-3 .sgd-opt { padding-top: 12px; padding-bottom: 12px; }
.sgd-grid.err, .sgd-grid-2.err { outline: 1px solid var(--orange); outline-offset: 6px; }

.sgd-tile {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 16px 18px; background: var(--white);
  border: 1px solid var(--border-s); border-radius: var(--r);
  transition: border-color .18s, background .18s;
}
.sgd-tile:hover { border-color: var(--ink-l); }
.sgd-tile.on { border-color: var(--orange); background: var(--orange-pale); }
.sgd-tile-n {
  font-family: 'Oswald', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
  font-size: .92rem; color: var(--ink); line-height: 1.2;
}
.sgd-tile-a { font-size: .82rem; color: var(--ink-m); }

.sgd-opt {
  text-align: left; padding: 14px 16px; font-size: .9rem; line-height: 1.4;
  color: var(--ink-s); background: var(--white);
  border: 1px solid var(--border-s); border-radius: var(--r);
  transition: border-color .18s, background .18s;
}
.sgd-opt:hover { border-color: var(--ink-l); }
.sgd-opt.on {
  border-color: var(--orange); background: var(--orange-pale);
  color: var(--ink); font-weight: 500;
}

/* ── Champs ───────────────────────────────────────────────── */
.sgd-field { margin: 20px 0; }
.sgd-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.sgd-lbl {
  display: block; font-family: 'Oswald', sans-serif;
  font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
  font-size: .7rem; color: var(--ink-s); margin-bottom: 7px;
}
.sgd-lbl em { text-transform: none; letter-spacing: 0; font-style: normal; color: var(--ink-l); }
.sgd-input {
  width: 100%; padding: 12px 14px; font-family: 'DM Sans', sans-serif;
  font-size: .95rem; color: var(--ink); background: var(--white);
  border: 1px solid var(--border-s); border-radius: var(--r);
  transition: border-color .18s;
}
.sgd-input:focus { outline: none; border-color: var(--orange); }
.sgd-input.err { border-color: var(--orange); background: var(--orange-pale); }
.sgd-ta { resize: vertical; min-height: 82px; line-height: 1.55; }
.sgd-hide { display: none; }
.sgd-help { font-size: .84rem; color: var(--ink-l); margin-top: 7px; min-height: 1.2em; }
.sgd-help.ok { color: var(--ink-m); }
.sgd-err { color: var(--orange-d); font-size: .86rem; margin-top: 14px; }
.sgd-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.sgd-check {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  margin: 16px 0 4px; font-size: .88rem; color: var(--ink-s); line-height: 1.5;
}
.sgd-check input { margin-top: 3px; accent-color: var(--orange); width: 16px; height: 16px; flex: none; }
.sgd-check em { font-style: normal; color: var(--ink-l); }

/* ── Saisie assistée de la commune ────────────────────────── */
.sgd-auto { position: relative; }
.sgd-sugg {
  display: none; list-style: none; margin: 0; padding: 0;
  position: absolute; left: 0; right: 0; top: calc(100% - 1px); z-index: 20;
  max-height: 244px; overflow-y: auto; background: var(--white);
  border: 1px solid var(--orange); border-top-color: var(--border-s);
  box-shadow: var(--sh-m);
}
.sgd-sugg.on { display: block; }
.sgd-sugg-i {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 11px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.sgd-sugg-i:last-child { border-bottom: none; }
.sgd-sugg-i:hover, .sgd-sugg-i.on { background: var(--orange-pale); }
.sgd-sugg-n { font-size: .93rem; color: var(--ink); }
.sgd-sugg-d {
  flex: none; font-family: 'Oswald', sans-serif;
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .66rem; color: var(--ink-l);
}

/* ── Photos ───────────────────────────────────────────────── */
.sgd-drop {
  border: 1px dashed var(--stone-d); border-radius: var(--r);
  padding: 30px 22px; text-align: center; cursor: pointer;
  background: var(--cream); transition: border-color .18s, background .18s;
}
.sgd-drop:hover { border-color: var(--orange); background: var(--orange-pale); }
.sgd-drop.busy { opacity: .55; pointer-events: none; }
.sgd-drop-t {
  font-family: 'Oswald', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  font-size: .95rem; color: var(--ink); margin-bottom: 5px;
}
.sgd-drop-s { font-size: .85rem; color: var(--ink-m); }
.sgd-file { display: none; }

.sgd-thumbs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.sgd-thumb { position: relative; width: 84px; height: 84px; }
.sgd-thumb img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--border-s); }
.sgd-thumb-x {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px;
  line-height: 20px; font-size: 15px; color: var(--white); background: var(--ink);
  border-radius: 50%; text-align: center;
}
.sgd-thumb-n {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  letter-spacing: .1em; font-size: .68rem; color: var(--ink-l);
}
.sgd-note {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: .87rem; line-height: 1.6; color: var(--ink-m);
}
.sgd-note strong { color: var(--ink-s); font-weight: 500; }

/* ── Pied de carte ────────────────────────────────────────── */
.sgd-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--border);
}
.sgd-back {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .74rem; color: var(--ink-l);
}
.sgd-back:hover { color: var(--ink); }
.sgd-next {
  margin-left: auto; padding: 14px 30px;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; font-size: .84rem;
  color: var(--white); background: var(--orange);
  border-radius: var(--r); transition: background .18s;
}
.sgd-next:hover { background: var(--orange-d); }

/* ── Attente ──────────────────────────────────────────────── */
.sgd-wait { text-align: center; padding: 60px 40px; color: var(--ink-m); }
.sgd-spin {
  width: 26px; height: 26px; margin: 0 auto 16px;
  border: 2px solid var(--stone); border-top-color: var(--orange);
  border-radius: 50%; animation: sgdSpin .8s linear infinite;
}
@keyframes sgdSpin { to { transform: rotate(360deg); } }

/* ── Résultat ─────────────────────────────────────────────── */
.sgd-promesse {
  font-size: 1.02rem; line-height: 1.68; color: var(--ink-s);
  max-width: 60ch; margin-bottom: 30px;
}
.sgd-promesse strong { color: var(--ink); font-weight: 600; }

.sgd-recap { border-top: 1px solid var(--ink); }
.sgd-recap-l {
  display: flex; gap: 20px; padding: 11px 0;
  border-bottom: 1px solid var(--border); font-size: .9rem;
}
.sgd-recap-k {
  flex: 0 0 168px; font-family: 'Oswald', sans-serif;
  font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
  font-size: .68rem; color: var(--ink-l); padding-top: 3px;
}
.sgd-recap-v { color: var(--ink-s); }

.sgd-controle { margin-top: 22px; font-size: .87rem; line-height: 1.6; color: var(--ink-m); }
.sgd-controle .sgd-k {
  display: block; font-family: 'Oswald', sans-serif;
  font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
  font-size: .68rem; color: var(--ink-l); margin-bottom: 5px;
}

.sgd-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.sgd-wa, .sgd-tel {
  flex: 1 1 auto; text-align: center; padding: 14px 24px;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; font-size: .82rem;
  border-radius: var(--r); transition: opacity .18s, background .18s;
}
.sgd-wa { background: #25d366; color: #fff; }
.sgd-wa:hover { opacity: .88; }
.sgd-tel { border: 1px solid var(--ink); color: var(--ink); }
.sgd-tel:hover { background: var(--ink); color: var(--white); }
.sgd-echec {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--orange);
  font-size: .87rem; line-height: 1.6; color: var(--orange-d);
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 720px) {
  .sgd-card { padding: 26px 20px 22px; }
  .sgd-grid, .sgd-grid-2, .sgd-2col { grid-template-columns: 1fr; }
  .sgd-2col { display: block; }
  .sgd-recap-l { flex-direction: column; gap: 2px; }
  .sgd-recap-k { flex: none; padding-top: 0; }
  .sgd-next { width: 100%; text-align: center; }
  .sgd-foot { flex-direction: column-reverse; align-items: stretch; }
  .sgd-back { text-align: center; padding: 8px 0; }
  .sgd-acts { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════
   Page /devis/ — mise en page autour du parcours
   ═══════════════════════════════════════════════════════════ */
.devis-chapo {
  max-width: 74ch; font-size: 1.02rem; line-height: 1.72;
  color: var(--ink-m); margin-bottom: 42px;
}
.devis-layout { grid-template-columns: 1.4fr .78fr; gap: 52px; }
#sgDevis { max-width: none; }

.devis-aside { position: sticky; top: calc(var(--nav-h) + 24px); }
.devis-etapes-h {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: .13em; font-size: .7rem;
  color: var(--ink-l); padding-bottom: 10px;
  border-bottom: 1px solid var(--ink); margin-bottom: 22px;
}
.devis-temps { display: flex; gap: 16px; margin-bottom: 22px; }
.devis-temps-n {
  flex: none; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 1.35rem; line-height: 1; color: var(--stone-d);
}
.devis-temps strong {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; font-size: .86rem;
  color: var(--ink); margin-bottom: 4px;
}
.devis-temps p { font-size: .87rem; line-height: 1.62; color: var(--ink-m); }

.devis-contact { margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--border); }
.devis-rgpd {
  margin-top: 18px; font-size: .78rem; line-height: 1.6; color: var(--ink-l);
}
.devis-nojs {
  border: 1px solid var(--border-s); border-radius: var(--r);
  padding: 26px; background: var(--white); font-size: .92rem; line-height: 1.7;
}
.devis-nojs a { color: var(--orange-d); text-decoration: underline; }

@media (max-width: 980px) {
  .devis-layout { grid-template-columns: 1fr; gap: 44px; }
  .devis-aside { position: static; }
}

/* ── Bascule vers le devis à distance (demande sans photo) ─────────── */
.sgd-bascule {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--ink);
}
.sgd-bascule .sgd-k {
  display: block; font-family: 'Oswald', sans-serif;
  font-weight: 500; text-transform: uppercase; letter-spacing: .12em;
  font-size: .68rem; color: var(--ink-l); margin-bottom: 8px;
}
.sgd-bascule p {
  font-size: .92rem; line-height: 1.62; color: var(--ink-s); max-width: 58ch;
}
.sgd-photolien {
  display: inline-block; margin-top: 14px; padding: 12px 24px;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; font-size: .8rem;
  color: var(--white); background: var(--ink); border-radius: var(--r);
  transition: background .18s;
}
.sgd-photolien:hover { background: var(--orange); }

/* 26/09/2026 — étape photos : l'ajout de photos devient l'action principale */
.sgd-drop { border: 2px solid var(--orange); background: var(--orange-pale); padding: 26px 22px; }
.sgd-drop-t { color: var(--orange-d); font-size: 1.05rem; }
.sgd-next.sgd-next--ghost { background: transparent; color: var(--ink); border: 1px solid var(--stone-d, rgba(28,24,19,.16)); }
.sgd-next.sgd-next--ghost:hover { background: var(--cream); }
@media (max-width: 560px) { .sgd-grid-3 { grid-template-columns: repeat(2, 1fr); } }


/* 23/10/2026 — haut de page resserré : la première question doit être visible sans défiler */
.page-hero--devis{padding-top:104px!important;padding-bottom:clamp(12px,2vw,24px)!important;min-height:0!important}
.page-hero--devis h1{margin-bottom:.35em}
.page-hero--devis + .page-section{padding-top:clamp(12px,2vw,28px)!important}
@media (max-width:760px){
  .page-hero--devis .breadcrumb{display:none}
  .page-hero--devis h1{font-size:clamp(30px,8.5vw,40px);line-height:1.05}
  .page-hero--devis .page-hero-sub{font-size:15px;margin-top:6px}
}

/* ── Rappel de la demande (ajout 31/10/2026) ──────────────────────── */
.sgd-rappel{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin:-14px 0 20px;font-size:.92rem;line-height:1.55;color:var(--ink-m)}
.sgd-rappel b{font-weight:600;color:var(--ink)}
.sgd-rappel button{background:none;border:0;padding:6px 0;margin:-6px 0;font:inherit;font-size:.86rem;color:var(--orange);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sgd-rappel button:hover{color:var(--ink)}

/* ── Barre de contact mobile sur /devis/ (ajout 31/10/2026) ────────── */
/* Pas de bouton vers la page où l'on est déjà : Appeler devient l'action principale. */
body:has(#sgDevis) .sg-dock a.p[href="/devis/"]{display:none}
body:has(#sgDevis) .sg-dock a{flex:1 1 0}
body:has(#sgDevis) .sg-dock a[href^="tel:"]{background:var(--orange,#E8651A);color:#fff}
/* Pendant la saisie, la barre remonterait au-dessus du clavier et cacherait le champ. */
body.sgd-saisie .sg-dock{display:none}

/* En-tête de /devis/ (ajout 31/10/2026) : sur téléphone, le bouton orange appelle au lieu de renvoyer vers la page en cours ;
   sur grand écran, le numéro est déjà affiché à côté. */
@media (min-width:1101px){.nav-actions .btn-devis--appel{display:none}}
.btn-devis--appel{white-space:nowrap}