/* AIomatique, page de publicite en ligne.
   Elle reprend le systeme partage et n'ajoute que les composants qu'elle
   emploie : etapes numerotees, cartes de refus, accordeon de questions. */



/* ── 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;
}

/* ── 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)}

/* ── 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}

/* ── 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}

/* La cible d'une question doit rester saisissable au doigt : la regle
   du systeme calait sa hauteur sur le texte, ce qui descendait sous
   les 44 px des que le libelle tenait sur une ligne. */
.aio-seo .faq summary{min-block-size:44px;display:flex;align-items:center}