/* Mise en page du catalogue. Les composants montrés viennent de web/composants.css, sans retouche. */
.app { min-height: 100dvh; }
.contenu { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; padding: max(var(--s-5), env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(var(--tabbar) + 48px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px)); }

/* Menu latéral à partir de 900 px, barre et feuilles en dessous. */
.menu { display: none; }
.barre { position: fixed; z-index: 20; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.barre .tab { flex: 1; min-height: var(--tap); justify-content: center; }
body > .toast { bottom: calc(var(--tabbar) + 28px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
  [data-density='large'] .app { grid-template-columns: 300px minmax(0, 1fr); }
  .menu { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--s-4); height: 100dvh; overflow-y: auto; padding: var(--s-5) var(--s-3); background: var(--surface); }
  .menu__titre { padding-inline: var(--s-3); }
  .menu__liens { display: flex; flex-direction: column; gap: 2px; }
  .contenu { padding-bottom: var(--s-7); }
  .barre { display: none; }
  body > .toast { bottom: 24px; }
}

/* Vue téléphone, sur grand écran : la page laisse la place à une iframe de la largeur d'un téléphone. */
.app[data-vue='telephone'] .puces, .app[data-vue='telephone'] .vue { display: none; }
.zone-telephone { display: flex; justify-content: center; }
.zone-telephone[hidden] { display: none; }
.telephone { display: flex; padding: var(--s-2); border-radius: 44px; background: var(--text); box-shadow: var(--shadow-float); }
.telephone__ecran { width: 390px; height: min(844px, calc(100dvh - 48px)); border: 0; border-radius: 36px; background: var(--bg); }

/* Panneau de réglages, à partir de 1200 px : le changement se voit tout de suite, sans fenêtre. */
.panneau { display: none; }
.seulement-moyen, .seulement-large { display: none; }
@media (min-width: 900px) { .seulement-moyen, .seulement-large { display: inline-flex; } }
.entete__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (min-width: 1200px) {
  .app { grid-template-columns: 248px minmax(0, 1fr) 320px; }
  [data-density='large'] .app { grid-template-columns: 300px minmax(0, 1fr) 360px; }
  .panneau { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--s-4); height: 100dvh; overflow-y: auto; padding: var(--s-5) var(--s-4); background: var(--surface); }
  .panneau__titre { font-size: var(--fs-h3); }
  .seulement-moyen { display: none; }
}
/* Sur téléphone aussi, le fond reste visible pendant qu'on règle. */
#feuille-reglages::backdrop { background: transparent; }
#feuille-reglages { max-height: 62dvh; box-shadow: var(--shadow-float); }

/* En-tête et réglages */
.entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); }
.entete__texte { flex: 1 1 280px; display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.reglages { display: flex; flex-direction: column; gap: var(--s-4); }
.reglage { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.row--fond { background: var(--bg); box-shadow: none; }


/* Tuiles de composant : défilent à l'horizontale sur téléphone, avec le vrai composant en aperçu. */
.puces { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: var(--s-1) var(--gutter); }
.puces::-webkit-scrollbar { display: none; }
.puces .tuile-choix { flex: none; width: calc(var(--tap) * 2.6); }
.mini-composant { position: absolute; top: 50%; left: 50%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2); width: 200%; translate: -50% -50%; scale: 0.5; pointer-events: none; }
.mini-composant > * { flex: 0 1 auto; max-width: 100%; }
.mini-composant > .row, .mini-composant > .card, .mini-composant > .field, .mini-composant > .notice, .mini-composant > .gauge, .mini-composant > .skeleton, .mini-composant > .tabbar, .mini-composant > .empty, .mini-composant > .scroll, .mini-composant > .btn--block, .mini-composant > .pile, .mini-composant > .teinte, .mini-composant > .frame, .mini-composant > .ambiance { flex: 1 1 100%; }
@media (min-width: 900px) { .puces { flex-wrap: wrap; overflow: visible; } }
.puces[hidden] { display: none; }

/* Composant, groupes et exemples */
.vue { display: flex; flex-direction: column; gap: var(--s-7); min-width: 0; }
.composant { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.composant__tete { display: flex; flex-direction: column; gap: var(--s-1); max-width: var(--measure); }
.groupe { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--s-3); }
.grille--petite { grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); }
.grille--large { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
[data-density='large'] .grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
[data-density='large'] .grille--petite { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
[data-density='large'] .grille--large { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.ex { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3); min-width: 0; margin: 0; padding: var(--s-3); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
.ex--plein { grid-column: 1 / -1; }
.ex__scene { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; min-height: var(--tap); }
.ex__scene > .row, .ex__scene > .card, .ex__scene > .field, .ex__scene > .notice, .ex__scene > .gauge, .ex__scene > .skeleton, .ex__scene > .tabbar, .ex__scene > .empty, .ex__scene > .scroll, .ex__scene > .btn--block, .ex__scene > .pile, .ex__scene > .frame, .ex__scene > .ambiance { flex: 1 1 100%; min-width: 0; }
.ex__legende { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-caption); color: var(--text-2); overflow-wrap: anywhere; }
.ex__legende span { color: var(--text); font-weight: 500; }
.ex__legende code { font: inherit; }
.pile { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }

/* États montrés sans interaction : mêmes règles que :hover, :active et :focus-visible dans composants.css. */
.force-survol { background: color-mix(in srgb, var(--b) 88%, var(--text)); }
.force-presse { transform: scale(var(--press-scale)); }
.force-focus { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.input.force-focus { outline-offset: -1px; border-color: transparent; }
.toast.force-statique { position: static; flex: 1 1 100%; width: auto; justify-content: space-between; max-width: 100%; transform: none; animation: none; box-shadow: none; }

/* Bases */
.teinte { width: 100%; height: 44px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line); }
.echelle { width: var(--e); height: var(--s-3); border-radius: 2px; background: var(--accent); }
.rayon { width: 64px; height: 64px; background: var(--surface-2); }
.ombre { width: 100%; height: 64px; border-radius: var(--r-md); background: var(--surface); }
.jeu { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--s-2); width: 100%; }
.jeu div { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-1); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-caption); color: var(--text-2); text-align: center; overflow-wrap: anywhere; }
.jeu .icon { color: var(--text); }
.mvt { width: 100%; height: 24px; border-radius: var(--r-pill); background: var(--surface-2); }
.mvt__course { width: 100%; height: 100%; transition-property: transform; transition-duration: var(--d, 200ms); transition-timing-function: var(--c, var(--ease-out)); }
.joue .mvt__course { transform: translateX(calc(100% - 24px)); }
.mvt__point { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); }

/* Une ambiance montrée dans une seule partie de la page */
.ambiance { color: var(--text); display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-lg); font-size: var(--fs-body); box-shadow: inset 0 0 0 1px var(--line); }

/* Le socle en situation */
.frame { position: relative; overflow: hidden; height: 560px; background-color: var(--bg); background-image: var(--motif); background-size: var(--motif-size); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); }
[data-density='large'] .frame { height: 720px; }
.frame--app { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5) var(--s-4) calc(var(--tabbar) + 24px); }
.frame--app .tabbar { position: absolute; inset: auto 10px 10px; }
.site { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-4) var(--s-5); overflow-y: auto; }
.site__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.site__liens { display: flex; gap: var(--s-4); font-size: var(--fs-small); color: var(--text-2); }
.site .display { font-size: clamp(2.25rem, 1.5rem + 2vw, 3rem); }
.site__colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s-3); }
.site__colonnes .card { display: flex; flex-direction: column; gap: var(--s-2); }
.bo { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; }
.bo__cote { display: none; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-2); background: var(--surface); }
.bo__cote strong { padding: var(--s-1) var(--s-3) var(--s-2); }
.bo__cote .icon { width: var(--icon-sm); height: var(--icon-sm); }
.bo__principal { display: flex; flex-direction: column; gap: var(--block-gap); padding: var(--s-3); min-width: 0; }
.bo__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
@media (min-width: 560px) { .bo { grid-template-columns: 146px minmax(0, 1fr); } .bo__cote { display: flex; } }
.scroll { overflow-x: auto; padding: 0; }
/* pistes:debut — animations de l'interrupteur, à retirer une fois le choix fait. Rien que transform et opacity. */
.piste-sw { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.piste-sw .switch { --switch-w: 72px; --switch-h: 42px; }
.piste-sw .switch--petit { --switch-w: 46px; --switch-h: 28px; }

/* 2A Élastique : le pouce s'étire comme un gel et claque en arrivant. */
.sw-a .switch__pouce { transition: transform 460ms cubic-bezier(0.3, 1.7, 0.5, 1); }
.sw-a.vu input:checked ~ .switch__pouce .switch__forme { animation: sw-gel-1 460ms cubic-bezier(0.3, 0.7, 0.3, 1); }
.sw-a.vu input:not(:checked) ~ .switch__pouce .switch__forme { animation: sw-gel-2 460ms cubic-bezier(0.3, 0.7, 0.3, 1); }
@keyframes sw-gel-1 { 25% { transform: scale(1.55, 0.7); } 55% { transform: scale(0.8, 1.18); } 78% { transform: scale(1.08, 0.95); } }
@keyframes sw-gel-2 { 25% { transform: scale(1.55, 0.7); } 55% { transform: scale(0.8, 1.18); } 78% { transform: scale(1.08, 0.95); } }

/* 2B Encre : l'accent jaillit du pouce et remplit toute la piste. */
.sw-b { overflow: hidden; }
.sw-b .switch__actif { inset: auto; top: 50%; left: calc(var(--switch-h) / 2); width: calc(var(--switch-w) * 2.2); height: calc(var(--switch-w) * 2.2); margin: calc(var(--switch-w) * -1.1) 0 0 calc(var(--switch-w) * -1.1); border-radius: 50%; opacity: 1; transform: scale(0); transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1); }
.sw-b input:checked ~ .switch__actif { transform: scale(1); }
.sw-b .switch__pouce { transition: transform 420ms cubic-bezier(0.34, 1.5, 0.64, 1); }
.sw-b.vu input:checked ~ .switch__pouce .switch__forme { animation: sw-pop-1 420ms ease-out; }
.sw-b.vu input:not(:checked) ~ .switch__pouce .switch__forme { animation: sw-pop-2 420ms ease-out; }
@keyframes sw-pop-1 { 40% { transform: scale(1.22); } }
@keyframes sw-pop-2 { 40% { transform: scale(0.82); } }

/* 2C Salto : le pouce fait une pièce qui tourne, avec une icône sur chaque face. */
.sw-c .switch__pouce { perspective: 120px; transition: transform 640ms cubic-bezier(0.34, 1.3, 0.64, 1); }
.sw-c .switch__forme { transform-style: preserve-3d; transition: transform 640ms cubic-bezier(0.34, 1.3, 0.64, 1); }
.sw-c input:checked ~ .switch__pouce .switch__forme { transform: rotateY(540deg); }
.sw-c .switch__face, .sw-c input:checked ~ .switch__pouce .switch__face--on, .sw-c input:checked ~ .switch__pouce .switch__face--off { opacity: 1; backface-visibility: hidden; transition: none; }
.sw-c .switch__face--off, .sw-c input:checked ~ .switch__pouce .switch__face--off { transform: none; }
.sw-c .switch__face--on, .sw-c input:checked ~ .switch__pouce .switch__face--on { transform: rotateY(180deg); }

/* 2D Bond et étincelles : il saute au-dessus de la piste, atterrit et fait jaillir des éclats. */
.sw-d .switch__pouce { transition: transform 520ms cubic-bezier(0.45, 0.05, 0.3, 1); }
.sw-d.vu input:checked ~ .switch__pouce .switch__forme { animation: sw-saut-1 520ms ease-in-out; }
.sw-d.vu input:not(:checked) ~ .switch__pouce .switch__forme { animation: sw-saut-2 520ms ease-in-out; }
@keyframes sw-saut-1 { 45% { transform: translateY(-110%) scale(0.92, 1.08); } 78% { transform: scale(1.3, 0.72); } 90% { transform: translateY(-14%) scale(0.95, 1.05); } }
@keyframes sw-saut-2 { 45% { transform: translateY(-110%) scale(0.92, 1.08); } 78% { transform: scale(1.3, 0.72); } 90% { transform: translateY(-14%) scale(0.95, 1.05); } }
.sw-eclats { position: absolute; z-index: 1; top: 50%; left: calc(100% - var(--switch-h) / 2); pointer-events: none; }
.sw-eclats i { position: absolute; top: -3px; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); opacity: 0; }
.sw-d.vu input:checked ~ .sw-eclats i { animation: sw-eclat 520ms 380ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards; }
@keyframes sw-eclat { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.2); } }

/* 2E Jour et nuit : le soleil tourne et devient lune, les étoiles s'allument une à une. */
.sw-e .switch__pouce { transition: transform 620ms cubic-bezier(0.34, 1.35, 0.64, 1); }
.sw-e .switch__face { transition: opacity 240ms, transform 620ms cubic-bezier(0.34, 1.35, 0.64, 1); }
.sw-e .switch__face--on { transform: rotate(-200deg) scale(0.4); }
.sw-e input:checked ~ .switch__pouce .switch__face--off { transform: rotate(200deg) scale(0.4); }
.sw-etoiles i { position: absolute; z-index: 1; width: 4px; height: 4px; border-radius: 50%; background: var(--on-accent); opacity: 0; transform: scale(0) translateY(6px); transition: opacity 200ms, transform 460ms cubic-bezier(0.34, 1.8, 0.64, 1); }
.sw-e input:checked ~ .sw-etoiles i { opacity: 1; transform: none; }
.sw-e input:checked ~ .sw-etoiles i:nth-child(1) { transition-delay: 160ms; }
.sw-e input:checked ~ .sw-etoiles i:nth-child(2) { transition-delay: 240ms; }
.sw-e input:checked ~ .sw-etoiles i:nth-child(3) { transition-delay: 320ms; }
/* pistes:fin */

[data-density='compact'] .table th, [data-density='compact'] .table td { padding: var(--s-2); }