/* Boutons Meleï : formes et animations au survol, réglées par attributs sur <html> (data-bt-forme, data-bt-anim, data-bt-carre, data-bt-taille).
   Partagé par /boutons.html (le labo) et /proposition.html. Le bouton porte la classe .b ; .b-second pour le secondaire ; .lien pour le lien fléché.
   Vocabulaire : angles 4 px, filets, le carré terre brûlée comme seule couleur, et le carré arrondi de l'identité pour la forme « coin ». */
.b { --bt-fond: #161510; --bt-texte: #fbfbf8; --bt-filet: rgba(22,21,16,0.35); --bt-survol: #2a2921; --bt-brule: #772406; --bt-h: 48px; --bt-px: 24px; --bt-fs: 16px; /* 56 × 28 en 17 px jusqu'au 25/09 (Theo : « réduire taille button sur le site ») */
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: var(--bt-h); padding: 0 var(--bt-px); border-radius: 4px; border: 1px solid transparent;
  background: var(--bt-fond); color: var(--bt-texte); font-size: var(--bt-fs); font-weight: 450; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; isolation: isolate;
  transition: background 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s, border-color 0.25s, border-radius 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.sombre .b, [data-fond="sombre"] .b { --bt-fond: #f5f4ee; --bt-texte: #12110c; --bt-filet: rgba(245,244,238,0.4); --bt-survol: #ffffff; }
.b > span { position: relative; z-index: 2; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
/* Le carré terre brûlée devant le libellé (débrayable) */
.b .carre { width: 9px; height: 9px; background: var(--bt-brule); flex: none; position: relative; z-index: 2; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s; }
[data-bt-carre="sans"] .b .carre { display: none; }
/* La flèche ↗, présente sur les formes « coin », « fleche », « piece » et sur l'animation « fleche » : un SVG en masque, net à toute taille */
.b .fleche { display: none; position: relative; z-index: 2; width: 16px; height: 16px; flex: none; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.b .fleche::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5L12.5 3.5M5.5 3.5h7v7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5L12.5 3.5M5.5 3.5h7v7'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Tailles */
[data-bt-taille="s"] .b { --bt-h: 44px; --bt-px: 20px; --bt-fs: 15px; }
[data-bt-taille="l"] .b { --bt-h: 64px; --bt-px: 34px; --bt-fs: 19px; }

/* ---- Formes ---- */
[data-bt-forme="filet"] .b { background: transparent; color: var(--bt-fond); border-color: var(--bt-filet); }
[data-bt-forme="cellule"] .b { border-radius: 0; background: transparent; color: var(--bt-fond); border-color: var(--bt-filet); }
[data-bt-forme="coin"] .b { border-radius: 4px 4px 24px 4px; }
[data-bt-forme="coin"] .b .fleche { display: block; }   /* retenu par Theo le 11/09 : la pièce avec la flèche */
[data-bt-forme="fleche"] .b .fleche { display: block; }
/* Le secondaire : toujours en filet, quelle que soit la forme du principal */
.b.b-second { background: transparent; color: var(--bt-fond); border-color: var(--bt-filet); }
[data-bt-forme="cellule"] .b.b-second { border-radius: 0; }
[data-bt-forme="coin"] .b.b-second { border-radius: 4px 4px 24px 4px; }

/* ---- Animations au survol (.hover = le survol simulé du labo) ---- */
/* fondu : le fond change de ton, rien ne bouge */
[data-bt-anim="fondu"] .b:is(:hover, .hover) { background: var(--bt-survol); }
[data-bt-anim="fondu"] [data-bt-forme="filet"] .b:is(:hover, .hover), [data-bt-anim="fondu"][data-bt-forme="filet"] .b:is(:hover, .hover), [data-bt-anim="fondu"][data-bt-forme="cellule"] .b:is(:hover, .hover), [data-bt-anim="fondu"] .b.b-second:is(:hover, .hover) { background: var(--bt-fond); color: var(--bt-texte); border-color: var(--bt-fond); }
/* balayage : une nappe entre par la gauche et remplit le bouton, le texte s'inverse */
[data-bt-anim="balayage"] .b::before { content: ""; position: absolute; inset: -1px; background: var(--bt-survol); transform: scaleX(0); transform-origin: left center; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); z-index: 1; }
[data-bt-anim="balayage"] .b:is(:hover, .hover)::before { transform: scaleX(1); }
[data-bt-anim="balayage"][data-bt-forme="filet"] .b::before, [data-bt-anim="balayage"][data-bt-forme="cellule"] .b::before, [data-bt-anim="balayage"] .b.b-second::before { background: var(--bt-fond); }
[data-bt-anim="balayage"][data-bt-forme="filet"] .b:is(:hover, .hover), [data-bt-anim="balayage"][data-bt-forme="cellule"] .b:is(:hover, .hover), [data-bt-anim="balayage"] .b.b-second:is(:hover, .hover) { color: var(--bt-texte); border-color: var(--bt-fond); }
/* carré : le carré terre brûlée traverse le libellé et se pose à droite */
[data-bt-anim="carre"] .b .carre { position: absolute; left: var(--bt-px); top: 50%; margin-top: -4.5px; }
[data-bt-anim="carre"] .b { padding-left: calc(var(--bt-px) + 23px); }
[data-bt-anim="carre"] .b:is(:hover, .hover) .carre { transform: translateX(calc(var(--bt-largeur, 200px) - 2 * var(--bt-px) - 23px + 14px)); }
[data-bt-anim="carre"] .b:is(:hover, .hover) > span { transform: translateX(-23px); }
/* fleche : la flèche apparaît et part vers le haut à droite, le libellé se décale */
[data-bt-anim="fleche"] .b .fleche { display: block; width: 0; opacity: 0; margin-left: -14px; transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s, margin 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s; }
[data-bt-anim="fleche"] .b:is(:hover, .hover) .fleche { width: 16px; opacity: 1; margin-left: 0; transform: translate(2px, -2px); }
[data-bt-anim="fleche"][data-bt-forme="fleche"] .b .fleche { width: 16px; opacity: 1; margin-left: 0; }
[data-bt-anim="fleche"][data-bt-forme="fleche"] .b:is(:hover, .hover) .fleche { transform: translate(3px, -3px); }
/* coin : l'angle arrondi change de coin, comme une pièce de la mosaïque qui tourne ; sur les autres formes, un coin s'arrondit au survol */
[data-bt-anim="coin"] .b:is(:hover, .hover) { border-radius: 24px 4px 4px 4px; }
[data-bt-anim="coin"][data-bt-forme="coin"] .b:is(:hover, .hover) { border-radius: 24px 4px 4px 4px; }
[data-bt-anim="coin"] .b:is(:hover, .hover) .fleche { transform: translate(3px, -3px); }
[data-bt-anim="coin"][data-bt-forme="cellule"] .b:is(:hover, .hover) { border-radius: 0 0 24px 0; }
/* tourne : le carré terre brûlée fait un quart de tour et le fond change */
[data-bt-anim="tourne"] .b:is(:hover, .hover) { background: var(--bt-survol); }
[data-bt-anim="tourne"] .b:is(:hover, .hover) .carre { transform: rotate(90deg) scale(1.25); }
[data-bt-anim="tourne"][data-bt-forme="filet"] .b:is(:hover, .hover), [data-bt-anim="tourne"][data-bt-forme="cellule"] .b:is(:hover, .hover), [data-bt-anim="tourne"] .b.b-second:is(:hover, .hover) { background: transparent; border-color: var(--bt-fond); }

/* volet : le libellé bascule comme un volet d'affichage, une copie monte par-dessous ; la flèche part en diagonale et l'angle change de coin */
[data-bt-anim="volet"] .b > span { display: inline-block; overflow: hidden; }
[data-bt-anim="volet"] .b > span::before, [data-bt-anim="volet"] .b > span::after { display: block; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
[data-bt-anim="volet"] .b > span::before { content: attr(data-t); }
[data-bt-anim="volet"] .b > span::after { content: attr(data-t); position: absolute; left: 0; top: 100%; }
[data-bt-anim="volet"] .b > span { font-size: 0; }
[data-bt-anim="volet"] .b > span::before, [data-bt-anim="volet"] .b > span::after { font-size: var(--bt-fs); }
[data-bt-anim="volet"] .b:is(:hover, .hover) > span::before, [data-bt-anim="volet"] .b:is(:hover, .hover) > span::after { transform: translateY(-100%); }
[data-bt-anim="volet"] .b:is(:hover, .hover) { border-radius: 4px 24px 4px 4px; }
[data-bt-anim="volet"][data-bt-forme="coin"] .b:is(:hover, .hover) { border-radius: 24px 4px 4px 4px; }
[data-bt-anim="volet"] .b .fleche { display: block; }
[data-bt-anim="volet"] .b:is(:hover, .hover) .fleche { transform: translate(3px, -3px); }
/* tour : l'angle arrondi fait le tour du bouton, coin après coin, et se pose en face ; la flèche sort en haut à droite et revient par en bas à gauche */
@keyframes bt-tour { 0% { border-radius: 4px 4px 4px 4px; } 25% { border-radius: 24px 4px 4px 4px; } 50% { border-radius: 4px 24px 4px 4px; } 75% { border-radius: 4px 4px 24px 4px; } 100% { border-radius: 4px 4px 4px 24px; } }
@keyframes bt-tour-fleche { 0% { transform: translate(0, 0); opacity: 1; } 40% { transform: translate(16px, -16px); opacity: 0; } 41% { transform: translate(-16px, 16px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }
[data-bt-anim="tour"] .b:is(:hover, .hover) { animation: bt-tour 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
[data-bt-anim="tour"] .b .fleche { display: block; }
[data-bt-anim="tour"] .b:is(:hover, .hover) .fleche { animation: bt-tour-fleche 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
[data-bt-anim="tour"] .b:is(:hover, .hover) { background: var(--bt-survol); }
[data-bt-anim="tour"][data-bt-forme="filet"] .b:is(:hover, .hover), [data-bt-anim="tour"][data-bt-forme="cellule"] .b:is(:hover, .hover), [data-bt-anim="tour"] .b.b-second:is(:hover, .hover) { background: transparent; }
/* forme « pièce » : la flèche vit dans sa propre case à droite, une pièce de la mosaïque en négatif ; au survol la pièce tourne son angle et la flèche part en diagonale */
[data-bt-forme="piece"] .b { padding-right: 8px; gap: 18px; }
[data-bt-forme="piece"] .b .fleche { display: block; width: calc(var(--bt-h) - 16px); height: calc(var(--bt-h) - 16px); border-radius: 4px 4px 14px 4px; background: var(--bt-texte); color: var(--bt-fond); overflow: hidden; transition: border-radius 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s, transform 0.35s; }
[data-bt-forme="piece"] .b.b-second .fleche { background: var(--bt-fond); color: var(--bt-texte); }
[data-bt-forme="piece"] .b .fleche::before { inset: 50% auto auto 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; }
[data-bt-forme="piece"] .b:is(:hover, .hover) .fleche { border-radius: 14px 4px 4px 4px; }
[data-bt-forme="piece"][data-bt-anim="coin"] .b:is(:hover, .hover) { border-radius: 4px; }
[data-bt-forme="piece"][data-bt-anim="tour"] .b:is(:hover, .hover) { animation: none; }
[data-bt-forme="piece"][data-bt-anim="tour"] .b:is(:hover, .hover) .fleche { animation: bt-tour 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
[data-bt-forme="piece"][data-bt-anim="tour"] .b:is(:hover, .hover) .fleche::before { animation: bt-tour-fleche 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* ---- Le lien fléché (tertiaire) : texte + flèche, le filet dessous s'étend au survol ---- */
.lien { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 450; color: inherit; text-decoration: none; padding-bottom: 4px; }
.lien::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; opacity: 0.35; transition: opacity 0.25s; }
.lien::before { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: currentColor; transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); z-index: 1; }
.lien:is(:hover, .hover)::before { width: 100%; }
.lien i { font-style: normal; display: inline-block; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.lien:is(:hover, .hover) i { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .b, .b *, .b::before, .lien::before, .lien i { transition: none !important; } }