/* ── l'echelle : le rythme d'un releve de positions ─────────────────────── */
.aio-seo .fond-echelle{
  position:absolute;inset:calc(var(--pas) * -1) 0;
  --pas:88px;
  background:repeating-linear-gradient(180deg,
    var(--filet) 0 1px,
    transparent 1px var(--pas));
  opacity:.85;
  will-change:transform;
}

/* ── la passe : la zone que le robot lit en ce moment ───────────────────── */
.aio-seo .fond-passe{
  position:absolute;inset-inline:0;inset-block-start:0;
  block-size:52vh;
  /* Une bande douce et, en son milieu, une tete de lecture d'environ trois
     pixels. C'est elle qui porte le geste : le degrade seul se lit comme une
     tache, la ligne franche se lit comme un instrument. */
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb,var(--vert) 8%,transparent) 40%,
    color-mix(in srgb,var(--vert) 16%,transparent) 49%,
    color-mix(in srgb,var(--vert) 62%,transparent) 49.7%,
    color-mix(in srgb,var(--vert) 62%,transparent) 50.3%,
    color-mix(in srgb,var(--vert) 16%,transparent) 51%,
    color-mix(in srgb,var(--vert) 8%,transparent) 60%,
    transparent 100%);
  /* La tete reste franche dans les marges et s'efface sur la mesure du
     contenu : traversant une ligne de texte a pleine intensite, elle la
     rendait penible a lire. Les butees sont calees sur la mesure reelle de
     1180 px, pas sur des pourcentages qui glisseraient avec la fenetre. */
  --masque:linear-gradient(90deg,
    rgb(0 0 0) 0,
    rgb(0 0 0) max(0px,calc(50% - 620px)),
    rgb(0 0 0 / .22) max(0px,calc(50% - 500px)),
    rgb(0 0 0 / .22) min(100%,calc(50% + 500px)),
    rgb(0 0 0) min(100%,calc(50% + 620px)),
    rgb(0 0 0) 100%);
  -webkit-mask-image:var(--masque);
  mask-image:var(--masque);
  /* Repli : sans pilotage au defilement la tete se pose bas dans le premier
     ecran, sous les boutons, et ne bouge plus. */
  transform:translateY(62vh);
  will-change:transform;
}

/* ── sommaire ────────────────────────────────────────────────────────────
   Cinq mille mots sans point d'entree : le lecteur presse ne peut pas
   sauter, et rien n'annonce ce que la page couvre. La liste porte les
   questions telles qu'elles sont posees, pas des etiquettes de rubrique. */
.aio-seo .somm{padding-block:clamp(36px,5vw,56px);background:var(--sol);position:relative;z-index:1}
.aio-seo .somm-t{
  font-family:'AzeretMono',ui-monospace,monospace;
  font-size:11.5px;font-weight:500;font-stretch:100%;
  letter-spacing:.14em;text-transform:uppercase;color:var(--texte-3);
  margin-block-end:18px;
}
.aio-seo .somm-l{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1px;background:var(--filet);
  border:1px solid var(--filet);border-radius:var(--r);overflow:hidden;
  counter-reset:so;
}
.aio-seo .somm-l a{
  counter-increment:so;
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:baseline;
  background:var(--nuit);padding:14px 18px;
  color:var(--texte-2);text-decoration:none;font-size:15px;line-height:1.45;
  min-block-size:44px;
  transition:background .18s var(--e),color .18s var(--e);
}
.aio-seo .somm-l a::before{
  content:counter(so,decimal-leading-zero);
  font-family:'AzeretMono',ui-monospace,monospace;font-size:11.5px;
  color:var(--texte-3);
}
.aio-seo .somm-l a:hover{background:var(--sol-2);color:var(--texte)}
.aio-seo .somm-l a:hover::before{color:var(--vert)}

.aio-seo .faits{
  list-style:none;margin:36px 0 0;padding:26px 0 0;border-block-start:1px solid var(--filet);
  display:grid;grid-template-columns:repeat(3,auto);gap:0 clamp(24px,4vw,52px);justify-content:start;
}
.aio-seo .faits li{display:flex;flex-direction:column;gap:3px}
.aio-seo .f-n{font-family:'AzeretMono',ui-monospace,monospace;font-size:21px;font-weight:600;color:var(--texte);letter-spacing:-.02em}

/* ── le flux d'exploration ───────────────────────────────────────────────── */
.aio-seo .term{
  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 .term-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);
}
.aio-seo .term-t{color:var(--texte-3);letter-spacing:.02em}
.aio-seo .term-etat{color:var(--texte-3);display:inline-flex;align-items:center;gap:7px}
.aio-seo .term-etat::before{
  content:"";inline-size:6px;block-size:6px;border-radius:50%;background:var(--texte-3);
}
.aio-seo .term-etat[data-fini="1"]{color:var(--vert)}
.aio-seo .term-etat[data-fini="1"]::before{background:var(--vert)}

.aio-seo .term-flux{list-style:none;margin:0;padding:10px 0;min-block-size:270px}
.aio-seo .term-flux li{
  display:grid;grid-template-columns:minmax(0,1fr) 44px 62px 40px;gap:12px;
  align-items:baseline;padding:5px 16px;
  opacity:0;transform:translateY(4px);
  animation:ligne .34s var(--e) forwards;
}
.aio-seo .term-flux li:hover{background:var(--sol-2)}

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

/* ── prestations ─────────────────────────────────────────────────────────── */
/* min() borne la piste a la largeur reelle : sans lui, auto-fit impose
   une colonne de 290 px meme quand le conteneur en offre 280, et la grille
   deborde de la fenetre sur les petits telephones. */
.aio-seo .grille-6{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:1px;background:var(--filet);border:1px solid var(--filet);border-radius:var(--r);overflow:hidden}
/* La cellule est une colonne : la ligne de livrable est poussee en bas,
   ce qui l'aligne d'une carte a l'autre malgre des textes de longueurs
   differentes. Sans cela elle flottait a trois hauteurs distinctes. */
.aio-seo .poste{
  background:var(--nuit);padding:clamp(24px,3vw,32px);
  display:flex;flex-direction:column;
  transition:background .22s var(--e);
}
.aio-seo .poste:hover{background:var(--sol)}
.aio-seo .poste h3{margin-block-end:9px}
.aio-seo .poste p{font-size:15px;color:var(--texte-2);margin-block-end:0}
/* Les paragraphes se touchaient : rien ne separait deux idees successives. */
.aio-seo .poste p+p{margin-block-start:12px}
.aio-seo .poste-l{
  margin-block-start:auto !important;padding-block-start:14px;
  border-block-start:1px solid var(--filet);
  font-family:'AzeretMono',ui-monospace,monospace;font-size:11.5px;color:var(--texte-3);
  /* Deux lignes reservees : un libelle court laissait son filet 26 px plus
     bas que celui des voisins, sur une rangee censee se comparer. */
  /* La boite inclut son remplissage : deux lignes de texte plus les 14 px
     du haut, sinon un libelle court reste 15 px trop haut. */
  min-block-size:calc(14px + 2lh);
}
.aio-seo .poste p+.poste-l{margin-block-start:auto !important}
.aio-seo .sec-alt .poste{background:var(--sol)}
.aio-seo .sec-alt .poste:hover{background:var(--sol-2)}

/* ── registre des sites ──────────────────────────────────────────────────── */
.aio-seo .tab-defile{overflow-x:auto;border:1px solid var(--filet);border-radius:var(--r)}
.aio-seo .tab-defile:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.aio-seo .reg{inline-size:100%;border-collapse:collapse;font-size:14.5px}
.aio-seo .reg th{
  text-align:left;font-family:'AzeretMono',ui-monospace,monospace;font-weight:500;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--texte-3);
  padding:14px 18px;background:var(--sol-2);border-block-end:1px solid var(--filet);
  position:sticky;top:0;
}
.aio-seo .reg td{padding:13px 18px;border-block-end:1px solid var(--filet);color:var(--texte-2);vertical-align:baseline}
.aio-seo .reg td:first-child,.aio-seo .reg th:first-child{inline-size:1%;white-space:nowrap}
.aio-seo .reg tbody tr:last-child td{border-block-end:0}
.aio-seo .reg tbody tr{transition:background .16s var(--e)}
.aio-seo .reg tbody tr:hover{background:var(--sol-2)}
/* La cible couvre toute la hauteur de sa rangee. La marge negative annule
   exactement le remplissage ajoute : la zone cliquable passe de 24 a 51 px
   sans qu'aucune ligne ne bouge. */
.aio-seo .reg td a{color:var(--texte);text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:7px;margin-block:-13px;padding-block:13px;min-block-size:44px}
.aio-seo .reg td a::after{
  content:"";inline-size:11px;block-size:11px;flex:0 0 11px;opacity:.45;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:opacity .16s var(--e),transform .16s var(--e);
}
.aio-seo .reg td a:hover{color:var(--vert)}
.aio-seo .reg td a:hover::after{opacity:1;transform:translate(1px,-1px)}
.aio-seo .reg .d{color:var(--texte-3);font-family:'AzeretMono',ui-monospace,monospace;font-size:12px}

/* ── offres ──────────────────────────────────────────────────────────────── */
.aio-seo .offres{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.aio-seo .offre{
  background:var(--sol);border:1px solid var(--filet);border-radius:var(--r);
  padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;
}
.aio-seo .offre-mise{border-color:var(--vert)}
.aio-seo .offre h3{margin-block-end:14px}
.aio-seo .o-prix{
  font-family:'AzeretMono',ui-monospace,monospace;display:flex;align-items:baseline;
  flex-wrap:wrap;gap:4px 9px;min-block-size:52px;
  margin-block-end:16px;padding-block-end:16px;border-block-end:1px solid var(--filet);
}
.aio-seo .o-c{font-size:28px;font-weight:600;color:var(--texte);letter-spacing:-.03em;white-space:nowrap;font-stretch:104%;line-height:36px}
/* Le mono signale une valeur mesuree. Une formule en toutes lettres
   repasse en Archivo, sans quoi le signal ne veut plus rien dire. */
.aio-seo .o-c-txt{font-family:'Archivo',sans-serif;font-stretch:100%;font-size:26px;letter-spacing:-.025em;line-height:36px}
/* « à partir de » se lit avant le montant, « par mois » apres. Deux
   emplacements distincts plutot qu'un seul place a la fin, qui donnait
   « 200 € à partir de ». */
.aio-seo .o-u,.aio-seo .o-p{font-size:12.5px;color:var(--texte-3)}
.aio-seo .offre>p{font-size:15px;color:var(--texte-2)}

/* ── étapes numérotées ───────────────────────────────────────────────────── */
.aio-seo .etapes{list-style:none;counter-reset:e;margin:0;padding:0;display:grid;gap:1px;background:var(--filet);border:1px solid var(--filet);border-radius:var(--r);overflow:hidden}
.aio-seo .etapes li{counter-increment:e;background:var(--nuit);padding:clamp(22px,2.8vw,30px);display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 20px;align-items:start;transition:background .22s var(--e)}
.aio-seo .etapes li:hover{background:var(--sol)}
.aio-seo .etapes li::before{
  content:counter(e,decimal-leading-zero);
  font-family:'AzeretMono',ui-monospace,monospace;font-size:13px;color:var(--vert);
  padding-block-start:4px;letter-spacing:.03em;
}
/* Le placement automatique alternait les colonnes : le compteur en 1, le
   titre en 2, le premier paragraphe repartait en 1, dans 56 px de large.
   Chaque element est donc place explicitement. */
.aio-seo .etapes li::before{grid-column:1;grid-row:1}
.aio-seo .etapes li>*{grid-column:2}
.aio-seo .etapes h3{margin-block-end:8px}
.aio-seo .etapes p{font-size:15px;color:var(--texte-2);max-width:78ch}
.aio-seo .etapes p+p{margin-block-start:12px}

/* ── galerie des sites livres ────────────────────────────────────────────
   Huit captures reelles. La page defend qu'on peut verifier le travail :
   la galerie le montre, la table qui suit le liste en entier. */
.aio-seo .travaux-g{
  list-style:none;margin:clamp(28px,3.4vw,40px) 0 0;padding:0;
  display:grid;gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));
}
.aio-seo .tv a{
  display:grid;gap:10px;text-decoration:none;color:inherit;
  border-radius:var(--r-s);
}
.aio-seo .tv-i{
  display:block;overflow:hidden;border-radius:var(--r-s);
  border:1px solid var(--filet);background:var(--sol-2);
  aspect-ratio:1280/800;
  transition:border-color .22s var(--e);
}
.aio-seo .tv-i img{
  display:block;inline-size:100%;block-size:100%;object-fit:cover;
  object-position:50% 0;
  transition:transform .34s var(--e);
}
.aio-seo .tv-t{display:grid;gap:2px;min-inline-size:0}
.aio-seo .tv-d{
  font-size:14px;font-weight:600;color:var(--texte);
  font-stretch:104%;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aio-seo .tv-s{
  font-family:'AzeretMono',ui-monospace,monospace;
  font-size:11px;color:var(--texte-3);
  display:flex;gap:8px;align-items:baseline;
}
/* --filet-fort est une couleur de bordure : employee sur du texte elle
   tombait a 1,86:1. La zone reprend le gris de texte le plus bas. */
.aio-seo .tv-z{color:var(--texte-3)}
.aio-seo .tv-z::before{content:"·";margin-inline-end:8px}
.aio-seo .tv a:hover .tv-i{border-color:var(--vert)}
.aio-seo .tv a:hover .tv-i img{transform:scale(1.03)}
.aio-seo .tv a:hover .tv-d{color:var(--vert)}
.aio-seo .tv a:focus-visible{outline:2px solid var(--vert);outline-offset:4px}

/* ── avis ────────────────────────────────────────────────────────────────── */
.aio-seo .avis{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}

/* ── refus ───────────────────────────────────────────────────────────────── */
.aio-seo .grille-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:20px}
.aio-seo .refus{background:var(--sol);border:1px solid var(--filet);border-radius:var(--r);padding:clamp(22px,2.6vw,28px)}
.aio-seo .refus h3{margin-block-end:9px;color:var(--texte)}
.aio-seo .refus p{font-size:14.5px;color:var(--texte-2);margin:0}