/* Storhand : ajustements au-dessus du CSS du template (chargé après lui).
   Menu : la composition d'origine du template est conservée (logo, liens au centre,
   Connexion et bouton à droite). On interdit seulement le retour à la ligne des
   libellés, et on resserre un peu entre 992 et 1 199 px, seule largeur où la
   version française ne tient pas avec les espacements d'origine. */
.nav-link,
.nav-dropdown-toggle,
.primary-button-text { white-space: nowrap; }

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .nav-link, .nav-dropdown-toggle { padding-left: 9px; padding-right: 9px; font-size: 15px; }
}

/* Héros : rangée « Fonctionne avec » Shopify et WooCommerce, sous les boutons.
   Pictogrammes Simple Icons (CC0), couleurs officielles des marques. */
.sh-platforms {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px 12px; flex-basis: 100%; margin-top: 12px;
}
.sh-platforms-label { color: #ffffffd9; font-size: 15px; margin-right: 2px; }
.sh-platform {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ffffff; color: var(--color--title-color);
  border-radius: 100px; height: 44px; box-sizing: border-box; padding: 0 18px 0 14px;
  font-size: 15px; font-weight: 500; line-height: 1;
  box-shadow: 0 6px 18px #06150f1f;
}
.sh-platform-icon { width: 22px; height: 22px; flex: none; }
.sh-platform--woo { padding: 0 18px; }
.sh-platform-icon--woo { width: auto; height: 19px; }
@media screen and (max-width: 479px) {
  .sh-platforms { gap: 8px; margin-top: 10px; }
  .sh-platforms-label { width: 100%; text-align: center; }
  .sh-platform { font-size: 14px; height: 40px; padding: 0 14px 0 11px; }
  .sh-platform--woo { padding: 0 14px; }
  .sh-platform-icon { width: 20px; height: 20px; }
  .sh-platform-icon--woo { width: auto; height: 17px; }
}

/* Héros : coup de surligneur derrière un mot du titre.
   Aplat vert flash qui se déroule de gauche à droite après l'entrée du titre ;
   le mot passe en encre pour rester lisible (contraste 11 sur le vert flash). */
.sh-mark {
  position: relative; display: inline-block; white-space: nowrap; isolation: isolate;
  padding: 0 0.1em; margin: 0 -0.02em;
  animation: sh-mark-ink 0.35s ease 1.35s forwards;
}
.sh-mark::before {
  content: ""; position: absolute; z-index: -1;
  left: -0.04em; right: -0.04em; top: 0.12em; bottom: 0.02em;
  background: var(--sh-flash, #4ade80);
  border-radius: 0.14em 0.22em 0.16em 0.2em;
  transform: rotate(-1.2deg) scaleX(0); transform-origin: left center;
  animation: sh-mark-sweep 0.7s cubic-bezier(.65,0,.35,1) 1.1s forwards;
}
@keyframes sh-mark-sweep { to { transform: rotate(-1.2deg) scaleX(1); } }
@keyframes sh-mark-ink { to { color: var(--color--title-color); } }
@media (prefers-reduced-motion: reduce) {
  .sh-mark { animation: none; color: var(--color--title-color); }
  .sh-mark::before { animation: none; transform: rotate(-1.2deg) scaleX(1); }
}

/* Étiquettes de section : le template met une majuscule à chaque mot (« Notre Promesse »),
   ce qui est faux en français. */
.section-sub-title-wrap { text-transform: none; }

/* Pages « alternative à » : nom du concurrent dans le titre, tableau comparatif, sources. */
.sh-alt-nom { color: var(--color--primary-color); display: block; }
.sh-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sh-compare-wrap { overflow-x: auto; margin: 10px 0 30px; -webkit-overflow-scrolling: touch; }
.sh-compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; line-height: 150%; background: #fff; border-radius: 16px; overflow: hidden; }
.sh-compare th, .sh-compare td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid #e3e5e8; }
.sh-compare thead th { font-weight: 600; color: var(--color--title-color); border-bottom: 2px solid var(--color--title-color); }
.sh-compare thead th:nth-child(2) { color: var(--color--primary-color); }
.sh-compare tbody th { width: 24%; font-weight: 600; color: var(--color--title-color); }
.sh-compare tbody td { width: 38%; color: var(--color--content-color); }
.sh-compare tbody tr:last-child th, .sh-compare tbody tr:last-child td { border-bottom: 0; }
.template-summary ul { margin: 0 0 24px; padding-left: 22px; }
.template-summary li { margin-bottom: 8px; line-height: 150%; }
.template-summary a { color: var(--color--primary-color); text-decoration: underline; text-underline-offset: 2px; }
.sh-alt-sources, .sh-alt-note { font-size: 15px; }
.sh-alt-liens { margin: 16px 0 0; font-size: 15px; text-align: center; }
.sh-alt-liens a { color: var(--color--title-color); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 767px) { .sh-compare { font-size: 15px; } .sh-compare th, .sh-compare td { padding: 12px; } }
.faq-dropdown-content a { color: var(--color--primary-color); text-decoration: underline; text-underline-offset: 2px; }

/* Héros : film de présentation. Une simple affiche tant que le visiteur n'a pas cliqué. */
.sh-film { position: relative; display: block; color: inherit; text-decoration: none; }
.sh-film-affiche, .sh-film-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #ffffff; }
.sh-film-lecture {
  position: absolute; left: 50%; top: 68%; width: 104px; height: 104px; margin: -52px 0 0 -52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #0f9f5f; color: #ffffff;
  box-shadow: 0 14px 40px #0f9f5f59; transition: transform 0.2s ease;
}
.sh-film-lecture svg { width: 38px; height: 38px; margin-left: 5px; }
.sh-film:hover .sh-film-lecture, .sh-film:focus-visible .sh-film-lecture { transform: scale(1.08); }
.sh-film-duree {
  position: absolute; left: 28px; bottom: 26px; padding: 9px 16px; border-radius: 100px;
  background: #06150fb8; color: #ffffff; font-size: 15px; font-weight: 500; line-height: 1;
}
@media screen and (max-width: 767px) {
  .sh-film-lecture { top: 70%; width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .sh-film-lecture svg { width: 22px; height: 22px; margin-left: 3px; }
  .sh-film-duree { left: 12px; bottom: 12px; font-size: 12px; padding: 6px 10px; }
}