/* ==========================================================================
   La barre de sections, et la carte de fin de page.
   Maquette validée le 2026-09-09 : design/MAQUETTE_ONGLETS.html, variante B.
   ========================================================================== */

/* Transition entre onglets. `navigation: auto` ne s'applique qu'aux
   navigations same-origin et n'est lue que par les navigateurs qui la
   supportent : ailleurs, la navigation reste celle du navigateur, à
   l'identique. Aucun coût, aucun repli à écrire. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* Non collante sous 900 px — décision D5. Deux barres collantes mangeraient
   un tiers d'un écran de 667 px de haut.

   ⚠️ La formulation d'origine disait « la sticky d'install est le SEUL chrome
   permanent du mobile ». C'est vrai de l'accueil, et faux des trois autres
   onglets : `#install-bar` n'existe que dans index.html, et home.js qui la
   pilote n'y est chargé que là. Sur /tellys en 375 px, un visiteur qui descend
   n'a donc plus AUCUN CTA d'install à l'écran — ni barre basse, ni barre
   d'onglets, ni entête, que main.css passe en `static` sous 900 px.

   C'est une conséquence assumée du contenu minimal, pas un oubli : ces pages
   se remplissent aux étapes 18, 19 et 20, et leur CTA de fin de page viendra
   avec. À revoir si elles restent longtemps en l'état.

   Au-dessus de 900 px le header est lui-même collant (main.css l. 287), donc
   la barre se pose sous lui. On lit `--header-h` et non un 64 px en dur : le
   plan a été écrit avant que le token n'existe, la valeur réelle est 78. */
.tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 940px;
  margin: 6px auto 0;
  padding: 0 20px;
}

@media (min-width: 900px) {
  .tabs {
    position: sticky;
    top: var(--header-h);
    z-index: 40;
    margin-top: 10px;
    padding-bottom: 12px;
  }

  /* Centré, et SEULEMENT ici. `justify-content: center` sur un conteneur qui
     déborde rend son début inatteignable au scroll dans plusieurs moteurs :
     le contenu est centré, donc il dépasse des DEUX côtés, et rien ne permet
     de remonter vers la gauche. On ne centre donc qu'au-dessus de 900 px, où
     l'on sait que ça tient : quatre onglets font 405 px pour 900 px utiles, et
     le plafond de cinq laisse encore de la marge. Sous 900 px la piste reste
     alignée au début, ce qui est de toute façon le bon comportement quand on
     déborde. */
  .tabs__scroll { justify-content: center; }

  /* Le fond est PLEINE LARGEUR et TRANSLUCIDE, posé en ::before derrière les
     libellés. Trois tentatives ont échoué avant celle-ci ; le raisonnement
     mérite d'être gardé, parce que chaque échec avait l'air correct.

     1. Dégradé sur la barre : le texte défile LISIBLEMENT dans la zone de
        fondu. Mesuré, le h1 traversait la boîte.
     2. Aplat noir opaque : lisible, mais la barre fait 940 px alors que la
        page est pleine largeur. Au passage de la section claire `.categories`
        (rgb 207,203,191), c'est un rectangle noir posé sur du clair, le clair
        visible de chaque côté — exactement la boîte que la direction refuse.
     3. Celle-ci : pleine largeur, donc une bande et non un rectangle ; et la
        MÊME matière que la pilule de nav, un voile sombre flouté. Sur le noir
        elle est invisible, sur le clair elle se lit comme du verre, et le
        flou rend le texte qui passe dessous illisible sans le masquer d'un
        aplat.

     `left: 50%` + `width: 100vw` + `translateX(-50%)` : la barre est centrée
     dans 940 px, son fond doit déborder jusqu'aux bords de la fenêtre. */
  .tabs::before,
  .tabs::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
  }

  /* `top: 0` et pas une valeur négative : la gouttière entre l'en-tête et la
     barre se ferme en amont, par le `min-height` de l'en-tête qui rend
     `--header-h` vrai (entete.css). La rattraper ici aurait couplé ce voile au
     `margin-top` ci-dessus, sans corriger la cause. */
  .tabs::before {
    top: 0;
    bottom: 0;
    z-index: -1;
    background: rgba(8, 8, 10, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  /* Le voile de transition, SOUS la barre et jamais derrière ses libellés. */
  .tabs::after {
    top: 100%;
    height: 14px;
    background: linear-gradient(rgba(8, 8, 10, .82), transparent);
  }
}

/* La zone de scroll. Les quatre libellés français font 405 px : ils débordent
   d'un écran de 375. Mesuré, pas estimé — c'est la raison d'être de ce bloc. */
.tabs__scroll {
  display: flex;
  gap: 2px;
  /* `position: relative` n'est pas décoratif : onglets.js recentre l'onglet
     actif avec `actif.offsetLeft - (piste.clientWidth - actif.offsetWidth) / 2`,
     et `offsetLeft` se mesure depuis l'`offsetParent`. Sans position ici, ce
     n'est pas la piste : `offsetLeft` inclut alors la position de la piste
     dans son ancêtre positionné, et le recentrage vise à côté — précisément
     sur mobile, le seul endroit où il sert. */
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Exactement la largeur du masque de bord : sans elle, le focus clavier
     amène le dernier onglet à ras du bord et le segment droit de son anneau
     tombe dans le dégradé, à ~14 % d'opacité. Mesuré. */
  scroll-padding-inline: 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tabs__scroll::-webkit-scrollbar { display: none; }

/* Masques de bord : ils disent qu'il reste quelque chose à droite sans ajouter
   ni flèche ni cadre — la direction interdit l'un et l'autre. Le dégradé part
   de 14 px pour ne pas manger le premier libellé au repos. */
@media (max-width: 899px) {
  .tabs__scroll {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px,
                                        #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px,
                                        #000 calc(100% - 14px), transparent 100%);
  }
}

/* `min-height: 44px` avec `align-items: center`, et NON le calque `::after`
   documenté ailleurs dans ce dépôt : `overflow-x: auto` sur le parent calcule
   `overflow-y: auto`, donc il clipperait le calque. Ici agrandir la boîte est
   sans effet de bord, l'onglet n'étant pas une pilule dont la taille compte. */
.tab {
  display: flex;
  align-items: center;
  min-height: 44px;
  flex: 0 0 auto;
  scroll-snap-align: center;
  padding: 0 14px;
  white-space: nowrap;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--faint);              /* 7,0:1 sur le noir */
  transition: color .18s ease, box-shadow .18s ease;
}
.tab:hover { color: var(--text); }
.tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  border-radius: 6px;
}

/* Variante B. L'or du polar, pas l'orange : la direction n'autorise l'accent
   orange que sur UNE pilule, et c'est le CTA d'install qui la porte. L'or
   appartient à la même famille chaude sans lui disputer l'attention. */
.tab[aria-current] {
  color: var(--text);               /* 18,9:1 */
  box-shadow: inset 0 -2px 0 0 var(--gold);
}

/* Pas de slot CTA dans la barre, retiré le 2026-09-09.

   Le plan en prévoyait un, au motif qu'il n'y a pas de barre d'install basse
   sur desktop. C'est vrai, mais l'ENTÊTE est collante au-dessus de 900 px
   (main.css) : la pilule « Installer » de la nav ne quitte jamais l'écran. Le
   slot posait donc une SECONDE pilule blanche à 120 px de la première, presque
   identique, et un troisième bouton d'install apparaissait dans le premier
   écran avec le primaire de la page. Trois fois le même appel, empilés.

   Ce qui reste : la pilule de nav (chrome permanent) et `.cta-page` (le
   primaire de la page, seul à porter l'accent). */

/* Le primaire d'une page d'onglet. C'est LUI qui porte l'accent, et il est
   seul sur sa page : la pilule de nav est blanche, précisément pour qu'il n'y
   ait qu'une pilule orange à l'écran. */
.cta-page {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sh-cta);
  transition: background .15s ease;
}
.cta-page:hover { background: var(--accent-hi); }
.cta-page:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }

/* ---------- Carte de fin de page ---------------------------------------- */

.suite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  max-width: 560px;
  margin: var(--sp-5) auto 0;
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--stroke);
  text-decoration: none;
  transition: background-color .18s ease;
}
.suite:hover { background: var(--card-hi); }
.suite:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.suite__k {
  display: block;
  margin-bottom: 5px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--subtle);
}
.suite__t {
  font-family: var(--f-disp);
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: 21px;
  color: var(--text);
}
.suite__a { color: var(--gold); font-size: 22px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .tab, .suite, .cta-page { transition: none; }
}

/* ---------- Pages d'onglet en contenu minimal ---------------------------
   Ces règles servent /tellys, /application et /confiance tant qu'elles sont
   en `noindex`. Les étapes 18, 19 et 20 leur donneront leur mise en page
   propre ; d'ici là elles doivent être lisibles, pas décorées. Aucune boîte,
   aucun cadre : la direction vaut aussi pour une page provisoire. */

.section-mince {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--sp-5) 20px var(--sp-6);
}
.section-mince h1 {
  font-family: var(--f-disp);
  font-weight: 800;
  letter-spacing: var(--tight);
  font-size: var(--t-h2);
  line-height: 1.04;
  text-wrap: balance;
  margin: 0 0 var(--sp-3);
}
.lede-sec {
  color: var(--muted);
  font-size: 17px;
  margin: 0 0 var(--sp-3);
}
.cta-sec { margin: var(--sp-4) 0 0; }

.liste-legale {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px var(--sp-3);
}
.liste-legale a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, .35);
  font-size: 15px;
}
.liste-legale a:hover { border-bottom-color: var(--gold); }