/* =============================================================================
   Transcriptor — « v3 affinée » (v3.1), 22/09/2026
   -----------------------------------------------------------------------------
   Feuille commune aux quatre pages (A, blog, article, tarifs), chargée APRÈS le
   <style> de chaque page : elle ne change ni la composition ni les polices de la
   v3, elle retire seulement ce qui encombrait.

     1. Moins de couleur principale : l'accent reste sur le bouton principal, le
        mot mis en valeur du H1, l'onglet actif et quelques chiffres clés.
        Eyebrows, pastilles, chips et boutons secondaires passent au gris neutre.
     2. Aucune ombre : filet 1 px #E6E8EE à la place. Seuls menus, info-bulles
        et toasts gardent 0 1px 2px rgba(17,24,39,.05) au maximum.
     3. Fonds teintés de l'accent réservés à la carte tarif mise en avant (5 %)
        et au bandeau final (4 %).
   ========================================================================== */

:root {
  --focus-ring: #2365EB;  /* dernière passe 24/09 : anneau de focus au bleu vif de l'outil (base.css), plus d'encre quasi noire */
  --neutral-pill: #F2F3F5;                 /* pastilles d'icônes, chips, coches */
  --line-btn: #D9DCE3;                     /* bord des boutons secondaires */
  --eyebrow: #6B7280;
  --tint-plan: color-mix(in srgb, var(--accent) 5%, #FFF);
  --tint-final: color-mix(in srgb, var(--accent) 4%, #FFF);
  --scroll-offset: 80px;                   /* ancres sous la nav collante (64 px) */
}
@supports not (color: color-mix(in srgb, #000 8%, #fff)) {
  :root { --tint-plan: #F4F7FE; --tint-final: #F6F9FE; }
}

/* -----------------------------------------------------------------------------
   1. Eyebrows : gris, capitales espacées, un point de 6 px à la couleur de l'outil
   -------------------------------------------------------------------------- */
.eyebrow,
.section-head .eyebrow,
.page-head .eyebrow { color: var(--eyebrow); }
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--accent);
  vertical-align: .12em;
}

/* -----------------------------------------------------------------------------
   2. Pastilles, chips, boutons secondaires, liens fléchés : neutres
   -------------------------------------------------------------------------- */
.card__icon,
.pnode__icon,
.ticks__mark { background: var(--neutral-pill); color: var(--accent); }

.chip { background: var(--neutral-pill); color: var(--text); }
.chip--neutral { background: var(--neutral-pill); color: var(--muted); }

.btn--secondary {
  background: var(--canvas);
  color: var(--ink);
  border-color: var(--line-btn);
}
.btn--secondary:hover {
  background: var(--canvas);
  color: var(--ink);
  border-color: var(--accent);
}

/* « Voir le cas d'usage → » : texte encre, seule la flèche garde l'accent. */
.link-arrow { color: var(--ink); }
.link-arrow svg { color: var(--accent); }
.link-arrow:hover,
a:hover .link-arrow { color: var(--accent); text-decoration: none; }

/* Bascule Mensuel / Annuel : piste grise, bouton actif blanc à texte accent. */
.switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: 12px;
  background: var(--neutral-pill);
}
.switch button {
  min-height: 40px;
  padding-inline: var(--space-3);
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
}
.switch button:hover { border-color: transparent; color: var(--ink); }
.switch button[aria-pressed="true"] {
  background: var(--canvas);
  border-color: var(--line);
  color: var(--accent);
}

/* Strip des outils : icônes grises, l'outil courant bordé d'accent. */
.tool svg { color: var(--muted); }
.tool:hover { border-color: var(--accent); color: var(--ink); }
.tool--here { background: var(--canvas); border-color: var(--accent); color: var(--ink); }
.tool--here svg { color: var(--accent); }

/* Horodatages, formats et identifiants d'emplacements : plus de police mono. */
.out__t,
.formats .chip,
.slot__id,
.slot__prompt {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.slot__id { color: var(--ink); }

/* -----------------------------------------------------------------------------
   3. Fonds teintés : carte tarif mise en avant (5 %) et bandeau final (4 %)
   -------------------------------------------------------------------------- */
.plan--featured { background: var(--tint-plan); }
.plan__plus { color: var(--ink); }
.plan__badge--ghost { background: transparent; }       /* réserve de place invisible : aucune teinte */
.final { background: var(--tint-final); }

/* -----------------------------------------------------------------------------
   4. Aucune ombre — survols au bord et au léger déplacement
   -------------------------------------------------------------------------- */
.card:hover,
.guide-card:hover,
.feature:hover,
.hover-lift:hover { box-shadow: none; }
.hover-lift:hover,
.guide-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.card--static:hover { transform: none; border-color: var(--line); }

/* Tolérés : menu déroulant et info-bulle du parcours guidé, au plus 1 px. */
.more__panel,
.tour__label { box-shadow: 0 1px 2px rgba(17, 24, 39, .05); }
.tour__cursor { filter: none; }             /* le curseur a déjà son contour encre */
.tour .is-tour-hover,
.tour .is-tour-active {
  box-shadow: none;
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   5. Couvertures révélées par balayage : le cadre porte le filet, l'image se pose
   -------------------------------------------------------------------------- */
.guide-card__media { display: block; overflow: hidden; border-bottom: 1px solid var(--line); }
.guide-card__media > .guide-card__cover { border-bottom: 0; }

/* -----------------------------------------------------------------------------
   6. Coches du kit défilement : pastille grise, coche accent
   -------------------------------------------------------------------------- */
.check__ring { fill: var(--neutral-pill); }
.plan--featured .check__ring { fill: #FFF; }
.ticks li > .check,
.incl li > .check,
.billing__list li > .check {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
}
.facts li > .check { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; }
.h3 > .check { width: 22px; height: 22px; margin-right: 10px; vertical-align: -4px; }

@media (prefers-reduced-motion: reduce) {
  .hover-lift:hover,
  .guide-card:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   7. Défilement : durées ramenées dans la fourchette 400–700 ms du brief
   (le kit reste intact, on surcharge ici).
   -------------------------------------------------------------------------- */
.has-scroll [data-wipe] { transition-duration: .7s; }
.has-scroll [data-wipe] > :is(img, svg, picture, video, .wipe__media) { transition-duration: .7s; }
.has-scroll [data-wipe]:not(.is-in) > :is(img, svg, picture, video, .wipe__media) { transform: scale(1.04); }
.has-scroll [data-split] .split-text__item { transition-duration: .6s; }
.has-scroll [data-split="lines"] { --split-stagger: 80ms; }

/* Barre de lecture : c'est un mouvement lié au défilement, donc absente en
   « animations réduites » (état final immédiat). Cela la retire aussi des
   captures pleine page, faites dans ce mode, où Chromium la rendait pleine
   largeur comme une bordure ajoutée. Visible en navigation normale. */
@media (prefers-reduced-motion: reduce) {
  .read-progress { display: none; }
}

/* -----------------------------------------------------------------------------
   8. v3.3 (reprise du 23/09) — bande « Les outils Belentia » en animations
   réduites, pour les quatre pages (article ne charge pas v32.css) : plus de
   défilé figé collé au bord gauche et coupé à droite, plus de groupe dupliqué ;
   les sept outils se rangent au centre, sur une ou plusieurs lignes.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Boucle 2 : le kit pose désormais un fondu d'un seul côté sur un défilé
     figé ; ici les puces sont rangées au centre, sans rien de coupé : aucun
     fondu, sinon les puces de droite pâliraient (Gestion, QR Code).
     Boucle 3 : le kit aligne aussi toute piste figée sur la gouttière du
     contenu (padding-inline-start, spécificité 0,4,0), ce qui décalait la
     rangée centrée vers la droite ; les quatre pages portent donc la classe
     du kit .marquee--wrap-static (centrée, sans fondu, gouttière symétrique).
     Le kit ne replie pas le groupe de puces lui-même : les règles
     ci-dessous restent pour ça. */
  .tools .marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .tools .marquee__track {
    width: auto;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .tools .marquee__group { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .tools .marquee__group[aria-hidden="true"] { display: none; }
}

/* -----------------------------------------------------------------------------
   9. v3.3, boucle 2 — navigation des quatre pages : « Guides » figure dans le
   menu « Plus » et dans le panneau mobile. La page courante est repérée comme
   « Tarifs » sur tarifs.html : encre et graisse 600 sur ordinateur (le résumé
   « Plus » aussi quand la page courante est dans son menu), couleur de l'outil
   dans le panneau mobile.
   -------------------------------------------------------------------------- */
.more__panel a[aria-current] { color: var(--ink); font-weight: 600; }
.more--current > summary { color: var(--ink); font-weight: 600; }
.mobile-panel nav a[aria-current] { color: var(--accent); }