/* ═══════════════════════════════════════════════════════════════════════════
   AIomatique, systeme des pages refondues

   Jetons, trame, typographie et composants partages. Une page refondue
   charge cette feuille, puis la sienne pour ce qui n'appartient qu'a elle.

   Separer les deux evite de recopier six cents lignes a chaque nouvelle
   page, et garantit qu'une correction de jeton les atteint toutes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   AIomatique , page de référencement
   Le standard du secteur, exécuté sans faute. Fond nuit, surfaces empilées
   sans verre ni flou, filets d'un pixel, un seul accent réservé à la donnée
   positive et à l'action.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Archivo';src:url('../../fonts/archivo-latin.woff2') format('woff2');font-weight:400 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'AzeretMono';src:url('../../fonts/azeret-mono-latin.woff2') format('woff2');font-weight:300 700;font-display:swap}

:root{
  --nuit:#080B0F;
  --sol:#0E141B;
  --sol-2:#141C25;
  --filet:#1E2A36;
  --filet-fort:#2C3D4D;
  --texte:#E7EDF3;
  --texte-2:#A5B4C2;
  --texte-3:#7B8B9A;
  --vert:#34D399;
  --vert-sombre:#06231A;
  --r:14px;
  --r-s:8px;
  --e:cubic-bezier(.16,1,.3,1);
  --lisiere:clamp(20px,4vw,48px);
  /* Assombrissement des bords. Ce n'est pas une couleur de la palette,
     c'est une ombre : elle a son propre jeton plutot qu'un noir en dur. */
  --voile:rgba(0,0,0,.42);
}

.aio-seo,.aio-seo *,.aio-seo::before,.aio-seo *::before,.aio-seo::after,.aio-seo *::after{box-sizing:border-box}

html{background:var(--nuit);scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.aio-seo{
  /* Le fond est peint par la couche fixe .fond, pas par le corps :
     porte dans WordPress, ce bloc est un descendant et un aplat opaque
     ici masquerait les quatre couches. */

  color:var(--texte-2);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-stretch:100%;
  font-size:16.5px;
  line-height:1.68;
  /* Neutralisation explicite de l'heritage : porte dans le theme, ce bloc
     devient un descendant de body et recuperait sinon son interlettrage,
     son espacement de mots et sa casse. */
  letter-spacing:normal;
  word-spacing:normal;
  text-transform:none;
  font-variant-numeric:normal;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ── surfaces du navigateur, thémées depuis la palette ───────────────────── */
.aio-seo ::selection{background:var(--vert);color:var(--vert-sombre)}
.aio-seo :where(a,button,summary,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--vert);outline-offset:3px;border-radius:3px;
}
.aio-seo,.aio-seo *{scrollbar-color:var(--filet-fort) var(--nuit);scrollbar-width:thin}
.aio-seo::-webkit-scrollbar,.aio-seo *::-webkit-scrollbar{width:10px;height:10px}
.aio-seo::-webkit-scrollbar-track,.aio-seo *::-webkit-scrollbar-track{background:var(--nuit)}
.aio-seo::-webkit-scrollbar-thumb,.aio-seo *::-webkit-scrollbar-thumb{background:var(--filet-fort);border-radius:99px;border:3px solid var(--nuit)}
.aio-seo::-webkit-scrollbar-thumb:hover,.aio-seo *::-webkit-scrollbar-thumb:hover{background:#3D5468}

.aio-seo .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── trame ───────────────────────────────────────────────────────────────── */
.aio-seo .wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--lisiere)}
/* Le registre est la preuve de la these : il est le seul bloc a prendre
   toute la largeur disponible, pour se distinguer des 13 autres sections. */
.aio-seo .wrap-large{max-width:1400px;margin-block-start:clamp(28px,3.5vw,44px)}
.aio-seo .sec{padding-block:clamp(64px,9vw,112px)}
/* Filet en degrade plutot qu'une bordure pleine : il s'allume sur la
   mesure du contenu et s'eteint aux lisieres, comme le filet du pied. */
.aio-seo .sec::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;
  block-size:1px;
  background:linear-gradient(90deg,transparent,var(--filet-fort) 22%,
    var(--filet-fort) 78%,transparent);
}
/* Legerement translucides : l'echelle du fond se devine au travers, la
   surface reste lisible comme un plan pose sur un autre. */
.aio-seo .sec-alt{background:color-mix(in srgb,var(--sol) 86%,transparent)}
.aio-seo .sec-fin{background:color-mix(in srgb,var(--sol) 86%,transparent)}

/* ═══ Fond de page ═════════════════════════════════════════════════════════
   La page est une surface de releve que le robot parcourt. L'echelle donne
   la mesure, la passe descend avec le defilement, le voile creuse les bords.

   Les quatre couches sont fixes : le contenu glisse dessus, ce qui produit
   la profondeur sans qu'aucune d'elles ne bouge ni ne se repeigne. Seule la
   passe est animee, et par la progression du defilement, pas par une minuterie
   qui tournerait en permanence dans le vide.
   ═════════════════════════════════════════════════════════════════════════ */

.aio-seo .fond{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--nuit);
  /* L'en-tete est a 9999 et le pied a 2 : la couche reste sous les deux. */
}

/* Le contenu passe devant, sans quoi la couche fixe le recouvrirait.
   Vise par classe et non par « enfant direct » : porte dans le theme, la
   regle est elle-meme prefixee et un selecteur d'enfant ne matcherait plus. */
.aio-seo .hero,.aio-seo .sec{position:relative;z-index:1}@keyframes aio-derive{
  from{transform:translateY(0)}
  to{transform:translateY(var(--pas))}
}@media (prefers-reduced-motion:no-preference){
  .aio-seo .fond-echelle{animation:aio-derive 22s linear infinite}
}@keyframes aio-passe{
  from{transform:translateY(62vh)}
  to{transform:translateY(-52vh)}
}@media (prefers-reduced-motion:no-preference){
    .aio-seo .fond-passe{
      animation:aio-passe linear both;
      animation-timeline:scroll(root block);
      /* Six passages sur la hauteur du document. Un seul, sur vingt mille
         pixels, serait indiscernable d'une image fixe. */
      animation-iteration-count:6;
    }
  }

/* ── le voile : les bords s'enfoncent, le centre remonte ────────────────── */
.aio-seo .fond-voile{
  position:absolute;inset:0;
  background:radial-gradient(130% 90% at 50% 34%,transparent 38%,var(--voile));
}@media (max-width:700px){
  .aio-seo .fond-echelle{--pas:64px}
  .aio-seo .fond-passe{block-size:38vh}
}@media (min-width:820px){
  .aio-seo .somm-l{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── reponse directe ─────────────────────────────────────────────────────
   Elle repond au titre en quarante a soixante mots, avant tout
   developpement. Le filet emeraude la designe comme la reponse, sans en
   faire un encadre : c'est du texte courant, pas une note laterale. */
.aio-seo .rep{
  font-size:clamp(17px,1.6vw,18.5px);line-height:1.6;color:var(--texte);
  border-inline-start:2px solid var(--vert);
  padding-inline-start:clamp(16px,1.8vw,22px);
  margin-block-end:clamp(26px,3vw,38px);
  max-inline-size:64ch;
}

/* ── typographie ─────────────────────────────────────────────────────────── */
.aio-seo h1,.aio-seo h2,.aio-seo h3{
  font-family:'Archivo',system-ui,sans-serif;
  color:var(--texte);margin:0;
  letter-spacing:-.028em;font-stretch:112%;
}
.aio-seo h1{font-size:clamp(38px,5vw,62px);line-height:1.05;font-weight:700;text-wrap:balance}
.aio-seo h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12;font-weight:700;text-wrap:balance;margin-block-end:18px}
.aio-seo h3{font-size:19px;line-height:1.28;font-weight:600;letter-spacing:-.018em}
.aio-seo p{margin:0 0 1.05em}
.aio-seo p:last-child{margin-bottom:0}
.aio-seo a{color:var(--vert);text-underline-offset:3px;text-decoration-thickness:1px}
.aio-seo a:not(.btn):not(.saut):hover{color:#5CE3AE}

.aio-seo .chapo{font-size:clamp(17px,1.6vw,19.5px);line-height:1.6;color:var(--texte-2);max-width:60ch}
.aio-seo .intro{max-width:72ch;margin-block-end:clamp(32px,4vw,48px);color:var(--texte-2)}
.aio-seo .note{font-size:14px;color:var(--texte-3);margin-block-start:20px}

/* ── actions ─────────────────────────────────────────────────────────────── */
.aio-seo .actions{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:28px}
.aio-seo .actions-mid{margin-block-start:clamp(28px,3.5vw,40px)}
.aio-seo .btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-block-size:48px;padding:0 24px;border-radius:var(--r-s);
  font-family:'Archivo',sans-serif;font-stretch:100%;font-size:15.5px;font-weight:600;
  text-decoration:none;white-space:nowrap;
  transition:background .2s var(--e),color .2s var(--e),transform .2s var(--e);
}
.aio-seo .btn-1{background:var(--vert);color:var(--vert-sombre);border:1px solid var(--vert)}
.aio-seo .btn-1:hover{background:#5CE3AE;color:var(--vert-sombre);transform:translateY(-1px)}
.aio-seo .btn-2{background:transparent;color:var(--texte);border:1px solid var(--filet-fort)}
.aio-seo .btn-2:hover{border-color:var(--texte-3);color:var(--texte);transform:translateY(-1px)}

/* ── ouverture ───────────────────────────────────────────────────────────── */
.aio-seo .hero{padding-block:clamp(56px,8vw,92px) clamp(48px,6vw,72px)}
.aio-seo .hero-in{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(32px,5vw,60px);align-items:center}
.aio-seo .hero h1{margin-block-end:22px}
.aio-seo .f-l{font-size:12.5px;color:var(--texte-3);line-height:1.35}
.aio-seo .t-d{color:var(--texte-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aio-seo .t-c{color:var(--vert);text-align:right}
.aio-seo .t-ms{color:var(--texte-3);text-align:right}
.aio-seo .t-p{color:var(--texte);text-align:right;font-weight:600}@keyframes ligne{to{opacity:1;transform:none}}
.aio-seo #term-bilan strong{color:var(--texte);font-weight:600}@media (prefers-reduced-motion:reduce){
  .aio-seo .term-flux li{animation:none;opacity:1;transform:none}
}
.aio-seo .ico{inline-size:26px;block-size:26px;color:var(--vert);margin-block-end:16px;display:block}
.aio-seo .liste{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.aio-seo .liste li{position:relative;padding-inline-start:22px;font-size:14.5px;color:var(--texte-2)}
.aio-seo .liste li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.58em;
  inline-size:9px;block-size:5px;border-inline-start:1.6px solid var(--vert);
  border-block-end:1.6px solid var(--vert);transform:rotate(-45deg);
}

/* ── deux colonnes ───────────────────────────────────────────────────────── */
.aio-seo .deux-col{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:start}
.aio-seo .deux-col p{max-width:66ch}
/* Deux des quatre sections a deux colonnes inversent leur ordre :
   quatre gabarits identiques d'affilee se lisent comme un seul bloc. */
.aio-seo .deux-col-inv{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.aio-seo .deux-col-inv>*:first-child{order:2}
.aio-seo .deux-col-inv>*:last-child{order:1}@media (max-width:960px){.aio-seo .deux-col-inv>*:first-child{order:1}.aio-seo .deux-col-inv>*:last-child{order:2}}
.aio-seo .encadre{background:var(--sol-2);border:1px solid var(--filet);border-radius:var(--r);padding:clamp(22px,2.6vw,28px)}
.aio-seo .sec-alt .encadre{background:var(--nuit)}
.aio-seo .encadre h3{margin-block-end:14px}
.aio-seo .encadre p{font-size:15px}

/* ── jalons ──────────────────────────────────────────────────────────────── */
.aio-seo .jalons{list-style:none;margin:0;padding:0}
.aio-seo .jalons li{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 20px;align-items:baseline;
  padding:15px 0;border-block-end:1px solid var(--filet);
}
.aio-seo .jalons li:last-child{border-block-end:0}
.aio-seo .j-t{font-family:'AzeretMono',ui-monospace,monospace;font-size:12.5px;color:var(--vert);letter-spacing:.02em}
.aio-seo .j-d{font-size:15px;color:var(--texte-2)}@media (prefers-reduced-motion:reduce){
  .aio-seo .tv-i img{transition:none}
  .aio-seo .tv a:hover .tv-i img{transform:none}
}
.aio-seo .av{
  margin:0;background:var(--nuit);border:1px solid var(--filet);border-radius:var(--r);
  padding:clamp(22px,2.6vw,28px);display:flex;flex-direction:column;gap:18px;
}
.aio-seo .av blockquote{margin:0}
.aio-seo .av blockquote p{font-size:15.5px;color:var(--texte);line-height:1.62;margin:0}
.aio-seo .av figcaption{
  display:flex;flex-direction:column;gap:2px;margin-block-start:auto;
  padding-block-start:16px;border-block-start:1px solid var(--filet);
}
.aio-seo .av-n{font-weight:600;color:var(--texte);font-size:14.5px}
.aio-seo .av-e{font-size:12.5px;color:var(--texte-3)}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.aio-seo .faq{border:1px solid var(--filet);border-radius:var(--r);overflow:hidden;background:var(--nuit)}
.aio-seo .q{border-block-end:1px solid var(--filet)}
.aio-seo .q:last-child{border-block-end:0}
.aio-seo .q summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:19px clamp(18px,2.4vw,26px);cursor:pointer;list-style:none;
  font-family:'Archivo',sans-serif;font-size:16.5px;font-weight:600;color:var(--texte);
  letter-spacing:-.014em;min-block-size:56px;transition:background .18s var(--e);
}
.aio-seo .q summary::-webkit-details-marker{display:none}
.aio-seo .q summary:hover{background:var(--sol)}
.aio-seo .q summary::after{
  content:"";flex:0 0 11px;inline-size:11px;block-size:11px;
  border-inline-end:1.8px solid var(--texte-3);border-block-end:1.8px solid var(--texte-3);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s var(--e),border-color .18s var(--e);
}
.aio-seo .q[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px);border-color:var(--vert)}
.aio-seo .q-r{padding:0 clamp(18px,2.4vw,26px) 22px}
.aio-seo .q-r p{font-size:15px;color:var(--texte-2);max-width:78ch;margin:0}@media (prefers-reduced-motion:no-preference){
  .aio-seo .q[open] .q-r{animation:depli .24s var(--e)}
}@keyframes depli{from{opacity:0;transform:translateY(-5px)}}

/* ── coordonnées ─────────────────────────────────────────────────────────── */
.aio-seo .coord{background:var(--nuit);border:1px solid var(--filet);border-radius:var(--r);padding:clamp(24px,3vw,30px)}
.aio-seo .coord h3{margin-block-end:18px}
.aio-seo .liste-c{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.aio-seo .liste-c li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:baseline;font-size:15px}
.aio-seo .c-l{font-family:'AzeretMono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--texte-3)}
.aio-seo .liste-c a{color:var(--texte);text-decoration:none}
.aio-seo .liste-c a:hover{color:var(--vert)}@media (prefers-reduced-motion:no-preference){
  /* Depart depuis un etat deja visible : le contenu ne depend jamais
     du script pour etre lu. Seul le deplacement est anime. */
  .aio-seo .rv{transform:translateY(12px)}
  .aio-seo .rv.on{transform:none;transition:transform .55s var(--e)}
}@media (max-width:960px){
  .aio-seo .hero-in{grid-template-columns:1fr;gap:36px}
  .aio-seo .deux-col{grid-template-columns:1fr;gap:28px}
  .aio-seo .reg th{position:static}
}@media (pointer:coarse),(max-width:640px){
  .aio-seo .reg td{padding-block:0}
  .aio-seo .reg td a{min-block-size:44px}
  .aio-seo .reg td:not(:has(a)){padding-block:13px}
  .aio-seo .liste-c a{min-block-size:44px;display:inline-flex;align-items:center}
}@media (max-width:640px){
  .aio-seo{font-size:16px}
  .aio-seo .faits{grid-template-columns:1fr;gap:16px;justify-content:stretch}
  .aio-seo .faits li{flex-direction:row;align-items:baseline;gap:12px}
  .aio-seo .f-n{min-inline-size:118px}
  .aio-seo .etapes li{grid-template-columns:1fr;gap:10px}
  .aio-seo .etapes li::before{padding-block-start:0;grid-column:1;grid-row:auto}
  .aio-seo .etapes li>*{grid-column:1}
  .aio-seo .jalons li{grid-template-columns:1fr;gap:4px}
  .aio-seo .liste-c li{grid-template-columns:1fr;gap:2px}
  .aio-seo .reg .d{display:none}
  .aio-seo .term-flux li{grid-template-columns:minmax(0,1fr) 38px 40px;gap:10px}
  .aio-seo .term-flux .t-ms{display:none}
  .aio-seo .btn{inline-size:100%}
}