/* ---------------------------------------------------------------------------
   Développement sur mesure
   ---------------------------------------------------------------------------
   La page hérite du système de refonte. Elle n'ajoute qu'une pièce : le bloc
   à trois issues du hero, qui pose d'emblée la question que le visiteur se
   pose vraiment, à savoir si son besoin réclame du développement ou non.
   --------------------------------------------------------------------------- */

.aio-seo .arbre{
  background:var(--nuit);
  border:1px solid var(--filet);
  border-radius:var(--r);
  padding:clamp(22px,2.6vw,28px);
}

.aio-seo .arbre-q{
  font-family:'AzeretMono',ui-monospace,monospace;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--texte-3);
  margin:0 0 18px;
}

.aio-seo .arbre-l{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:16px;
}

.aio-seo .arbre-l li{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:14px;
  align-items:start;
}

/* Le numéro est un repère de lecture, pas une décoration : il garde la
   graisse et la largeur d'un chiffre de tableau. */
.aio-seo .arbre-n{
  display:flex;
  align-items:center;
  justify-content:center;
  inline-size:28px;
  block-size:28px;
  border:1px solid var(--filet-fort);
  border-radius:50%;
  font-family:'AzeretMono',ui-monospace,monospace;
  font-size:13px;
  color:var(--vert);
}

.aio-seo .arbre-t{
  font-size:15px;
  line-height:1.62;
  color:var(--texte-2);
  text-wrap:pretty;
}

.aio-seo .arbre-t strong{
  color:var(--texte);
  font-weight:600;
}

/* Les deux paires d'encadrés de la section « quatre familles » se suivent :
   sans cette reprise, la seconde colle à la première. */
.aio-seo #quoi .deux-col{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}

.aio-seo #quoi .deux-col+.deux-col{
  margin-block-start:clamp(24px,3vw,32px);
}

.aio-seo #quoi .deux-col-inv>*:first-child{order:1}
.aio-seo #quoi .deux-col-inv>*:last-child{order:2}

.aio-seo #quand .deux-col,
.aio-seo #prix .deux-col,
.aio-seo #limites .deux-col{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}

@media (max-width:960px){
  .aio-seo #quoi .deux-col,
  .aio-seo #quand .deux-col,
  .aio-seo #prix .deux-col,
  .aio-seo #limites .deux-col{grid-template-columns:1fr;}
}