/* ==========================================================================
   COPIE DES PRODUITS IA · boutons.css · les cinq types de bouton · proposition 2 · pas encore lié par une page
   ==========================================================================
   LE SITE PUBLIE FAIT FOI, PAR LE MIROIR (CLAUDE.md § 8). Cette copie
   se corrige depuis 0700_BRANDING_IDENTITE/07.01_Charte/tokens/boutons.css,
   jamais l'inverse. Fichier cree le 2026-08-31 · aucune page produit
   ne le lie encore, rien n'y a donc ete etendu ni retouche a la main.
   Si ce jour change, ecrivez-le ici avant de faire tourner cet outil
   a nouveau, ou l'extension partira au prochain passage (voir la note
   de tete de ce script sur pourquoi `palambur.css`, lui, reste hors
   de cette liste).

   RECOPIEE LE · 2026-09-22

   On la remet a jour, ou on verifie qu elle l est deja, par ·
       python3 _charte/synchroniser_charte.py --produits
       python3 _charte/synchroniser_charte.py --produits --verifier
   ========================================================================== */
/* ==== COPIE DU SITE · debut · NE RIEN ECRIRE ICI ==== */
/* ═══════════════════════════════════════════════════════════════════════
   LES BOUTONS PALAMBUR · une seule source pour le site ET les produits IA
   ═══════════════════════════════════════════════════════════════════════
   Proposition 2 de la planche des boutons, retenue par Victor le 23.08.2026
   (« go boutons, mais crée une variante du bouton rouge en bouton vert »,
   puis « il faut aussi penser aux boutons dans Chaptal et autres produits »).

   SIX TYPES couvrent tout · le principal (dégradé marine qui glisse), ses
   deux variantes de même forme (ROUGE · acte engageant, VERT · acte
   favorable), le secondaire (filet), le lien (texte + flèche), la pilule
   segmentée (un choix entre deux et quatre options), et depuis le
   01.09.2026 le bouton de LANCEMENT (§ SIXIÈME TYPE plus bas · lancer un
   outil IA, payer) — bleu vif jusqu'au 16.09.2026 au soir, aplat navy uni
   depuis (voir la note datée dans le § SIXIÈME TYPE). Deux tailles
   (normale, .btn--petit) · deux fonds (.btn-invert sur le sombre). Une
   seule forme ronde, la pilule · ni ombre, ni rayon nouveau.
   (Cet en-tête a dit « CINQ TYPES » un jour de trop · le sixième était posé
   134 lignes plus bas dans le même fichier, et le miroir recopie l'en-tête
   tel quel · une contradiction qui voyageait, corrigée le 01.09.2026.)

   QUI LIT CE FICHIER · le site, par global.css · les produits IA, par le
   MIROIR `0700_BRANDING_IDENTITE/07.01_Charte/tokens/boutons.css` (même règle
   que colors.css · le site publié fait foi, le miroir se corrige, jamais
   l'inverse). Un produit qui recopie ces règles chez lui porte une dette.
   Le banc `npm run boutons:verifier` compte les rayons survivants.
   ═══════════════════════════════════════════════════════════════════════ */

/* LE BOUTON PRINCIPAL · proposition 2 retenue par Victor le 23.08.2026 (planche
   des boutons) · un dégradé marine qui GLISSE au survol (la surface est plus
   large que le bouton de 40 px, et c'est sa position qui bouge · pas de
   recalcul de couleur), un halo de focus au clavier, une pression qui tasse
   de 3 %. Toujours la pilule, seule forme ronde que la charte admet · ni
   ombre, ni rayon nouveau. Deux variantes de même forme · ROUGE pour les
   actes engageants (créer, payer, confirmer, effacer), VERT pour les actes
   favorables (valider, activer · vert = avantage, rouge = risque, la règle
   de marque des publications). Le texte blanc se lit sur le MILIEU du
   dégradé, là où il est rendu · les trois milieux tiennent 4.5:1. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: var(--w-semi);
  font-size: var(--type-body-web);
  letter-spacing: 0.01em;
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--pal-navy);
  background-image: linear-gradient(100deg, var(--pal-navy-deep) 0%, var(--pal-navy) 55%, var(--pal-navy-light) 100%);
  background-size: calc(100% + 40px) 100%;
  background-position: 0 0;
  color: var(--pal-canvas-pure);
  cursor: pointer;
  transition: background-position var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-primary:hover  { background-position: -40px 0; }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-utility:focus-visible,
.btn-invert:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.18em color-mix(in srgb, var(--pal-navy) 28%, transparent);
}
.btn-primary--rouge {
  background-color: var(--pal-red-ink);
  background-image: linear-gradient(100deg, var(--pal-red-deep) 0%, var(--pal-red-ink) 55%, var(--pal-red) 100%);
}
.btn-primary--vert {
  background-color: var(--pal-green-ink);
  background-image: linear-gradient(100deg, var(--pal-green-deep) 0%, var(--pal-green-ink) 55%, var(--pal-green-light) 100%);
}
/* Secondary — flat, hairline */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: var(--w-med);
  font-size: var(--type-body-web);
  padding: 14px 28px;
  background: transparent;
  /* Les deux jetons sont redéfinis par la surface (claire ou sombre), jamais
     par un sélecteur descendant : une carte claire imbriquée dans une section
     sombre récupère ainsi automatiquement les bonnes couleurs. */
  color: var(--btn-2-fg, var(--pal-navy));
  border: 1.5px solid var(--btn-2-fg, var(--pal-navy));
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.btn-secondary:hover {
  background: var(--btn-2-fg, var(--pal-navy));
  color: var(--btn-2-on, var(--pal-canvas-pure));
}

/* Le bouton utilitaire · depuis le 23.08.2026 (proposition 2), la PETITE
   PILULE SECONDAIRE · filet, texte marine, remplissage au survol. Il était
   un rectangle plein à angle vif · le seul bouton du site sans pilule, et
   le quatrième rayon d'une famille qui n'en admet qu'un. Même classe, zéro
   balisage touché · treize pages en portent. */
.btn-utility {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-head); font-weight: var(--w-semi);
  font-size: var(--type-meta-web); letter-spacing: 0.01em;
  padding: 9px 18px; border: 1.5px solid var(--btn-2-fg, var(--pal-navy)); border-radius: var(--radius-pill);
  background: transparent; color: var(--btn-2-fg, var(--pal-navy)); cursor: pointer; text-decoration: none;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.btn-utility:hover { background: var(--btn-2-fg, var(--pal-navy)); color: var(--btn-2-on, var(--pal-canvas-pure)); }

/* Le principal sur fond sombre · le même dégradé, en clair · canvas vers
   blanc, texte marine · et il glisse pareil. Le jaune au survol est parti ·
   un bouton qui change de couleur au survol ne ressemble plus à lui-même. */
.btn-invert {
  background-color: var(--pal-canvas-pure);
  background-image: linear-gradient(100deg, var(--pal-hairline) 0%, var(--pal-canvas-pure) 55%, var(--pal-canvas-pure) 100%);
  color: var(--pal-navy);
}
.btn-invert:hover { background-position: -40px 0; color: var(--pal-navy-deep); }

/* LE LIEN · le troisième chemin, texte marine et une flèche qui avance ·
   sur fond sombre, le jaune de la charte. */
.btn-lien {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: var(--w-semi); font-size: var(--type-body-web);
  color: var(--pal-navy); background: none; border: 0; padding: 14px 4px; cursor: pointer; text-decoration: none;
}
.btn-lien::after { content: '→'; transition: transform var(--dur-fast) var(--ease-out); }
.btn-lien:hover::after { transform: translateX(4px); }
.btn-lien:focus-visible { outline: none; box-shadow: 0 0 0 0.18em color-mix(in srgb, var(--pal-navy) 28%, transparent); }

/* LE BOUTON DE LANCEMENT · SIXIÈME TYPE, posé le 01.09.2026 · Victor,
   capture Whatnot à l'appui (le bouton d'enchère « Bid : $1 » ») ·
   « léger slide, petite vibration […] utilisé quand on lance un outil IA
   et quand on fait un achat ». Les cinq types ci-dessus couvrent la
   navigation et les actes engageants « au repos » ; celui-ci est pour le
   geste qui a un compte à rebours, une urgence, une rareté — s'abonner,
   acheter une réserve, ouvrir l'outil qu'on vient de choisir.
   BLEU VIF, PAS LE NAVY ÉTEINT DE LA MARQUE · trois relectures le même
   jour. D'abord amber (refusé, « je n'ai pas ce orange »), puis un ciel
   dilué à 45 % de `--pal-navy` (refusé à son tour vu rendu sur /outils/,
   « je n'aime pas les boutons de cette couleur » — le navy de la marque
   est un bleu MUTÉ, et le diluer ne fait qu'un gris-bleu plus pâle, jamais
   un vif). Victor a alors montré deux références : une bande de bleus
   électriques (bleu → cyan, saturés) puis une planche de sept pilules avec
   un DÉGRADÉ VERTICAL doux (clair en haut, sombre en bas) — « j'aime
   beaucoup ça aussi ». `--bl-vif` est une teinte NEUVE, hors de la palette
   `--pal-*` de la marque et volontairement plus saturée qu'elle · ce
   bouton reste l'exception documentée (§ ci-dessus, SIXIÈME TYPE), pas un
   changement de la charte générale.
   LES VALEURS VIVENT DANS colors.css DEPUIS LE 01.09.2026 AU SOIR
   (--bl-vif, --bl-vif-p1/p2/p3, § « bleu vif hors palette ») · en dur ici,
   elles étaient invisibles de charte.py et donc du miroir, des produits et
   des générateurs. Le même soir, l'audit de contraste a montré la première
   génération SOUS LE SEUIL texte (#2E7DF0 · 3.96:1, #7FADF5 · 2.28:1 sous
   blanc, quand colors.css calibre tout le site à 4.5 minimum) · les quatre
   valeurs actuelles passent, mesures dans colors.css.
   VERTICAL, PAS HORIZONTAL · la planche de pilules dégrade du haut vers le
   bas, pas de gauche à droite · le dégradé a changé d'axe avec la couleur,
   et le survol glissait horizontalement (`background-position`) pour
   RÉVÉLER ce dégradé-là précisément · un dégradé vertical ne glisse plus
   à l'horizontale (il resterait identique). LE SURVOL ASSOMBRIT (brightness
   .95) · il éclaircissait (1.08) jusqu'au 01.09 au soir, ce qui poussait un
   contraste déjà juste SOUS le seuil précisément au moment où l'œil est sur
   le bouton · assombrir donne le même retour visuel et AMÉLIORE le
   contraste au lieu de le manger.
   LE DÉGRADÉ SUIT LE PALIER · trois variantes (`--p1`/`--p2`/`--p3`) qui
   approfondissent avec le palier, dans le même sens que les noms
   (Courant → Étendu → Complet) · le bouton générique (outils, réserve,
   sans notion de palier) porte le vif de base.
   LA FRONTIÈRE LANCER / PRIMARY, écrite pour ne plus se deviner page par
   page · `lancer` = PAYER (paliers, réserve) ET ACHETER UNE RESSOURCE DE
   FORMATION (mémo, présentation, contre écus) · `primary` garde le reste, y
   compris OUVRIR UN CONTENU DÉJÀ POSSÉDÉ (un prompt du corpus) · et le héros
   de l'accueil garde sa propre hiérarchie arbitrée (vert = favorable,
   23.08.2026), un bouton de plus ne la rejoue pas.
   RECENTRÉ LE 02.09.2026 · ce paragraphe rangeait encore « lancer un outil
   IA (l'ouvrir · /outils/, « Ouvrir Chaptal » […]) » dans `lancer`. Victor,
   ce jour-là : « sauf bouton glissière ou achat je préfère les boutons navy
   que les bleu ciel » · `SectionChaptal.astro` et `Outils.astro` sont
   repassés de `btn-lancer` à `btn-primary` pour que le bleu vif ne désigne
   plus QUE l'achat, jamais la simple ouverture d'un outil. Ce fichier ne le
   disait plus nulle part avant ce correctif — trouvé en préparant le
   changement de couleur du 16.09.2026 (§ ci-dessous), pas recorrigé avant.
   AMENDÉ LE 13.09.2026 · cette frontière rangeait encore la ressource de
   formation dans `primary` (« OUVRIR UN CONTENU […] une ressource »).
   Victor, après avoir vu le bouton du mémo (200 pts) en `primary` simple,
   a demandé « bouton glissière […] comme tout les achats » · un achat de
   200 écus se comporte, se ressent et doit donc SE VOIR comme les autres
   achats (paliers, réserve), pas comme l'ouverture d'un prompt déjà payé
   par l'abonnement. `EspaceClient.astro` (rangée `.ec-res__b`) est passé
   de `btn-primary` à `btn-lancer`.
   LE GLISSEMENT · le double chevron « » » glisse et s'efface en boucle,
   comme l'invite discrète d'un geste à faire — coupé sous
   `prefers-reduced-motion`.
   LA VIBRATION · une classe `.secoue`, posée puis retirée par le script du
   composant (`Button.astro`) au clic, plus `navigator.vibrate()` où le
   matériel le permet (silencieux ailleurs, jamais une erreur).
   COULEUR REVUE LE 16.09.2026 AU SOIR · Victor a comparé trois boutons vus
   en vrai (« Générer » de Méneval, « Ouvrir · 200 écus » de Chaptal, « Ouvrir
   le document » de l'espace client) et désigné celui de Chaptal comme la
   référence à garder partout, en écartant les deux autres — qui portaient
   pourtant déjà ce même `.btn-lancer`. Ce choix REVIENT sur le bleu vif
   choisi le 01.09.2026 (§ ci-dessus, trois relectures le même jour, navy
   dilué explicitement refusé) : le bouton de Chaptal (`.lt-verrou-cta`,
   `05_CHAPTAL/outil_chaptal.html`) est un aplat `--pal-navy` UNI, sans
   dégradé, qui fonce vers `--pal-navy-deep` au survol — exactement le style
   refusé trois semaines plus tôt. `--bl-vif` reste défini dans colors.css
   (plus **utilisé** par `.btn-lancer`) au cas où cette teinte revienne
   ailleurs · ne pas le supprimer sans vérifier qu'aucun autre bouton ne s'en
   sert encore. Le geste tactile « glisser pour dépenser » (poignée,
   `cursor:grab`) N'A PAS été repris ici : il reste réservé à Chaptal depuis
   le 01.09.2026 (§ ci-dessous, retiré du reste du site le jour même pour un
   vrai bug de seuil sur un clic souris ordinaire) · seul le chevron animé
   (`.btn-lancer__glisse`, déjà en place) porte l'idée de « glissière »
   ailleurs. */
.btn-lancer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: var(--w-semi);
  font-size: var(--type-body-web);
  letter-spacing: 0.01em;
  padding: 14px 26px;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--pal-navy);
  color: var(--pal-canvas-pure);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-lancer:hover  { background-color: var(--pal-navy-deep); }
.btn-lancer:active { transform: scale(0.97); }
.btn-lancer:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.18em color-mix(in srgb, var(--pal-navy) 28%, transparent);
}
/* Les trois profondeurs de palier · abandonnées avec le bleu vif le
   16.09.2026 (voir la note ci-dessus) · les trois paliers rendent
   aujourd'hui le même aplat navy, comme tout le reste de `.btn-lancer`.
   Classes gardées (pas de balisage à toucher dans EspaceClient.astro) mais
   sans effet visuel tant que ce choix tient. */
.btn-lancer--p1, .btn-lancer--p2, .btn-lancer--p3 { background-color: var(--pal-navy); }
/* LE PRIX NE SE COUPE JAMAIS EN DEUX · Victor · « tu ne peux pas avoir le
   montant et l'unité sur deux lignes […] s'abonner / 19.90 CHF/mois ».
   Deux lignes VOULUES (le verbe, puis le prix entier) plutôt qu'un
   retour à la ligne accidentel qui isolerait « CHF/mois ». */
.btn-lancer--prix { flex-direction: column; gap: 2px; line-height: 1.25; }
.btn-lancer--prix .btn-lancer__ligne2 { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn-lancer__glisse { display: inline-flex; animation: btn-lancer-glisse 1.6s ease-in-out infinite; }
@keyframes btn-lancer-glisse {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50%      { transform: translateX(5px); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-lancer__glisse { animation: none; }
}
.btn-lancer.secoue { animation: btn-lancer-vibre .3s ease-in-out; }
@keyframes btn-lancer-vibre {
  0%, 100% { transform: translateX(0) rotate(0); }
  20%      { transform: translateX(-2px) rotate(-1deg); }
  40%      { transform: translateX(2px) rotate(1deg); }
  60%      { transform: translateX(-1px) rotate(0); }
  80%      { transform: translateX(1px) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-lancer.secoue { animation: none; }
}

/* LA PETITE TAILLE, APRÈS LES CINQ TYPES, PAS ENTRE DEUX · déplacée ici le
   02.09.2026. Elle vivait entre `.btn-primary--vert` et `.btn-secondary` ·
   une déclaration d'auteur l'emportant à spécificité égale par ORDRE DE
   SOURCE, `.btn--petit` gagnait contre `.btn-primary` (avant elle) mais
   PERDAIT contre `.btn-secondary`, `.btn-utility`, `.btn-invert` et
   `.btn-lancer` (tous après elle) · leur propre `padding`/`font-size`
   survivait, silencieusement. Trouvé sur `#ec-cta-abo`
   (`.btn-secondary.btn--petit`, EspaceClient.astro) rendu à la taille
   normale (padding 14px 28px mesuré) au lieu de 9px 18px, en réponse à
   Victor · « les deux [le badge Abonné et S'abonner] doivent faire la même
   taille ». MÊME DÉFAUT SUR LES BOUTONS DE LA RÉSERVE (`.btn-lancer
   btn--petit`, § 24.08.2026), corrigé au passage sans qu'on l'ait demandé ·
   la règle est la même partout, le correctif ne pouvait pas être partiel. */
.btn--petit { font-size: var(--type-meta-web); padding: 9px 18px; gap: 6px; }

/* LE GLISSER-POUR-LANCER A VÉCU ICI DU 01.09.2026, LE MATIN, AU 01.09.2026,
   L'APRÈS-MIDI · posé sur `Button.astro` (variant lancer), retiré le même
   jour après retour de Victor sur le produit en ligne · mauvaise portée
   (une simple ouverture d'outil, pas un acte qui engage) ET un vrai bug de
   seuil (8px trop sensible pour une souris ordinaire, un clic banal se
   lisait comme un geste et rebondissait sans naviguer). Voir le
   commentaire de `Button.astro` pour le détail, et
   `1300_PRODUITS_IA/05_CHAPTAL/outil_chaptal.html` pour la version
   corrigée, posée au bon endroit — une dépense d'écus, pas un lien. */

/* LA PILULE SEGMENTÉE · un choix entre deux et quatre options dans UNE
   pilule · l'option choisie est une pilule claire posée dedans. Un
   balisage de tablist (role, aria-selected) · le style ne présume rien du
   script. L'espace client porte sa version (.ec-tabs, sur fond sombre) ·
   celle-ci est la forme générique, sur fond clair, pour les produits. */
.pilule {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--pal-ink) 6%, var(--pal-canvas));
  border: 1px solid var(--pal-hairline);
}
.pilule__option {
  flex: 0 0 auto; padding: 9px 20px;
  font-family: var(--font-head); font-weight: var(--w-semi); font-size: var(--type-body-web);
  color: var(--pal-muted); background: transparent; border: 0; border-radius: var(--radius-pill);
  cursor: pointer; text-align: center; transition: color .2s, background .2s;
}
.pilule__option:hover { color: var(--pal-ink); }
.pilule__option[aria-selected="true"], .pilule__option.est-choisie {
  color: var(--pal-ink); background: var(--pal-canvas-pure);
  box-shadow: 0 1px 2px rgba(10, 25, 47, 0.18); /* la seule ombre admise · dette de charte inscrite */
}
.pilule__option:focus-visible { outline: none; box-shadow: 0 0 0 0.18em color-mix(in srgb, var(--pal-navy) 28%, transparent); }
/* ==== COPIE DU SITE · fin ==== */