/* Interface connectée : écrans posés au pixel près depuis les maquettes (interface/ecrans.js) */
#if { position: fixed; inset: 0; z-index: 50; overflow-x: hidden; overflow-y: auto; font-family: "Chillax", ui-rounded, system-ui, sans-serif; font-weight: 700; -webkit-tap-highlight-color: transparent; }
#if[hidden], #if-barre[hidden], #if-calque[hidden] { display: none; }
.if-fond { position: fixed; inset: 0; background: #6b8f3a center / cover no-repeat; }
.if-page { position: relative; }
.if-plateau, .if-nav { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#if .if-nav { position: fixed; z-index: 5; }
.if-t { position: absolute; display: flex; align-items: center; white-space: pre-line; pointer-events: none; font-weight: 700; overflow-wrap: break-word; }
.if-t span { display: block; width: 100%; }
.if-i, .if-s { position: absolute; background-repeat: no-repeat; background-position: center; pointer-events: none; }
.if-b { position: absolute; margin: 0; padding: 0; border: 0; background: var(--n) center / 100% 100% no-repeat; cursor: pointer; pointer-events: auto; }
.if-b:hover { background-image: var(--s); }
.if-b:active { background-image: var(--a); }
.if-b:focus-visible { outline: 4px solid #fff7dc; outline-offset: 3px; border-radius: 18px; }
.if-champ { position: absolute; display: flex; align-items: center; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: auto; }
.if-champ input { width: 100%; height: 100%; padding: 0 .9em; border: 0; background: transparent; color: #54301d; font: inherit; font-weight: 700; text-align: center; outline: none; }
.if-champ:focus-within { outline: 4px solid #fff7dc; outline-offset: 2px; border-radius: 14px; }
.if-gris { filter: grayscale(1) opacity(.55); }
#if-barre { position: fixed; left: 0; top: 0; right: 0; z-index: 40; height: var(--if-haut, 0); pointer-events: none; font-family: "Chillax", ui-rounded, system-ui, sans-serif; font-weight: 700; }
#if-calque { position: fixed; inset: 0; z-index: 60; font-family: "Chillax", ui-rounded, system-ui, sans-serif; font-weight: 700; }
#if-calque.voile { background: rgba(24, 34, 14, .5); }
#if-calque:not(.voile) { pointer-events: none; }
#if-calque.notif .if-plateau { animation: if-descend .28s ease-out; }
@keyframes if-descend { from { translate: 0 -220px; } }
body:not(.if-actif) > main { padding-top: var(--if-haut, 0); }
body.if-actif > main { display: none; }
@media (prefers-reduced-motion: reduce) { #if-calque.notif .if-plateau { animation: none; } }
.if-rond { border-radius: 50%; border: 10px solid #fff3d6; box-shadow: 0 0 0 5px #8a5a2b, 0 10px 24px rgba(60, 35, 10, .3); }
/* survol : la carte ou le bouton se soulève avec tout ce qui est posé dessus, le copain se dandine */
.if-b, .if-t[data-p], .if-i[data-p], .if-s[data-p] { transition: translate .25s cubic-bezier(.3, 1.6, .5, 1), scale .25s cubic-bezier(.3, 1.6, .5, 1), filter .25s ease; }
.if-b.survol { translate: 0 -8px; scale: 1.025; filter: drop-shadow(0 16px 14px rgba(70, 40, 10, .35)) brightness(1.06) saturate(1.08); }
.if-t.survol, .if-i.survol, .if-s.survol { translate: 0 -8px; scale: 1.025; }
.if-b.appui, .if-t.appui, .if-i.appui, .if-s.appui { translate: 0 -2px; scale: .985; transition-duration: .08s; }
.if-b.appui { filter: drop-shadow(0 6px 6px rgba(70, 40, 10, .3)); }
.if-i.if-perso.survol { animation: if-danse .9s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes if-danse { 0%, 100% { rotate: 0deg; } 25% { rotate: -4deg; } 75% { rotate: 4deg; } }
@media (prefers-reduced-motion: reduce) { .if-b, .if-t[data-p], .if-i[data-p], .if-s[data-p] { transition: none; } .if-b.survol, .if-t.survol, .if-i.survol { translate: none; scale: none; } .if-i.if-perso.survol { animation: none; } }
/* l'élément choisi : soulevé, entouré d'une lumière dorée, son copain un peu plus grand */
.if-b.choisi { translate: 0 -12px; scale: 1.05; filter: drop-shadow(0 0 3px #fff3b0) drop-shadow(0 0 12px #ffcf3a) drop-shadow(0 0 26px rgba(255, 190, 30, .85)) drop-shadow(0 18px 16px rgba(70, 40, 10, .35)); }
.if-t.choisi, .if-i.choisi, .if-s.choisi { translate: 0 -12px; scale: 1.05; }
.if-i.if-perso.choisi { animation: if-danse 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
.if-i[data-id="coche"] { border-radius: 50%; background: #3f9a3a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 64% no-repeat !important; box-shadow: 0 0 0 5px #fff7dc, 0 6px 12px rgba(40, 60, 20, .4); }
.if-b.choisi.survol { translate: 0 -14px; scale: 1.06; }
@media (prefers-reduced-motion: reduce) { .if-b.choisi, .if-t.choisi, .if-i.choisi { translate: none; scale: none; } .if-i.if-perso.choisi { animation: none; } }
/* barre d'avancée d'une matière : planchette en bois, remplissage vert feuille, nombre d'étapes écrit dedans */
.if-avancee { position: absolute; box-sizing: border-box; border-radius: 999px; padding: 3px; border: 2px solid #5a3416; background: linear-gradient(#b27a42, #7a4a22); box-shadow: inset 0 1px 0 rgba(255, 230, 180, .5), 0 3px 4px rgba(70, 40, 10, .3); pointer-events: none; overflow: hidden;
  transition: translate .25s cubic-bezier(.3, 1.6, .5, 1), scale .25s cubic-bezier(.3, 1.6, .5, 1); }
.if-avancee::before { content: ""; position: absolute; inset: 3px; border-radius: 999px; background: #f6e7c4; box-shadow: inset 0 2px 3px rgba(90, 52, 22, .35); }
.if-avancee i { position: absolute; left: 3px; top: 3px; bottom: 3px; border-radius: 999px; max-width: calc(100% - 6px); background: linear-gradient(#a6e06a, #5fae37 55%, #4b8f2a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(30, 70, 10, .25); }
.if-avancee.finie i { background: linear-gradient(#ffe27a, #f5b92e 55%, #d9901a); }
.if-avancee span { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; color: #54301d; font-weight: 700; line-height: 1; white-space: nowrap; text-shadow: 0 0 3px #fff7dc, 0 0 6px #fff7dc; }
.if-avancee.vide span { color: #8a6a45; }
.if-avancee.survol { translate: 0 -8px; scale: 1.025; }
.if-avancee.choisi { translate: 0 -12px; scale: 1.05; }