/* ═══════════════════════════════════════════════════════════════════════════
   AIomatique, page de sous-traitance en marque blanche

   Le système porte la trame et les composants. Cette feuille n'ajoute que ce
   qui appartient à cette page : la grille tarifaire, dont la colonne des
   prix doit se parcourir sans lire les lignes, et la section des limites,
   qui est ici un argument de vente et non un avertissement.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ouverture ───────────────────────────────────────────────────────────
   Le titre garde toute la largeur : passe en colonne, « Sous-traitance
   WordPress en marque blanche » tombait sur six lignes. Les deux colonnes
   ne commencent qu'en dessous, et se calent en haut plutôt qu'au centre,
   le texte étant plus haut que le bloc de recherche. */
.aio-seo .hero h1 {
  max-width: 22ch;
}

.aio-seo .hero .hero-in {
  align-items: start;
  margin-block-start: clamp(24px, 3vw, 34px);
}

/* ── La recherche dans un site livré ─────────────────────────────────────
   Ce que vend cette page est une absence, et une absence ne se photographie
   pas. Elle se cherche : quatre requêtes dans un site produit ici et signé
   ailleurs, dont trois ne trouvent rien. La monospace vient de ce que le
   lecteur, dirigeant d'agence, fait ce geste lui-même dans un éditeur. */
.aio-seo .trace {
  margin: 0;
  background: var(--sol);
  border: 1px solid var(--filet);
  border-radius: var(--r);
  overflow: hidden;
  font-family: 'AzeretMono', ui-monospace, monospace;
  font-size: 12.5px;
}

.aio-seo .trace-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-block-end: 1px solid var(--filet);
  background: var(--sol-2);
  color: var(--texte-3);
}

.aio-seo .trace-etat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.aio-seo .trace-etat::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--vert);
}

.aio-seo .trace-l {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.aio-seo .trace-l li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  padding: 9px 16px;
}

.aio-seo .trace-q {
  color: var(--texte-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Le mot cherché porte les guillemets d'une requête, sans qu'ils soient
   dans le texte : ils ne doivent pas partir dans un copier-coller. */
.aio-seo .trace-q::before,
.aio-seo .trace-q::after {
  content: "\0022";
  color: var(--texte-3);
}

.aio-seo .trace-r {
  text-align: end;
  white-space: nowrap;
}

/* Zéro résultat est ici le bon résultat : il prend la couleur d'accent,
   pas celle d'une erreur. */
.aio-seo .trace-nul {
  color: var(--vert);
}

.aio-seo .trace-plein {
  color: var(--texte);
  font-weight: 600;
  white-space: normal;
  text-align: end;
}

.aio-seo .trace-pied {
  padding: 12px 16px;
  border-block-start: 1px solid var(--filet);
  background: var(--sol-2);
  color: var(--texte-2);
}

/* ── Grille tarifaire ────────────────────────────────────────────────────
   Le lecteur cherche un prix, pas une prestation. La deuxième colonne est
   donc traitée comme une donnée : monospace, chiffres de même chasse,
   alignée à droite pour que les montants se comparent verticalement. */
.aio-seo #prix .reg {
  margin-block: clamp(24px, 3vw, 34px);
}

/* Les deux prestations devisées après audit, sorties du tableau : « Sur
   devis » dans une colonne intitulée « À partir de » contredisait la
   promesse de prix ferme que porte le reste de la page. */
.aio-seo #prix .apres-reg {
  max-width: 72ch;
  color: var(--texte-2);
  font-size: 15px;
  margin-block-end: clamp(28px, 3.5vw, 40px);
}

.aio-seo #prix .reg td:nth-child(2) {
  font-family: 'AzeretMono', ui-monospace, monospace;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  color: var(--vert);
  text-align: end;
  white-space: nowrap;
}

.aio-seo #prix .reg td:nth-child(3) {
  color: var(--texte-3);
  font-size: 14px;
  white-space: nowrap;
  text-align: end;
}

.aio-seo #prix .reg th:nth-child(2),
.aio-seo #prix .reg th:nth-child(3) {
  text-align: end;
}

/* ── Section des limites ─────────────────────────────────────────────────
   Une agence qui cherche un sous-traitant lit cette section avant les
   autres : elle veut savoir où ça casse. Le filet la distingue sans lui
   donner la couleur d'une alerte, parce que ce n'en est pas une. */
.aio-seo #limites .deux-col > div:first-child {
  border-inline-start: 2px solid var(--filet-fort);
  padding-inline-start: clamp(16px, 2vw, 24px);
}

.aio-seo #limites h3,
.aio-seo #livrable h3 {
  font-size: 16.5px;
}

/* ── Le code livré ───────────────────────────────────────────────────────
   Le nom de fichier cité dans le texte prend la monospace du système. */
.aio-seo code {
  font-family: 'AzeretMono', ui-monospace, monospace;
  font-size: 0.92em;
  padding: 0.12em 0.38em;
  border-radius: var(--r-s);
  background: var(--sol-2);
  color: var(--texte);
}

/* ── Déroulement ─────────────────────────────────────────────────────────
   Quatre étapes numérotées : ici la numérotation porte une information,
   l'ordre des opérations, et non une décoration. */
.aio-seo #deroulement .etapes h3 {
  font-size: 16.5px;
  margin-block-end: 6px;
}

.aio-seo #deroulement .etapes p {
  max-width: 70ch;
}

@media (max-width: 860px) {
  .aio-seo #limites .deux-col > div:first-child {
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  .aio-seo #prix .reg td:nth-child(3) {
    font-size: 13px;
  }
}

/* Sous 560 px, la requête et son résultat ne tiennent plus sur une ligne :
   ils passent l'un sous l'autre plutôt que de se tronquer. */
@media (max-width: 560px) {
  .aio-seo .trace-l li {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .aio-seo .trace-r,
  .aio-seo .trace-plein {
    text-align: start;
    white-space: normal;
  }
}