/* =============================================================================
   Mot de passe by Belentia — « v3 affinée » (22/09/2026)
   -----------------------------------------------------------------------------
   Feuille partagée par A.html, blog.html, article.html et tarifs.html.
   Chargée APRÈS le <style> de chaque page : elle ne fait que retirer.
     1. Moins d'orange : l'accent reste sur le bouton principal, le mot du H1,
        l'onglet actif et quelques chiffres clés. Le reste passe en gris neutre.
     2. Aucune ombre : un filet 1 px #E6E8EE sépare quand il le faut.
        Seuls tolérés : menu « Plus », étiquette du curseur (0 1px 2px .05).
     3. Réglage du kit de défilement : 400–700 ms, décalages 12–20 px.
   ========================================================================== */

:root {
  --neutral-pad: #F2F3F5;                 /* pastilles d'icônes, chips */
  --btn-line: #D9DCE3;                    /* bord des boutons secondaires */
  --eyebrow: #6B7280;
  --accent-5: color-mix(in srgb, var(--accent) 5%, #FFF);   /* carte tarif */
  --accent-4: color-mix(in srgb, var(--accent) 4%, #FFF);   /* bandeau final */
}
@supports not (color: color-mix(in srgb, #000 5%, #fff)) {
  :root { --accent-5: #FEF8F3; --accent-4: #FFF9F5; }
}

/* ---------------------------------------------------------------------------
   1. Couleur : l'orange en touches
   ------------------------------------------------------------------------ */

/* Eyebrow : gris, capitales espacées, un point de 6 px de la couleur de l'outil. */
.eyebrow,
.section-head .eyebrow,
.prose .eyebrow,
.practice .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  color: var(--eyebrow);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.hero__head .eyebrow,
.cta__inner .eyebrow,
.try__inner .eyebrow { margin-inline: auto; }

/* Pastilles d'icônes : fond gris, trait de la couleur de l'outil. */
.card__icon,
.fact__icon,
.ticks__mark {
  background: var(--neutral-pad);
  color: var(--accent);
}
/* Marque : c'est l'identité, pas un remplissage d'interface.
   Pied de page : carré orange plein, comme en v3.
   Nav : pastille grise (un seul aplat orange dans le premier écran),
   cadenas tracé à 2 px pour ne pas paraître désactivé. */
.nav .brand__mark {
  background: var(--neutral-pad);
  color: var(--accent);
}
.nav .brand__mark svg { stroke-width: 2; }
.footer .brand__mark {
  background: var(--accent);
  color: var(--accent-ink, #FFF);
}

/* Chips non sémantiques : gris. */
.chip { background: var(--neutral-pad); color: #4B5563; }
.chip--neutral { background: var(--neutral-pad); color: #4B5563; } /* 6,8:1 sur le fond gris (boucle 9,5) */

/* Boutons secondaires : bord gris, texte encre ; au survol, bord de l'outil. */
.btn--secondary,
.btn--secondary:focus-visible {
  background: var(--canvas);
  color: var(--ink);
  border-color: var(--btn-line);
}
.btn--secondary:hover {
  background: var(--canvas);
  color: var(--ink);
  border-color: var(--accent);
}

/* Identifiants d'emplacements d'images : gris. */
.slot__id { color: var(--muted); }

/* Strip « Les outils Belentia » : blanc, points gris, seul l'outil courant en orange. */
.tools__list a:hover {
  background: var(--canvas);
  border-color: var(--accent);
  color: var(--ink);
}
.tools__list a[aria-current="page"] {
  background: var(--canvas);
  border-color: var(--line-strong);
  color: var(--ink);
}
.tools__dot { background: var(--line-strong); }
.tools__list a[aria-current="page"] .tools__dot { background: var(--accent); }


/* ---------------------------------------------------------------------------
   2. Aucune ombre
   ------------------------------------------------------------------------ */
.gen,
.tour-app,
.price,
.frame,
.card, .card:hover,
.guide-card, .guide-card:hover,
.hover-lift, .hover-lift:hover {
  box-shadow: none;
}
/* Survol des cartes : un bord plus net et 2 px de déplacement, rien d'autre. */
.guide-card.hover-lift:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}
/* Menu « Plus » : ombre minimale tolérée. */
.more__panel { box-shadow: 0 1px 2px rgba(17, 24, 39, .05); }
/* Curseur de démonstration : ni ombre portée ni halo ; l'étiquette est une info-bulle. */
.tour__cursor { filter: none; }
.tour__label { box-shadow: 0 1px 2px rgba(17, 24, 39, .05); }
.tour .is-tour-hover,
.tour .is-tour-active {
  box-shadow: none;
  outline: 3px solid var(--accent-ring);
  outline-offset: 1px;
}
/* Poignées des curseurs : bord blanc, sans anneau d'ombre. */
input[type="range"]::-webkit-slider-thumb { box-shadow: none !important; }
input[type="range"]::-moz-range-thumb { box-shadow: none !important; }


/* ---------------------------------------------------------------------------
   3. Kit de défilement : plus court, plus doux
   ------------------------------------------------------------------------ */
.has-scroll [data-split] .split-text__item {
  transition-duration: .7s;
}
/* Tous les titres se lèvent ligne par ligne, au même rythme. */
.has-scroll [data-split="lines"] { --split-stagger: 90ms; }

.has-scroll [data-wipe] {
  transition-duration: .7s;
  transition-timing-function: cubic-bezier(.45, 0, .2, 1);
}
.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);
}

/* Coches : pastille grise, trait orange. */
.check__ring { fill: var(--neutral-pad); }

/* Étapes de scène : 16 px de course, 500–600 ms. */
.has-scroll .scene [data-step-show] {
  transition: opacity .5s var(--scroll-ease), transform .6s var(--scroll-ease);
}
.has-scroll .scene [data-step-show]:not(.is-active) { transform: translate3d(0, 16px, 0); }
.has-scroll .scene [data-step-show].is-past { transform: translate3d(0, -16px, 0); }

/* Barre de lecture : la durée reste « auto » même si une feuille de capture
   ou d'accessibilité force animation-duration (sinon la barre serait pleine). */
.has-sda .read-progress { animation-duration: auto !important; }

/* v3.3 (reprise du 23/09) — coupures de titres : les h1/h2 du socle sont déjà
   équilibrés ; on étend l'équilibrage aux h3 et aux questions de FAQ, et
   .nowrap garde ensemble un groupe (« un mot de passe ») dans les titres non
   découpés. Boucle 2 : le découpage partagé (data-split) garde désormais les
   espaces insécables ; les titres découpés lient leurs groupes par &nbsp;
   (le gluon U+2060 et titres.js sont retirés). */
h3, .h3, .faq summary { text-wrap: balance; }
.nowrap { white-space: nowrap; }

/* Boucle 2 — textes courants : plus de mot seul sur la dernière ligne
   (« encore. », « chiffres. », « séparés. », « l'onglet. », « repartez. »,
   « proposé. », « Belentia », accroches des guides…). Les tuiles et les cartes
   se lisent côte à côte ; la règle vaut pour tout paragraphe, liste et
   citation des 4 pages (les titres restent équilibrés, « balance »). */
p, li, dd, blockquote, figcaption { text-wrap: pretty; }

/* v3.3 (reprise du 23/09) — pied de page en tablette : quand les liens passent
   à la ligne, ils s'alignent à gauche sous la marque (ils restaient calés à
   droite sous un vide, deux axes d'alignement pour trois éléments). Mesuré :
   la rangée tient sur une ligne à partir de 1 100 px. */
@media (min-width: 721px) and (max-width: 1099px) {
  .footer__links { margin-left: 0; width: 100%; justify-content: flex-start; }
}