/* =============================================================================
   gestion/v32.css — « v3.2 visuels » de Gestion by Belentia (22/09/2026)
   -----------------------------------------------------------------------------
   Chargée APRÈS affine.css. Ne touche ni au hero, ni aux démonstrations, ni à
   la scène « Comment ça marche ». Ajoute seulement les blocs portés par
   l'image : révélation produit, moment vidéo, galerie d'usages, grands
   chiffres, « Vos données » avec nature morte, bandeau final avec l'appareil.
   Règles tenues : aucune ombre CSS, aucun texte sur une photo, coins 20–24 px,
   émeraude en touches (pictogrammes au trait, rien de plein en plus).
   ========================================================================== */

:root {
  --r-media: 24px;       /* grands visuels : révélation, vidéo */
  --r-photo: 20px;       /* cartes photo, nature morte */
  --photo-bg: #F4F5F5;   /* fond neutre des visuels le temps du chargement */
}

/* ------------------------------------------------ 1. Révélation produit */
.prod { padding-bottom: var(--space-8); }
.prod__title {
  max-width: 22ch;
  margin-inline: auto;
  text-align: center;
  font-size: 36px;
}
/* v3.2 (passe 2) : l'ordinateur est détouré (WebP à fond transparent,
   2297 × 1635) — plus de plaque grise, plus de recadrage calculé. */
.prod__stage {
  max-width: 1152px;
  margin: var(--space-6) auto 0;
  transform-origin: 50% 100%;
}
.prod__stage img { width: 100%; height: auto; }
.perks {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-5);
}
.perks li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
}
.picto {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--pastille, #F2F3F5);
  color: var(--accent);
}
.picto svg { width: 20px; height: 20px; }

/* ------------------------------------------------ 2. Moment vidéo */
/* v3.2 (passe 2) : la vidéo prend toute la largeur du conteneur, titre et
   ligne centrés dessous, comme la révélation. */
.film {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
.film__frame {
  position: relative;
  border-radius: var(--r-media);
  overflow: clip;
  background: var(--photo-bg);
  aspect-ratio: 16 / 9;
}
.film__text { max-width: 640px; margin-inline: auto; text-align: center; }
.film__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film__text > * + * { margin-top: var(--space-2); }
.film__text p:not(.eyebrow) { color: var(--muted); font-size: 19px; }
/* Bouton lecture / pause : pictogramme seul, dans le coin, jamais de texte. */
.film__toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: rgba(255, 255, 255, .86);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--t) var(--ease);
}
.film__toggle:hover { background: #FFF; }
.film__toggle svg { width: 16px; height: 16px; }
.film__toggle .i-play { display: none; }
.film.is-paused .film__toggle .i-play { display: block; }
.film.is-paused .film__toggle .i-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .film__toggle { display: none; } }

/* ------------------------------------------------ 3. Ce que vous voyez (2 écrans) */
.screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.screen { display: grid; gap: var(--space-2); }
.screen__media {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--canvas);
}
.screen__media img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.screen__cap { font-family: var(--font-title); font-weight: 700; font-size: 19px; color: var(--ink); }
/* Écran Projet sur l'ordinateur détouré + carte des échéances. */
.screens--duo {
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}
.screen--device img { width: 100%; height: auto; }
.screen--device .screen__cap { text-align: center; }
.screen__cap span { display: block; margin-top: 2px; font-family: var(--font-body); font-weight: 400; font-size: 16px; color: var(--muted); }

/* ------------------------------------------------ 4. Galerie d'usages */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.usage { display: block; color: inherit; }
.usage:hover { text-decoration: none; }
.usage__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--photo-bg);
}
.usage__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--scroll-ease, cubic-bezier(.2,.7,.2,1));
}
.usage:hover .usage__media img { transform: scale(1.03); }
.usage__cap { margin-top: var(--space-2); }
.usage__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}
.usage__title svg { width: 18px; height: 18px; color: var(--accent); transition: transform var(--t) var(--ease); }
.usage:hover .usage__title svg { transform: translateX(3px); }
.usage__line { margin-top: 2px; font-size: 16px; color: var(--muted); }
.usage__media--weekend img { object-position: 62% 50%; }
.usage__media--coloc img { object-position: 48% 50%; }
.usage__media--asso img { object-position: 40% 50%; }

/* ------------------------------------------------ 5. Grands chiffres */
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.figure-big { display: grid; gap: 6px; }
.figure-big__n {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.figure-big__l { font-size: 17px; color: var(--muted); }
/* Rouleaux (5 et 3 seulement) : fenêtre d'une ligne, rien ne dépasse. */
.figure-big .roll { --roll-h: 1.1em; vertical-align: top; }   /* même boîte que le « 0 » fixe */
.figure-big .roll__col {
  overflow: clip;
  /* les fragments des chiffres voisins s'estompent aux bords de la fenêtre */
  -webkit-mask-image: linear-gradient(transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(transparent 0, #000 12%, #000 88%, transparent 100%);
}
.figure-big__u { font-size: .75em; }

/* ------------------------------------------------ 6. Tarifs, note courte */
.plans-inc { display: flex; flex-wrap: wrap; gap: 8px var(--space-3); margin-top: var(--space-3); font-size: 15px; color: var(--muted); }

/* ------------------------------------------------ 7. Vos données */
.trust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: var(--space-8);
  align-items: center;
}
.trust__list { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.trust__list li { display: grid; gap: 2px; }
.trust__list .h3[data-check] { display: flex; align-items: flex-start; font-size: 19px; color: var(--ink); }
.trust__list .h3[data-check] > .check {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  margin-top: calc((1lh - 20px) / 2);
  margin-right: 10px;
}
.trust__list p:not(.h3) { padding-left: 30px; font-size: 16px; color: var(--muted); }
.trust__media {
  border-radius: var(--r-photo);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: transparent;   /* nature morte ramenée au blanc pur */
}
.trust__media img { width: 100%; height: 100%; object-fit: cover; object-position: 90% 50%; }

/* ------------------------------------------------ 8. Bandeau final avec une photo
   v3.2 (passe 2) : l'ordinateur quitte le bandeau final (déjà vu deux fois).
   À la place, une photo encore jamais vue : des verres qui trinquent. */
.final.final--visual { padding-bottom: var(--space-5); }
.final__photo {
  max-width: 960px;
  margin: var(--space-6) auto 0;
  aspect-ratio: 21 / 9;
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--photo-bg);
}
.final__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 42%; }

/* ------------------------------------------------ Pages secondaires */
.head-visual {
  margin-top: var(--space-6);
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--photo-bg);
}
.head-visual img { width: 100%; height: 100%; object-fit: cover; }
.head-visual--carnet { aspect-ratio: 21 / 9; background: transparent; }
.head-visual--carnet img { object-position: 70% 50%; }
/* Nature morte ramenée au blanc pur : pas de fond, cadre resserré. */
.head-visual--objet { aspect-ratio: 3 / 2; background: transparent; }
.head-visual--objet img { object-position: 85% 50%; transform: scale(1.3); transform-origin: 72% 55%; }
.figure .head-visual { margin-top: 0; }

/* ------------------------------------------------ Mobile */
@media (max-width: 900px) {
  .film { gap: var(--space-4); }
  .screens--duo { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); }
  .trust { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  /* Nature morte sur blanc : on resserre le cadre sur les tickets. */
  .trust__media { aspect-ratio: 16 / 10; order: -1; }
  .trust__media img { object-position: 78% 52%; transform: scale(1.35); transform-origin: 70% 52%; }
}
@media (max-width: 720px) {
  .prod__title { font-size: 28px; }
  /* Révélation : pleine largeur de l'écran sur téléphone. */
  .prod__stage {
    margin-inline: calc(-1 * var(--gutter, 16px));
    margin-top: var(--space-5);
  }
  /* Atouts : trois petites colonnes centrées, pictogramme au-dessus. */
  .perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: var(--space-4); }
  .perks li { flex-direction: column; justify-content: flex-start; gap: 8px; text-align: center; font-size: 15px; line-height: 1.25; }
  .film__frame { aspect-ratio: 4 / 3; border-radius: var(--r-photo); }
  .film__text p:not(.eyebrow) { font-size: 17px; }
  /* Écran Projet : pleine largeur de l'écran, comme la révélation. */
  .screen--device img { width: calc(100% + 2 * var(--gutter, 16px)); max-width: none; margin-inline: calc(-1 * var(--gutter, 16px)); }
  .screens { grid-template-columns: minmax(0, 1fr); }
  /* Galerie : défilement horizontal avec accroche. */
  .gallery {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 70%;
    gap: 12px;
    margin-inline: calc(-1 * var(--gutter, 16px));
    padding-inline: var(--gutter, 16px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter, 16px);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .usage { scroll-snap-align: start; }
  .figure-big__n { font-size: 48px; }
  /* Tarifs de l'accueil : en-tête resserré. Boucle 3 : cartes identiques à
     celles de tarifs.html, coches sur UNE colonne (sur deux colonnes de
     150 px, 3 coches sur 8 passaient sur deux lignes). */
  #tarifs .section-head { margin-bottom: var(--space-4); }
  .final__photo { aspect-ratio: 4 / 3; margin-top: var(--space-5); }
  .head-visual--carnet { aspect-ratio: 3 / 2; }
  .head-visual--carnet img { object-position: 90% 50%; }
  .head-visual { margin-top: var(--space-5); border-radius: var(--r-photo); }
}

/* Légende sous un visuel des pages secondaires. */
.head-visual + figcaption { margin-top: 12px; }

/* ------------------------------------------------ v3.3 — natures mortes recentrées
   (23/09/2026) Les objets étaient zoomés vers la droite du cadre : dans
   « objet-tickets-blanc » (tarifs, article) ils restaient décentrés, et dans
   « objet-carnet » (blog) les tickets de droite étaient coupés par le bord à
   390 px. Fond blanc pur : l'image est posée en absolu, centrée sur les
   objets, rien n'est coupé (le blanc qui dépasse se confond avec la page). */
.head-visual--objet { position: relative; }
.head-visual--objet img {
  position: absolute;
  left: -36.4%;
  top: -17.4%;
  width: 125.9%;
  max-width: none;
  height: auto;
  object-fit: fill;
  transform: none;
}
@media (max-width: 720px) {
  .head-visual--carnet { position: relative; }
  .head-visual--carnet img {
    position: absolute;
    left: -49.5%;
    top: 2.9%;
    width: 146.6%;
    max-width: none;
    height: auto;
    object-fit: fill;
  }
}

/* ------------------------------------------------ Reprise du 23/09 — corrections après critique
   Pages de Gestion seulement (accueil, tarifs, blog, article). */
.nw { white-space: nowrap; }                       /* « week-end » ne se coupe plus au trait d'union */
.h3, .guide-card__title { text-wrap: pretty; }     /* pas de mot seul en fin de titre ; boucle 3 : pretty gardé plutôt que le balance de base.css (qui laissait « d’un » ou « les » en fin de ligne) */

/* Accroches des cartes de guide : entières. base.css les limitait à une
   ligne, ce qui coupait les plus longues par des points de suspension. */
.guide-card__excerpt { display: block; -webkit-line-clamp: unset; overflow: visible; text-wrap: pretty; }
.usage__line, .screen__cap > span, .lead, .faq summary, main p, main li { text-wrap: pretty; }

/* Cartes de guide côte à côte : titre, accroche en haut ; date et lien
   calés en bas, à la même hauteur d'une carte à l'autre. */
.guide-card__body > .meta { margin-top: auto; padding-top: var(--space-1); }
/* (boucle 4 : « flex: 1 » et le lien calé en bas sont désormais dans base.css) */

/* Blog : en-tête en deux colonnes, comme celui de tarifs. Le carnet est
   cadré entier et centré dans son bloc (fond blanc pur : l'image déborde
   sans se voir), au lieu de flotter dans les 60 % droits d'un bandeau 21:9. */
@media (min-width: 901px) {
  .page-head .container {
    display: grid;
    grid-template-columns: minmax(0, 624px) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
  }
  .page-head .head-visual--carnet { position: relative; margin-top: 0; aspect-ratio: 3 / 2; }
  .page-head .head-visual--carnet img {
    position: absolute;
    left: -45.6%;
    top: 5.4%;
    width: 141.5%;
    max-width: none;
    height: auto;
    object-fit: fill;
  }
}
@media (min-width: 721px) and (max-width: 900px) {
  .page-head .head-visual--carnet { position: relative; aspect-ratio: 16 / 9; }
  .page-head .head-visual--carnet img {
    position: absolute;
    left: -45.6%;
    top: -2.9%;
    width: 141.5%;
    max-width: none;
    height: auto;
    object-fit: fill;
  }
}

/* ================================================================== Boucle 2 (23/09)
   Corrections après la contre-critique (8/10). Pages de Gestion seulement. */

/* Méta d'article et réassurance : en ligne à toutes les largeurs, un point
   posé dans l'espace qui précède chaque fait ; celui qui tomberait en début
   de ligne sort de la boîte (overflow) et disparaît. Même règle que l'accueil. */
.meta,
.hero__facts {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 21px;
  row-gap: 4px;
  overflow: hidden;
}
.meta li,
.hero__facts li { position: relative; }
.meta li:not(:last-child)::after,
.hero__facts li:not(:last-child)::after { content: none; }
.meta li + li::before,
.hero__facts li + li::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: var(--line-strong);
}

/* Offres : les deux listes à coches partent de la même hauteur. Le prix a
   une ligne de 48 px dans les deux cartes ; sous 1 100 px, l'unité passe
   sous le prix dans les deux cartes (plus seulement dans Groupe+). */
.plan__price { line-height: 48px; }
.plan__unit { line-height: 1.5; }
@media (max-width: 1100px) {
  .plan__price { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* Couvertures des guides : recadrage carré sur les objets (les couvertures
   3:2 gardaient une moitié gauche vide, la zone du titre effacé). */
.guide-card__cover,
.feature__cover,
.article__cover { aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
/* Titres des cartes entiers (base.css les coupait à deux lignes) ; accroches
   courtes des trois cartes de l'accueil équilibrées en tablette (plus de
   « commun. » seul sur sa ligne à 768). */
.guide-card__title { display: block; -webkit-line-clamp: unset; overflow: visible; }
@media (min-width: 721px) and (max-width: 1024px) {
  #guides .guide-card__excerpt { text-wrap: balance; }
}

/* Deux guides côte à côte (blog, article) : au-dessus de 1 024 px, carte en
   ligne. Boucle 3 : la couverture carrée (fond menthe, objets jusqu'aux bords)
   n'est plus étirée sur la hauteur de la carte, ce qui coupait les tickets,
   le crayon et la caissette : vignette carrée entière de 208 px, comme la
   liste mobile (104 px). */
@media (min-width: 1025px) {
  .guides-duo > .guide-card {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-1);
    padding: var(--space-2);
  }
  .guides-duo > .guide-card > .guide-card__cover {
    width: 208px;
    height: 208px;
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: 12px;
  }
  .guides-duo > .guide-card > .guide-card__body { align-self: stretch; padding: var(--space-1) var(--space-2); }
}

/* Mobile : les guides en liste, vignette carrée à gauche (plus de pile de
   grandes images). */
@media (max-width: 720px) {
  .guide-card--row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 12px;
  }
  .guide-card--row > .guide-card__cover {
    width: 104px;
    height: 104px;
    border: 0;
    border-radius: 12px;
  }
  .guide-card--row > .guide-card__body { padding: 0; gap: 6px; }
  .guide-card--row .guide-card__title { font-size: 17px; line-height: 1.3; }
  .guide-card--row .guide-card__excerpt { font-size: 15px; }
  .guide-card--row .link-arrow { padding-top: 2px; }
}

/* Blog, « À la une » : image carrée et texte côte à côte dès 721 px. */
@media (min-width: 721px) {
  .feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
@media (min-width: 721px) and (max-width: 900px) {
  .feature { gap: var(--space-4); align-items: start; }
  .feature__body .h2 { font-size: 28px; }
}

/* Article : en-tête en deux colonnes au-dessus de 720 px (texte à gauche,
   couverture carrée à droite), comme les en-têtes de tarifs et du blog. */
.article__figure { margin-top: var(--space-6); }
@media (min-width: 721px) {
  .article__top {
    display: grid;
    grid-template-columns: minmax(0, 624px) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
  }
  .article__top > .col { max-width: none; margin-inline: 0; }
  .article__top > .article__figure { margin-top: 0; }
}
@media (min-width: 721px) and (max-width: 900px) {
  .article__top { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: var(--space-4); }
  .article__top .h1 { font-size: 44px; }
}
@media (max-width: 720px) {
  /* Premier écran à 390 : la couverture carrée y tient entière. */
  .article { padding-top: var(--space-4); }
  .article__figure { margin-top: var(--space-4); }
}

/* Barre de navigation entre 901 et 1 100 px : resserrée par base.css depuis
   la boucle 3 (le contournement de la boucle 2, 8 px d'écart jusqu'à 1 023 px,
   est retiré : il créait un saut de 4 px à 1 024 px). */

/* ================================================================== Boucle 3 (23/09)
   Corrections après la 2e contre-critique (8,5/10). Pages de Gestion seulement. */

/* Menu mobile : « Connexion » sous le bouton principal (un membre qui a déjà
   un compte n'avait aucune entrée sous 1 025 px). */
.mobile-panel .btn + .btn { margin-top: 12px; }

/* ================================================================== Boucle 3, correction (23/09)
   Après la 3e critique (8,6/10). Pages de Gestion seulement. */

/* Guides en liste sous 400 px : titres à 16 px. À 390, la colonne de texte
   fait 214 px ; « Comprendre les comptes » (206 px à 16, 219 à 17) et
   « d’un week-end entre amis » (210 / 223 px) tiennent chacun sur une ligne :
   plus de « Comprendre » seul au milieu du titre. Sous 380 px (360, 375), la
   vignette passe de 104 à 80 px (10 px d'écart) : 212 px de texte à 360. */
@media (max-width: 399px) {
  .guide-card--row .guide-card__title { font-size: 16px; }
}
@media (max-width: 379px) {
  .guide-card--row { grid-template-columns: 80px minmax(0, 1fr); gap: 10px; }
  .guide-card--row > .guide-card__cover { width: 80px; height: 80px; }
}

/* « À lire aussi » (blog) et « Deux guides pour aller plus loin » (article),
   de 1 025 à 1 199 px : avec la vignette de 208 px, le texte n'avait que
   196 px à 1 025 et « Qui doit quoi ? Comprendre les comptes du groupe »
   passait sur quatre lignes (« Comprendre » seul). Vignette de 136 px :
   268 px de texte à 1 025, « Comprendre les comptes » (259 px) tient. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .guides-duo > .guide-card { grid-template-columns: 136px minmax(0, 1fr); }
  .guides-duo > .guide-card > .guide-card__cover { width: 136px; height: 136px; }
}

/* ================================================================== Boucle 4 (23/09)
   Après la 3e contre-critique (8,6/10). Pages de Gestion seulement. */

/* Réassurance du hero (accueil, tarifs) : une petite coche émeraude devant
   chaque fait, à la place des points. Dans la colonne de 464 à 500 px du
   hero, les trois faits (523 px) passaient sur deux lignes et le troisième,
   seul et sans séparateur, se lisait comme une coupure accidentelle. Avec
   une coche par fait, un retour à la ligne reste une liste, à toute largeur. */
.hero__facts { column-gap: 18px; row-gap: 6px; }
.hero__facts li { display: inline-flex; align-items: center; gap: 7px; }
.hero__facts li::before,
.hero__facts li + li::before {
  content: "";
  position: static;
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  margin: 0;
  border-radius: 0;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.6l3.4 3.3 7.4-7.6' fill='none' stroke='%23000' stroke-width='2.3' 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 16 16'%3E%3Cpath d='M2.6 8.6l3.4 3.3 7.4-7.6' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}