/* =========================================================
   Variantes de gabarit du site client + calculateur de devis.

   ⚠️ Chargé APRÈS site_client.css : ces règles surchargent la base.
   Une seule feuille pour les trois variantes ; le discriminateur est
   `body` / `[data-variante]` posé par le template. Rien d'autre ne change :
   les polices et les couleurs restent celles de la famille de métier.
   ========================================================= */

/* =========================================================
   1. CALCULATEUR DE DEVIS (commun aux trois variantes)
   ========================================================= */
.calc-sec { border-bottom: 1px solid var(--line); }

/* =========================================================
   0. HAUTEUR DE HERO UNIFORME SUR LES TROIS VARIANTES.
      ⚠️ Sans ça, les trois captures ont des hauteurs différentes (405 / 460 /
      621 px selon la variante) : l'email montre trois images de tailles
      inégales, et l'égaliser par un aplat de remplissage produit une bande
      visible (beige, puis magenta quand le crop tronquait le bouton).
      Avec une hauteur MINIMALE commune, c'est le fond DU HERO qui remplit le
      surplus : la couleur est continue, on ne voit aucune bande.
   ========================================================= */
.hero-in { min-height: 640px; align-items: stretch; }

/* La police des titres est une VARIABLE : `--titre` vaut le serif « Bitter »
   pour la famille terre, la sans pour les autres. C'est ce qui fait qu'un
   maçon et un plombier n'ont pas seulement une autre couleur, mais une autre
   typographie. */
h1, h2, h3, .bn, .logo, .proof-name, .vcs-t { font-family: var(--titre); }
.hero h1, .sec-h h2, .card-p h3, .band-i b { font-family: var(--titre); }

.calc {
  display: grid;
  grid-template-columns: 1.55fr .85fr;
  gap: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.calc-lines { padding: 6px 0; }
.calc-line {
  display: grid;
  grid-template-columns: 1fr 96px 104px 104px;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line);
  transition: background-color .15s;
}
.calc-line:last-child { border-bottom: 0; }
.calc-line:hover { background: var(--paper2); }
.calc-line:has(.calc-on:checked) { background: var(--paper2); }

.calc-chk { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.calc-on {
  appearance: none; width: 19px; height: 19px; flex: 0 0 auto;
  border: 1.5px solid var(--line2); background: var(--paper);
  display: grid; place-items: center; cursor: pointer; margin: 0;
}
.calc-on:checked { background: var(--accent); border-color: var(--accent); }
.calc-on:checked::after {
  content: ""; width: 9px; height: 5px; border-left: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink); transform: rotate(-45deg) translateY(-1px);
}
.calc-on:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.calc-nom { font-size: 15.5px; font-weight: 500; }

.calc-unit {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); text-align: right;
}
.calc-qty {
  width: 100%; padding: 8px 10px; text-align: right;
  border: 1px solid var(--line2); background: var(--paper);
  font-family: var(--mono); font-size: 15px; color: var(--ink);
}
.calc-qty:disabled { opacity: .38; }
.calc-qty:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.calc-prix { text-align: right; font-size: 16px; font-weight: 600; }

.calc-total {
  background: var(--paper2); border-left: 1px solid var(--ink);
  padding: 24px 22px; display: flex; flex-direction: column; gap: 12px;
}
.ct-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.5px; color: var(--muted); }
.ct-row b { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--ink); }
.ct-row.ct-big { border-top: 2px solid var(--ink); padding-top: 13px; margin-top: 3px; }
.ct-row.ct-big span { color: var(--ink); font-weight: 600; }
.ct-row.ct-big b { font-size: 27px; letter-spacing: -.03em; }
.calc-total .btn { width: 100%; margin-top: 6px; }
.ct-note { font-size: 12.5px; color: var(--faint); line-height: 1.5; }

/* =========================================================
   2. VARIANTE « TERRAIN » (dépannage : le téléphone d'abord)
   ========================================================= */
[data-variante="terrain"] .hero-kicker {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-dark); margin-bottom: 16px;
}
[data-variante="terrain"] .btn-tel { font-size: 16.5px; padding: 17px 30px; }
[data-variante="terrain"] .sec-h h2 { font-weight: 700; }

.band { border-bottom: 1px solid var(--line); }
.band-terrain { background: var(--brand); color: #fff; }
.band-vitrine { background: var(--paper2); }
.band-in { display: grid; grid-template-columns: repeat(3, 1fr); }
.band-i { padding: 26px 24px; border-left: 1px solid var(--line); }
.band-i:first-child { border-left: 0; }
.band-terrain .band-i { border-left-color: rgba(255,255,255,.16); }
.band-terrain .tag { color: rgba(255,255,255,.62); }
.band-i b { display: block; font-size: 16.5px; margin: 9px 0 7px; }
.band-i p { font-size: 14px; }
.band-terrain .band-i p { color: rgba(255,255,255,.8); }
.band-vitrine .band-i p { color: var(--muted); }

/* Cartes de prestation : prix en grand, action directe. */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
.card-p {
  padding: 24px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 9px; background: var(--paper);
  transition: background-color .15s;
}
.card-p:hover { background: var(--paper2); }
.card-p h3 { font-size: 17px; }
.cp-d { font-size: 14px; color: var(--muted); flex: 1; }
.cp-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cp-u { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.cp-foot b { font-size: 21px; letter-spacing: -.02em; }

/* =========================================================
   3. VARIANTE « VITRINE » (chantier : le travail et l'échelle)
   ========================================================= */
.hero-figures {
  border-left: 1px solid var(--line2); padding: 72px 0 56px 48px;
  display: flex; flex-direction: column; justify-content: center; gap: 34px;
}
.hf { display: flex; flex-direction: column; gap: 5px; }
.hf b { font-size: 46px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: #fff; }
.hf span { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }

/* Liste éditoriale numérotée : on met en avant le détail de l'ouvrage. */
.editorial { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.editorial li {
  display: grid; grid-template-columns: 72px 1fr 150px; gap: 26px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.ed-n { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent-text); letter-spacing: .1em; }
.ed-b h3 { font-size: 19px; margin-bottom: 7px; }
.ed-b p { font-size: 14.5px; color: var(--muted); max-width: 62ch; }
.ed-p { text-align: right; display: flex; flex-direction: column; gap: 5px; }
.ed-u { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.ed-p b { font-size: 21px; letter-spacing: -.02em; }

/* =========================================================
   5. VARIANTE « CLASSIQUE » (services, professions) — hero CENTRÉ.
      Terrain = 2 colonnes + encadré de prix ; Vitrine = 2 colonnes + chiffres ;
      Classique = une seule colonne centrée, l'encadré passe SOUS le texte.
      C'est ce qui fait qu'aucun des trois ne se ressemble.
   ========================================================= */
[data-variante="classique"] .hero-in { grid-template-columns: 1fr; }
[data-variante="classique"] .hero-copy {
  padding: 44px 0 30px; max-width: 720px; margin: 0 auto; text-align: center;
  align-items: center; justify-content: center;
}
[data-variante="classique"] .hero h1 { font-size: clamp(28px, 3.4vw, 42px); }
[data-variante="classique"] .hero-copy p { max-width: 58ch; margin-inline: auto; }
[data-variante="classique"] .hero-act { justify-content: center; margin-top: 26px; }
[data-variante="classique"] .quote {
  border-left: 0; border-top: 1px solid rgba(255,255,255,.18);
  padding: 30px 0 0; justify-content: center;
}
[data-variante="classique"] .qbox { max-width: 700px; margin: 0 auto; }

/* =========================================================
   6. Responsive
   ========================================================= */
@media (max-width: 960px) {
  .calc { grid-template-columns: 1fr; }
  .calc-total { border-left: 0; border-top: 1px solid var(--ink); }
  .band-in { grid-template-columns: 1fr; }
  .band-i { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0; }
  .band-i:first-child { border-top: 0; }
  .band-terrain .band-i { border-top-color: rgba(255,255,255,.16); }
  .cards { grid-template-columns: 1fr 1fr; }
  .hero-figures { border-left: 0; border-top: 1px solid var(--line2); padding: 34px 0 52px; flex-direction: row; flex-wrap: wrap; gap: 32px; }
  .editorial li { grid-template-columns: 52px 1fr; gap: 16px; }
  .ed-p { grid-column: 2; text-align: left; flex-direction: row; align-items: baseline; gap: 12px; }
}
@media (max-width: 640px) {
  .calc-line { grid-template-columns: 1fr 92px; gap: 8px; padding: 13px 16px; row-gap: 9px; }
  .calc-unit { grid-column: 2; grid-row: 1; }
  .calc-qty { grid-column: 1; grid-row: 2; width: 110px; }
  .calc-prix { grid-column: 2; grid-row: 2; }
  .calc-total { padding: 20px 16px; }
  .cards { grid-template-columns: 1fr; }
  .hf b { font-size: 32px; }
}