/*
 * Complement de la page de vente. Il ne redefinit AUCUN jeton : couleurs, polices,
 * rayons et rythme viennent de styles.css, la feuille du site. Ce fichier n ajoute
 * que les trois assemblages qui n existaient pas : les cartes de service, les
 * realisations, et les liens de contact.
 */

/* Les prix de cette page ne basculent pas entre mensuel et annuel : un site se paie
   une fois. On neutralise la regle de periodicite heritee de l abonnement. */
.offres .price { display: flex; }

/* La page porte `data-page="home"`, et ce n est pas decoratif : dans styles.css, la
   mise en page du hero vit sous `[data-page="home"] main>.hero` (position, paddings
   et le `overflow: clip` qui borne le halo pose a `right: -8%`). Avec un autre nom de
   page, le hero perdait ces regles et le halo ajoutait 103 px de defilement
   horizontal a 1287 px. Mesure du 22/10, et rien a corriger ici : c est l attribut
   qui manquait, pas une regle.

/* ----------------------------------------------------------- les services */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.service {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.service--phare {
  border-color: var(--accent-line);
  background: radial-gradient(120% 60% at 50% 0%, var(--accent-soft), transparent 66%), var(--surface);
}
.service h3 { margin: 0; color: var(--heading); font-size: 1.25rem; font-weight: 580; letter-spacing: -.02em; }
.service > p { margin: 0; color: var(--text); }
.service .check-list { margin-top: auto; }
.service-prix {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .875rem;
}
.service-prix strong { color: var(--heading); font-size: 1.0625rem; font-weight: 600; }

/* ------------------------------------------------------- les realisations */

.travaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}

.travail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.travail--phare { grid-column: 1 / -1; border-color: var(--accent-line); }
.travail h3 { margin: 0; color: var(--heading); font-size: 1.1875rem; font-weight: 580; }
.travail p { margin: 0; color: var(--text); }
.travail .etiquette { align-self: start; }
.travail a { color: var(--accent); font-family: var(--mono); font-size: .875rem; }

@media (min-width: 900px) {
  .travail--phare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; align-items: start; }
  .travail--phare .check-list { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
}

/* ------------------------------------------------------------- le contact */

.contact-liens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact-liens li {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.contact-liens p { margin: 0 0 6px; color: var(--muted); font-family: var(--mono); font-size: .875rem; }
.contact-liens a, .contact-liens strong { color: var(--heading); font-size: 1.0625rem; font-weight: 580; overflow-wrap: anywhere; }

/* ------------------------------------------- le nom, a la place du logotype */

/* La marque de cette page est un nom, pas une image : il lui faut la presence
   qu avait le logotype, en tete comme au pied. */
.brand strong {
  color: var(--heading);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.pied-marque > p:first-child strong { color: var(--heading); font-size: 1.125rem; font-weight: 600; }

/* ------------------------------------------- le formulaire de contact (27/10) */

/* Il depose le message dans le RCO de Beaj & Business. Memes jetons que le reste :
   aucune couleur ni aucun rayon de plus. */
.contact-form {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin-top: 16px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.contact-form h3 { margin: 0; color: var(--heading); font-size: 1.1875rem; font-weight: 580; }
.contact-form__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}
.contact-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .875rem;
}
.contact-form input,
.contact-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--heading);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form input::placeholder { color: var(--muted); opacity: .7; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--radius); }
.contact-form__large { grid-column: 1 / -1; }
.contact-form__piege {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.contact-form__note { margin: 0; color: var(--muted); font-size: .9375rem; }
.contact-form__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.contact-form__bas .button { width: 100%; }
.contact-form__etat { min-width: 0; margin: 0; color: var(--muted); font-size: .9375rem; }
.contact-form__etat[data-etat="ok"] { color: var(--accent); }
.contact-form__etat[data-etat="erreur"] { color: var(--alert); }
.contact-form__etat a { color: inherit; }
@media (min-width: 561px) {
  .contact-form__bas .button { width: auto; }
}