/* gaetanmorvan.fr — texte placé sous chaque outil (à quoi il sert, mode d'emploi, questions fréquentes, outils proches).
   Autonome : ne dépend pas des styles de l'outil, qui a parfois son propre design. Toujours en thème sombre. */
.gm-seo, .gm-seo * { box-sizing: border-box; }
.gm-seo {
  clear: both; position: relative; z-index: 1; width: 100%; margin: 48px 0 0; padding: 36px 16px 48px;
  border-top: 1px solid rgba(255, 255, 255, .1); background: #0b0b12; color: #c3c2cf;
  font: 400 15px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; text-align: left; letter-spacing: 0;
}
.gm-seo-in { max-width: 1100px; margin: 0 auto; display: grid; gap: 14px; }
.gm-seo-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: #8f8d9e; }
.gm-seo a { color: #c4b5fd; text-decoration: none; }
.gm-seo a:hover { color: #fff; text-decoration: underline; }
.gm-seo-grid { display: grid; gap: 14px; }
.gm-seo-card { padding: 22px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .035); }
.gm-seo h2 { margin: 0 0 12px; padding: 0; border: 0; color: #f3f2ee; font: 700 19px/1.25 "Bricolage Grotesque", "Inter", system-ui, sans-serif; letter-spacing: -.015em; text-transform: none; }
.gm-seo h3 { margin: 0 0 6px; padding: 0; color: #f3f2ee; font: 600 15px/1.4 "Inter", system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.gm-seo p { margin: 0; color: #c3c2cf; font-size: 15px; line-height: 1.6; }
.gm-seo ol { margin: 0; padding: 0; list-style: none; counter-reset: gmstep; display: grid; gap: 10px; }
.gm-seo ol li { counter-increment: gmstep; position: relative; padding-left: 38px; min-height: 26px; color: #c3c2cf; }
.gm-seo ol li::before {
  content: counter(gmstep); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(139, 92, 246, .18); border: 1px solid rgba(139, 92, 246, .45); color: #ddd6fe; font: 600 12px/1 "JetBrains Mono", ui-monospace, monospace;
}
.gm-seo-qs { display: grid; gap: 18px; }
.gm-seo-rel { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.gm-seo-rel a { display: block; height: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); transition: border-color .2s, background .2s; }
.gm-seo-rel a:hover { border-color: rgba(139, 92, 246, .6); background: rgba(139, 92, 246, .08); text-decoration: none; }
.gm-seo-rel strong { display: block; color: #f3f2ee; font-weight: 600; }
.gm-seo-rel span { display: block; margin-top: 4px; color: #a5a3b3; font-size: 13.5px; line-height: 1.45; }
.gm-seo-more { margin-top: 14px !important; font-weight: 600; }
.gm-seo-by { color: #8f8d9e !important; font-size: 13px !important; text-align: center; padding-top: 6px; }
@media (min-width: 720px) {
  .gm-seo { padding: 44px 24px 56px; }
  .gm-seo-grid { grid-template-columns: 1.25fr 1fr; }
  .gm-seo-qs { grid-template-columns: 1fr 1fr; gap: 20px 28px; }
  .gm-seo-rel { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) { .gm-seo-rel { grid-template-columns: repeat(4, 1fr); } }
@media print { .gm-seo { display: none; } }