/* Page Professionnels — complète style.css */

.heros-pro h1 { font-size: clamp(2.3rem, 7vw, 4.9rem); }
.heros-faits {
  list-style: none; margin: 0 0 2.2rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; justify-content: center;
  font-family: "Jost", ui-sans-serif, sans-serif;
  font-size: .74rem; letter-spacing: .09em;
  color: rgba(255,255,255,.84);
}
.heros-faits li { display: flex; align-items: center; gap: .55rem; }
.heros-faits li::before { content: ""; width: .3rem; height: .3rem; border-radius: 50%; background: var(--bleu-doux); flex: 0 0 auto; }

.intro-large { margin-bottom: 2.4rem; }

/* formules */
.formules {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.15rem; align-items: stretch;
}
.formule {
  background: #fff; border: 1px solid var(--trait);
  padding: 1.7rem 1.5rem 1.8rem; position: relative;
  display: flex; flex-direction: column; border-radius: 2px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.formule:hover { border-color: var(--bleu-doux); box-shadow: 0 18px 40px -30px rgba(14,39,115,.55); transform: translateY(-2px); }
.formule.mise-en-avant { border: 1px solid var(--bleu); box-shadow: 0 18px 44px -28px rgba(14,39,115,.5); }
.ruban {
  position: absolute; top: -.7rem; left: 1.3rem;
  background: var(--bleu); color: #fff;
  font-family: "Jost", ui-sans-serif, sans-serif; font-weight: 500;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .25rem .6rem;
}
.formule header { border-bottom: 1px solid var(--trait); padding-bottom: 1rem; margin-bottom: 1.1rem; }
.formule h3 { font-size: 1.45rem; margin-bottom: .55rem; color: var(--bleu); }
.sur-devis {
  font-family: "Jost", ui-sans-serif, sans-serif; font-weight: 500;
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--laiton); margin: 0;
}
.formule ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; font-size: 1.04rem; line-height: 1.5; color: var(--sourdine); }
.formule li::marker { color: var(--bleu-doux); }


/* étapes */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 2.2rem; }
.etape-num {
  font-family: "Jost", ui-sans-serif, sans-serif; font-size: .9rem; font-weight: 500; color: #fff; background: var(--bleu);
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border-radius: 50%; margin-bottom: 1.1rem;
}
.etape h3 { font-size: 1.24rem; margin-bottom: .5rem; }
.etape p { color: var(--sourdine); font-size: 1.06rem; line-height: 1.6; }

/* professionnels servis */
.metiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--trait-bleu); border: 1px solid var(--trait-bleu); margin-top: 2.2rem; }
.metier { background: #fff; padding: 1.6rem 1.5rem 1.7rem; transition: background .2s ease; }
.metier:hover { background: var(--bleu-brume); }
.metier h3 { font-size: 1.18rem; margin-bottom: .5rem; color: var(--bleu); }
.metier p { color: var(--sourdine); font-size: 1.04rem; margin: 0; line-height: 1.6; }

/* formulaire */
.formulaire {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.15rem; max-width: 780px; margin-inline: auto;
}
.champ { display: flex; flex-direction: column; gap: .5rem; }
.champ-large { grid-column: 1 / -1; }
.champ label { font-family: "Jost", ui-sans-serif, sans-serif; font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.9); text-align: left; }
.champ input, .champ textarea {
  font-family: "Jost", ui-sans-serif, sans-serif; font-size: 1rem;
  padding: .8rem .9rem; border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.1); color: #fff; border-radius: 2px;
  width: 100%; max-width: 100%;
}
.champ input::placeholder, .champ textarea::placeholder { color: rgba(255,255,255,.5); }
.champ input:focus, .champ textarea:focus { outline: 2px solid #fff; outline-offset: 1px; background: rgba(255,255,255,.16); }
.champ textarea { resize: vertical; }
.form-note { font-family: "Jost", ui-sans-serif, sans-serif; font-size: .78rem; letter-spacing: .04em; color: rgba(255,255,255,.72); margin-top: .9rem; }

/* faq */
.faq { display: grid; gap: 0; max-width: 820px; border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  cursor: pointer; padding: 1.15rem 2rem 1.15rem 0; position: relative;
  font-weight: 500; font-size: 1.22rem; line-height: 1.4; list-style: none; color: var(--encre);
}
.faq summary:hover { color: var(--bleu); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  color: var(--bleu); font-size: 1.4rem; font-weight: 400; line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 2rem 1.35rem 0; color: var(--sourdine); margin: 0; font-size: 1.08rem; line-height: 1.62; max-width: 62ch; }

/* CTA téléphone en tête du bloc devis */
.devis-tel { margin: 0 0 2.2rem; }
.btn-large { font-size: .92rem; padding: 1.15rem 2.3rem; }

/* bloc de secours si la messagerie ne s'ouvre pas */
.form-secours {
  max-width: 780px; margin: 2rem auto 0; text-align: left;
  border-top: 1px solid rgba(255,255,255,.28); padding-top: 1.6rem;
}
.form-secours textarea {
  width: 100%; margin-top: .9rem; padding: .9rem 1rem;
  font-family: "Jost", ui-sans-serif, sans-serif; font-size: .95rem; line-height: 1.6;
  border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.1);
  color: #fff; border-radius: 2px; resize: vertical;
}
.form-secours a { color: #fff; }

/* ---------- formulaire : erreurs, confirmation, secours ---------- */
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-erreur {
  margin: .7em 0 0;
  padding: .55em .85em;
  border-left: 3px solid #e0b64a;
  background: rgba(224, 182, 74, .12);
  color: #f6e6bd;
  font-size: .92rem;
  line-height: 1.45;
}

.form-ok {
  margin: 1.6em 0 0;
  padding: 1.5em 1.7em;
  border: 1px solid rgba(255, 255, 255, .22);
  border-left: 3px solid var(--bleu-doux, #8fb6ee);
  background: rgba(255, 255, 255, .06);
}
.form-ok-titre {
  font-family: "Instrument Serif", Garamond, Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 .5em;
}
.form-ok p { margin: 0 0 .6em; }
.form-ok p:last-child { margin-bottom: 0; }
.form-ok a { color: #fff; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.form-secours .btn { margin-top: .9em; }

@media (max-width: 600px) {
  .form-ok { padding: 1.2em 1.1em; }
  .form-ok-titre { font-size: 1.3rem; }
}

[hidden] { display: none !important; }

/* ---------- formulaire long : listes, dates, choix, RGPD ---------- */
.champ select,
.champ input[type="date"],
.champ input[type="number"] {
  font-family: "Jost", ui-sans-serif, sans-serif; font-size: 1rem;
  padding: .8rem .9rem; border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.1); color: #fff; border-radius: 2px;
  width: 100%; max-width: 100%; -webkit-appearance: none; appearance: none;
}
.champ select { background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.8) 50%), linear-gradient(135deg, rgba(255,255,255,.8) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.4rem; }
.champ select option { color: #12204a; background: #fff; }
.champ select:focus,
.champ input[type="date"]:focus,
.champ input[type="number"]:focus { outline: 2px solid #fff; outline-offset: 1px; background-color: rgba(255,255,255,.16); }
.champ input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.75); cursor: pointer; }

.champ-choix { border: 0; margin: 0; padding: 0; }
.champ-choix legend {
  font-family: "Jost", ui-sans-serif, sans-serif; font-size: .7rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.9);
  padding: 0; margin-bottom: .55rem;
}
.champ-choix { display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; }
.champ-choix legend { flex: 0 0 100%; }
.choix {
  display: flex; align-items: flex-start; gap: .55rem;
  font-family: "Jost", ui-sans-serif, sans-serif; font-size: .98rem;
  letter-spacing: 0; text-transform: none; font-weight: 400;
  color: rgba(255,255,255,.92); cursor: pointer; text-align: left;
}
.choix input { width: auto; flex: 0 0 auto; margin-top: .22em; accent-color: #fff; }
.champ-rgpd .mention { color: rgba(255,255,255,.62); font-size: .8rem; line-height: 1.5; margin: .5rem 0 0; }