/* =========================================================================
   Vitrine artisan : page de demande de devis, sans image, et pages par ville.
   Une colonne sur telephone, deux sur ordinateur (presentation a gauche,
   carte du formulaire a droite).
   Charte : bleu #0B3D91, jaune #FFC72C, encre #102033, fond #F7F9FC.
   La marque, le domaine et l'adresse de contact viennent de site.config.json.
   ========================================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/sora-var.woff2') format('woff2');
}

:root {
  --bleu: #0B3D91;
  --encre: #102033;
  --jaune: #FFC72C;
  --jaune-fonce: #EDB812;
  --fond: #F7F9FC;
  --blanc: #FFFFFF;
  --ligne: #E1E7EF;
  --ligne-forte: #D2DBE6;
  --gris: #46586F;
  --gris-texte: #5C6D82;
  /* aucun texte de la page ne descend sous 4,5 de contraste avec son fond */
  --dark-texte: #33465e;
  --titre: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --texte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rayon: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--texte);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--bleu); }

h1, h2 { font-family: var(--titre); color: var(--encre); margin: 0; line-height: 1.16; letter-spacing: -.02em; }
h1 { font-size: clamp(1.75rem, 7vw, 2.6rem); font-weight: 800; }
p { margin: 0; }

.cadre { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: 20px; }

/* ---------- Entete ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--blanc);
  border-bottom: 1px solid var(--ligne);
  padding-top: env(safe-area-inset-top);
}
.entete-inner { padding-block: 10px 12px; }
.entete-haut {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
}
.marque { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; text-decoration: none; }
.marque-signe { flex: none; width: 33px; height: 33px; }
.marque-signe svg { width: 33px; height: 33px; }
.marque-nom { font-family: var(--titre); font-weight: 700; font-size: 1.06rem; color: var(--encre); white-space: nowrap; }
.entete-zone {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--gris);
}
.entete-actions { flex: none; display: flex; align-items: center; gap: 10px; }
.bouton-devis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 18px;
  font-family: var(--texte);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  color: #22303F;
  background: var(--jaune);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.bouton-devis:hover, .bouton-devis:focus-visible { background: var(--jaune-fonce); }
/* Sur telephone, le nom, la zone et le bouton devis restent visibles. */
@media (max-width: 900px) {
  .entete-inner { padding-block: 8px 10px; }
  .entete-haut { flex-wrap: wrap; row-gap: 8px; column-gap: 10px; }
  .marque { order: 1; }
  .entete-actions { order: 2; margin-left: auto; gap: 8px; }
  .entete-zone { order: 3; flex: 1 1 100%; font-size: .82rem; }
  .marque-signe { width: 29px; height: 29px; }
  .marque-signe svg { width: 29px; height: 29px; }
  .bouton-devis { padding: 8px 14px; font-size: .9rem; min-height: 38px; }
}
/* L'ancre du formulaire doit rester degagee de l'entete colle en haut. */
#form-devis, #titre-form { scroll-margin-top: 96px; }

/* ---------- Accroche ---------- */
.page { padding: 20px 0 26px; }
.accroche .sur {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 9px;
}

/* ---------- Disposition : une colonne puis deux ----------
   Sur telephone, l'ordre est titre, formulaire, puis les blocs.
   Le conteneur .presentation sert uniquement sur ordinateur : en
   display:contents il disparait de l'arbre et ses enfants restent des
   elements de la colonne, ce qui garde le formulaire juste sous le titre. */
.duo { display: flex; flex-direction: column; gap: 24px; }
.presentation { display: contents; }
.accroche { order: 1; }
.carte { order: 2; }
.infos { order: 3; }

/* ---------- Carte formulaire ---------- */
.carte {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: 18px;
  padding: 22px 20px 24px;
}
.carte-titre { font-size: 1.16rem; font-weight: 700; margin-bottom: 16px; }

.formulaire { display: grid; gap: 11px; }
.champ { display: grid; gap: 4px; }
.champ label { font-size: .87rem; font-weight: 600; color: var(--dark-texte); }

/* Les champs obligatoires portent une petite etoile jaune. */
.champ label.obligatoire::after {
  content: "★";
  margin-left: 4px;
  font-size: .78em;
  color: var(--jaune);
  text-shadow: 0 0 1px rgba(16, 32, 51, .55), 0 1px 0 rgba(16, 32, 51, .3);
}
.facultatif { font-weight: 400; color: var(--gris-texte); }
.aide-contacts { font-size: .8rem; color: var(--gris); }

.champ input, .champ select {
  width: 100%;
  font-family: var(--texte);
  font-size: 16px;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--rayon);
  padding: 13px 14px;
  min-height: 50px;
}
.champ input::placeholder { color: var(--gris-texte); }
.champ input:focus, .champ select:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(11, 61, 145, .14);
}
.champ input.invalide, .champ select.invalide { border-color: #B3261E; background: #FFF5F4; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--bleu) 50%), linear-gradient(135deg, var(--bleu) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bouton-principal {
  font-family: var(--texte);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1;
  color: #22303F;
  background: var(--jaune);
  border: 0;
  border-radius: 999px;
  padding: 16px 20px;
  min-height: 54px;
  width: 100%;
  cursor: pointer;
  margin-top: 4px;
}
.bouton-principal:hover, .bouton-principal:focus-visible { background: var(--jaune-fonce); }
.bouton-principal:disabled { opacity: .62; cursor: default; }

.retour { display: none; margin-top: 2px; font-size: .95rem; font-weight: 600; }
.retour.ok { display: block; color: #0F7B3E; }
.retour.err { display: block; color: #B3261E; }

.rassurance { margin-top: 10px; text-align: center; font-size: .92rem; color: var(--gris); }
.aide-obligatoire { margin-top: 8px; text-align: center; font-size: .82rem; color: var(--gris); }
.vie-privee { margin-top: 8px; text-align: center; font-size: .82rem; font-weight: 500; color: var(--dark-texte); }

/* ---------- Ce que dit la page de l'entreprise ---------- */
.infos { display: grid; gap: 18px; }
.bloc { padding-top: 18px; border-top: 1px solid var(--ligne); }
.bloc:first-child { padding-top: 0; border-top: 0; }
.bloc-titre { font-size: 1.08rem; font-weight: 700; margin-bottom: 7px; display: flex; align-items: center; gap: 9px; }
.bloc-titre::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--jaune);
}
.bloc p { font-size: 1rem; line-height: 1.6; color: var(--gris); }

/* ---------- Villes citees : liens vers les pages par ville ---------- */
.villes {
  list-style: none;
  margin: 11px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 18px;
}
.villes li { min-width: 0; }
.villes a {
  display: inline-block;
  font-size: .98rem;
  font-weight: 600;
  color: var(--bleu);
  text-decoration: none;
  border-bottom: 2px solid rgba(11, 61, 145, .2);
  padding-bottom: 1px;
}
.villes a:hover, .villes a:focus-visible { border-bottom-color: var(--jaune); }
@media (max-width: 560px) { .villes { grid-template-columns: 1fr; } }

/* ---------- Blocs du bas (apres le formulaire) ----------
   Communes voisines + autres grandes villes, tout en bas de la page,
   juste avant le pied. */
.bas {
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--ligne-forte);
  display: grid;
  gap: 22px;
}
.bas .bloc { padding-top: 0; border-top: 0; }
.bas .bloc + .bloc { padding-top: 22px; border-top: 1px solid var(--ligne); }

/* ---------- Pied ---------- */
.pied { background: #0B1B33; color: #BECBDE; padding: 26px 0 calc(28px + env(safe-area-inset-bottom)); font-size: .89rem; }
.pied p { margin-bottom: 5px; }
.pied a { color: var(--blanc); }
.pied-nom { font-family: var(--titre); font-weight: 700; color: var(--blanc); font-size: 1.04rem; margin-bottom: 8px; }
.pied-lien, .pied-lien:visited,
.pied a.pied-lien, .pied a.pied-lien:visited { color: var(--jaune); text-decoration: none; }
.pied-lien:hover, .pied-lien:focus-visible,
.pied a.pied-lien:hover, .pied a.pied-lien:focus-visible {
  color: #FFD968;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.pied-fin { margin-top: 12px; font-size: .81rem; color: #8DA0B8; }

/* Le bloc des villes dans le pied : un titre, puis les liens sur une ligne
   qui se replie sur telephone. */
.pied-titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: .95rem;
  color: var(--blanc);
  margin: 18px 0 9px;
}
.pied-zones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 18px;
}
.pied-zones li { margin: 0; }
.pied-zones a {
  display: inline-block;
  font-size: .9rem;
  font-weight: 600;
  color: #BECBDE;
  text-decoration: none;
  border-bottom: 1px solid rgba(190, 203, 222, .35);
  padding-bottom: 1px;
  white-space: nowrap;
}
.pied-zones a:hover, .pied-zones a:focus-visible {
  color: var(--blanc);
  border-bottom-color: var(--jaune);
}

/* ---------- Grands ecrans : deux colonnes ----------
   Deux colonnes de meme hauteur : le formulaire donne la hauteur de la
   ligne, la colonne de texte s'y etale. Le titre reste colle au premier
   bloc, et l'air disponible se repartit entre les blocs, pas sous le titre. */
@media (min-width: 900px) {
  .page { padding: 44px 0 54px; }
  .duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    column-gap: 56px;
    align-items: stretch;
  }
  .presentation { display: flex; flex-direction: column; gap: 30px; }
  .accroche { order: 0; padding-top: 0; }
  .carte { order: 0; align-self: start; padding: 28px 26px 30px; }
  .infos { order: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 0; }
  .bloc { flex: 1 1 0; padding-top: 22px; }
}

@media (min-width: 1160px) {
  .carte { padding: 30px 30px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}