/* Pages commerciales : `/logiciel-de-devis`, `/logiciel-de-facturation/batiment`.

   Un seul gabarit les rend toutes (`templates/pages/marketing/commerciale.html`),
   cette feuille ne décrit donc que des structures — fil d'Ariane, sommaire,
   section de texte, tableau, encadré, ressources — et laisse les classes
   `marketing-*` porter le reste : héros, boutons, foire aux questions, appel
   final. Jetons de couleur hérités de `.marketing-page`. */

/* --- Fil d'Ariane --------------------------------------------------------- */

.commerciale-fil {
  padding: 8rem 0 0;
  background: var(--marketing-cream);
}

.commerciale-fil ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 0.45rem;
  color: var(--marketing-muted);
  font-size: 0.76rem;
  list-style: none;
}

.commerciale-fil li + li::before {
  margin-right: 0.45rem;
  color: #9aa8a5;
  content: "›";
}

.commerciale-fil a:hover {
  color: var(--marketing-teal);
  text-decoration: underline;
}

.commerciale-fil [aria-current="page"] {
  color: var(--marketing-ink);
  font-weight: 650;
}

/* --- Héros ---------------------------------------------------------------- */

.commerciale-hero {
  padding: 1.6rem 0 4rem;
}

.commerciale-hero__inner {
  max-width: 880px;
}

.commerciale-hero h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  letter-spacing: -0.05em;
  line-height: 1.04;
}

.commerciale-hero .marketing-hero__actions {
  margin-top: 2rem;
}

.commerciale-hero__note {
  margin-top: 1.3rem;
  color: #778481;
  font-size: 0.76rem;
}

/* --- Sommaire ------------------------------------------------------------- */

.commerciale-sommaire {
  padding: 1.1rem 0;
  border-top: 1px solid var(--marketing-line);
  border-bottom: 1px solid var(--marketing-line);
  background: #ffffff;
}

.commerciale-sommaire ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 0.4rem 1.4rem;
  counter-reset: sommaire;
  font-size: 0.79rem;
  list-style: none;
}

.commerciale-sommaire li {
  counter-increment: sommaire;
}

.commerciale-sommaire li::before {
  margin-right: 0.35rem;
  color: var(--marketing-orange);
  content: counter(sommaire, decimal-leading-zero);
  font-family: var(--ui-font-mono);
  font-size: 0.66rem;
  font-weight: 800;
}

.commerciale-sommaire a {
  color: var(--marketing-muted);
}

.commerciale-sommaire a:hover {
  color: var(--marketing-teal);
  text-decoration: underline;
}

/* --- Sections ------------------------------------------------------------- */

.commerciale-section {
  padding: 4rem 0;
  border-bottom: 1px solid var(--marketing-line);
}

.commerciale-section:nth-of-type(odd) {
  background: var(--marketing-cream);
}

.commerciale-section__inner {
  max-width: 880px;
}

.commerciale-section h2 {
  font-size: clamp(1.55rem, 2.9vw, 2.15rem);
  font-weight: 670;
  letter-spacing: -0.04em;
  line-height: 1.14;
}

.commerciale-section .marketing-prose {
  margin-top: 1.6rem;
}

/* --- Listes, tableaux, encadrés ------------------------------------------- */

.commerciale-liste {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--marketing-line);
  list-style: none;
}

.commerciale-liste li {
  padding: 0.85rem 0 0.85rem 1.35rem;
  border-bottom: 1px solid var(--marketing-line);
  position: relative;
  color: var(--marketing-muted);
  font-size: 0.93rem;
  line-height: 1.68;
}

.commerciale-liste li::before {
  position: absolute;
  left: 0;
  color: var(--marketing-orange);
  content: "—";
  font-weight: 700;
}

.commerciale-tableau {
  overflow-x: auto;
}

.commerciale-tableau table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  font-size: 0.86rem;
}

.commerciale-tableau th,
.commerciale-tableau td {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--marketing-line);
  text-align: left;
  vertical-align: top;
}

.commerciale-tableau thead th {
  background: var(--marketing-mist);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.commerciale-tableau tbody th {
  width: 12rem;
  font-weight: 650;
}

.commerciale-tableau td {
  color: var(--marketing-muted);
  line-height: 1.6;
}

.commerciale-encadre {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--marketing-line);
  border-left: 3px solid var(--marketing-orange);
  background: #ffffff;
  gap: 0.5rem;
}

.commerciale-encadre strong {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.commerciale-encadre p {
  color: var(--marketing-muted);
  font-size: 0.9rem;
  line-height: 1.68;
}

/* --- Foire aux questions et ressources ------------------------------------ */

.commerciale-faq {
  padding: 4.5rem 0;
  background: #ffffff;
}

.commerciale-ressources {
  padding: 4.5rem 0;
  border-top: 1px solid var(--marketing-line);
  background: var(--marketing-cream);
}

.commerciale-ressources__grid {
  display: grid;
  margin-top: 2.4rem;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.commerciale-ressources__grid > div {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--marketing-line);
  background: #ffffff;
}

.commerciale-ressources__grid strong {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--marketing-orange);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.commerciale-ressources__grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.commerciale-ressources__grid li + li {
  margin-top: 0.55rem;
}

.commerciale-ressources__grid a {
  color: var(--marketing-ink);
  font-size: 0.88rem;
  line-height: 1.5;
}

.commerciale-ressources__grid a:hover {
  color: var(--marketing-teal);
  text-decoration: underline;
}

/* --- Appel final ---------------------------------------------------------- */

/* Sur le fond sombre de l'appel final, `.marketing-page a { color: inherit }`
   l'emporte sur `.marketing-button--secondary` (un selecteur de classe + type
   passe devant une classe seule) : le bouton sortait blanc sur blanc. Il se
   redessine ici en bouton fantome, lisible sur le vert. */

.commerciale .marketing-contact__actions .marketing-button--secondary {
  border-color: rgb(255 255 255 / 42%);
  background: transparent;
  color: #ffffff;
}

.commerciale .marketing-contact__actions .marketing-button--secondary:hover {
  border-color: #ffffff;
  background: rgb(255 255 255 / 10%);
}

/* --- Petits écrans -------------------------------------------------------- */

@media (max-width: 640px) {
  .commerciale-fil {
    padding-top: 6.5rem;
  }

  .commerciale-section {
    padding: 3rem 0;
  }

  .commerciale-tableau tbody th {
    width: auto;
  }

  /* Plutot qu'un tableau ecrase sur quatre colonnes, un tableau qui defile
     dans son cadre : `.commerciale-tableau` porte deja `overflow-x: auto`. */
  .commerciale-tableau table {
    min-width: 32rem;
  }
}