/* =============================================================================
   gestion/affine.css — « v3 affinée » de Gestion by Belentia (22/09/2026)
   -----------------------------------------------------------------------------
   Chargée EN DERNIER (après base.css, motion.css, scroll.css et le <style> de
   la page). Elle ne change ni la composition, ni les polices, ni les contenus
   de la v3. Elle fait trois choses, et seulement celles-là :
     1. moins de couleur principale : l'émeraude reste sur le bouton principal,
        le mot du H1, l'onglet actif et quelques chiffres clés ; eyebrows,
        pastilles, chips et boutons secondaires passent en gris neutre ;
     2. aucune ombre : filet 1 px #E6E8EE à la place ; seul le menu « Plus »
        garde 0 1px 2px à 5 % ;
     3. des entrées au défilement plus douces (400–700 ms, 12–20 px).
   ========================================================================== */

:root {
  --pastille: #F2F3F5;                                      /* fond des pastilles, chips */
  --line-btn: #D9DCE3;                                      /* bord des boutons secondaires */
  --accent-5: color-mix(in srgb, var(--accent) 5%, #FFF);   /* carte tarif mise en avant */
  --accent-4: color-mix(in srgb, var(--accent) 4%, #FFF);   /* bandeau final */
  --shadow: none;
  --scroll-offset: 72px;                                    /* ancres sous la barre collante */
}
@supports not (color: color-mix(in srgb, #000 5%, #fff)) {
  :root { --accent-5: #F3FAF7; --accent-4: #F5FBF8; }
}


/* ---------------------------------------------------------------- 1. Couleur */

/* Eyebrow : gris, capitales espacées, précédé d'un point de 6 px émeraude. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6B7280;
  letter-spacing: .1em;
}
.eyebrow::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Marque : pastille grise, glyphe émeraude au trait.
   Variante « marque v3 » (question posée à Kylian) : <html data-mark="v3">
   rend au carré son aplat émeraude — c'est le logo, il est compté à part. */
.brand__mark { background: var(--pastille); color: var(--accent); border-color: transparent; }
html[data-mark="v3"] .brand__mark { background: var(--accent); color: #FFF; border-color: var(--accent); }

/* Boutons secondaires : bord gris, texte encre ; au survol, bord émeraude. */
.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);
}
/* « Connexion » : simple lien texte, souligné au survol. « Créer un groupe »
   reste le seul bouton à contour de la barre. */
.nav__actions .btn--ghost {
  border-color: transparent;
  background: transparent;
  padding-inline: 10px;
}
.nav__actions .btn--ghost:hover {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn--ghost:hover { background: var(--canvas); border-color: var(--line-btn); }

/* Chips non sémantiques : gris. */
.chip,
.chip--neutral { background: var(--pastille); color: #4B5563; white-space: nowrap; }

/* Pastilles d'icônes : fond gris, icône au trait émeraude. */
.card__icon,
.ticks__mark,
.tools__mark { background: var(--pastille); color: var(--accent); }

/* Liens fléchés : texte encre, flèche émeraude, soulignement au survol. */
.link-arrow { color: var(--ink); }
.link-arrow svg { color: var(--accent); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Encadrés de conclusion : plus de fond teinté, un filet suffit. */
.example__banner { background: var(--canvas); }

/* Strip « Les outils Belentia » : l'outil courant = bord émeraude, rien d'autre. */
.tools a:hover { background: var(--canvas); border-color: var(--accent); }
.tools a[aria-current="page"] { background: var(--canvas); color: var(--ink); border-color: var(--accent); }

/* Carte tarif mise en avant : seule carte teintée (5 %). */
.plan--featured { border: 1px solid var(--accent); background: var(--accent-5); }
.plan--featured .chip { background: var(--canvas); color: var(--accent); }

/* Coches du kit : pastille grise, trait émeraude. */
.check__ring { fill: var(--pastille); }
.plan--featured .check__ring { fill: var(--canvas); }

/* Listes à coches (tarifs) : la coche du kit remplace la pastille. */
.ticks li[data-check] { gap: 0; }
.ticks li[data-check] > .check { margin-top: .12em; margin-right: .6em; }


/* ---------------------------------------------------------------- 2. Ombres */

.card:hover,
.guide-card:hover { box-shadow: none; }
.hover-lift:hover { box-shadow: none; border-color: var(--line-strong); }
.glow-border:hover,
.glow-border:focus-within { box-shadow: none; }

/* Menu déroulant : seule ombre tolérée, au plus 0 1px 2px à 5 %. */
.more__panel { box-shadow: 0 1px 2px rgba(17, 24, 39, .05); }

/* Démonstration au curseur : ni ombre portée, ni halo ; un contour à la place. */
.tour__cursor { filter: none; }
.tour__label { box-shadow: none; }
.tour .is-tour-hover,
.tour .is-tour-active {
  box-shadow: none;
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}


/* ---------------------------------------------------------------- 3. Mouvement */

/* Titres : lignes révélées en douceur (montée courte + fondu, 700 ms). */
.has-scroll [data-split="lines"] { --split-stagger: 90ms; }
.has-scroll [data-split] .split-text__item {
  transition: transform .7s var(--scroll-ease), opacity .6s var(--scroll-ease);
  transition-delay: calc(var(--split-delay, 0ms) + var(--i, 0) * var(--split-stagger, 55ms));
}
@media (prefers-reduced-motion: no-preference) {
  .has-scroll [data-split]:not(.is-in) .split-text__item {
    transform: translate3d(0, 40%, 0);
    opacity: 0;
  }
}

/* Balayage des visuels : 700 ms, léger dézoom (1,04 au lieu de 1,12). */
.has-scroll [data-wipe] {
  transition: clip-path .7s cubic-bezier(.65, 0, .25, 1) var(--wipe-delay, 0ms);
}
.has-scroll [data-wipe] > :is(img, svg, picture, video, .wipe__media) {
  transition: transform .7s var(--scroll-ease) var(--wipe-delay, 0ms);
}
@media (prefers-reduced-motion: no-preference) {
  .has-scroll [data-wipe]:not(.is-in) > :is(img, svg, picture, video, .wipe__media) {
    transform: scale(1.04);
  }
}

/* Révélations motion.js : décalage 16 px, 600 ms. */
:root { --motion-t: 600ms; }
.has-motion [data-reveal]:not(.is-revealed):not([data-reveal="fade"]):not([data-reveal="scale"]) {
  transform: translate3d(0, 16px, 0);
}
@media (prefers-reduced-motion: reduce) {
  .has-motion [data-reveal]:not(.is-revealed):not([data-reveal="fade"]):not([data-reveal="scale"]) { transform: none; }
}


/* ---------------------------------------------------------------- 4. Finitions */

/* Barre de lecture : l'animation pilotée par le défilement garde une durée
   « auto », même quand un outil de capture fige les animations à 0 s (sinon
   elle s'affiche pleine en haut des PNG). */
.has-sda .read-progress { animation-duration: auto !important; }

/* Bandeau final des pages secondaires : même carte que celui de l'accueil
   (fond 4 %, filet 1 px, coins 16 px) dans une section blanche. */
.cta-band__inner.final-card {
  max-width: none;
  padding: var(--space-8) var(--space-5);
  border-radius: 16px;
  background: var(--accent-4);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, #FFF);
}
.cta-band__inner.final-card > * { max-width: 640px; margin-inline: auto; }
.cta-band__inner.final-card p { color: var(--muted); }
@media (max-width: 720px) {
  .cta-band__inner.final-card { padding: var(--space-6) var(--space-3); }
}
