/* ===================================================================== MATALO - Maquette du nouveau visuel "pirate" Feuille de style commune (eleves + enseignants) ===================================================================== */ /* lot 058 : chiffre 7 barre (a la francaise) dans toute l'application. Police « Matalo Sept » = le seul chiffre 7 de Fredoka, avec une barre ; unicode-range : elle ne sert QUE pour le 7, tous les autres caracteres restent en Fredoka. Placee en tete de --police. */ @font-face { font-family: 'Matalo Sept'; font-style: normal; font-weight: 400; font-display: block; unicode-range: U+0037; src: url(data:font/woff;base64,d09GRgABAAAAAAWcAA8AAAAAB8QAAgBCAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAAFDAAAACAAAAAgRHZMdUdTVUIAAAUsAAAALwAAADAThCl4T1MvMgAAAcgAAABGAAAAYHVegMBTVEFUAAAFXAAAAD4AAABE9bffHGNtYXAAAAIYAAAAKQAAADQADACKZ2FzcAAABQQAAAAIAAAACAAAABBnbHlmAAACVAAAALYAAAC25NXM4GhlYWQAAAFYAAAANgAAADYcishbaGhlYQAAAZAAAAAgAAAAJAX6AWxobXR4AAACEAAAAAgAAAAIBEkAXWxvY2EAAAJMAAAABgAAAAYAWwAVbWF4cAAAAbAAAAAWAAAAIAAFADNuYW1lAAADDAAAAeEAAAQqbEmeEHBvc3QAAATwAAAAEwAAACD/nwAycHJlcAAAAkQAAAAHAAAAB2gGjIUAAQAAAAIAQqWogE9fDzz1AAMD6AAAAADUTdzYAAAAAOb6p7gAK//2Af8CsAAAAAYAAgAAAAAAAHicY2BkYGA+91+EgYFJi0GbQZvxPwNQBAUwAQBYhQNreJxjYGRgYGBiMAJiEGBkQAMABZYAOQAAeJxjYGGSYJzAwMrAwNTFFMHAwOANoRnjGIwYdRhQASMyp7g4JZXhAIM5gznzuf8iDAzMzxn+wNQwfmHaA6QUGFgA5RIMCgAAAh8AMgIqACt4nGNgYGBiYGBgBmIRIMkIplkYFIA0CxCC+Ob//0PI/6fAfAYAUcUGkwAAALgB/4WwBI0AAAAAFQBbAAAAAgAyACcB7QKXAAMABwAAdxEhESUhESEyAbv+egFR/q8nAnD9kDUCBgAAAgAr//YB/wKwACMAMQAAFyImJjU0PgQnISImJjU0NjYzITIWFhUUDgQVFAYGAzMyFhUUBiMjIiY1NDbHExQGJT1COyMD/r4OFAoJEgsBghMTBiY9RTwmBxQi2w8VFQ/bDhUVCgcOCzx2b2ZYSBoGFBMUEgYOGA8sXWJoa286Cg0HAUgUDw8VFQ8PFAAAeJydUstKw0AUPdNU8VlUiqCIzEoUtFoRF3WlQkGob9G1j9hG0wdJVNz5NeJXuHTlX/gPLsSFZ24mNg2upKRz7uvcO2cugCI+4UDlBwG88IuxwiStGOdQwKvFDlbwbnE+ldOHaXxb3I8ZNWnxACpq1eJBFJVv8TDm1JPFIyk8qrR6triAtdybxWOpXuMYyn1ZPIWCk4+xAkacCYsVhpxZi53u/KrAnHlso40OHhHAQx0NRNBY5c3KWCc6ocflWWXcxRVzb3FO+4B2Gzf0XUrFJu54NugLENKeF6aIzCEqWOavTn6TcYcLlFjVRpPeBtmuiVuMecTLmU5L2GfMxQJ2aUX8fEY0junr0D7iWSenz0jAuUuc3My+wb4hWVyiLGPt96an9Jt5PZlAp+rT3ZJeS1iT6C7zffpaosQWa8x/QKvFLh+sWBSPK5x7wtSQ6F++RKdYpaweiVLmHTxRtmqjRoM2cyM8yN3NK8UZPs9L6RTKvTX1aYkWAXFkX/QYO1RCU9+OnarLXOthMLfJKlXmZGW5eXey3r7JNOe45+fJC12IbpoTx7ugRcEqt+dQcEQVdEaRkJxmN80LhOwYCldJNq3O+D7ra/+q6e5B74acESeRM6IrmXVPqptmJ34AAeCfxQAAAHicY2BmAIP/cxiMGLAAACqDAdEAAAEAAf//AA8AAQAAAAoAHAAeAAFERkxUAAgABAAAAAD//wAAAAAAAHicY2BkYGDgYtBh0GNgdnHzCWEQyUhNKmKQy0ksyWOQY2AByjL8/88ABwCrjQc1AHicY2BkYGTgYGBiYGAQAZMqDEzl6RkljEBmeUpJBiNIngUoxwwUYGJkZpwApPYA2SBxJkY+hhQGBgC9tQWlAAA=) format('woff'); } @font-face { font-family: 'Matalo Sept'; font-style: normal; font-weight: 500; font-display: block; unicode-range: U+0037; src: url(data:font/woff;base64,d09GRgABAAAAAAWcAA8AAAAAB8wAAgBCAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAAFEAAAACAAAAAgRHZMdUdTVUIAAAUwAAAALwAAADAThCl4T1MvMgAAAcgAAABGAAAAYHXCgMJTVEFUAAAFYAAAADsAAABA81vfGWNtYXAAAAIYAAAAKQAAADQADACKZ2FzcAAABQgAAAAIAAAACAAAABBnbHlmAAACVAAAALUAAAC2Fa+elGhlYWQAAAFYAAAANgAAADYcf8hcaGhlYQAAAZAAAAAfAAAAJAXvAVNobXR4AAACEAAAAAYAAAAGAj0AMmxvY2EAAAJMAAAABgAAAAYAWwAVbWF4cAAAAbAAAAAWAAAAIAAFADNuYW1lAAADDAAAAegAAAQ2b/ufNXBvc3QAAAT0AAAAEwAAACD/nwAycHJlcAAAAkQAAAAHAAAAB2gGjIUAAQAAAAIAQkTE2uNfDzz1AAMD6AAAAADUTdzYAAAAAOb6p7gAHv/2AgECsQAAAAYAAgAAAAAAAHicY2BkYGA+91+EgYFJnkGOQY6JkQEoggIYAUJvAkgAeJxjYGRgYGBiMAJiEGBkQAMABZYAOQAAeJxjYGGSYvzCwMrAwNTFFMHAwOANoRnjGIwYdRhQASMyp7g4JZXhAIM5gznzuf8iDAzMzxn+wNQwfmHaA6QUGFgACWcMcAAAAh8AMgAeAAB4nGNgYGBiYGBgBmIRIMkIplkYFIA0CxCC+Ob//0PI/6fAfAYAUcUGkwAAALgB/4WwBI0AAAAAFQBbAAB4nGNgYjBiUGd8yzSdgZmBnYGhXFBRUFVRUNGIcfe/KsbAf+vVmQr+TjBlYmNgYGKQ+/+NiZFpI4MygyEDg7iSmpqpiR2LqSKYYWZmrGgkJiYqwsciKsLGxmxsBGSzKSsrgeSOykhyKJnZmCr/eyYgI8Avyc9YICvBrmrpZKXKLqVxWkRGRgREcPGI8VnlZcQGOIhySMrISLILywppRSekpKeb8IryMIbJioBUisgyAACyHCHgAAAAeJydUstKw0AUPdNU8VlURFBEZiUKWq2oC12pUBBa3+jaR2yj6YMkKu78GvErXLryL/wHF+LCMzcTmwZXUtI593XunTMXwDg+4UDl+wG88IuxwgStGOdQwKvFDpbxbnE+ldODKXxb3ItpNWFxHzbUisX9GFe+xYOYVU8WD6XwsNLq2eICVnNvFo+keo1iIPdl8SQKTj7GChhyxixWGHBmLM7TP2dxgXgVO2ihjUcE8FBDHRE0VnizEtaJTuhxeZYZd3HF3Fuc0z6g3cINfZdSsYU7nnX6AoS054QpInOIDSzxVyO/ybjDBYqsaqFBb51s18RNxjzipUynRewz5mIeVVoRP58RjWP62rSPeNbI6TMScO4iJzezb7JvSBaXKMtY+b3pKf1mXk8m0Kn6dLek1yLWJFplvk9fU5TYZo35D2g12eWDFQvicYVzT5jqEv3Ll+gUq5TVI1HKvIMnypZt1GjQYm6EB7m7eaU4w+d5KZ1CubemPk3RIiCO7IseY5dKaOrbtlN1mCtdDOY2WaVKnKwkN+9M1t03meYc9/w8eaEL0U1z4ngXtChY5vYcCo6ogs4oEpLT7KZ5gZAdQ+EqyqbVGN9nfeVfNZ096N6QM+IkckZ0JbNWJcOjlg2+n2FqmP34Ac0WoZ94nGNgZgCD/3MYjBiwAAAqgwHRAAABAAH//wAPAAEAAAAKABwAHgABREZMVAAIAAQAAAAA//8AAAAAAAB4nGNgZGBg4GLQYdBjYHZx8wlhEMlITSpikMtJLMljkGNgAcoy/P/PAAcAq40HNQB4nGNgZGBk4GBgYmBgEAGTKgxM5ekZJYxAZnlKSQYjSJ6FQYABJMDAyML4BUQBIRMjH0MKAwMApgYFRAA=) format('woff'); } @font-face { font-family: 'Matalo Sept'; font-style: normal; font-weight: 600; font-display: block; unicode-range: U+0037; src: url(data:font/woff;base64,d09GRgABAAAAAAWgAA8AAAAAB9AAAgBCAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAAFFAAAACAAAAAgRHZMdUdTVUIAAAU0AAAALwAAADAThCl4T1MvMgAAAcgAAABFAAAAYHYmgMNTVEFUAAAFZAAAADsAAABA87/fGmNtYXAAAAIYAAAAKQAAADQADACKZ2FzcAAABQwAAAAIAAAACAAAABBnbHlmAAACVAAAALUAAAC2MrG4wWhlYWQAAAFYAAAANgAAADYcdcheaGhlYQAAAZAAAAAfAAAAJAXlAUhobXR4AAACEAAAAAgAAAAIBDQARGxvY2EAAAJMAAAABgAAAAYAWwAVbWF4cAAAAbAAAAAWAAAAIAAFADNuYW1lAAADDAAAAesAAAQ6cGafgnBvc3QAAAT4AAAAEwAAACD/nwAycHJlcAAAAkQAAAAHAAAAB2gGjIUAAQAAAAIAQgSUpb9fDzz1AAMD6AAAAADUTdzYAAAAAOb6p7kAEv/3AgMCsQAAAAYAAgAAAAAAAHicY2BkYGA+91+EgYFJnkGIQYiJmQEoggKYAECGAjMAeJxjYGRgYGBiMAJiEGBkQAMABZYAOQAAeJxjYGGSZopgYGVgYOoC0gwM3hCaMY7BiFGHARUwInOKi1NSGQ4wmDOYM5/7L8LAwPyc4Q9MDeMXpj1ASoGBBQDSnQvWAAAAAh8AMgIVABJ4nGNgYGBiYGBgBmIRIMkIplkYFIA0CxCC+Ob//0PI/6fAfAYAUcUGkwAAALgB/4WwBI0AAAAAFQBbAAB4nGNgYjBiUGd8yzSdgZmBnYGhXFBRUFVRUNGIcfe/KsbAf+vVmQr+TjBlYmNgYGIQ+v+diZlpI4MygyEDg7iSmpqpiR2LuTKYYWZmrGgkJiYqwsciKsLGxmxsBGSzKQMlgXKHVRQ4ZPXNDBWZPwori4ooCDEmqMqzK5vbmytzKujtllJWltotqazMyS8nbJYRH+ZuLsShoAJUIaYiqhEZl5AYrycky8+YpCIpqQLCDABz/yFHAAAAeJydUstKw0AUPdNU8VlURFBEZiUKWm0REV2pUBDqW3TtI7bR9EESFXd+jfgVLl35F/6DC3HhmZuJTYMrKemc+zr3zpkLYByfcKDy/QBe+MVYYYJWjHMo4NViB8t4tzifyunBFL4t7sW0mrC4D+uqbHE/xpVv8SBm1ZPFQyk8rLR6triAldybxSOpXqMYyH1ZPImCk4+xAoacMYsVBpwZi3sw4sxZXGDOGrbRQhuPCOChhjoiaJR5sxJWiU7ocXlWGHdxxdxbnNM+oN3CDX2XUrGJO551+gKEtOeEKSJziHUs8Vcjv8m4wwWKrGqhQW+dbNfETcY84qVMp0XsM+ZiHru0In4+IxrH9LVpH/GskdNnJODcRU5uZt9g35AsLlGWsfp701P6zbyeTKBT9eluSa9FKmKiu8z36WuKElusMf8BrSa7fLBiQTyucO4JU12if/kSnWKVsnokSpl38ETZio0aDVrMjfAgdzevFGf4PC+lUyj31tSnKVoExJF90WPsUAlNfdt2qg5ztYvB3CarVImTleTmncm6+ybTnOOenycvdCG6aU4c74IWBSvcnkPBEVXQGUVCcprdNC8QsmMoXEXZtBrj+6yv/qumswfdG3JGnETOiK5kVrMFDVpbzPLp2xO2htmRH3MZolcAeJxjYGYAg/9zGIwYsAAAKoMB0QAAAQAB//8ADwABAAAACgAcAB4AAURGTFQACAAEAAAAAP//AAAAAAAAeJxjYGRgYOBi0GHQY2B2cfMJYRDJSE0qYpDLSSzJY5BjYAHKMvz/zwAHAKuNBzUAeJxjYGRgZOBgYGJgYBABkyoMTOXpGSWMQGZ5SkkGI0iehUGAASTAwMjKFAGigJCJkY8hhYEBAJ0DBKoA) format('woff'); } @font-face { font-family: 'Matalo Sept'; font-style: normal; font-weight: 700; font-display: block; unicode-range: U+0037; src: url(data:font/woff;base64,d09GRgABAAAAAAWcAA8AAAAAB8gAAgBCAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAAFEAAAACAAAAAgRHZMdUdTVUIAAAUwAAAALwAAADAThCl4T1MvMgAAAcgAAABHAAAAYHaKgMVTVEFUAAAFYAAAADsAAABA9CPfG2NtYXAAAAIYAAAAKQAAADQADACKZ2FzcAAABQgAAAAIAAAACAAAABBnbHlmAAACVAAAALYAAAC2F7Lc62hlYWQAAAFYAAAANgAAADYcashfaGhlYQAAAZAAAAAfAAAAJAXaATtobXR4AAACEAAAAAgAAAAIBCkAN2xvY2EAAAJMAAAABgAAAAYAWwAVbWF4cAAAAbAAAAAWAAAAIAAFADNuYW1lAAADDAAAAecAAAQyb5Geu3Bvc3QAAAT0AAAAEwAAACD/nwAycHJlcAAAAkQAAAAHAAAAB2gGjIUAAQAAAAIAQjruX1VfDzz1AAMD6AAAAADUTdzYAAAAAOb6p7kABf/3AgUCsgAAAAYAAgAAAAAAAHicY2BkYGA+91+EgYFJnoGVgZWJlQEoggKYAD5wAhsAeJxjYGRgYGBiMAJiEGBkQAMABZYAOQAAeJxjYGGSZdrDwMrAwNTFFMHAwOANoRnjGIwYdRhQASMyp7g4JZXhAIM5gznzuf8iDAzMzxn+wNQwfgGaycCgwMACAPbjDDwAAh8AMgIKAAV4nGNgYGBiYGBgBmIRIMkIplkYFIA0CxCC+Ob//0PI/6fAfAYAUcUGkwAAALgB/4WwBI0AAAAAFQBbAAAAAgAyACcB7QKXAAMABwAAdxEhESUhESEyAbv+egFR/q8nAnD9kDUCBgAAAgAF//cCBQKyACMAMQAAFyImJjU0PgQ3IyImJjU0NjYzITIWFhUUDgQVFAYGAzMyFhUUBiMjIiY1NDbBLSYJGSkvLCEFyBYqGxonFQFPLiUIIjQ8NCIJJzOrHisrHqsfKioJFCUXNGBYTT8uDgkmLS0mCBsqFydXW11cVygWJBQBbyseHysrHx4rAAAAeJydUstKw0AUPdNU8VlUiqCIzEoUtFoRBV2pUBDqW3TtI7bR2JYkVdz5NeJXuHTlX/gPLsSFZ24mNg2upKRz7uvcO2cugCI+4UDl+wG88IuxwjitGOdQwKvFDpbwbnE+ldODSXxb3IspNW5xH9bVssX9KCrf4kHMqCeLh1J4WGn1bHEBK7k3i0dSvUYxkPuyeAIFJx9jBQw5YxYrDDjTFveiz5m1uMCcJWyjiRYeEcBDDXVE0FjmzcpYJTqhx+VZYdzFFXNvcU77gHYTN/RdSsUm2jzr9AUIac8KU0TmEOtY5K9GfpPRxgVKrGrijt462a6JG4x5xIuZTgvYZ8zFHHZpRfx8RjSO6WvRPuJZI6fPSMC5S5zczL7BviFZXKIsY/X3pqf0m3k9mUCn6tPdkl4LWJPoLvN9+hqixBZrzH9Aq8EuH6yYF48rnHvCVJfoX75Ep1ilrB6JUuYdPFG2YqNGgyZzIzzI3c0rxRk+z0vpFMq9NfVpiBYBcWRf9Bg7VEJT35adqsNc7WIwt8kqVeZkZbl5Z7Luvsk057jn58kLXYhumhPHu6BFwQq351BwRBV0RpGQnGY3zQuE7BgKV0k2rcb4Puur/6rp7EH3hpwRJ5EzoiuZdYtRn3hPWO7MbvwAN+yguwB4nGNgZgCD/3MYjBiwAAAqgwHRAAABAAH//wAPAAEAAAAKABwAHgABREZMVAAIAAQAAAAA//8AAAAAAAB4nGNgZGBg4GLQYdBjYHZx8wlhEMlITSpikMtJLMljkGNgAcoy/P/PAAcAq40HNQB4nGNgZGBk4GBgYmBgEAGTKgxM5ekZJYxAZnlKSQYjSJ6FQYABJMDAyMa0B0QBIRMjH0MKAwMAovAFDwA=) format('woff'); } /* ---------- 1. Couleurs et variables ---------- */ :root { /* ocean */ --ocean-950: #062a3a; --ocean-900: #0b3954; --ocean-800: #0f4c6e; --ocean-700: #0a6e86; --ocean-500: #1fa3b8; --ocean-300: #7fd3df; --ocean-100: #d7f3f6; /* sable / parchemin */ --parchemin: #fbf1d9; --parchemin-2: #f4e2b8; --parchemin-3: #e6c98d; --sable: #f7e6bd; /* bois */ --bois-900: #3f2412; --bois-700: #6b3f1f; --bois-500: #9a5b2e; --bois-300: #c98b52; /* or */ --or-700: #b67a00; --or-500: #f2b01e; --or-300: #ffd76a; /* etats */ --succes: #1f9e89; --succes-fonce: #137565; --succes-clair: #d4f2ec; --erreur: #e8743b; --erreur-fonce: #b9501f; --erreur-clair: #fde4d6; --corail: #ff6b57; /* texte */ --encre: #2b2118; --encre-2: #5c4a38; --encre-3: #8a7660; --blanc: #ffffff; /* back-office */ --fond-bo: #f6f1e6; --carte-bo: #ffffff; --bord-bo: #eadfc8; --navy: #10263d; --navy-2: #173553; --rayon: 18px; --rayon-s: 12px; --ombre: 0 10px 30px -12px rgba(11, 57, 84, .45); --ombre-s: 0 4px 14px -6px rgba(11, 57, 84, .35); --police: "Matalo Sept", "Fredoka", "Nunito", "Trebuchet MS", system-ui, sans-serif; /* lot 058 : 7 barre */ --police-titre: "Pirata One", "Fredoka", Georgia, serif; } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--police); color: var(--encre); background: var(--fond-bo); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } button { font-family: inherit; } .titre-pirate { font-family: var(--police-titre); font-weight: 400; letter-spacing: .5px; } .cache { display: none !important; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ---------- 3. Fond ocean anime ---------- */ .ocean { min-height: 100vh; background: radial-gradient(1200px 600px at 15% -10%, rgba(127, 211, 223, .35), transparent 60%), radial-gradient(900px 500px at 110% 20%, rgba(31, 163, 184, .35), transparent 60%), linear-gradient(180deg, #1593ad 0%, #0f6f8f 45%, #0b3954 100%); position: relative; overflow-x: hidden; } .ocean::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 20 Q15 10 30 20 T60 20 T90 20 T120 20' fill='none' stroke='white' stroke-opacity='.10' stroke-width='2'/%3E%3C/svg%3E"); background-size: 120px 40px; animation: houle 18s linear infinite; } @keyframes houle { from { background-position: 0 0; } to { background-position: 240px 40px; } } /* ---------- 4. Boutons "3D" ---------- */ .btn { --b: var(--or-500); --b2: var(--or-700); --t: var(--bois-900); display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .7em 1.3em; border: 0; border-radius: 14px; background: var(--b); color: var(--t); font-weight: 700; font-size: 1rem; text-decoration: none; box-shadow: 0 5px 0 var(--b2), 0 8px 18px -8px rgba(0,0,0,.45); cursor: pointer; transition: transform .08s ease, box-shadow .08s ease, filter .15s; white-space: nowrap; } .btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 0 var(--b2), 0 10px 20px -8px rgba(0,0,0,.45); } .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--b2); } .btn:focus-visible { outline: 3px solid var(--ocean-300); outline-offset: 3px; } .btn-ocean { --b: var(--ocean-500); --b2: var(--ocean-700); --t: #fff; } .btn-bois { --b: var(--bois-500); --b2: var(--bois-900); --t: #fff7e6; } .btn-succes { --b: var(--succes); --b2: var(--succes-fonce); --t: #fff; } .btn-erreur { --b: var(--erreur); --b2: var(--erreur-fonce); --t: #fff; } .btn-blanc { --b: #fff; --b2: #d9cbb0; --t: var(--encre); } .btn-navy { --b: var(--navy-2); --b2: #07182a; --t: #fff; } .btn-xl { font-size: 1.3rem; padding: .8em 1.6em; border-radius: 18px; } .btn-s { font-size: .88rem; padding: .5em .9em; border-radius: 10px; box-shadow: 0 3px 0 var(--b2); } .btn-s:active { transform: translateY(2px); } .btn-plat { display: inline-flex; align-items: center; gap: .5em; background: transparent; border: 0; padding: .5em .7em; border-radius: 10px; color: inherit; font-weight: 600; cursor: pointer; text-decoration: none; } .btn-plat:hover { background: rgba(0,0,0,.06); } .btn-icone { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--bord-bo); background: #fff; color: var(--encre-2); cursor: pointer; transition: .15s; } .btn-icone:hover { background: var(--parchemin); color: var(--bois-700); border-color: var(--parchemin-3); } .btn-icone.danger:hover { background: var(--erreur-clair); color: var(--erreur-fonce); border-color: #f5b99a; } .btn[disabled] { opacity: .5; pointer-events: none; } /* ---------- 5. Parchemin & planche de bois ---------- */ .parchemin { background: radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.65), transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(201,139,82,.18), transparent 60%), var(--parchemin); border-radius: var(--rayon); box-shadow: inset 0 0 0 2px rgba(154, 91, 46, .18), inset 0 0 40px rgba(201,139,82,.25), var(--ombre); position: relative; } .parchemin.clous::before, .parchemin.clous::after { content: ""; position: absolute; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d8b27a, #6b3f1f); box-shadow: 0 1px 1px rgba(0,0,0,.35); } .parchemin.clous::before { left: 12px; } .parchemin.clous::after { right: 12px; } .planche { background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 13px, rgba(0,0,0,.08) 13px 14px), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 9px), linear-gradient(180deg, #a5673a, #7e4a26); color: #fff7e6; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.15), 0 6px 18px -6px rgba(0,0,0,.5); } /* ---------- 6. Barre du haut eleve ---------- */ .barre-eleve { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; padding: 10px clamp(12px, 3vw, 28px); } .barre-eleve .logo { font-family: var(--police-titre); font-size: 1.9rem; line-height: 1; color: var(--or-300); text-shadow: 0 2px 0 rgba(0,0,0,.35); text-decoration: none; display: flex; align-items: center; gap: 8px; } .barre-eleve .logo i { font-size: 1.2rem; color: #fff7e6; } .barre-eleve .espace { flex: 1; } .capitaine { display: flex; align-items: center; gap: 12px; } .avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: none; background: #fff; border: 3px solid var(--or-500); box-shadow: 0 3px 0 var(--or-700); cursor: pointer; position: relative; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-s { width: 34px; height: 34px; border-width: 2px; box-shadow: none; } .capitaine .nom { font-weight: 700; font-size: 1.1rem; line-height: 1.1; } .capitaine .sous { font-size: .82rem; opacity: .85; } .compteur { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,.22); border-radius: 999px; padding: 5px 14px 5px 6px; font-weight: 700; font-size: 1.05rem; color: #fff7e6; box-shadow: inset 0 1px 2px rgba(0,0,0,.35); } .piece { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff1b0, #f2b01e 55%, #b67a00); color: #7a5000; font-size: .72rem; font-weight: 800; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3); } .chip-niveau { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--or-500); color: var(--bois-900); font-weight: 700; font-size: .8rem; } /* ---------- 7. Conteneurs ---------- */ .conteneur { max-width: 1180px; margin: 0 auto; padding: clamp(16px, 3vw, 32px); } .grille-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; } @media (max-width: 900px) { .grille-2 { grid-template-columns: 1fr; } } /* ---------- 8. Carte au tresor (eleve) ---------- */ .entete-carte { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: stretch; margin-bottom: 28px; } @media (max-width: 860px) { .entete-carte { grid-template-columns: 1fr; } } .bloc-progression { padding: 22px 26px; display: flex; align-items: center; gap: 22px; } .bloc-progression h1 { margin: 0; font-family: var(--police-titre); font-size: 2.6rem; line-height: 1; color: var(--bois-700); font-weight: 400; } .bloc-progression p { margin: 6px 0 0; color: var(--encre-2); } .anneau { --p: 60; width: 92px; height: 92px; flex: none; border-radius: 50%; background: conic-gradient(var(--or-500) calc(var(--p) * 1%), rgba(107,63,31,.15) 0); display: grid; place-items: center; position: relative; } .anneau::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--parchemin); box-shadow: inset 0 0 0 2px rgba(154,91,46,.15); } .anneau span { position: relative; z-index: 1; font-weight: 700; font-size: 1.3rem; color: var(--bois-700); } .bloc-mission { padding: 20px 24px; display: flex; align-items: center; gap: 18px; min-width: 360px; } @media (max-width: 860px) { .bloc-mission { min-width: 0; } } .bloc-mission img { width: 84px; height: 84px; border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--or-500); } .bloc-mission .etiquette { font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--encre-3); font-weight: 600; } .bloc-mission h2 { margin: 2px 0 10px; font-size: 1.35rem; color: var(--ocean-900); } .mer-carte { position: relative; border-radius: 28px; padding: 36px clamp(10px, 3vw, 40px) 50px; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.25), transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,.18), transparent 40%), linear-gradient(160deg, #52c3d3, #2a9bb5 60%, #1d7f9c); box-shadow: inset 0 0 0 6px rgba(255,255,255,.25), inset 0 0 60px rgba(6,42,58,.35), var(--ombre); overflow: hidden; } .mer-carte::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60'%3E%3Cpath d='M5 30 q10 -8 20 0 t20 0' fill='none' stroke='white' stroke-opacity='.25' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 90px 60px; } .rose-vents { position: absolute; right: 18px; bottom: 14px; width: 110px; opacity: .55; pointer-events: none; } .chemin { position: absolute; inset: 0; pointer-events: none; overflow: visible; } .chemin path { fill: none; stroke: #fff7e6; stroke-width: 5; stroke-dasharray: 2 14; stroke-linecap: round; opacity: .9; } .chemin path.fait { stroke: var(--or-300); } .iles { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 42px; column-gap: 20px; } @media (max-width: 760px) { .iles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .iles { grid-template-columns: 1fr; } } .ile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit; } .ile.decale { transform: translateY(26px); } .ile .medaillon { position: relative; width: 150px; height: 150px; transition: transform .25s; } .ile .medaillon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px #fff, 0 14px 24px -8px rgba(6,42,58,.6); } .ile.terminee .medaillon img { box-shadow: 0 0 0 5px var(--or-500), 0 14px 24px -8px rgba(6,42,58,.6); } .ile.en-cours .medaillon img { box-shadow: 0 0 0 6px #fff, 0 0 0 12px rgba(255,215,106,.9), 0 14px 30px -6px rgba(6,42,58,.7); animation: pulse 2.2s ease-in-out infinite; } .ile.verrouillee .medaillon img { filter: grayscale(.9) brightness(.85) blur(1px); box-shadow: 0 0 0 5px rgba(255,255,255,.5); } .ile.verrouillee { cursor: not-allowed; } .ile:not(.verrouillee):hover .medaillon { transform: translateY(-6px) rotate(-2deg); } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 6px #fff, 0 0 0 12px rgba(255,215,106,.9), 0 14px 30px -6px rgba(6,42,58,.7); } 50% { box-shadow: 0 0 0 6px #fff, 0 0 0 20px rgba(255,215,106,.25), 0 14px 30px -6px rgba(6,42,58,.7); } } .ile .cadenas { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 2.2rem; text-shadow: 0 3px 8px rgba(0,0,0,.5); } .ile .drapeau { position: absolute; top: -6px; right: 4px; width: 40px; height: 40px; border-radius: 50%; background: var(--or-500); display: grid; place-items: center; color: var(--bois-900); box-shadow: 0 3px 0 var(--or-700); font-size: 1.05rem; } .ile .bateau { position: absolute; top: -18px; left: -14px; width: 50px; height: 50px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ocean-800); font-size: 1.4rem; box-shadow: 0 4px 0 var(--ocean-700); animation: tangage 2.4s ease-in-out infinite; } @keyframes tangage { 0%,100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-4px); } } .ile .ecriteau { margin-top: 14px; padding: 6px 14px 8px; border-radius: 10px; min-width: 150px; max-width: 220px; } .ile .ecriteau b { display: block; font-size: 1.02rem; line-height: 1.15; } .ile .ecriteau small { display: block; font-size: .78rem; opacity: .9; } .ile .etoiles { margin-top: 6px; color: var(--or-300); font-size: .95rem; letter-spacing: 2px; text-shadow: 0 1px 2px rgba(0,0,0,.4); } .ile .etoiles .vide { color: rgba(255,255,255,.4); } .ile .ici { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); background: var(--corail); color: #fff; font-weight: 700; font-size: .8rem; padding: 3px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 3px 0 #c84a3a; animation: rebond 1.6s ease-in-out infinite; } .ile .ici::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--corail); border-bottom: 0; } @keyframes rebond { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } } .ile .recommencer { position: absolute; bottom: 6px; left: 0; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: var(--bois-700); box-shadow: 0 3px 0 #d9cbb0; cursor: pointer; display: grid; place-items: center; text-decoration: none; } .ile .recommencer:hover { color: var(--ocean-700); } /* Banniere de fin de niveau */ .banniere-fin { display: flex; align-items: center; gap: 22px; padding: 22px 26px; margin-bottom: 28px; } .banniere-fin .medaille { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 2.2rem; color: var(--bois-900); background: radial-gradient(circle at 35% 30%, #fff1b0, #f2b01e 60%, #b67a00); box-shadow: 0 4px 0 var(--or-700); flex: none; } .banniere-fin h2 { margin: 0; font-family: var(--police-titre); font-weight: 400; font-size: 2rem; color: var(--bois-700); } /* ---------- 9. Modale ---------- */ .voile { position: fixed; inset: 0; background: rgba(6,42,58,.55); backdrop-filter: blur(3px); z-index: 100; display: none; align-items: center; justify-content: center; padding: 16px; } .voile.ouvert { display: flex; animation: apparait .2s ease; } @keyframes apparait { from { opacity: 0; } to { opacity: 1; } } .modale { width: min(560px, 100%); max-height: 90vh; overflow: auto; padding: 26px; animation: monte .25s ease; } @keyframes monte { from { transform: translateY(16px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } } .modale h2 { margin: 0 0 4px; font-family: var(--police-titre); font-weight: 400; font-size: 2rem; color: var(--bois-700); } .modale .fermer { position: absolute; top: 14px; right: 14px; } .modale-bo { background: #fff; border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(16,38,61,.5); position: relative; } .modale-bo h2 { font-family: var(--police); font-weight: 700; font-size: 1.3rem; color: var(--encre); } .grille-avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 14px; margin-top: 16px; } .choix-avatar { text-decoration: none; border: 0; background: #fff; border-radius: 16px; padding: 10px 6px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 3px 0 #e2d2ae; font-size: .75rem; color: var(--encre-2); position: relative; } .choix-avatar img { width: 56px; height: 56px; border-radius: 50%; } .choix-avatar.actif { outline: 3px solid var(--or-500); } .choix-avatar.bloque { cursor: not-allowed; background: #efe5cf; } .choix-avatar.bloque img { filter: grayscale(1) opacity(.45); } .choix-avatar.bloque .fa-lock { position: absolute; top: 26px; color: var(--bois-700); font-size: 1.1rem; } /* ---------- 10. Exercice ---------- */ .barre-exo { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; padding: 10px clamp(12px, 3vw, 28px); } .barre-exo .ile-mini { display: flex; align-items: center; gap: 10px; font-weight: 700; } .barre-exo .ile-mini img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 3px var(--or-500); } .corde { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; position: relative; padding: 14px 4px 4px; } .corde .noeud { flex: 1; height: 10px; border-radius: 999px; background: rgba(0,0,0,.25); position: relative; } .corde .noeud.ok { background: var(--succes); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); } .corde .noeud.ko { background: var(--erreur); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); } .corde .noeud.courant { background: var(--or-300); box-shadow: 0 0 0 3px rgba(255,215,106,.35); } .corde .navire { position: absolute; top: -12px; font-size: 1.25rem; color: #fff; transform: translateX(-50%); transition: left .5s ease; text-shadow: 0 2px 4px rgba(0,0,0,.4); } @media (max-width: 700px) { .barre-exo { flex-wrap: wrap; } .corde { order: 5; flex-basis: 100%; } } .scene-exo { max-width: 980px; margin: 0 auto; padding: clamp(16px, 3vw, 32px); } .carte-exo { overflow: hidden; } .carte-exo .tete { padding: 26px 30px 22px; text-align: center; border-bottom: 2px dashed rgba(154,91,46,.3); position: relative; } .carte-exo .num-question { display: inline-block; background: var(--ocean-900); color: #fff; font-weight: 700; font-size: .85rem; padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; } .carte-exo .consigne { font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 600; color: var(--ocean-900); margin: 0; } .support { display: inline-block; margin-top: 18px; padding: 14px 30px; background: #fff; border-radius: 14px; font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; color: var(--encre); box-shadow: 0 6px 0 #e6d6b3, 0 12px 24px -12px rgba(0,0,0,.35); transform: rotate(-1deg); position: relative; } .support::before { content: ""; position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9a8b, #c0392b); box-shadow: 0 2px 2px rgba(0,0,0,.35); } .carte-exo .zone { padding: 30px clamp(16px, 3vw, 34px) 34px; } .carte-exo .image-exo { max-width: 360px; margin: 16px auto 0; border-radius: 12px; box-shadow: 0 0 0 4px #fff, var(--ombre-s); } /* Lot 025 : graphiques en barres et visuels d'algebre : affiches plus grands pour etre lisibles */ .carte-exo .image-exo[src*="graphique_"], .carte-exo .image-exo[src*="algebre_"], .carte-exo .image-exo[src*="visuel_"] { width: 100%; max-width: 620px; } .pied-exo { display: flex; justify-content: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; } .tuiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .tuile { min-width: 120px; padding: 18px 22px; border: 0; border-radius: 16px; cursor: pointer; background: #fff; color: var(--ocean-900); font-size: 1.55rem; font-weight: 700; font-family: var(--police); box-shadow: 0 6px 0 #d9c7a0, 0 10px 20px -10px rgba(0,0,0,.35); transition: transform .1s, box-shadow .1s, background .15s; user-select: none; } .tuile:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #d9c7a0, 0 14px 22px -10px rgba(0,0,0,.35); } .tuile:active { transform: translateY(5px); box-shadow: 0 1px 0 #d9c7a0; } .tuile.choisie { background: var(--or-300); box-shadow: 0 6px 0 var(--or-700); color: var(--bois-900); } .tuile.bonne { background: var(--succes); color: #fff; box-shadow: 0 6px 0 var(--succes-fonce); } .tuile.mauvaise { background: var(--erreur); color: #fff; box-shadow: 0 6px 0 var(--erreur-fonce); animation: secoue .4s; } .tuile.utilisee { opacity: .3; pointer-events: none; } .tuile-s { min-width: 0; font-size: 1.15rem; padding: 12px 16px; } @keyframes secoue { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } .cases { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; } .case { min-width: 110px; min-height: 66px; border-radius: 14px; border: 3px dashed rgba(154,91,46,.45); background: rgba(255,255,255,.55); display: grid; place-items: center; font-size: 1.45rem; font-weight: 700; color: var(--ocean-900); position: relative; } .case.remplie { border-style: solid; border-color: var(--or-500); background: #fff; } .case .rang { position: absolute; top: -10px; left: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--bois-500); color: #fff; font-size: .75rem; display: grid; place-items: center; } .ligne-reponse { min-height: 70px; border-radius: 14px; background: #fff; box-shadow: inset 0 2px 6px rgba(0,0,0,.12); padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: var(--ocean-900); margin-bottom: 24px; } .ligne-reponse:empty::before { content: attr(data-vide); color: var(--encre-3); font-weight: 500; font-size: 1.05rem; } .droite { position: relative; height: 120px; margin: 10px 20px 0; } .droite .axe { position: absolute; left: 0; right: 0; top: 60px; height: 6px; background: var(--ocean-900); border-radius: 3px; } .droite .axe::after { content: ""; position: absolute; right: -14px; top: -7px; border: 10px solid transparent; border-left: 14px solid var(--ocean-900); } .droite .grad { position: absolute; top: 46px; width: 4px; height: 34px; margin-left: -2px; background: var(--ocean-900); border-radius: 2px; } .droite .grad b { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); font-size: 1.15rem; color: var(--encre); white-space: nowrap; } .droite .segment { position: absolute; top: 30px; height: 66px; border-radius: 12px; cursor: pointer; transition: background .15s; } .droite .segment:hover { background: rgba(31,163,184,.18); } .droite .segment.choisi { background: rgba(242,176,30,.45); box-shadow: inset 0 0 0 3px var(--or-500); } .droite .segment.bonne { background: rgba(31,158,137,.35); box-shadow: inset 0 0 0 3px var(--succes); } .colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 6vw, 80px); max-width: 720px; margin: 0 auto; } .colonnes h4 { margin: 0 0 10px; text-align: center; color: var(--encre-3); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: .8rem; } .colonnes .tuile { width: 100%; margin-bottom: 12px; font-size: 1.2rem; padding: 14px; } .tuile.paire-1 { background: #cfeff4; box-shadow: 0 6px 0 #7fd3df; } .tuile.paire-2 { background: #ffe8a8; box-shadow: 0 6px 0 #e3b33c; } .tuile.paire-3 { background: #d9f0d8; box-shadow: 0 6px 0 #8cc58a; } .tuile.paire-4 { background: #f7dcf0; box-shadow: 0 6px 0 #d49bc4; } .frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1; margin: 0 .1em; } .frac > span:first-child { border-bottom: 3px solid currentColor; padding: 0 .15em .08em; } .frac > span:last-child { padding-top: .08em; } /* bandeau de reponse (bas d'ecran) */ .bandeau-reponse { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; transform: translateY(110%); transition: transform .3s cubic-bezier(.2,.9,.3,1.2); } .bandeau-reponse.visible { transform: none; } .bandeau-reponse .contenu { max-width: 980px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 16px clamp(16px, 3vw, 32px) 20px; } .bandeau-reponse.bon { background: var(--succes-clair); border-top: 4px solid var(--succes); } .bandeau-reponse.faux { background: var(--erreur-clair); border-top: 4px solid var(--erreur); } .bandeau-reponse img { width: 76px; height: 76px; margin-top: -40px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); } .bandeau-reponse h3 { margin: 0; font-size: 1.4rem; } .bandeau-reponse.bon h3 { color: var(--succes-fonce); } .bandeau-reponse.faux h3 { color: var(--erreur-fonce); } .bandeau-reponse p { margin: 2px 0 0; color: var(--encre-2); } .bandeau-reponse .texte { flex: 1; } /* ---------- 11. Victoire ---------- */ .victoire { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; } .victoire .panneau-victoire { width: min(620px, 100%); padding: 36px 32px 32px; text-align: center; position: relative; z-index: 2; } .victoire h1 { font-family: var(--police-titre); font-weight: 400; font-size: clamp(3rem, 8vw, 4.6rem); margin: 0; color: var(--bois-700); line-height: 1; text-shadow: 0 3px 0 rgba(242,176,30,.45); } .victoire .perroquet { width: 150px; position: absolute; top: -96px; right: -30px; animation: tangage 2.4s ease-in-out infinite; } .grandes-etoiles { display: flex; justify-content: center; gap: 10px; margin: 18px 0 6px; font-size: 3rem; } .grandes-etoiles i { color: var(--or-500); filter: drop-shadow(0 3px 0 var(--or-700)); animation: etoile .5s backwards; } .grandes-etoiles i:nth-child(2) { animation-delay: .25s; font-size: 3.8rem; margin-top: -12px; } .grandes-etoiles i:nth-child(3) { animation-delay: .5s; } .grandes-etoiles i.vide { color: rgba(107,63,31,.2); filter: none; } @keyframes etoile { from { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.25); } to { transform: none; } } .resume-victoire { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0; } .resume-victoire div { background: #fff; border-radius: 14px; padding: 12px 8px; box-shadow: 0 4px 0 #e6d6b3; } .resume-victoire b { display: block; font-size: 1.6rem; color: var(--ocean-900); } .resume-victoire small { color: var(--encre-3); font-weight: 600; } .debloque { display: flex; align-items: center; gap: 14px; text-align: left; background: linear-gradient(90deg, #fff4cf, #fff); border-radius: 14px; padding: 12px 16px; border: 2px dashed var(--or-500); margin-bottom: 24px; } .debloque img { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 3px var(--or-500); } .pluie { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } .pluie span { position: absolute; top: -40px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b0, #f2b01e 55%, #b67a00); animation: chute linear infinite; opacity: .9; } @keyframes chute { to { transform: translateY(110vh) rotate(540deg); } } /* ---------- 12. Connexion ---------- */ .connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #0b3954 url("../img/fond_plage.jpg") center/cover no-repeat; position: relative; } .connexion::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,42,58,.15), rgba(6,42,58,.55)); } .boite-connexion { position: relative; width: min(440px, 100%); } .onglets-role { display: flex; justify-content: center; gap: 8px; margin-bottom: -6px; position: relative; z-index: 2; } .onglets-role a { text-decoration: none; padding: 10px 22px 14px; border-radius: 14px 14px 0 0; font-weight: 700; color: #fff7e6; background: rgba(63,36,18,.7); } .onglets-role a.actif { background: var(--parchemin); color: var(--bois-700); } .carte-connexion { padding: 30px 30px 26px; text-align: center; } .logo-matalo { font-family: var(--police-titre); font-size: 4rem; line-height: .9; color: var(--bois-700); margin: 6px 0 2px; text-shadow: 0 3px 0 rgba(242,176,30,.5); } .devise { color: var(--encre-2); margin: 0 0 22px; } .champ-xl { position: relative; margin-bottom: 14px; } .champ-xl i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--bois-300); font-size: 1.15rem; } .champ-xl input { width: 100%; padding: 16px 16px 16px 48px; font-size: 1.2rem; font-family: var(--police); font-weight: 600; border: 3px solid var(--parchemin-3); border-radius: 14px; background: #fff; color: var(--encre); outline: none; transition: .15s; } .champ-xl input:focus { border-color: var(--ocean-500); box-shadow: 0 0 0 4px rgba(31,163,184,.2); } .champ-xl input.code { letter-spacing: 6px; text-transform: uppercase; } .liens-connexion { display: flex; justify-content: space-between; margin-top: 18px; font-size: .9rem; color: var(--encre-2); } .liens-connexion a { color: var(--ocean-700); font-weight: 600; text-decoration: none; } .bulle { position: relative; background: #fff; border-radius: 16px; padding: 10px 14px; font-weight: 600; color: var(--encre); box-shadow: var(--ombre-s); font-size: .95rem; } .perroquet-connexion { position: absolute; left: -190px; bottom: 10px; width: 190px; } .perroquet-connexion .bulle { position: absolute; top: -66px; left: 10px; width: 190px; } .perroquet-connexion .bulle::after { content: ""; position: absolute; bottom: -10px; left: 60px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; } @media (max-width: 900px) { .perroquet-connexion { display: none; } } /* ===================================================================== BACK-OFFICE ENSEIGNANT ("la capitainerie") ===================================================================== */ .bo { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; background: var(--fond-bo); } .bo-menu { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: radial-gradient(600px 300px at 0% 0%, rgba(31,163,184,.25), transparent 60%), linear-gradient(180deg, var(--navy-2), var(--navy)); color: #cfe3ee; padding: 20px 14px; display: flex; flex-direction: column; } .bo-menu .marque { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; text-decoration: none; color: #fff; } .bo-menu .marque .ancre { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--or-500); color: var(--bois-900); font-size: 1.2rem; box-shadow: 0 3px 0 var(--or-700); } .bo-menu .marque b { font-family: var(--police-titre); font-weight: 400; font-size: 2rem; line-height: .9; display: block; color: var(--or-300); } .bo-menu .marque small { font-size: .75rem; letter-spacing: 1.5px; text-transform: uppercase; color: #8fb4c8; } .bo-menu .groupe { font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; color: #7fa2b6; margin: 18px 12px 6px; } .bo-menu a.lien { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: #d9e8f0; text-decoration: none; font-weight: 500; transition: .15s; } .bo-menu a.lien i { width: 22px; text-align: center; color: #8fb4c8; } .bo-menu a.lien:hover { background: rgba(255,255,255,.07); color: #fff; } .bo-menu a.lien.actif { background: rgba(242,176,30,.16); color: #fff; box-shadow: inset 3px 0 0 var(--or-500); } .bo-menu a.lien.actif i { color: var(--or-300); } .bo-menu .bas { margin-top: auto; padding-top: 18px; } .bo-menu .bas .btn { width: 100%; } .bo-principal { min-width: 0; display: flex; flex-direction: column; } .bo-haut { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 12px clamp(14px, 3vw, 30px); background: rgba(246,241,230,.88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bord-bo); } .bo-haut .burger { display: none; } .bo-haut h1 { margin: 0; font-size: 1.35rem; font-weight: 700; display: flex; align-items: center; gap: 10px; } .bo-haut h1 i { color: var(--bois-500); } .bo-haut .espace { flex: 1; } .filtre-haut { display: flex; gap: 8px; } .utilisateur-haut { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; border-radius: 999px; background: #fff; border: 1px solid var(--bord-bo); cursor: pointer; position: relative; } .utilisateur-haut img { width: 34px; height: 34px; border-radius: 50%; } .utilisateur-haut span { font-weight: 600; font-size: .92rem; padding-right: 6px; } .menu-deroulant { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border-radius: 14px; box-shadow: 0 20px 40px -16px rgba(16,38,61,.45); border: 1px solid var(--bord-bo); min-width: 200px; padding: 6px; display: none; } .menu-deroulant.ouvert { display: block; } .menu-deroulant a { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--encre); font-size: .92rem; } .menu-deroulant a:hover { background: var(--parchemin); } .bo-contenu { padding: clamp(14px, 3vw, 30px); display: flex; flex-direction: column; gap: 22px; } @media (max-width: 980px) { .bo { grid-template-columns: 1fr; } .bo-menu { position: fixed; left: 0; top: 0; bottom: 0; width: 270px; z-index: 90; transform: translateX(-105%); transition: transform .25s; } .bo-menu.ouvert { transform: none; box-shadow: 20px 0 50px rgba(0,0,0,.35); } .bo-haut .burger { display: inline-grid; } /* filtres ecole / classe (admin) : sur une 2e ligne, pleine largeur (lot 023) */ .bo-haut { flex-wrap: wrap; row-gap: 10px; } .filtre-haut { order: 10; flex-basis: 100%; } .filtre-haut .select-s { flex: 1 1 0; min-width: 0; text-overflow: ellipsis; } .utilisateur-haut span { display: none; } } /* cartes et panneaux back-office */ .panneau { background: var(--carte-bo); border-radius: 18px; border: 1px solid var(--bord-bo); box-shadow: 0 6px 20px -14px rgba(16,38,61,.35); } .panneau .tete-panneau { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--bord-bo); flex-wrap: wrap; } .panneau .tete-panneau h2 { margin: 0; font-size: 1.08rem; font-weight: 700; } .panneau .tete-panneau .espace { flex: 1; } .panneau .corps { padding: 20px; } .intro-page { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .intro-page p { margin: 0; color: var(--encre-2); flex: 1; min-width: 240px; } .tuiles-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 1150px) { .tuiles-kpi { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .tuiles-kpi { grid-template-columns: 1fr; } } .kpi { padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; } .kpi .icone-kpi { position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; } .kpi .libelle { padding-right: 52px; font-size: .82rem; color: var(--encre-3); font-weight: 600; text-transform: uppercase; letter-spacing: .8px; } .kpi .valeur { font-size: 2rem; font-weight: 700; line-height: 1.1; } .kpi .detail { font-size: .9rem; color: var(--encre-2); } .kpi .barre-ratio { display: flex; height: 8px; border-radius: 999px; overflow: hidden; gap: 2px; margin-top: 8px; } .kpi .barre-ratio span:first-child { background: var(--succes); border-radius: 999px 0 0 999px; } .kpi .barre-ratio span:last-child { background: var(--erreur); border-radius: 0 999px 999px 0; } .ic-ocean { background: var(--ocean-100); color: var(--ocean-700); } .ic-or { background: #fff1c7; color: var(--or-700); } .ic-succes { background: var(--succes-clair); color: var(--succes-fonce); } .ic-erreur { background: var(--erreur-clair); color: var(--erreur-fonce); } .ic-bois { background: #f3e2cf; color: var(--bois-700); } /* barre d'outils */ .outils { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .recherche { position: relative; min-width: 220px; flex: 1; max-width: 340px; } .recherche i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--encre-3); } .recherche input { width: 100%; padding: 9px 12px 9px 36px; border-radius: 12px; border: 1px solid var(--bord-bo); background: #fff; font-family: inherit; font-size: .95rem; outline: none; } .recherche input:focus, .champ input:focus, .champ select:focus, .champ textarea:focus, .select-s:focus { border-color: var(--ocean-500); box-shadow: 0 0 0 3px rgba(31,163,184,.18); } .segments { display: inline-flex; background: #efe6d3; border-radius: 12px; padding: 3px; gap: 2px; } .segments button { border: 0; background: transparent; padding: 6px 12px; border-radius: 9px; font-weight: 600; color: var(--encre-2); cursor: pointer; font-size: .9rem; } .segments a { padding: 6px 12px; border-radius: 9px; font-weight: 600; color: var(--encre-2); text-decoration: none; font-size: .9rem; } .segments a.actif { background: #fff; color: var(--encre); box-shadow: 0 2px 6px -2px rgba(0,0,0,.25); } .segments button.actif { background: #fff; color: var(--encre); box-shadow: 0 2px 6px -2px rgba(0,0,0,.25); } .select-s { padding: 8px 32px 8px 12px; border-radius: 12px; border: 1px solid var(--bord-bo); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7660' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center; -webkit-appearance: none; appearance: none; font-family: inherit; font-size: .92rem; color: var(--encre); outline: none; } /* tableaux */ .table-bo-wrap { overflow-x: auto; } /* Lot 025 : longues listes du back-office (Administration > Exercices) : le tableau defile dans son cadre, la barre de defilement horizontale reste visible en bas de l'ecran et la ligne des titres reste en haut. */ .bo-contenu > * { min-width: 0; } .table-bo-wrap.defile-xy { max-height: max(320px, calc(100vh - 320px)); overflow: auto; } .table-bo-wrap.defile-xy thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--bord-bo); } .table-bo-wrap.defile-xy::-webkit-scrollbar { width: 12px; height: 12px; } .table-bo-wrap.defile-xy::-webkit-scrollbar-thumb { background: #cdb991; border-radius: 8px; border: 3px solid #fbf7ee; } .table-bo-wrap.defile-xy::-webkit-scrollbar-track { background: #fbf7ee; } @media (max-width: 980px) { .table-bo-wrap.defile-xy { max-height: none; } } table.table-bo { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .94rem; } .table-bo th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .8px; color: var(--encre-3); font-weight: 600; padding: 12px 12px; background: #fbf7ee; border-bottom: 1px solid var(--bord-bo); white-space: nowrap; } .table-bo td { padding: 10px 12px; border-bottom: 1px solid #f1e9d8; vertical-align: middle; } .table-bo tbody tr { transition: background .12s; } .table-bo tbody tr:hover { background: #fdfaf3; } .table-bo tbody tr:last-child td { border-bottom: 0; } .table-bo .actions { display: flex; gap: 6px; justify-content: flex-end; } .cellule-user { display: flex; align-items: center; gap: 10px; } .cellule-user img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--bord-bo); } .cellule-user b { display: block; font-weight: 600; } .cellule-user small { color: var(--encre-3); } .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .88rem; background: #f4ecdb; padding: 2px 8px; border-radius: 6px; color: var(--bois-700); } .pastille { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; } .p-eleve { background: var(--ocean-100); color: var(--ocean-700); } .p-prof { background: #efe0ff; color: #6a3fb0; } .p-admin { background: #fff1c7; color: var(--or-700); } .p-gris { background: #f0ebe1; color: var(--encre-2); } .p-succes { background: var(--succes-clair); color: var(--succes-fonce); } .p-erreur { background: var(--erreur-clair); color: var(--erreur-fonce); } .niv { display: inline-block; min-width: 42px; text-align: center; padding: 3px 8px; border-radius: 8px; font-weight: 700; font-size: .8rem; color: #fff; } .niv-CP { background: #e76f51; } .niv-CE1 { background: #f4a261; } .niv-CE2 { background: #2a9d8f; } .niv-CM1 { background: #457b9d; } .niv-CM2 { background: #6a4c93; } .interrupteur { position: relative; width: 42px; height: 24px; display: inline-block; } .interrupteur input { opacity: 0; width: 0; height: 0; } .interrupteur span { position: absolute; inset: 0; border-radius: 999px; background: #d9cfbd; cursor: pointer; transition: .2s; } .interrupteur span::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .interrupteur input:checked + span { background: var(--succes); } .interrupteur input:checked + span::before { transform: translateX(18px); } .pagination { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--bord-bo); color: var(--encre-2); font-size: .9rem; flex-wrap: wrap; gap: 10px; } .pagination .pages { display: flex; gap: 4px; } .pagination .pages button { min-width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--bord-bo); background: #fff; cursor: pointer; font-weight: 600; color: var(--encre-2); } .pagination .pages button.actif { background: var(--navy-2); color: #fff; border-color: var(--navy-2); } /* formulaires */ .champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .champs .large { grid-column: 1 / -1; } @media (max-width: 600px) { .champs { grid-template-columns: 1fr; } } .champ label { display: block; font-size: .85rem; font-weight: 600; color: var(--encre-2); margin-bottom: 6px; } .champ input, .champ select, .champ textarea { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid #ddd0b6; background: #fff; font-family: inherit; font-size: .97rem; color: var(--encre); outline: none; transition: .15s; } .champ textarea { min-height: 90px; resize: vertical; } .champ select { -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7660' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center; padding-right: 32px; } .champ .aide { font-size: .8rem; color: var(--encre-3); margin-top: 4px; } /* tiroir lateral (formulaires creer / modifier) */ .tiroir-voile { position: fixed; inset: 0; background: rgba(16,38,61,.5); backdrop-filter: blur(2px); z-index: 95; opacity: 0; pointer-events: none; transition: .2s; } .tiroir-voile.ouvert { opacity: 1; pointer-events: auto; } .tiroir { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: #fff; z-index: 96; transform: translateX(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; box-shadow: -20px 0 50px -20px rgba(16,38,61,.5); } .tiroir.ouvert { transform: none; } .tiroir .tete-tiroir { padding: 20px 24px; border-bottom: 1px solid var(--bord-bo); display: flex; align-items: center; gap: 12px; background: var(--parchemin); } .tiroir .tete-tiroir h2 { margin: 0; font-size: 1.25rem; flex: 1; } .tiroir .corps-tiroir { padding: 22px 24px; overflow-y: auto; flex: 1; } .tiroir .pied-tiroir { padding: 16px 24px; border-top: 1px solid var(--bord-bo); display: flex; justify-content: flex-end; gap: 10px; } /* toast */ .toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 140%); background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 14px; z-index: 200; display: flex; gap: 10px; align-items: center; font-weight: 500; transition: transform .3s; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); } .toast.visible { transform: translate(-50%, 0); } .toast i { color: var(--or-300); } /* cartes d'iles / ecoles (back-office) */ .grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } .carte-ile { padding: 18px; display: flex; flex-direction: column; gap: 12px; } .carte-ile .haut { display: flex; gap: 14px; align-items: center; } .carte-ile .haut img { width: 76px; height: 76px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--bord-bo); flex: none; } .carte-ile h3 { margin: 0; font-size: 1.08rem; } .carte-ile p { margin: 0; color: var(--encre-2); font-size: .9rem; } .carte-ile .num { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--bois-700); background: #f3e2cf; padding: 2px 8px; border-radius: 6px; margin-bottom: 4px; } .carte-ile .compteurs { display: flex; gap: 6px; flex-wrap: wrap; } .carte-ile .bas { display: flex; gap: 6px; justify-content: flex-end; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--bord-bo); } .carte-ecole .bandeau { height: 70px; border-radius: 14px 14px 0 0; margin: -18px -18px 0; background: linear-gradient(135deg, var(--ocean-500), var(--ocean-800)); position: relative; } .carte-ecole .bandeau i { position: absolute; left: 18px; bottom: -22px; width: 52px; height: 52px; border-radius: 14px; background: #fff; color: var(--ocean-700); display: grid; place-items: center; font-size: 1.4rem; box-shadow: var(--ombre-s); } .carte-ecole h3 { margin-top: 26px; } .chiffres { display: flex; gap: 16px; } .chiffres div b { display: block; font-size: 1.3rem; } .chiffres div small { color: var(--encre-3); } /* graphiques */ .graphe { width: 100%; height: 260px; position: relative; } .graphe svg { width: 100%; height: 100%; overflow: visible; } .graphe .barre { fill: var(--ocean-500); transition: fill .15s; } .graphe .barre:hover, .graphe .barre.survol { fill: var(--ocean-700); } .graphe .axe-txt { fill: var(--encre-3); font-size: 12px; font-family: var(--police); } .graphe .grille { stroke: #eee5d3; stroke-width: 1; } .infobulle { position: absolute; pointer-events: none; background: var(--navy); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: .85rem; white-space: nowrap; transform: translate(-50%, -110%); opacity: 0; transition: opacity .12s; z-index: 5; } .infobulle.visible { opacity: 1; } .carte-chaleur-wrap { overflow-x: auto; } table.chaleur { border-collapse: separate; border-spacing: 0; font-size: .85rem; } .chaleur th, .chaleur td { padding: 0; } .chaleur thead th { font-weight: 600; color: var(--encre-2); padding: 6px 4px; text-align: center; font-size: .78rem; border-bottom: 1px solid var(--bord-bo); white-space: nowrap; } .chaleur thead th.groupe-ile { border-left: 3px solid #fff; } .chaleur tbody th { text-align: left; padding: 4px 14px 4px 0; font-weight: 600; white-space: nowrap; position: sticky; left: 0; background: #fff; } .chaleur td { width: 18px; height: 22px; } .chaleur td.debut-ile { border-left: 3px solid #fff; } .chaleur td i.c { display: block; width: 16px; height: 18px; margin: 2px 1px; border-radius: 4px; background: #efe8da; } .chaleur td i.c.ok { background: var(--succes); } .chaleur td i.c.ko { background: var(--erreur) repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 2px, transparent 2px 5px); } .chaleur td.total { padding-left: 12px; font-weight: 700; color: var(--encre-2); white-space: nowrap; width: auto; } .legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: var(--encre-2); } .legende span { display: inline-flex; align-items: center; gap: 6px; } .legende i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; } /* editeur d'exercice */ .editeur { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; } @media (max-width: 1100px) { .editeur { grid-template-columns: 1fr; } } .apercu-collant { position: sticky; top: 84px; } .mecaniques { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 600px) { .mecaniques { grid-template-columns: repeat(2, 1fr); } } .mecanique { border: 2px solid var(--bord-bo); border-radius: 14px; padding: 12px; background: #fff; cursor: pointer; text-align: left; font-family: inherit; transition: .15s; } .mecanique i { font-size: 1.2rem; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; margin-bottom: 8px; } .mecanique b { display: block; font-size: .95rem; } .mecanique small { color: var(--encre-3); font-size: .78rem; line-height: 1.25; display: block; } .mecanique:hover { border-color: var(--parchemin-3); } .mecanique.actif { border-color: var(--or-500); background: #fffaf0; box-shadow: 0 0 0 3px rgba(242,176,30,.2); } .liste-props { display: flex; flex-direction: column; gap: 8px; } .prop { display: flex; gap: 8px; align-items: center; } .prop input[type=text] { flex: 1; } .prop .bonne-rep { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--encre-2); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bord-bo); cursor: pointer; white-space: nowrap; background: #fff; } .prop .bonne-rep.oui { background: var(--succes-clair); border-color: #9fdccf; color: var(--succes-fonce); } .depot { border: 2px dashed var(--parchemin-3); border-radius: 14px; padding: 20px; text-align: center; color: var(--encre-2); background: #fffaf0; } .depot i { font-size: 1.6rem; color: var(--bois-300); display: block; margin-bottom: 6px; } /* couleurs */ .nuancier { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } .couleur { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--bord-bo); border-radius: 14px; background: #fff; } .couleur input[type=color] { width: 48px; height: 48px; border: 0; padding: 0; border-radius: 12px; cursor: pointer; background: none; } .couleur input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } .couleur input[type=color]::-webkit-color-swatch { border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); } .couleur b { display: block; font-size: .9rem; } .couleur input[type=text] { width: 100px; border: 0; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; color: var(--encre-3); padding: 0; outline: none; } .themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .theme { border: 2px solid var(--bord-bo); border-radius: 14px; padding: 10px; cursor: pointer; background: #fff; font-family: inherit; text-align: left; } .theme.actif { border-color: var(--or-500); box-shadow: 0 0 0 3px rgba(242,176,30,.2); } .theme .bandes { display: flex; height: 34px; border-radius: 9px; overflow: hidden; margin-bottom: 8px; } .theme .bandes span { flex: 1; } .theme b { font-size: .9rem; } /* sommaire */ .sommaire { max-width: 1100px; margin: 0 auto; padding: 40px 20px 60px; } .sommaire header { text-align: center; color: #fff; margin-bottom: 36px; } .sommaire header h1 { font-family: var(--police-titre); font-weight: 400; font-size: clamp(3rem, 8vw, 5rem); margin: 0; color: var(--or-300); text-shadow: 0 4px 0 rgba(0,0,0,.25); line-height: 1; } .sommaire header p { font-size: 1.1rem; opacity: .9; margin: 8px 0 0; } .sommaire h2 { font-family: var(--police-titre); font-weight: 400; color: #fff; font-size: 2.2rem; margin: 30px 0 14px; display: flex; align-items: center; gap: 12px; } .liste-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .lien-page { display: flex; gap: 14px; align-items: center; padding: 16px 18px; text-decoration: none; color: var(--encre); transition: transform .15s; } .lien-page:hover { transform: translateY(-4px) rotate(-.5deg); } .lien-page i { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; flex: none; } .lien-page b { display: block; } .lien-page small { color: var(--encre-2); font-size: .85rem; line-height: 1.3; display: block; } /* selecteur d'etats de la maquette */ .demo { position: fixed; left: 14px; bottom: 14px; z-index: 80; background: rgba(16,38,61,.92); color: #fff; border-radius: 14px; padding: 8px; display: flex; gap: 4px; align-items: center; font-size: .82rem; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); flex-wrap: wrap; max-width: calc(100vw - 28px); } .demo b { padding: 0 8px; color: var(--or-300); font-weight: 600; } .demo button, .demo a { border: 0; background: transparent; color: #cfe3ee; padding: 6px 10px; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: .82rem; text-decoration: none; } .demo button.actif, .demo button:hover, .demo a:hover { background: rgba(255,255,255,.14); color: #fff; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* utilitaires */ @media (max-width: 640px) { .cache-mobile { display: none; } .barre-eleve .logo { font-size: 1.5rem; } .capitaine .nom { font-size: .95rem; } } /* Lot 025 : le perroquet reste dans la marge a droite de l'exercice (il ne cache plus les etiquettes). Sa largeur suit la place libre a cote de la carte (980 px de large) ; la bulle est au-dessus de lui. Pas assez de place (< 1300 px) : il est cache. */ .compagnon { position: fixed; right: 14px; bottom: 16px; width: min(150px, calc((100vw - 980px) / 2 - 34px)); z-index: 5; pointer-events: none; } .compagnon img { display: block; width: 100%; height: auto; } .compagnon .bulle { position: absolute; bottom: calc(100% + 12px); right: 0; width: 100%; min-width: 0; font-size: .85rem; line-height: 1.3; padding: 8px 10px; } .compagnon .bulle::after { content: ""; position: absolute; bottom: -10px; right: 40%; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; } @media (max-width: 1300px) { .compagnon { display: none; } } .bandeau-reponse { z-index: 85; } .bandeau-reponse.visible ~ .compagnon { display: none; } .bandeau-reponse.visible ~ .demo { bottom: 150px; } .bo ~ .demo { left: auto; right: 14px; } .chaleur tbody th .cellule-user img { width: 26px; height: 26px; } .chaleur tbody th { min-width: 120px; } .table-bo td { white-space: nowrap; } .table-bo td.wrap { white-space: normal; min-width: 220px; } @media (max-width: 640px) { .barre-eleve { gap: 10px; } .barre-eleve .compteur { padding-right: 10px; font-size: .95rem; } .bloc-progression h1 { font-size: 2rem; } .victoire .perroquet { width: 110px; top: -70px; right: -10px; } } /* ===================================================================== APPLICATION (pages PHP) ===================================================================== */ .alerte { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; text-align: left; font-weight: 500; } .alerte i { margin-top: 3px; } .alerte-erreur { background: var(--erreur-clair); color: var(--erreur-fonce); } .alerte-succes { background: var(--succes-clair); color: var(--succes-fonce); } .alerte-info { background: var(--ocean-100); color: var(--ocean-800); } .alerte ul { margin: 4px 0 0; padding-left: 18px; } /* moteur d'exercices */ .frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.05; margin: 0 .12em; } .frac .num { border-bottom: 3px solid currentColor; padding: 0 .15em .06em; } .frac .den { padding-top: .06em; } .frac .fracbar { display: none; } .math { white-space: nowrap; } .trous { color: var(--bois-300); letter-spacing: 2px; } .aide-exo { text-align: center; color: var(--encre-2); margin: 0 0 18px; } .note-essai { text-align: center; color: #e8f6f8; margin: 18px 0 0; } .tuile.mec-choisi, .tuile.mec-encours { background: var(--or-300); box-shadow: 0 6px 0 var(--or-700); color: var(--bois-900); } .tuile.mec-bon { background: var(--succes); color: #fff; box-shadow: 0 6px 0 var(--succes-fonce); } .tuile.mec-faux { background: var(--erreur); color: #fff; box-shadow: 0 6px 0 var(--erreur-fonce); animation: secoue .4s; } .mec-zone[data-mecanique="tri"] .tuile.mec-choisi, .mec-zone[data-mecanique="assemblage"] .tuile.mec-choisi { opacity: .35; } .tuile[disabled] { cursor: default; } .colonnes .tuile { display: block; } /* placement : graduations cliquables */ .placement { position: relative; display: flex; justify-content: space-between; margin: 10px 4px 6px; padding-top: 6px; } .placement::before { content: ""; position: absolute; left: 14px; right: 14px; top: 22px; height: 6px; border-radius: 3px; background: var(--ocean-900); } .placement .graduation { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 32px; } .placement .point { width: 34px; height: 34px; border-radius: 50%; border: 5px solid var(--ocean-900); background: #fff; cursor: pointer; transition: transform .1s, background .15s; padding: 0; } .placement .point:hover { transform: scale(1.15); background: var(--ocean-100); } .placement .point.mec-choisi { background: var(--or-500); border-color: var(--or-700); } .placement .graduation b { font-size: 1.15rem; color: var(--encre); white-space: nowrap; } /* support "droite graduee" */ .droite-support { display: flex; justify-content: space-between; align-items: flex-end; margin: 22px auto 0; max-width: 560px; height: 120px; position: relative; padding: 0 6px; } .droite-support::before { content: ""; position: absolute; left: 0; right: 0; bottom: 48px; height: 5px; border-radius: 3px; background: var(--ocean-900); } .droite-support .trait { position: relative; width: 3px; height: 24px; margin-bottom: 38px; background: var(--ocean-900); border-radius: 2px; } .droite-support .trait.grand { height: 40px; margin-bottom: 30px; width: 4px; } .droite-support .trait b { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); font-size: 1.1rem; white-space: nowrap; } .droite-support .trait.cible { background: var(--corail); } .droite-support .question { position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%); font-weight: 700; color: var(--corail); white-space: nowrap; } .droite-support .fleche { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: var(--corail); } /* assemblage : cases de lettres */ .cases-lettres { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px; padding: 14px; background: #fff; border-radius: 14px; box-shadow: inset 0 2px 6px rgba(0,0,0,.12); } .case-lettre { width: 46px; height: 56px; border-radius: 10px; border: 3px dashed rgba(154,91,46,.45); background: #fffaf0; font-size: 1.5rem; font-weight: 700; color: var(--ocean-900); cursor: pointer; font-family: var(--police); } .case-lettre:not(:empty) { border-style: solid; border-color: var(--or-500); } .mec-support .math { font-size: inherit; } .bandeau-reponse .piece { vertical-align: middle; } /* back-office : pages formulaires */ .page-formulaire { max-width: 860px; width: 100%; } .page-formulaire .pied-formulaire { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--bord-bo); flex-wrap: wrap; } .retour { display: inline-flex; align-items: center; gap: 8px; color: var(--encre-2); text-decoration: none; font-weight: 600; } .retour:hover { color: var(--ocean-700); } tr.vide td { text-align: center; padding: 40px; color: var(--encre-3); } th[data-sens="asc"]::after { content: " ▲"; } th[data-sens="desc"]::after { content: " ▼"; } .champ input[type=file] { padding: 8px; background: #fffaf0; } .champ input[type=checkbox] { width: auto; } .champ input:disabled, .champ input[readonly] { background: #f7f2e7; color: var(--encre-2); } .compte-lignes { color: var(--encre-2); font-size: .9rem; padding: 14px 20px; border-top: 1px solid var(--bord-bo); } /* editeur d'exercice */ .etape { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.02rem; } .etape span { width: 26px; height: 26px; border-radius: 50%; background: var(--navy-2); color: #fff; display: grid; place-items: center; font-size: .8rem; flex: none; } .mec-ligne { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; } .mec-ligne input[type=text], .mec-ligne input:not([type]), .mec-ligne select { flex: 1; min-width: 0; } .mec-ligne > span { color: var(--encre-2); font-size: .9rem; } .mec-champ { margin-bottom: 16px; } .choix-bonne { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 8px 8px 0 !important; padding: 7px 12px; border: 1px solid var(--bord-bo); border-radius: 10px; background: #fff; cursor: pointer; font-weight: 500 !important; color: var(--encre) !important; } .choix-bonne:has(input:checked) { background: var(--succes-clair); border-color: #9fdccf; color: var(--succes-fonce) !important; } .cadre-apercu { display: block; width: 100%; height: 640px; border: 0; border-radius: 0 0 18px 18px; background: #0f6f8f; } .btn-plat.ajouter { color: var(--ocean-700); } /* couleurs */ .apercu-couleurs { border-radius: 18px; padding: 22px; background: var(--c1, #8ecae6); transition: background .2s; } .apercu-couleurs .barre { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--c3, #023047); color: var(--c7, #fff); font-weight: 600; margin-bottom: 16px; } .apercu-couleurs .carte { background: var(--c7, #fff); border-radius: 16px; padding: 18px; text-align: center; box-shadow: 0 8px 20px -12px rgba(0,0,0,.4); } .apercu-couleurs .sup { display: inline-block; padding: 8px 18px; border-radius: 10px; background: var(--c4, #ffb703); color: var(--c3, #023047); font-weight: 700; font-size: 1.2rem; margin-bottom: 14px; } .apercu-couleurs .t { display: inline-block; margin: 4px; padding: 10px 16px; border-radius: 12px; background: var(--c1, #8ecae6); color: var(--c3, #023047); font-weight: 700; } .apercu-couleurs .t.ok { background: var(--c4, #ffb703); color: var(--c3, #023047); } .apercu-couleurs .t.ko { background: var(--c6, #d62828); color: var(--c7, #fff); } .apercu-couleurs .bt { display: flex; justify-content: center; gap: 8px; margin-top: 14px; } .apercu-couleurs .bt span { padding: 8px 16px; border-radius: 10px; font-weight: 600; } .apercu-couleurs small { color: var(--c8, #adb5bd); } .couleur input[type=text] { width: 100px; border: 0; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; color: var(--encre-3); padding: 0; outline: none; background: transparent; } /* apercu dans l'editeur (cadre) */ .mode-apercu .barre-exo { display: none; } .mode-apercu .scene-exo { padding: 14px; } .mode-apercu .carte-exo .tete { padding: 18px 16px 16px; } .mode-apercu .carte-exo .zone { padding: 18px 12px 20px; } .mode-apercu .tuile { font-size: 1.15rem; min-width: 70px; padding: 12px 14px; } .mode-apercu .consigne { font-size: 1.15rem; } .mode-apercu .support { font-size: 1.35rem; padding: 10px 22px; } .mode-apercu .note-essai { font-size: .85rem; } .mode-apercu .bandeau-reponse img { display: none; } /* ---------- Demandes du site vitrine (lot 007) ---------- */ .bo-menu a.lien .badge-menu { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--corail); color: #fff; font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center; } .grille-demande { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; margin-top: 14px; align-items: start; } @media (max-width: 1000px) { .grille-demande { grid-template-columns: 1fr; } } .fiche-demande { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0 0 18px; } .fiche-demande dt { color: var(--encre-3); font-weight: 600; font-size: .9rem; } .fiche-demande dt i { width: 18px; color: var(--bois-300); } .fiche-demande dd { margin: 0; font-weight: 600; word-break: break-word; } .titre-message { font-size: .8rem; text-transform: uppercase; letter-spacing: .8px; color: var(--encre-3); margin: 0 0 8px; } .message-demande { background: var(--parchemin); border-radius: 14px; padding: 16px 18px; line-height: 1.55; box-shadow: inset 0 0 0 1px rgba(154,91,46,.15); word-break: break-word; } /* ---------- Reponses aux demandes (lot 008) ---------- */ .fil-reponses { display: grid; gap: 14px; } .reponse-envoyee { border-left: 4px solid var(--succes); background: #f7fbf9; border-radius: 0 12px 12px 0; padding: 12px 16px; } .reponse-envoyee .entete-reponse { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 6px; } .reponse-envoyee .entete-reponse span { color: var(--encre-3); font-size: .85rem; } .reponse-envoyee .texte-reponse { color: var(--encre-2); line-height: 1.5; word-break: break-word; } .pj-envoyees { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .zone-pj { display: flex !important; align-items: center; gap: 10px; padding: 14px 16px; border: 2px dashed #dccaa6; border-radius: 12px; background: #fffaf0; cursor: pointer; color: var(--encre-2); font-weight: 500 !important; transition: .15s; margin: 0 !important; } .zone-pj:hover { border-color: var(--ocean-500); background: #f2fbfc; } .zone-pj i { color: var(--bois-300); font-size: 1.1rem; } #rep-pj:focus + .liste-pj, .zone-pj:focus-within { outline: 3px solid var(--ocean-300); } .liste-pj { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; } .liste-pj li { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--bord-bo); border-radius: 10px; padding: 6px 8px 6px 12px; } .liste-pj li i.fa-file { color: var(--ocean-700); } .liste-pj li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .liste-pj li small { color: var(--encre-3); } .liste-pj .btn-icone { width: 30px; height: 30px; } .pj-trop .zone-pj { border-color: var(--erreur); background: var(--erreur-clair); color: var(--erreur-fonce); } .options-reponse { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; } .options-reponse label { display: inline-flex; gap: 8px; align-items: center; font-size: .92rem; color: var(--encre-2); cursor: pointer; } .options-reponse input { width: 18px; height: 18px; accent-color: var(--succes); } /* ---------- Fractions dessinees dans les consignes et supports (lot 009) ---------- */ .mec-consigne .frac, .consigne .frac { font-size: .92em; margin: 0 .18em; vertical-align: middle; } .mec-consigne .frac .num { border-bottom-width: 2px; } .support-comparaison { display: inline-flex; align-items: center; justify-content: center; gap: .9em; } .support-comparaison .terme { display: inline-flex; align-items: center; } .support-comparaison .frac { margin: 0; } /* ---------- Ile finale (lot 010) ---------- */ .ile.ile-finale .medaillon img { box-shadow: 0 0 0 5px var(--or-500), 0 0 0 10px rgba(255,215,106,.45), 0 14px 26px -8px rgba(6,42,58,.7); } .ile.ile-finale.en-cours .medaillon img { box-shadow: 0 0 0 6px var(--or-300), 0 0 0 13px rgba(255,215,106,.85), 0 0 34px 6px rgba(255,215,106,.55); } .ile.ile-finale .medaillon::after { content: "\221E"; position: absolute; right: -6px; top: -6px; /* lot 014 : a droite, pour laisser voir le bateau (a gauche) */ width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.4rem; color: var(--bois-900); background: radial-gradient(circle at 35% 30%, #fff1b0, #f2b01e 60%, #b67a00); box-shadow: 0 3px 0 var(--or-700); } .ile.ile-finale.verrouillee .medaillon img { filter: saturate(.55) brightness(.9); } .arrivee-finale .ile-arrivee { width: 160px; height: 160px; margin: 0 auto 10px; border-radius: 50%; box-shadow: 0 0 0 6px var(--or-500), 0 0 30px 6px rgba(255,215,106,.6); } .arrivee-finale .texte-arrivee { font-size: 1.12rem; color: var(--encre-2); margin: 10px 0 16px; line-height: 1.5; } .regles-finale { list-style: none; padding: 0; margin: 0 auto 22px; display: grid; gap: 8px; max-width: 360px; text-align: left; } .regles-finale li { display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--bois-900); } .regles-finale i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #fff1c7; color: var(--or-700); flex: none; } .barre-finale { height: 8px; width: 90px; border-radius: 999px; background: #f0e7d5; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 6px; } .barre-finale span { display: block; height: 100%; background: var(--succes); border-radius: 999px; } .essai-finale { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--encre-2); background: #fff; border: 1px solid var(--bord-bo); border-radius: 12px; padding: 6px 10px; } .essai-finale i { color: var(--or-700); } .essai-finale a { font-weight: 700; text-decoration: none; color: var(--ocean-700); padding: 2px 6px; border-radius: 6px; } .essai-finale a:hover { background: var(--ocean-100); } /* ---------- Boutique "le comptoir du marchand" et avatars des iles (lot 013) ---------- */ /* acces depuis la carte */ .btn-boutique { --b: var(--or-500); --b2: var(--or-700); --t: var(--bois-900); } .port-carte { position: relative; z-index: 3; display: flex; justify-content: flex-end; margin: -14px 0 26px; } .enseigne-boutique { display: flex; align-items: center; gap: 14px; padding: 8px 18px 8px 8px; border-radius: 999px; text-decoration: none; transition: transform .2s; } .enseigne-boutique:hover { transform: translateY(-3px) rotate(-1deg); } .enseigne-boutique .etal { width: 62px; height: 62px; border-radius: 50%; background: var(--parchemin); display: grid; place-items: center; box-shadow: 0 0 0 4px var(--or-500), 0 6px 14px -4px rgba(0,0,0,.45); flex: none; } .enseigne-boutique .etal svg, .enseigne-boutique .etal img { width: 48px; height: 48px; } .enseigne-boutique b { display: block; font-family: var(--police-titre); font-weight: 400; font-size: 1.45rem; line-height: 1; color: var(--or-300); } .enseigne-boutique small { display: block; font-size: .85rem; opacity: .9; } .enseigne-boutique .fleche { width: 34px; height: 34px; border-radius: 50%; background: var(--or-500); color: var(--bois-900); display: grid; place-items: center; box-shadow: 0 3px 0 var(--or-700); } @media (max-width: 560px) { .port-carte { justify-content: center; } } /* le navire choisi remplace l'icone sur la carte */ .ile .bateau svg, .ile .bateau img { width: 40px; height: 34px; object-fit: contain; } /* mise en page */ .boutique { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: start; } @media (max-width: 900px) { .boutique { grid-template-columns: 1fr; } } /* cabine d'essayage (colonne de gauche) */ .cabine { padding: 26px 20px 20px; text-align: center; position: sticky; top: 90px; } @media (max-width: 900px) { .cabine { position: relative; top: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; text-align: left; align-items: center; } } @media (max-width: 520px) { .cabine { gap: 6px 14px; padding: 18px 14px 16px; } .cabine h2 { font-size: 1.5rem; margin-bottom: 8px; } .cabine .portrait { --taille: 104px; } .cabine .mer-mini { height: 74px; } .cabine .mer-mini svg, .cabine .mer-mini img { width: 90px; height: 74px; margin-left: -45px; } } .cabine .etiquette { font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--encre-3); font-weight: 600; } .cabine h2 { margin: 0 0 14px; font-family: var(--police-titre); font-weight: 400; font-size: 1.9rem; color: var(--bois-700); line-height: 1; } .cabine .infos { min-width: 0; } .portrait { --taille: 150px; position: relative; width: var(--taille); height: var(--taille); margin: 4px auto 0; } .portrait .rond { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; padding: 13%; background: radial-gradient(circle at 50% 40%, #fff, #f1e3c2); box-shadow: 0 0 0 6px #fff, 0 12px 22px -10px rgba(6,42,58,.6); transition: box-shadow .3s, background .3s; } .portrait .rond img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 3px 8px rgba(0,0,0,.2); } .portrait .compagnon-p { position: absolute; right: -22%; bottom: -8%; width: 52%; height: 52%; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); animation: tangage 3s ease-in-out infinite; } .portrait .compagnon-p img, .portrait .compagnon-p svg { width: 100%; height: 100%; object-fit: contain; } .portrait .titre-p { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); white-space: nowrap; } .banderole { display: inline-block; position: relative; padding: 4px 16px 5px; background: var(--corail); color: #fff; font-weight: 700; font-size: .82rem; border-radius: 4px; box-shadow: 0 3px 0 #c84a3a; } .banderole::before, .banderole::after { content: ""; position: absolute; top: 6px; border: 11px solid #c84a3a; z-index: -1; } .banderole::before { left: -14px; border-left-color: transparent; } .banderole::after { right: -14px; border-right-color: transparent; } .portrait-s { --taille: 92px; } .portrait-s .titre-p { bottom: -12px; } .portrait-s .banderole { font-size: .7rem; padding: 2px 10px 3px; } /* fonds */ .fond-lagon .rond, .avatar.fond-lagon { background: radial-gradient(circle at 50% 30%, #d7f3f6, #52c3d3 60%, #1d7f9c); } .fond-coucher .rond, .avatar.fond-coucher { background: linear-gradient(180deg, #ffd27a, #ff8a5c 55%, #c8456b); } .fond-jungle .rond, .avatar.fond-jungle { background: radial-gradient(circle at 30% 20%, #b7e27a, #4c9a3c 55%, #1f5e2e); } .fond-nuit .rond, .avatar.fond-nuit { background: radial-gradient(1.5px 1.5px at 20% 25%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 18%, #fff, transparent), radial-gradient(2px 2px at 82% 46%, #fff, transparent), radial-gradient(1.5px 1.5px at 35% 55%, #fff, transparent), radial-gradient(circle at 75% 25%, #fff6c8 0 7%, transparent 8%), linear-gradient(180deg, #0b1f3a, #24406b); } .cabine .mer-mini { margin: 34px auto 0; height: 92px; border-radius: 16px; position: relative; overflow: hidden; background: linear-gradient(180deg, #bfeaf1 0 55%, #2a9bb5 55%); box-shadow: inset 0 0 0 3px rgba(255,255,255,.6); } .cabine .mer-mini svg, .cabine .mer-mini img { position: absolute; left: 50%; bottom: 6px; width: 110px; height: 92px; margin-left: -55px; animation: tangage 3s ease-in-out infinite; transform-origin: 50% 80%; } @media (max-width: 900px) { .cabine .mer-mini { margin-top: 12px; } .cabine .portrait { margin-bottom: 16px; } } .essai { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff4cf; border: 2px dashed var(--or-500); border-radius: 12px; padding: 6px 10px; font-size: .85rem; font-weight: 600; color: var(--bois-700); } .essai button { border: 0; background: none; color: var(--bois-700); cursor: pointer; font-size: 1rem; padding: 0 2px; } .cabine .tresor { display: flex; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; } @media (max-width: 900px) { .cabine .tresor { justify-content: flex-start; } } .pastille { display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 999px; padding: 4px 12px 4px 5px; font-weight: 700; box-shadow: 0 3px 0 #e6d6b3; } .pastille svg, .pastille img { width: 30px; height: 20px; object-fit: contain; } /* entete de la boutique */ .entete-boutique { display: flex; align-items: center; gap: 18px; padding: 18px 24px; margin-bottom: 18px; } .entete-boutique img { width: 92px; margin: -30px 0 -14px -6px; flex: none; animation: tangage 2.8s ease-in-out infinite; } .entete-boutique h1 { margin: 0; font-family: var(--police-titre); font-weight: 400; font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1; color: var(--bois-700); } .entete-boutique p { margin: 6px 0 0; color: var(--encre-2); } @media (max-width: 560px) { .entete-boutique img { width: 64px; margin-top: 0; } } /* rayons (onglets) */ .rayons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .rayon { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; padding: 10px 18px; border-radius: 14px; font-weight: 700; font-size: 1rem; background: rgba(63,36,18,.55); color: #fff7e6; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); transition: .15s; } .rayon:hover { background: rgba(63,36,18,.75); } .rayon.actif { background: var(--parchemin); color: var(--bois-700); box-shadow: 0 4px 0 var(--parchemin-3); } .rayon .nb { background: var(--or-500); color: var(--bois-900); border-radius: 999px; font-size: .75rem; padding: 1px 8px; } .sous-rayons { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; } .sous-rayon { border: 0; cursor: pointer; padding: 6px 14px; border-radius: 999px; font-weight: 600; font-size: .88rem; background: rgba(255,255,255,.18); color: #fff; } .sous-rayon:hover { background: rgba(255,255,255,.28); } .sous-rayon.actif { background: #fff; color: var(--ocean-900); } /* etal (grille d'articles) */ .etal-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; } @media (max-width: 520px) { .etal-grille { grid-template-columns: repeat(2, 1fr); gap: 12px; } .article .vitrine { height: 116px; } .article .corps { padding: 10px; } .article .essayer { width: 30px; height: 30px; } .ruban { font-size: .62rem !important; } .rayon { padding: 8px 12px; font-size: .92rem; } } .article { display: flex; flex-direction: column; padding: 0; overflow: hidden; transition: transform .2s; } .article:hover { transform: translateY(-4px); } .article .vitrine { position: relative; height: 140px; display: grid; place-items: center; background: linear-gradient(180deg, #fff8e6, #f4e2b8); border-bottom: 2px dashed rgba(154,91,46,.25); } .article.rayon-navire .vitrine, .article.rayon-ticket .vitrine { background: linear-gradient(180deg, #d7f3f6 0 58%, #52c3d3 58%, #2a9bb5); } .article.rayon-ticket .vitrine { background: radial-gradient(circle at 50% 40%, #fff6d6, #f4e2b8); } .article .vitrine > svg { width: 120px; height: 100px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.18)); } .article .vitrine > img { width: 96px; height: 96px; object-fit: contain; } .article .vitrine .portrait { --taille: 86px; } .article .vitrine .compagnon-seul { width: 90px; height: 90px; } .article.rayon-navire .vitrine .compagnon-seul, .article.rayon-ticket .vitrine .compagnon-seul { width: 132px; height: 104px; } .article .vitrine .compagnon-seul svg, .article .vitrine .compagnon-seul img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0,0,0,.18)); } .article .ruban { position: absolute; top: 10px; left: 10px; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .5px; } .ruban.nouveau { background: var(--corail); color: #fff; } .ruban.equipe { background: var(--succes); color: #fff; } .ruban.possede { background: var(--ocean-800); color: #fff; } .ruban.affaire { background: var(--or-500); color: var(--bois-900); } .article .essayer { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fff; color: var(--ocean-800); cursor: pointer; box-shadow: 0 3px 0 #d9cbb0; } .article .essayer:hover { color: var(--corail); } .article .corps { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .article h3 { margin: 0; font-size: 1.05rem; color: var(--ocean-900); line-height: 1.2; } .article .desc { margin: 0; font-size: .83rem; color: var(--encre-2); line-height: 1.3; flex: 1; } .article .prix { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 1.15rem; color: var(--bois-700); margin: 6px 0 8px; } .article .prix .piece { width: 24px; height: 24px; } .article .prix.gratuit { color: var(--succes-fonce); font-size: 1rem; } .article .btn { width: 100%; } .article .manque { font-size: .78rem; color: var(--erreur-fonce); font-weight: 600; text-align: center; margin-top: 6px; } .article.trop-cher .vitrine > * { filter: saturate(.6); } /* salle des jeux (bientot) */ .salle-jeux { margin-top: 26px; padding: 20px 22px; } .salle-jeux h2 { margin: 0 0 4px; font-family: var(--police-titre); font-weight: 400; font-size: 1.8rem; color: var(--bois-700); display: flex; align-items: center; gap: 10px; } .salle-jeux > p { margin: 0 0 14px; color: var(--encre-2); } .jeux { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .jeu { background: #fff; border-radius: 14px; padding: 14px; display: flex; gap: 12px; align-items: center; box-shadow: 0 3px 0 #e6d6b3; position: relative; } .jeu i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; flex: none; background: var(--ocean-100); color: var(--ocean-800); } .jeu b { display: block; font-size: .95rem; } .jeu small { color: var(--encre-3); font-weight: 600; } .jeu .bientot { position: absolute; top: -8px; right: 10px; background: var(--navy); color: #fff; font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; } /* fenetre d'achat */ .modale-achat { text-align: center; } .modale-achat .apercu { display: grid; place-items: center; margin: 10px auto 6px; height: 130px; } .modale-achat .apercu > svg { width: 140px; height: 110px; } .modale-achat .apercu .compagnon-seul { width: 140px; height: 112px; } .modale-achat .apercu .compagnon-seul svg, .modale-achat .apercu .compagnon-seul img { width: 100%; height: 100%; object-fit: contain; } .modale-achat .apercu .portrait { --taille: 104px; } .calcul-achat { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; max-width: 280px; margin: 16px auto 4px; text-align: left; background: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: 0 3px 0 #e6d6b3; } .calcul-achat span:nth-child(even) { text-align: right; font-weight: 700; } .calcul-achat .total { border-top: 2px dashed var(--parchemin-3); padding-top: 6px; color: var(--ocean-900); } .calcul-achat .moins { color: var(--erreur-fonce); } /* animation de depense */ .compteur.bouge { animation: secoue .35s; } .depense { position: fixed; z-index: 150; font-weight: 800; font-size: 1.3rem; color: var(--or-300); text-shadow: 0 2px 0 rgba(0,0,0,.4); pointer-events: none; animation: envole 1.1s ease-out forwards; } @keyframes envole { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(46px); } } /* avatar du haut habille (fond) + titre sous le nom (lot 013) */ .avatar[class*="fond-"] { padding: 4px; } .avatar[class*="fond-"] img { border-radius: 50%; background: #fff; } .titre-haut:empty { display: none; } .titre-haut { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--corail); color: #fff; font-weight: 700; font-size: .72rem; vertical-align: 1px; } /* choix de l'avatar : groupes */ .groupe-avatars { margin: 18px 0 0; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--encre-3); font-weight: 700; display: flex; justify-content: space-between; gap: 10px; } .groupe-avatars + .grille-avatars { margin-top: 8px; } .choix-avatar.nouveau::after { content: "Nouveau"; position: absolute; top: -8px; right: -4px; background: var(--corail); color: #fff; font-size: .62rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; } .modale-avatars { width: min(680px, 100%); } /* ---------- Rochers, boss, bouteille a la mer et epaves (lot 015) ---------- */ /* l'ile est un bloc, le lien est a l'interieur (le boss et l'epave ont leurs propres liens) */ .ile .lien-ile { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; } /* les 4 rochers autour du medaillon */ .ile .rochers { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); display: flex; gap: 5px; z-index: 2; } .ile .rocher { width: 24px; height: 18px; border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%; background: #9aa3a8; box-shadow: inset -3px -3px 0 rgba(0,0,0,.18), 0 2px 0 rgba(6,42,58,.35); position: relative; } .ile .rocher.encours { background: #fff; animation: rebond-rocher 1.6s ease-in-out infinite; } .ile .rocher.fait { background: var(--or-500); box-shadow: inset -3px -3px 0 var(--or-700), 0 2px 0 rgba(6,42,58,.35); } .ile .rocher.fait::after { content: "\2713"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .7rem; font-weight: 700; color: var(--bois-900); } @keyframes rebond-rocher { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* le boss sous l'ile */ .boss-ile { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; text-decoration: none; color: #fff; background: rgba(6,42,58,.55); box-shadow: 0 3px 0 rgba(6,42,58,.4); max-width: 230px; text-align: left; transition: transform .2s; position: relative; } .boss-ile img { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); } .boss-ile b { display: block; font-size: .8rem; line-height: 1.1; } .boss-ile small { display: block; font-size: .72rem; opacity: .9; font-weight: 600; } a.boss-ile:hover { transform: translateY(-2px) scale(1.03); } .boss-ile.endormi img { filter: grayscale(.85) brightness(1.05); opacity: .8; } .boss-ile.endormi::before { content: "z z"; position: absolute; left: 34px; top: -8px; font-weight: 700; font-size: .75rem; color: #fff; opacity: .85; } .boss-ile.pret { background: var(--erreur); box-shadow: 0 3px 0 var(--erreur-fonce), 0 0 0 4px rgba(255,255,255,.5); animation: alerte-boss 1.3s ease-in-out infinite; } .boss-ile.pret img { animation: tangage 1.6s ease-in-out infinite; } .boss-ile.vaincu { background: rgba(31,158,137,.85); box-shadow: 0 3px 0 var(--succes-fonce); } .boss-ile.vaincu img { opacity: .75; transform: rotate(-12deg); } .boss-ile.revanche { background: rgba(107,63,31,.8); } .boss-ile .etoiles-boss { font-style: normal; color: var(--or-300); font-size: .7rem; margin-left: 2px; white-space: nowrap; } @keyframes alerte-boss { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } } /* les epaves */ .epave-ile { position: absolute; top: 4px; left: -22px; z-index: 3; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #fff; animation: tangage 3s ease-in-out infinite; } .epave-ile img { width: 62px; height: 52px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); } .epave-ile span { margin-top: -6px; background: var(--bois-700); padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; box-shadow: 0 2px 0 var(--bois-900); } .epave-ile:hover img { transform: scale(1.1); } /* la bouteille a la mer */ .bouteille { position: absolute; z-index: 4; top: 12px; right: 16px; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #fff; } .bouteille img { width: 72px; height: 72px; filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); animation: flotte 3.2s ease-in-out infinite; } .bouteille span { margin-top: -4px; background: var(--or-500); color: var(--bois-900); font-weight: 700; font-size: .78rem; padding: 2px 10px; border-radius: 999px; box-shadow: 0 3px 0 var(--or-700); white-space: nowrap; } a.bouteille::after { content: "!"; position: absolute; top: -2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--corail); color: #fff; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 0 #c84a3a; animation: alerte-boss 1.2s ease-in-out infinite; } .bouteille.vide img { opacity: .55; filter: grayscale(.6); animation: none; transform: rotate(80deg); } .bouteille.vide span { background: rgba(255,255,255,.75); box-shadow: none; } @keyframes flotte { 0%,100% { transform: translateY(0) rotate(-14deg); } 50% { transform: translateY(-7px) rotate(10deg); } } @media (max-width: 560px) { .bouteille { position: relative; top: 0; right: 0; margin: -18px auto 18px; } .epave-ile { left: -6px; } } /* bloc "le boss t'attend" en haut de la carte */ .mission-boss img { border-radius: 0 !important; box-shadow: none !important; background: radial-gradient(circle, #fff 0 45%, transparent 70%); animation: tangage 2s ease-in-out infinite; } /* ecrans du boss, de la bouteille et de l'epave */ .scene-boss { min-height: calc(100vh - 70px); display: grid; place-items: center; padding: 70px 18px 30px; position: relative; overflow: hidden; } .fiche-boss { width: min(640px, 100%); padding: 30px 30px 28px; text-align: center; position: relative; } .fiche-boss h1 { font-family: var(--police-titre); font-weight: 400; font-size: clamp(2.3rem, 6vw, 3.4rem); margin: 0; color: var(--bois-700); line-height: 1.05; } .fiche-boss .texte-arrivee { font-size: 1.08rem; color: var(--encre-2); margin: 10px 0 16px; line-height: 1.5; } .boss-grand { width: 190px; height: 190px; margin: -110px auto 4px; display: block; filter: drop-shadow(0 10px 10px rgba(6,42,58,.3)); animation: tangage 2.6s ease-in-out infinite; position: relative; z-index: 2; } .boss-grand.vaincu { animation: none; transform: rotate(-16deg); opacity: .85; } .etiquette-boss { display: inline-block; background: var(--ocean-900); color: #fff; font-weight: 700; font-size: .85rem; padding: 4px 14px; border-radius: 999px; margin-bottom: 6px; } .info-boss { background: #fff4cf; border-radius: 12px; padding: 10px 14px; font-weight: 600; color: var(--bois-900); margin: 0 0 18px; } .info-boss i { color: var(--or-700); margin-right: 6px; } .etoiles-grandes { display: flex; justify-content: center; gap: 8px; font-size: 2.6rem; margin: 6px 0 18px; } .etoiles-grandes i { color: var(--or-500); filter: drop-shadow(0 3px 0 var(--or-700)); animation: etoile .5s backwards; } .etoiles-grandes i:nth-child(2) { animation-delay: .25s; } .etoiles-grandes i:nth-child(3) { animation-delay: .5s; } .etoiles-grandes i.vide { color: rgba(107,63,31,.2); filter: none; } .defaite-boss .boss-grand { animation: rire 1s ease-in-out infinite; } @keyframes rire { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-4px); } } /* barre de vie du boss pendant le combat */ .panneau-boss { display: flex; align-items: center; gap: 16px; padding: 10px 18px 10px 10px; margin-bottom: 18px; border-radius: 22px; } .panneau-boss .boss-img { width: 92px; height: 92px; flex: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); animation: tangage 2.4s ease-in-out infinite; } .panneau-boss .boss-infos { flex: 1; min-width: 0; } .panneau-boss .boss-infos b { display: block; font-size: 1.1rem; } .barre-pv { height: 18px; border-radius: 999px; background: rgba(0,0,0,.35); overflow: hidden; margin: 6px 0 4px; box-shadow: inset 0 2px 3px rgba(0,0,0,.35); } .barre-pv span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff6b57, #ffb14a); transition: width .6s ease; } .navire-coeurs { text-align: center; flex: none; } .navire-coeurs small { display: block; font-weight: 600; opacity: .9; } .navire-coeurs i { color: #ff5a6e; font-size: 1.5rem; margin: 0 2px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)); transition: transform .3s, color .3s; } .navire-coeurs i.perdu { color: rgba(255,255,255,.3); transform: scale(.8); } .panneau-boss.enrage .boss-img { animation: colere .5s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255,90,60,.9)); } .panneau-boss.touche .boss-img { animation: touche .6s; } .panneau-boss.riposte { animation: secoue .4s; } @keyframes colere { 0%,100% { transform: rotate(-5deg) scale(1.02); } 50% { transform: rotate(5deg) scale(1.06); } } @keyframes touche { 0% { transform: scale(1); filter: brightness(2); } 40% { transform: scale(.85) rotate(-14deg); } 100% { transform: none; } } @media (max-width: 560px) { .panneau-boss { flex-wrap: wrap; } .panneau-boss .boss-img { width: 64px; height: 64px; } .navire-coeurs { flex-basis: 100%; } } /* bandeau de la bouteille / de l'epave pendant la serie */ .panneau-serie { display: flex; align-items: center; gap: 14px; padding: 8px 16px 8px 10px; margin-bottom: 18px; border-radius: 22px; } .panneau-serie img { width: 54px; height: 54px; flex: none; } .panneau-serie b { display: block; } .panneau-serie small { opacity: .9; } .pastilles-serie { margin-left: auto; display: flex; gap: 6px; } .pastilles-serie i { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.3); } .pastilles-serie i.fait { background: var(--or-500); } .pastilles-serie i.courant { background: #fff; box-shadow: 0 0 0 3px rgba(255,215,106,.6); } .bouteille-grande { width: 150px; height: 150px; margin-top: -90px; } /* capitainerie : effacer la progression a partir d'une ile */ .liste-iles-raz { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .choix-ile-raz { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--bord-bo); background: #fff; cursor: pointer; } .choix-ile-raz:hover { border-color: var(--ocean-300); } .choix-ile-raz:has(input:checked) { border-color: var(--erreur); background: var(--erreur-clair); } .choix-ile-raz input { accent-color: var(--erreur); width: 18px; height: 18px; flex: none; } .choix-ile-raz img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; } .choix-ile-raz b { display: block; } .choix-ile-raz small { display: block; color: var(--encre-3); } .choix-ile-raz .pastille { margin-top: 4px; } /* ---------- Passage a l'ile suivante (lot 016) : la bulle "objectifs" de l'ile en cours ---------- */ .boss-ile.objectifs { display: block; border-radius: 18px; padding: 8px 12px 10px; max-width: 250px; width: 100%; background: rgba(6,42,58,.72); box-shadow: 0 3px 0 rgba(6,42,58,.45); } .boss-ile.objectifs.pret { background: var(--erreur); box-shadow: 0 3px 0 var(--erreur-fonce), 0 0 0 4px rgba(255,255,255,.5); animation: none; } .boss-ile.objectifs.arefaire { background: rgba(107,63,31,.88); box-shadow: 0 3px 0 var(--bois-900); } .boss-ile.objectifs::before { display: none; } .objectifs-tete { display: flex; align-items: center; gap: 8px; } .objectifs-tete img { width: 40px; height: 40px; } .boss-ile.objectifs.endormi .objectifs-tete img, .boss-ile.objectifs.arefaire .objectifs-tete img { filter: grayscale(.85) brightness(1.05); opacity: .8; } .boss-ile.objectifs.pret .objectifs-tete img { animation: tangage 1.6s ease-in-out infinite; } .objectifs-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: .74rem; font-weight: 600; } .objectifs-liste li { display: flex; align-items: center; gap: 6px; } .objectifs-liste li span { flex: 1; } .objectifs-liste li em { font-style: normal; font-weight: 700; background: rgba(255,255,255,.18); border-radius: 999px; padding: 0 7px; white-space: nowrap; } .objectifs-liste li i { font-size: .8rem; opacity: .55; } .objectifs-liste li.ok i { color: var(--or-300); opacity: 1; } .objectifs-liste li.ok span { opacity: .75; } .boss-ile.objectifs > .btn, .objectifs-actions .btn { margin-top: 8px; width: 100%; justify-content: center; } .objectifs-actions { display: grid; gap: 0; } .objectifs-actions .btn small { font-weight: 600; opacity: .85; margin-left: 2px; } .mission-refaire .mission-texte { margin: -4px 0 10px; color: var(--encre-2); font-size: .92rem; } /* salle des jeux : jeux pas encore annonces */ .jeu.jeu-secret b { letter-spacing: .5px; } /* lot 027 : connexions par semaine (jour par jour) */ .graphe .barre.jour-courant { fill: var(--or-500); } .graphe .barre.jour-courant:hover, .graphe .barre.jour-courant.survol { fill: var(--or-700); } .graphe .axe-txt.jour-courant { fill: var(--encre); font-weight: 700; } .graphe .axe-txt.futur { opacity: .45; } .nav-semaine { display: inline-flex; align-items: center; gap: 6px; } .nav-semaine .btn-icone { width: 30px; height: 30px; } .nav-semaine .btn-icone[disabled] { opacity: .35; pointer-events: none; } .nav-semaine .semaine-titre { min-width: 190px; text-align: center; font-weight: 600; color: var(--encre-2); font-size: .92rem; } .semaine-pied .espace { flex: 1; } .semaine-pied { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; color: var(--encre-3); font-size: .9rem; margin-top: 6px; } .semaine-pied .legende-jour i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--or-500); margin-right: 5px; vertical-align: -1px; } @media (max-width: 640px) { .nav-semaine .semaine-titre { min-width: 0; } } /* Lot 028 : barre de defilement horizontale collee en bas de l'ecran sous les longs tableaux (Administration > Exercices) ; elle defile avec le tableau (js : M.cadresDefilants). */ .barre-x { display: none; position: sticky; bottom: 0; z-index: 5; height: 18px; overflow-x: auto; overflow-y: hidden; background: #fbf7ee; border-top: 1px solid var(--bord-bo); } .barre-x.visible { display: block; } .barre-x > div { height: 1px; } .barre-x::-webkit-scrollbar { height: 14px; } .barre-x::-webkit-scrollbar-thumb { background: #cdb991; border-radius: 8px; border: 3px solid #fbf7ee; } .barre-x::-webkit-scrollbar-track { background: #fbf7ee; } /* ===================================================================== Lot 030 : THEME ESPACE (CM2) - body.theme-espace Meme mise en page que les pirates : seules les couleurs, la police des titres et le decor changent (ciel etoile, panneaux metalliques, lunes). ===================================================================== */ .deco-espace { display: none; } .theme-espace { --ocean-950: #0a0c2c; --ocean-900: #1d1a5e; --ocean-800: #2c2a86; --ocean-700: #3a46b8; --ocean-500: #5b6cf0; --ocean-300: #a9b4ff; --ocean-100: #e3e7ff; --parchemin: #f2f4ff; --parchemin-2: #e3e7ff; --parchemin-3: #c3c9f2; --sable: #e3e7ff; --bois-900: #1d1650; --bois-700: #3b2a96; --bois-500: #5b4fd6; --bois-300: #9c90f0; --encre: #1f1d3a; --encre-2: #4a4870; --encre-3: #7a78a0; --succes: #20a98f; --corail: #ff5d8f; --ombre: 0 10px 30px -12px rgba(5, 6, 30, .7); --ombre-s: 0 4px 14px -6px rgba(5, 6, 30, .55); --police-titre: "Audiowide", "Fredoka", system-ui, sans-serif; } /* ciel etoile (remplace l'ocean) */ .theme-espace.ocean { background: radial-gradient(900px 500px at 10% -10%, rgba(140, 111, 240, .45), transparent 60%), radial-gradient(800px 500px at 110% 25%, rgba(255, 93, 143, .22), transparent 60%), radial-gradient(700px 600px at 50% 120%, rgba(63, 201, 164, .2), transparent 60%), linear-gradient(180deg, #171a52 0%, #0e1038 50%, #07081f 100%); } .theme-espace.ocean::before { background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 33% 72%, #fff, transparent), radial-gradient(1.6px 1.6px at 58% 32%, #fff, transparent), radial-gradient(1px 1px at 78% 84%, #fff, transparent), radial-gradient(1.2px 1.2px at 88% 12%, #fff, transparent), radial-gradient(1px 1px at 46% 52%, #fff, transparent), radial-gradient(1.5px 1.5px at 22% 92%, #ffe9a8, transparent), radial-gradient(1px 1px at 68% 62%, #cfe0ff, transparent); background-size: 260px 260px; animation: scintille 5s ease-in-out infinite alternate; } @keyframes scintille { from { opacity: .55; } to { opacity: 1; } } .theme-espace .titre-pirate { letter-spacing: 0; } /* panneaux : metal bleu nuit (remplace le bois) et hologramme clair (remplace le parchemin) */ .theme-espace .planche { background: repeating-linear-gradient(180deg, rgba(255,255,255,0) 0 15px, rgba(255,255,255,.05) 15px 16px), linear-gradient(180deg, #3b3f9a, #24276a); color: #eef0ff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(127,227,245,.25), 0 6px 18px -6px rgba(0,0,0,.6); } .theme-espace .parchemin { background: radial-gradient(ellipse at 15% 0%, rgba(255,255,255,.9), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(140,111,240,.16), transparent 60%), var(--parchemin); box-shadow: inset 0 0 0 2px rgba(91, 79, 214, .18), inset 0 0 40px rgba(127,227,245,.18), 0 0 0 1px rgba(127,227,245,.35), var(--ombre); } .theme-espace .parchemin.clous::before, .theme-espace .parchemin.clous::after { background: radial-gradient(circle at 35% 35%, #fff, #8e96c8); } .theme-espace .barre-eleve .logo { font-size: 1.45rem; letter-spacing: .5px; } .theme-espace .barre-eleve .logo i { color: #7fe3f5; } .theme-espace .compteur { color: #eef0ff; background: rgba(5,6,30,.35); } .theme-espace .btn-bois { --t: #eef0ff; } .theme-espace .btn-blanc { --b2: #c3c9f2; } .theme-espace .voile { background: rgba(7, 8, 31, .65); } /* la monnaie : un cristal (au lieu de la piece « M ») */ .theme-espace .piece { background: url("../img/boutique/cristal.png") center / contain no-repeat; color: transparent; box-shadow: none; border-radius: 0; filter: drop-shadow(0 0 4px rgba(179,157,250,.8)); } /* en-tete de la carte */ .theme-espace .bloc-progression h1 { font-size: 2rem; line-height: 1.1; } .theme-espace .anneau::after { box-shadow: inset 0 0 0 2px rgba(91,79,214,.15); } .theme-espace .bloc-mission h2 { color: var(--bois-700); } .theme-espace .banniere-fin h2 { font-size: 1.5rem; } .theme-espace .enseigne-boutique b { font-size: 1.15rem; color: #ffd76a; } .theme-espace .enseigne-boutique .etal { background: #1a1d5a; box-shadow: 0 0 0 4px #7fe3f5, 0 0 18px rgba(127,227,245,.55); } /* la carte : le ciel profond */ .theme-espace .mer-carte { background: radial-gradient(circle at 15% 12%, rgba(140,111,240,.45), transparent 38%), radial-gradient(circle at 85% 55%, rgba(255,93,143,.25), transparent 40%), radial-gradient(circle at 30% 90%, rgba(63,201,164,.22), transparent 40%), linear-gradient(160deg, #22256e, #121543 55%, #090b28); box-shadow: inset 0 0 0 4px rgba(127,227,245,.35), inset 0 0 60px rgba(0,0,0,.5), var(--ombre); } .theme-espace .mer-carte::before { background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 40% 70%, #fff, transparent), radial-gradient(2px 2px at 65% 30%, #fff, transparent), radial-gradient(1px 1px at 85% 85%, #fff, transparent), radial-gradient(1.2px 1.2px at 25% 50%, #ffe9a8, transparent), radial-gradient(1px 1px at 75% 10%, #cfe0ff, transparent); background-size: 180px 180px; animation: scintille 4s ease-in-out infinite alternate; } .theme-espace .rose-vents { display: none; } .theme-espace .deco-espace { display: block; position: absolute; right: 16px; bottom: 12px; width: 120px; opacity: .8; pointer-events: none; } .theme-espace .chemin path { stroke: #a9b4ff; stroke-dasharray: 3 12; opacity: .8; } .theme-espace .chemin path.fait { stroke: #ffd76a; filter: drop-shadow(0 0 3px rgba(255,215,106,.8)); } .theme-espace .ile .medaillon img { box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 26px -2px rgba(140,111,240,.8); } .theme-espace .ile.terminee .medaillon img { box-shadow: 0 0 0 5px var(--or-500), 0 0 24px -2px rgba(255,215,106,.7); } .theme-espace .ile.en-cours .medaillon img { animation: pulse-espace 2.2s ease-in-out infinite; } @keyframes pulse-espace { 0%,100% { box-shadow: 0 0 0 5px #fff, 0 0 0 11px rgba(127,227,245,.85), 0 0 30px rgba(127,227,245,.6); } 50% { box-shadow: 0 0 0 5px #fff, 0 0 0 19px rgba(127,227,245,.2), 0 0 40px rgba(127,227,245,.4); } } .theme-espace .ile.verrouillee .medaillon img { filter: grayscale(.85) brightness(.7) blur(1px); box-shadow: 0 0 0 4px rgba(169,180,255,.35); } .theme-espace .ile .ecriteau b { font-size: .98rem; } .theme-espace .ile .ecriteau small { color: #c9cff5; } /* le vaisseau de l'eleve (a la place du petit bateau) */ .theme-espace .ile .bateau { background: #1a1d5a; color: #7fe3f5; box-shadow: 0 0 0 3px #7fe3f5, 0 0 16px rgba(127,227,245,.7); animation: flotte-espace 2.6s ease-in-out infinite; } .theme-espace .ile .bateau img { width: 42px; height: 36px; } @keyframes flotte-espace { 0%,100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(3px, -6px) rotate(6deg); } } .theme-espace .ile .recommencer { color: var(--bois-700); box-shadow: 0 3px 0 #c3c9f2; } .theme-espace .ile .drapeau { color: var(--bois-900); } /* les 4 lunes (a la place des 4 rochers) */ .theme-espace .ile .rochers { gap: 6px; bottom: -8px; } .theme-espace .ile .rocher { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #b8b3c9 0 2px, transparent 3px), radial-gradient(circle at 65% 60%, #b8b3c9 0 3px, transparent 4px), radial-gradient(circle at 35% 35%, #f4f2fb, #a9a4bd 75%); box-shadow: inset -3px -3px 0 rgba(20,20,60,.25), 0 0 0 2px rgba(255,255,255,.25); } .theme-espace .ile .rocher.encours { background: radial-gradient(circle at 35% 35%, #fff, #cfe8ff 70%); box-shadow: 0 0 0 2px #7fe3f5, 0 0 12px #7fe3f5; } .theme-espace .ile .rocher.fait { background: radial-gradient(circle at 35% 35%, #fff1b0, #f2b01e 70%, #b67a00); box-shadow: 0 0 10px rgba(255,215,106,.85); } .theme-espace .ile .rocher.fait::after { font-size: .68rem; } /* boss, satellite perdu, capsule */ .theme-espace .boss-ile { background: rgba(10,12,44,.7); box-shadow: 0 0 0 1px rgba(127,227,245,.3), 0 3px 0 rgba(5,6,30,.5); } .theme-espace .boss-ile.vaincu { background: rgba(32,169,143,.85); } .theme-espace .boss-ile.revanche { background: rgba(91,79,214,.85); } .theme-espace .boss-ile.objectifs { background: rgba(16,19,66,.88); box-shadow: 0 0 0 1px rgba(127,227,245,.35), 0 3px 0 rgba(5,6,30,.5); } .theme-espace .boss-ile.objectifs.arefaire { background: rgba(91,79,214,.92); box-shadow: 0 3px 0 var(--bois-900); } .theme-espace .epave-ile { animation: flotte-espace 3.4s ease-in-out infinite; } .theme-espace .epave-ile img { width: 66px; height: 56px; } .theme-espace .epave-ile span { background: #3a46b8; box-shadow: 0 2px 0 #1d1a5e; } .theme-espace .bouteille img { animation: flotte-espace 3s ease-in-out infinite; } .theme-espace .bouteille.vide img { transform: rotate(0); opacity: .5; animation: none; } /* choix de l'avatar : les astronautes et les ecussons */ .theme-espace .choix-avatar img { background: #1a1d5a; } /* fonds de l'avatar (boutique espace) */ .fond-nebuleuse .rond, .avatar.fond-nebuleuse { background: radial-gradient(circle at 30% 30%, #ffb3e0, transparent 45%), radial-gradient(circle at 75% 70%, #7fe3f5, transparent 45%), linear-gradient(160deg, #8c6ff0, #3b2a96); } .fond-terre .rond, .avatar.fond-terre { background: radial-gradient(circle at 50% 118%, #2f8fe0 0 34%, #5cc96b 35% 37%, transparent 38%), radial-gradient(1.5px 1.5px at 20% 25%, #fff, transparent), radial-gradient(1.5px 1.5px at 80% 20%, #fff, transparent), linear-gradient(180deg, #0b0e2e, #20256b); } .fond-galaxie .rond, .avatar.fond-galaxie { background: radial-gradient(circle at 50% 50%, #fff6c8 0 6%, transparent 22%), conic-gradient(from 30deg, #3b2a96, #8c6ff0, #ff5d8f, #3b2a96, #7fe3f5, #3b2a96); } .fond-pluie .rond, .avatar.fond-pluie { background: linear-gradient(135deg, transparent 0 30%, rgba(255,233,168,.9) 31%, transparent 34%), linear-gradient(135deg, transparent 0 58%, rgba(255,255,255,.8) 59%, transparent 61%), radial-gradient(1.5px 1.5px at 30% 70%, #fff, transparent), radial-gradient(2px 2px at 75% 35%, #fff, transparent), linear-gradient(180deg, #0b1f3a, #3b2a96); } /* boutique : le bazar galactique */ .theme-espace .cabine h2 { font-size: 1.4rem; } .theme-espace .cabine .mer-mini { background: radial-gradient(1.5px 1.5px at 15% 25%, #fff, transparent), radial-gradient(1px 1px at 60% 15%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 60%, #fff, transparent), radial-gradient(circle at 85% 110%, #8c6ff0 0 22%, transparent 23%), linear-gradient(180deg, #22256e, #0d1035); box-shadow: inset 0 0 0 3px rgba(127,227,245,.5); } .theme-espace .cabine .mer-mini img { animation: flotte-espace 3s ease-in-out infinite; } .theme-espace .pastille { box-shadow: 0 3px 0 #c3c9f2; } .theme-espace .entete-boutique h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); } .theme-espace .entete-boutique img { width: 96px; margin: -26px 0 -10px -6px; animation: flotte-espace 3s ease-in-out infinite; } .theme-espace .rayon { background: rgba(26,29,90,.75); color: #eef0ff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.3), 0 0 0 1px rgba(127,227,245,.25); } .theme-espace .rayon:hover { background: rgba(44,42,134,.9); } .theme-espace .rayon.actif { background: var(--parchemin); color: var(--bois-700); box-shadow: 0 4px 0 var(--parchemin-3); } .theme-espace .article .vitrine { background: linear-gradient(180deg, #ffffff, #e3e7ff); border-bottom: 2px dashed rgba(91,79,214,.25); } .theme-espace .article.rayon-navire .vitrine { background: radial-gradient(1.5px 1.5px at 20% 25%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 75%, #fff, transparent), linear-gradient(180deg, #2c2a86, #121543); } .theme-espace .article.rayon-ticket .vitrine { background: radial-gradient(circle at 50% 40%, #fff6d6, #e3e7ff); } .theme-espace .article .essayer { box-shadow: 0 3px 0 #c3c9f2; } .theme-espace .jeu, .theme-espace .calcul-achat { box-shadow: 0 3px 0 #c3c9f2; } /* ===================================================================== Lot 031 : THEME ESPACE sur les pages d'exercice, du boss, du defi du jour (capsule), du satellite perdu et de la victoire ===================================================================== */ .theme-espace .corde .navire { color: #7fe3f5; filter: drop-shadow(0 0 6px rgba(127,227,245,.9)); } .theme-espace .compagnon img, .theme-espace .bandeau-reponse img { object-fit: contain; filter: drop-shadow(0 0 10px rgba(127,227,245,.55)); } .theme-espace .compagnon .bulle { background: var(--parchemin); color: var(--encre); } .theme-espace .panneau-serie img, .theme-espace .boss-grand, .theme-espace .boss-img { object-fit: contain; } .theme-espace .panneau-boss .boss-img { filter: drop-shadow(0 0 12px rgba(255,93,143,.55)); } .theme-espace .navire-coeurs .fa-heart { color: #ff5d8f; } .theme-espace .navire-coeurs .fa-heart.perdu { color: rgba(255,255,255,.25); } .theme-espace .panneau-victoire .perroquet { object-fit: contain; } /* ===================================================================== Lot 037 : THEME CHEVALIERS (CE1) - body.theme-chevaliers « Le Royaume des Chevaliers » : prairie verte, panneaux de pierre, parchemin, police Cinzel Decorative (gras). ile -> chateau, rocher -> tour, navire -> monture, doublons -> ecus d'or. ===================================================================== */ .deco-chevaliers { display: none; } .theme-chevaliers { --ocean-950: #1c2a4a; --ocean-900: #23396b; --ocean-800: #2c4a8a; --ocean-700: #3a5aa8; --ocean-500: #4f74c8; --ocean-300: #a9c0ef; --ocean-100: #e3ebfb; --bois-900: #2a1f3a; --bois-700: #7a1f2f; --bois-500: #a8323f; --bois-300: #d97a7a; --corail: #e0503a; --police-titre: "Cinzel Decorative", "Cinzel", "MedievalSharp", Georgia, serif; /* 15/10 : plus epaisse et plus lisible que MedievalSharp */ } /* fond : le ciel au-dessus de la prairie */ .theme-chevaliers.ocean { background: radial-gradient(900px 400px at 15% -5%, rgba(255,255,255,.55), transparent 60%), linear-gradient(180deg, #7cc4ef 0%, #b9e2f7 30%, #8fd16a 30.1%, #6db84c 70%, #4f9a3a 100%); background-attachment: fixed; } .theme-chevaliers.ocean::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='60'%3E%3Cpath d='M10 50 l3 -8 l3 8 M50 30 l3 -8 l3 8' fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='34' cy='14' r='2' fill='%23ffd23f' fill-opacity='.35'/%3E%3C/svg%3E"); background-size: 80px 60px; animation: none; } /* panneaux de pierre (a la place du bois) */ .theme-chevaliers .planche { background: linear-gradient(90deg, rgba(0,0,0,.07) 1px, transparent 1px) 0 0 / 34px 17px, linear-gradient(180deg, rgba(0,0,0,.07) 1px, transparent 1px) 0 0 / 34px 17px, linear-gradient(180deg, #8d8a99, #6c6878); color: #fffdf6; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.2), 0 6px 18px -6px rgba(0,0,0,.45); } .theme-chevaliers .barre-eleve .logo { color: #ffd76a; font-size: 1.8rem; } .theme-chevaliers .barre-eleve .logo i { color: #fffdf6; } .theme-chevaliers .compteur { color: #fffdf6; } .theme-chevaliers .parchemin.clous::before, .theme-chevaliers .parchemin.clous::after { background: radial-gradient(circle at 35% 35%, #f0f0f0, #6c6878); } .theme-chevaliers .voile { background: rgba(42,31,58,.55); } /* la monnaie : un ecu d'or */ .theme-chevaliers .piece { background: url("../img/boutique/ecu.png") center / contain no-repeat; color: transparent; box-shadow: none; } /* en-tete de la carte */ .theme-chevaliers .bloc-progression h1 { font-size: 2.3rem; } .theme-chevaliers .bloc-mission h2 { color: var(--bois-700); } .theme-chevaliers .enseigne-boutique .etal { background: #8fd16a; } /* la carte : la prairie du royaume */ .theme-chevaliers .mer-carte { background: radial-gradient(circle at 20% 15%, rgba(255,255,255,.3), transparent 40%), radial-gradient(circle at 80% 75%, rgba(255,230,120,.25), transparent 40%), linear-gradient(160deg, #9ad874, #72bd52 55%, #579c3e); box-shadow: inset 0 0 0 6px rgba(255,255,255,.3), inset 0 0 60px rgba(30,60,20,.3), var(--ombre); } .theme-chevaliers .mer-carte::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='70'%3E%3Cpath d='M12 30 l3 -7 l3 7 M60 58 l3 -7 l3 7' fill='none' stroke='%23ffffff' stroke-opacity='.3' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='40' cy='16' r='2.5' fill='%23ff8fab' fill-opacity='.6'/%3E%3Ccircle cx='76' cy='30' r='2.5' fill='%23ffffff' fill-opacity='.6'/%3E%3C/svg%3E"); background-size: 90px 70px; } .theme-chevaliers .rose-vents { display: none; } .theme-chevaliers .deco-chevaliers { display: block; position: absolute; right: 18px; bottom: 14px; width: 84px; opacity: .85; pointer-events: none; } /* le chemin de terre entre les chateaux */ .theme-chevaliers .chemin path { stroke: #f3e2b0; stroke-width: 7; stroke-dasharray: 1 13; opacity: .95; } .theme-chevaliers .chemin path.fait { stroke: #ffd23f; } .theme-chevaliers .ile .medaillon img { box-shadow: 0 0 0 5px #fff, 0 14px 24px -8px rgba(30,50,20,.6); } .theme-chevaliers .ile.terminee .medaillon img { box-shadow: 0 0 0 5px var(--or-500), 0 14px 24px -8px rgba(30,50,20,.6); } .theme-chevaliers .ile .ecriteau b { font-size: 1rem; } /* la monture de l'eleve (a la place du petit bateau) */ .theme-chevaliers .ile .bateau { box-shadow: 0 4px 0 var(--bois-700); } .theme-chevaliers .ile .bateau img { width: 44px; height: 38px; } /* les 4 tours (a la place des 4 rochers) */ .theme-chevaliers .ile .rochers { gap: 6px; bottom: -12px; } .theme-chevaliers .ile .rocher { width: 18px; height: 24px; border-radius: 0; clip-path: polygon(0 0, 25% 0, 25% 18%, 40% 18%, 40% 0, 60% 0, 60% 18%, 75% 18%, 75% 0, 100% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, transparent 58%, #4a4058 58% 82%, transparent 82%) center / 6px 100% no-repeat, #b9b3c4; box-shadow: inset -3px 0 0 rgba(0,0,0,.18); } .theme-chevaliers .ile .rocher.encours { background: #fff; animation: rebond-rocher 1.6s ease-in-out infinite; } .theme-chevaliers .ile .rocher.fait { background: var(--or-500); box-shadow: inset -3px 0 0 var(--or-700); } .theme-chevaliers .ile .rocher.fait::after { padding-top: 4px; } /* boss, chariot perdu, message du roi */ .theme-chevaliers .boss-ile { background: rgba(42,31,58,.62); } .theme-chevaliers .boss-ile.objectifs { background: rgba(42,31,58,.82); } .theme-chevaliers .boss-ile.revanche { background: rgba(122,31,47,.85); } .theme-chevaliers .epave-ile span { background: var(--bois-700); box-shadow: 0 2px 0 var(--bois-900); } /* choix de l'avatar */ .theme-chevaliers .choix-avatar img { background: #fff; } /* fonds de l'avatar (boutique chevaliers) */ .fond-prairie .rond, .avatar.fond-prairie { background: radial-gradient(circle at 30% 70%, #ff8fab 0 3%, transparent 4%), radial-gradient(circle at 70% 80%, #ffd23f 0 3%, transparent 4%), linear-gradient(180deg, #b9e2f7 0 45%, #8fd16a 45%); } .fond-trone .rond, .avatar.fond-trone { background: linear-gradient(90deg, transparent 40%, #c03a3a 40% 60%, transparent 60%), linear-gradient(180deg, #e8c26a, #b8862a); } .fond-tournoi .rond, .avatar.fond-tournoi { background: repeating-conic-gradient(from 0deg, #c03a3a 0 30deg, #ffd23f 30deg 60deg, #3a5aa8 60deg 90deg); } .fond-feux .rond, .avatar.fond-feux { background: radial-gradient(circle at 30% 30%, #ffd23f 0 3%, transparent 12%), radial-gradient(circle at 72% 26%, #ff6b9a 0 3%, transparent 12%), radial-gradient(circle at 55% 62%, #7fe3f5 0 3%, transparent 12%), linear-gradient(180deg, #1d2a5a, #3b4f8f); } /* boutique : le marche du royaume */ .theme-chevaliers .cabine .mer-mini { background: linear-gradient(180deg, #b9e2f7 0 50%, #8fd16a 50%); box-shadow: inset 0 0 0 3px rgba(255,255,255,.6); } .theme-chevaliers .cabine .mer-mini img { animation: none; } .theme-chevaliers .entete-boutique img { animation: none; } .theme-chevaliers .rayon { background: rgba(42,31,58,.55); } .theme-chevaliers .rayon:hover { background: rgba(42,31,58,.75); } .theme-chevaliers .article.rayon-navire .vitrine { background: linear-gradient(180deg, #d9f0fb 0 58%, #8fd16a 58%, #6db84c); } .theme-chevaliers .sous-rayon.actif { color: var(--bois-700); } .theme-chevaliers .rayon.actif { background: var(--parchemin); color: var(--bois-700); box-shadow: 0 4px 0 var(--parchemin-3); } /* --- Lot 037 (15/10 apres-midi) : titres plus marques, en Cinzel Decorative grasse --- */ .theme-chevaliers .bloc-progression h1, .theme-chevaliers .modale h2, .theme-chevaliers .banniere-fin h2, .theme-chevaliers .victoire h1, .theme-chevaliers .cabine h2, .theme-chevaliers .entete-boutique h1, .theme-chevaliers .salle-jeux h2, .theme-chevaliers .titre-pirate, .theme-chevaliers .enseigne-boutique b, .theme-chevaliers .barre-eleve .logo { font-weight: 900; letter-spacing: .3px; } .theme-chevaliers .bloc-progression h1 { font-size: 2.35rem; line-height: 1.05; color: #8f1d1d; text-shadow: 0 2px 0 #f2c94c, 0 3px 6px rgba(80,30,10,.25); } .theme-chevaliers .entete-boutique h1, .theme-chevaliers .cabine h2, .theme-chevaliers .modale h2, .theme-chevaliers .banniere-fin h2 { color: #8f1d1d; text-shadow: 0 2px 0 #f2c94c; } .theme-chevaliers .barre-eleve .logo { font-size: 1.6rem; text-shadow: 0 2px 0 rgba(0,0,0,.45); } .theme-chevaliers .enseigne-boutique b { font-size: 1.25rem; text-shadow: 0 2px 0 rgba(0,0,0,.4); } @media (max-width: 700px) { .theme-chevaliers .bloc-progression h1 { font-size: 1.8rem; } } /* ===================================================================== Lot 037 (15/10 apres-midi) : COULEURS V2 « ENLUMINURE » (par defaut) Couleurs heraldiques : gueules #b3261e, azur #1f4e8c, or #e9b824, sinople #2f6b3a. Fond = tapisserie bleu roi semee de fleurs de lys, bandeaux = velours rouge galonne d'or, carte = vieux parchemin avec collines et arbres a l'encre. (Maquette : les couleurs v1 restent avec body.ce1-v1 ; en PROD, c'est toujours la v2.) ===================================================================== */ .theme-chevaliers:not(.ce1-v1) { --ocean-950: #0f1d3d; --ocean-900: #15295a; --ocean-800: #1f3d73; --ocean-700: #1f4e8c; --ocean-500: #3a6bb5; --ocean-300: #9db8e3; --ocean-100: #e2eaf7; --bois-900: #3a1410; --bois-700: #8f1d1d; --bois-500: #b3261e; --bois-300: #d9776c; --corail: #c8321f; } .theme-chevaliers.ocean:not(.ce1-v1) { background: radial-gradient(1000px 500px at 50% -10%, rgba(255,215,120,.18), transparent 60%), linear-gradient(180deg, #24467f 0%, #1a3566 55%, #132a55 100%); background-attachment: fixed; } .theme-chevaliers.ocean:not(.ce1-v1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%23e9b824' fill-opacity='.16'%3E%3Cpath d='M18 8 C14 14 14 20 18 25 C22 20 22 14 18 8Z M10 18 C8 23 11 27 16 26 C14 23 13 21 10 18Z M26 18 C28 23 25 27 20 26 C22 23 23 21 26 18Z M12 27 h12 v2.4 h-12z M17 29 h2 v5 h-2z'/%3E%3Cpath transform='translate(36 36)' d='M18 8 C14 14 14 20 18 25 C22 20 22 14 18 8Z M10 18 C8 23 11 27 16 26 C14 23 13 21 10 18Z M26 18 C28 23 25 27 20 26 C22 23 23 21 26 18Z M12 27 h12 v2.4 h-12z M17 29 h2 v5 h-2z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 72px 72px; animation: none; } /* bandeaux : velours rouge galonne d'or (barre du haut, ecriteaux des chateaux, enseigne du marche) */ .theme-chevaliers:not(.ce1-v1) .planche { background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 40%), repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 6px), linear-gradient(180deg, #ad3230, #7d1e22); color: #fff7e0; box-shadow: inset 0 0 0 2px #e9b824, inset 0 0 0 4px rgba(90,20,20,.6), 0 6px 16px -6px rgba(10,15,40,.6); } .theme-chevaliers:not(.ce1-v1) .barre-eleve.planche { box-shadow: inset 0 -3px 0 #e9b824, inset 0 -5px 0 rgba(90,20,20,.6), 0 6px 18px -6px rgba(0,0,0,.5); } .theme-chevaliers:not(.ce1-v1) .compteur, .theme-chevaliers:not(.ce1-v1) .barre-eleve .logo i { color: #fff7e0; } .theme-chevaliers:not(.ce1-v1) .ile .ecriteau { border-radius: 4px; } .theme-chevaliers:not(.ce1-v1) .ile .ecriteau b { text-shadow: 0 1px 0 rgba(0,0,0,.4); } .theme-chevaliers:not(.ce1-v1) .parchemin.clous::before, .theme-chevaliers:not(.ce1-v1) .parchemin.clous::after { background: radial-gradient(circle at 35% 35%, #fff2b0, #b8860b); } .theme-chevaliers:not(.ce1-v1) .voile { background: rgba(15,29,61,.6); } .theme-chevaliers:not(.ce1-v1) .bloc-mission h2 { color: #8f1d1d; } .theme-chevaliers:not(.ce1-v1) .enseigne-boutique .etal { background: #f1dfb4; } /* la carte : un vieux parchemin, collines et arbres dessines a l'encre */ .theme-chevaliers:not(.ce1-v1) .mer-carte { background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(120,72,20,.32) 100%), radial-gradient(circle at 18% 22%, rgba(255,250,230,.55), transparent 35%), radial-gradient(circle at 82% 78%, rgba(200,150,70,.22), transparent 40%), linear-gradient(160deg, #f6e7c1, #ecd59f 55%, #e2c58a); box-shadow: inset 0 0 0 3px #b8860b, inset 0 0 0 7px #f6e7c1, inset 0 0 0 9px #8f1d1d, inset 0 0 70px rgba(120,72,20,.35), var(--ombre); } .theme-chevaliers:not(.ce1-v1) .mer-carte::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Cg fill='none' stroke='%237a4a22' stroke-opacity='.28' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 40 q10 -14 20 0 q8 -10 16 0'/%3E%3Cpath d='M98 100 q10 -14 20 0'/%3E%3Cpath d='M120 30 l5 -10 l5 10 M127 32 l5 -10 l5 10'/%3E%3Cpath d='M40 96 l5 -10 l5 10'/%3E%3Cpath d='M70 60 q4 -3 8 0 q4 -3 8 0'/%3E%3C/g%3E%3Cg fill='%232f6b3a' fill-opacity='.22'%3E%3Ccircle cx='125' cy='19' r='4'/%3E%3Ccircle cx='132' cy='21' r='4'/%3E%3Ccircle cx='45' cy='85' r='4'/%3E%3C/g%3E%3C/svg%3E"); background-size: 160px 120px; } .theme-chevaliers:not(.ce1-v1) .chemin path { stroke: #8a5a2b; stroke-width: 6; stroke-dasharray: 2 12; opacity: .85; } .theme-chevaliers:not(.ce1-v1) .chemin path.fait { stroke: #c8321f; opacity: .9; } .theme-chevaliers:not(.ce1-v1) .ile .medaillon img { box-shadow: 0 0 0 5px #fff7e0, 0 0 0 7px #8a5a2b, 0 14px 24px -8px rgba(90,50,10,.55); } .theme-chevaliers:not(.ce1-v1) .ile.terminee .medaillon img { box-shadow: 0 0 0 5px var(--or-500), 0 0 0 7px #8a5a2b, 0 14px 24px -8px rgba(90,50,10,.55); } .theme-chevaliers:not(.ce1-v1) .ile .bateau { box-shadow: 0 4px 0 #7d1e22; } /* les tours : pierre grise, porte bleu nuit */ .theme-chevaliers:not(.ce1-v1) .ile .rocher { background: linear-gradient(180deg, transparent 58%, #15295a 58% 82%, transparent 82%) center / 6px 100% no-repeat, #a9a3b4; } .theme-chevaliers:not(.ce1-v1) .ile .rocher.encours { background: #fff7e0; } .theme-chevaliers:not(.ce1-v1) .ile .rocher.fait { background: var(--or-500); } /* boss : bulles bleu nuit bordees d'or, revanche en rouge */ .theme-chevaliers:not(.ce1-v1) .boss-ile { background: rgba(21,41,90,.88); box-shadow: inset 0 0 0 1.5px rgba(233,184,36,.7), 0 3px 0 rgba(10,20,50,.4); } .theme-chevaliers:not(.ce1-v1) .boss-ile.objectifs { background: rgba(15,29,61,.95); } .theme-chevaliers:not(.ce1-v1) .boss-ile.revanche { background: rgba(143,29,29,.92); } .theme-chevaliers:not(.ce1-v1) .epave-ile span { background: #8f1d1d; box-shadow: 0 2px 0 #3a1410; } /* boutique */ .theme-chevaliers:not(.ce1-v1) .cabine .mer-mini { background: linear-gradient(180deg, #f6e7c1 0 55%, #e2c58a 55%); box-shadow: inset 0 0 0 3px #b8860b; } .theme-chevaliers:not(.ce1-v1) .rayon { background: rgba(15,29,61,.55); } .theme-chevaliers:not(.ce1-v1) .rayon:hover { background: rgba(15,29,61,.8); } .theme-chevaliers:not(.ce1-v1) .rayon.actif { background: var(--parchemin); color: #8f1d1d; } .theme-chevaliers:not(.ce1-v1) .sous-rayon.actif { color: #8f1d1d; } .theme-chevaliers:not(.ce1-v1) .article.rayon-navire .vitrine { background: linear-gradient(180deg, #fbf1d6 0 60%, #ecd59f 60%, #e2c58a); } /* lot 037 (15/10 soir) : le defi du jour = le message du roi (parchemin scelle) ; il ne se couche pas quand il est vide */ .theme-chevaliers .bouteille img { width: 76px; height: 76px; } .theme-chevaliers .bouteille.vide img { transform: none; } .theme-chevaliers .deco-chevaliers { width: 78px; opacity: .95; } /* ===================================================================== Lot 037 (PROD) : THEME CHEVALIERS sur les pages d'exercice, du boss, du message du roi (defi du jour), du chariot perdu et de la victoire ===================================================================== */ .theme-chevaliers .corde .navire { color: #8f1d1d; filter: drop-shadow(0 2px 0 rgba(233,184,36,.9)); } .theme-chevaliers .compagnon img, .theme-chevaliers .bandeau-reponse img { object-fit: contain; } .theme-chevaliers .panneau-serie img, .theme-chevaliers .boss-grand, .theme-chevaliers .boss-img { object-fit: contain; } .theme-chevaliers .panneau-boss .boss-img { filter: drop-shadow(0 6px 10px rgba(58,20,16,.45)); } .theme-chevaliers .navire-coeurs .fa-heart { color: #c8321f; } .theme-chevaliers .navire-coeurs .fa-heart.perdu { color: rgba(255,255,255,.3); } .theme-chevaliers .panneau-victoire .perroquet { object-fit: contain; } .theme-chevaliers .epave-ile img { width: 66px; height: 56px; object-fit: contain; } .theme-chevaliers .choix-avatar img { object-fit: cover; } /* ===================================================================== Lot 044 : THEME JUNGLE (CE2) - body.theme-jungle (copie de la section « Lot 040 » de la maquette) « L'Expedition dans la jungle » : foret profonde, panneaux de bambou, carte = clairiere avec un sentier de terre, police Lilita One. ile -> temple perdu, rocher -> totem (4 totems sous chaque temple), navire -> vehicule d'expedition, doublons -> emeraudes. Couleurs : vert foret #123d2a / #1f5c38, feuillage #3f8f3a / #7cc04a, bambou #a8c64e / #6f9a2e, terre #8a5a2b / #d8b46a, or #ffd23f, orange #f07a2a. ===================================================================== */ .deco-jungle { display: none; } .theme-jungle { --ocean-950: #0c2a1d; --ocean-900: #123d2a; --ocean-800: #1f5c38; --ocean-700: #2f7a45; --ocean-500: #47a05a; --ocean-300: #a8d89a; --ocean-100: #e4f4dc; --bois-900: #3a2410; --bois-700: #6e4318; --bois-500: #8a5a2b; --bois-300: #d8b46a; --corail: #f07a2a; --police-titre: "Lilita One", "Fredoka", Arial, sans-serif; } /* fond : la foret profonde, semee de feuilles */ .theme-jungle.ocean { background: radial-gradient(900px 420px at 50% -8%, rgba(255,236,150,.22), transparent 60%), linear-gradient(180deg, #1f5c38 0%, #164a2e 50%, #0f3a24 100%); background-attachment: fixed; } .theme-jungle.ocean::before { /* lot 040 (21 h 30) : grandes feuilles de palmier et de bananier */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='230'%3E%3Cpath d='M6.0 24.0 L16.3 27.0 L26.6 30.4 L36.7 34.2 L46.8 38.3 L56.7 42.9 L66.5 47.9 L76.2 53.3 L85.8 59.1 L95.3 65.3 L104.7 71.9 L113.9 78.9 L123.1 86.3 L132.2 94.0' fill='none' stroke='%238fd05a' stroke-opacity='.17' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M16.3 27.0 Q25.5 26.6 31.9 20.2 Q22.8 20.6 16.3 27.0Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M16.3 27.0 Q15.9 39.5 21.9 50.5 Q22.4 38.0 16.3 27.0Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M26.6 30.4 Q42.6 30.4 54.5 19.7 Q38.5 19.7 26.6 30.4Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M26.6 30.4 Q25.2 52.1 35.1 71.6 Q36.5 49.8 26.6 30.4Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M36.7 34.2 Q58.7 35.0 75.7 21.0 Q53.7 20.2 36.7 34.2Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M36.7 34.2 Q33.9 63.8 46.6 90.7 Q49.4 61.1 36.7 34.2Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M46.8 38.3 Q73.3 40.4 94.6 24.4 Q68.0 22.3 46.8 38.3Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M46.8 38.3 Q42.3 73.9 56.5 106.7 Q61.0 71.2 46.8 38.3Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M56.7 42.9 Q86.1 46.3 110.6 29.5 Q81.1 26.1 56.7 42.9Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M56.7 42.9 Q50.6 82.0 65.2 118.7 Q71.3 79.7 56.7 42.9Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M66.5 47.9 Q96.9 52.5 122.9 36.1 Q92.5 31.6 66.5 47.9Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M66.5 47.9 Q59.1 87.9 73.0 126.1 Q80.4 86.1 66.5 47.9Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M76.2 53.3 Q105.5 58.7 131.4 43.9 Q102.1 38.5 76.2 53.3Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M76.2 53.3 Q68.0 91.5 80.3 128.6 Q88.5 90.4 76.2 53.3Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M85.8 59.1 Q112.0 64.9 135.8 52.5 Q109.6 46.7 85.8 59.1Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M85.8 59.1 Q77.5 93.0 87.6 126.5 Q95.8 92.6 85.8 59.1Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M95.3 65.3 Q116.7 70.7 136.7 61.3 Q115.3 55.8 95.3 65.3Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M95.3 65.3 Q87.8 92.8 95.2 120.3 Q102.7 92.8 95.3 65.3Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M104.7 71.9 Q119.9 76.3 134.5 70.0 Q119.2 65.6 104.7 71.9Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M104.7 71.9 Q98.8 91.3 103.6 111.0 Q109.4 91.6 104.7 71.9Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M113.9 78.9 Q122.0 81.5 130.0 78.4 Q121.9 75.8 113.9 78.9Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M113.9 78.9 Q110.5 89.1 112.8 99.7 Q116.2 89.4 113.9 78.9Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M123.1 86.3 Q125.0 86.9 127.0 86.3 Q125.0 85.6 123.1 86.3Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M123.1 86.3 Q122.2 88.7 122.7 91.2 Q123.6 88.8 123.1 86.3Z' fill='%238fd05a' fill-opacity='.17'/%3E%3Cpath d='M250.0 150.0 L241.7 146.8 L233.6 143.3 L225.6 139.5 L217.7 135.3 L209.9 130.9 L202.2 126.1 L194.7 121.0 L187.2 115.6 L179.9 109.8 L172.7 103.8 L165.6 97.4 L158.6 90.7 L151.8 83.7' fill='none' stroke='%238fd05a' stroke-opacity='.14' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M241.7 146.8 Q232.7 151.2 227.5 159.8 Q236.6 155.4 241.7 146.8Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M241.7 146.8 Q242.8 140.0 238.4 134.6 Q237.3 141.5 241.7 146.8Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M233.6 143.3 Q218.1 150.2 208.8 164.5 Q224.4 157.6 233.6 143.3Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M233.6 143.3 Q236.0 131.8 228.9 122.3 Q226.5 133.9 233.6 143.3Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M225.6 139.5 Q204.4 148.0 191.3 166.8 Q212.5 158.3 225.6 139.5Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M225.6 139.5 Q229.6 124.1 220.7 110.9 Q216.7 126.3 225.6 139.5Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M217.7 135.3 Q192.1 144.7 175.9 166.6 Q201.5 157.2 217.7 135.3Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M217.7 135.3 Q223.4 117.2 213.5 100.9 Q207.8 119.0 217.7 135.3Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M209.9 130.9 Q181.5 140.1 163.1 163.5 Q191.4 154.3 209.9 130.9Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M209.9 130.9 Q217.2 111.2 207.2 92.8 Q199.9 112.4 209.9 130.9Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M202.2 126.1 Q173.0 134.5 153.4 157.9 Q182.7 149.4 202.2 126.1Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M202.2 126.1 Q210.7 106.3 201.3 86.9 Q192.9 106.7 202.2 126.1Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M194.7 121.0 Q166.4 128.1 147.1 149.9 Q175.3 142.7 194.7 121.0Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M194.7 121.0 Q203.7 102.4 195.6 83.3 Q186.6 101.9 194.7 121.0Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M187.2 115.6 Q161.9 121.1 144.1 139.9 Q169.4 134.4 187.2 115.6Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M187.2 115.6 Q196.1 99.3 189.7 81.9 Q180.8 98.2 187.2 115.6Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M179.9 109.8 Q159.2 113.6 144.3 128.5 Q165.0 124.7 179.9 109.8Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M179.9 109.8 Q187.8 96.8 183.2 82.3 Q175.3 95.3 179.9 109.8Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M172.7 103.8 Q157.8 106.0 146.9 116.3 Q161.8 114.1 172.7 103.8Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M172.7 103.8 Q178.7 94.7 175.9 84.1 Q169.9 93.2 172.7 103.8Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M165.6 97.4 Q157.5 98.3 151.5 103.8 Q159.5 102.8 165.6 97.4Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M165.6 97.4 Q169.1 92.6 167.8 86.7 Q164.3 91.6 165.6 97.4Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M158.6 90.7 Q156.4 90.9 154.7 92.3 Q156.9 92.1 158.6 90.7Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cpath d='M158.6 90.7 Q159.7 89.4 159.4 87.7 Q158.3 89.0 158.6 90.7Z' fill='%238fd05a' fill-opacity='.14'/%3E%3Cg transform='translate(140.0 30.0) rotate(35)'%3E%3Cpath d='M0 0 C27.3 -24.7 87.4 -22.2 109.2 0 C87.4 22.2 27.3 24.7 0 0Z M32.8 -23.5 L38.2 -3.7 L36.6 -23.5 Z M39.3 22.7 L44.8 3.7 L43.1 22.7 Z M52.4 -23.5 L57.9 -3.7 L56.2 -23.5 Z M59.0 22.7 L64.4 3.7 L62.8 22.7 Z M72.1 -23.5 L77.5 -3.7 L75.9 -23.5 Z M78.6 22.7 L84.1 3.7 L82.4 22.7 Z' fill='%23a8dc6a' fill-opacity='.12' fill-rule='evenodd'/%3E%3Cpath d='M0 0 L109.2 0 M16.4 0 L25.1 -17.3 M16.4 0 L25.1 17.3 M27.3 0 L36.0 -17.3 M27.3 0 L36.0 17.3 M40.4 0 L49.1 -17.3 M40.4 0 L49.1 17.3 M60.1 0 L68.8 -17.3 M60.1 0 L68.8 17.3 M81.9 0 L90.6 -17.3 M81.9 0 L90.6 17.3' fill='none' stroke='%23a8dc6a' stroke-opacity='.12' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(20.0 150.0) rotate(-20)'%3E%3Cpath d='M0 0 C23.1 -20.9 73.9 -18.8 92.4 0 C73.9 18.8 23.1 20.9 0 0Z M27.7 -19.9 L32.3 -3.1 L31.0 -19.9 Z M33.3 19.2 L37.9 3.1 L36.5 19.2 Z M44.4 -19.9 L49.0 -3.1 L47.6 -19.9 Z M49.9 19.2 L54.5 3.1 L53.1 19.2 Z M61.0 -19.9 L65.6 -3.1 L64.2 -19.9 Z M66.5 19.2 L71.1 3.1 L69.8 19.2 Z' fill='%23a8dc6a' fill-opacity='.10' fill-rule='evenodd'/%3E%3Cpath d='M0 0 L92.4 0 M13.9 0 L21.3 -14.6 M13.9 0 L21.3 14.6 M23.1 0 L30.5 -14.6 M23.1 0 L30.5 14.6 M34.2 0 L41.6 -14.6 M34.2 0 L41.6 14.6 M50.8 0 L58.2 -14.6 M50.8 0 L58.2 14.6 M69.3 0 L76.7 -14.6 M69.3 0 L76.7 14.6' fill='none' stroke='%23a8dc6a' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E"); background-size: 260px 230px; animation: none; } /* panneaux de bambou (a la place du bois) */ .theme-jungle .planche { background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 45%), repeating-linear-gradient(90deg, transparent 0 58px, rgba(40,60,10,.35) 58px 61px, rgba(255,255,220,.25) 61px 62px), linear-gradient(180deg, #a8c64e, #7aa335 55%, #5f8a26); color: #fffdf0; text-shadow: 0 1px 0 rgba(30,50,10,.45); box-shadow: inset 0 -3px 0 rgba(40,60,10,.35), inset 0 2px 0 rgba(255,255,255,.25), 0 6px 18px -6px rgba(0,0,0,.5); } .theme-jungle .barre-eleve.planche { box-shadow: inset 0 -4px 0 #6e4318, 0 6px 18px -6px rgba(0,0,0,.5); } .theme-jungle .barre-eleve .logo { color: #ffe27a; font-size: 1.75rem; text-shadow: 0 2px 0 #3a2410; } .theme-jungle .barre-eleve .logo i { color: #fffdf0; } .theme-jungle .compteur { color: #fffdf0; background: rgba(30,50,10,.35); } .theme-jungle .parchemin.clous::before, .theme-jungle .parchemin.clous::after { background: radial-gradient(circle at 35% 35%, #c9e88a, #3f7a2a); } .theme-jungle .voile { background: rgba(12,42,29,.6); } /* la monnaie : une emeraude (16/10 : image ChatGPT img/boutique/emeraude.png, a la place de la pierre dessinee en CSS) */ .theme-jungle .piece { background: url("../img/boutique/emeraude.png") center / contain no-repeat; color: transparent; box-shadow: none; text-shadow: none; } /* titres : Lilita One, vert foret souligne d'or */ .theme-jungle .bloc-progression h1, .theme-jungle .entete-boutique h1, .theme-jungle .cabine h2, .theme-jungle .modale h2, .theme-jungle .banniere-fin h2, .theme-jungle .victoire h1 { color: #1f5c38; text-shadow: 0 2px 0 #f2c94c; letter-spacing: .4px; } .theme-jungle .bloc-progression h1 { font-size: 2.35rem; line-height: 1.05; } .theme-jungle .bloc-mission h2 { color: #1f5c38; } .theme-jungle .enseigne-boutique b { color: #ffe27a; font-size: 1.3rem; text-shadow: 0 2px 0 #3a2410; } .theme-jungle .enseigne-boutique .etal { background: #e4f4dc; box-shadow: 0 0 0 4px #6e4318; } @media (max-width: 700px) { .theme-jungle .bloc-progression h1 { font-size: 1.8rem; } } /* la carte : une clairiere dans la jungle, un sentier de terre entre les temples */ .theme-jungle .mer-carte { background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(10,40,20,.45) 100%), radial-gradient(circle at 18% 20%, rgba(255,255,200,.22), transparent 35%), radial-gradient(circle at 80% 80%, rgba(90,170,220,.18), transparent 38%), linear-gradient(160deg, #6fb04a, #4f9a3a 50%, #3a7f30); box-shadow: inset 0 0 0 4px #6e4318, inset 0 0 0 8px rgba(168,198,78,.6), inset 0 0 70px rgba(10,40,20,.45), var(--ombre); } .theme-jungle .mer-carte::before { /* lot 040 (21 h 30) : feuilles de palmier et de bananier sur la clairiere */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='200'%3E%3Cpath d='M4.0 30.0 L12.3 33.2 L20.4 36.7 L28.4 40.5 L36.3 44.7 L44.1 49.1 L51.8 53.9 L59.3 59.0 L66.8 64.4 L74.1 70.2 L81.3 76.2 L88.4 82.6 L95.4 89.3 L102.2 96.3' fill='none' stroke='%231f5c38' stroke-opacity='.30' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M12.3 33.2 Q20.2 33.6 26.5 28.6 Q18.5 28.2 12.3 33.2Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M12.3 33.2 Q11.1 43.9 15.6 53.7 Q16.7 43.0 12.3 33.2Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M20.4 36.7 Q34.1 37.9 45.2 29.8 Q31.5 28.6 20.4 36.7Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M20.4 36.7 Q17.9 54.9 25.1 71.9 Q27.5 53.7 20.4 36.7Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M28.4 40.5 Q47.0 42.9 62.7 32.4 Q44.0 30.1 28.4 40.5Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M28.4 40.5 Q24.4 65.1 33.3 88.4 Q37.4 63.8 28.4 40.5Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M36.3 44.7 Q58.7 48.3 78.1 36.6 Q55.7 32.9 36.3 44.7Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M36.3 44.7 Q30.6 74.0 40.5 102.2 Q46.2 72.9 36.3 44.7Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M44.1 49.1 Q68.8 54.1 90.9 41.9 Q66.2 37.0 44.1 49.1Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M44.1 49.1 Q36.8 81.3 46.8 112.7 Q54.1 80.5 44.1 49.1Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M51.8 53.9 Q77.2 59.9 100.6 48.3 Q75.2 42.3 51.8 53.9Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M51.8 53.9 Q43.3 86.7 52.7 119.3 Q61.1 86.5 51.8 53.9Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M59.3 59.0 Q83.8 65.7 106.9 55.3 Q82.5 48.6 59.3 59.0Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M59.3 59.0 Q50.3 90.3 58.4 121.9 Q67.4 90.6 59.3 59.0Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M66.8 64.4 Q88.6 71.2 109.9 62.6 Q88.0 55.9 66.8 64.4Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M66.8 64.4 Q57.9 92.2 64.3 120.7 Q73.2 92.9 66.8 64.4Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M74.1 70.2 Q92.0 76.3 109.7 69.9 Q91.9 63.8 74.1 70.2Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M74.1 70.2 Q66.2 92.7 70.8 116.2 Q78.7 93.6 74.1 70.2Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M81.3 76.2 Q94.1 81.1 107.1 76.9 Q94.3 72.1 81.3 76.2Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M81.3 76.2 Q75.2 92.2 78.1 109.1 Q84.2 93.1 81.3 76.2Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M88.4 82.6 Q95.3 85.5 102.5 83.4 Q95.6 80.6 88.4 82.6Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M88.4 82.6 Q84.9 91.2 86.2 100.5 Q89.7 91.9 88.4 82.6Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M95.4 89.3 Q97.3 90.2 99.3 89.7 Q97.4 88.8 95.4 89.3Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M95.4 89.3 Q94.3 91.7 94.6 94.3 Q95.7 91.9 95.4 89.3Z' fill='%231f5c38' fill-opacity='.30'/%3E%3Cpath d='M232.0 160.0 L225.4 156.0 L219.0 151.8 L212.7 147.3 L206.5 142.6 L200.5 137.6 L194.7 132.3 L189.0 126.8 L183.4 121.0 L178.0 115.0 L172.8 108.7 L167.7 102.2 L162.7 95.4 L157.9 88.3' fill='none' stroke='%231f5c38' stroke-opacity='.26' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M225.4 156.0 Q217.0 158.6 211.4 165.3 Q219.8 162.8 225.4 156.0Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M225.4 156.0 Q227.7 150.3 225.0 144.8 Q222.6 150.5 225.4 156.0Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M219.0 151.8 Q204.8 155.5 195.1 166.6 Q209.3 162.8 219.0 151.8Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M219.0 151.8 Q223.4 142.4 219.2 132.8 Q214.8 142.3 219.0 151.8Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M212.7 147.3 Q193.5 151.6 180.2 166.0 Q199.3 161.7 212.7 147.3Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M212.7 147.3 Q219.3 134.9 214.3 121.8 Q207.7 134.2 212.7 147.3Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M206.5 142.6 Q183.7 146.9 167.3 163.4 Q190.1 159.1 206.5 142.6Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M206.5 142.6 Q215.1 128.1 210.0 112.2 Q201.4 126.6 206.5 142.6Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M200.5 137.6 Q175.4 141.4 156.9 158.9 Q182.1 155.1 200.5 137.6Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M200.5 137.6 Q210.8 122.2 206.0 104.3 Q195.7 119.7 200.5 137.6Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M194.7 132.3 Q168.9 135.3 149.5 152.6 Q175.3 149.6 194.7 132.3Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M194.7 132.3 Q206.0 117.0 201.9 98.4 Q190.7 113.7 194.7 132.3Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M189.0 126.8 Q164.3 128.8 145.3 144.7 Q170.0 142.7 189.0 126.8Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M189.0 126.8 Q200.5 112.5 197.5 94.4 Q186.0 108.7 189.0 126.8Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M183.4 121.0 Q161.4 122.1 144.0 135.7 Q166.1 134.7 183.4 121.0Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M183.4 121.0 Q194.4 108.7 192.4 92.3 Q181.5 104.7 183.4 121.0Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M178.0 115.0 Q160.0 115.2 145.6 126.0 Q163.6 125.7 178.0 115.0Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M178.0 115.0 Q187.5 105.2 186.5 91.7 Q177.1 101.4 178.0 115.0Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M172.8 108.7 Q159.9 108.5 149.3 115.8 Q162.2 116.1 172.8 108.7Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M172.8 108.7 Q179.9 101.9 179.7 92.1 Q172.5 98.9 172.8 108.7Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M167.7 102.2 Q160.6 101.8 154.6 105.7 Q161.7 106.1 167.7 102.2Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M167.7 102.2 Q171.8 98.6 171.9 93.1 Q167.8 96.7 167.7 102.2Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M162.7 95.4 Q160.6 95.2 158.7 96.4 Q160.9 96.5 162.7 95.4Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cpath d='M162.7 95.4 Q164.0 94.3 164.1 92.7 Q162.8 93.7 162.7 95.4Z' fill='%231f5c38' fill-opacity='.26'/%3E%3Cg transform='translate(130.0 25.0) rotate(40)'%3E%3Cpath d='M0 0 C23.1 -20.9 73.9 -18.8 92.4 0 C73.9 18.8 23.1 20.9 0 0Z M27.7 -19.9 L32.3 -3.1 L31.0 -19.9 Z M33.3 19.2 L37.9 3.1 L36.5 19.2 Z M44.4 -19.9 L49.0 -3.1 L47.6 -19.9 Z M49.9 19.2 L54.5 3.1 L53.1 19.2 Z M61.0 -19.9 L65.6 -3.1 L64.2 -19.9 Z M66.5 19.2 L71.1 3.1 L69.8 19.2 Z' fill='%23235f3a' fill-opacity='.24' fill-rule='evenodd'/%3E%3Cpath d='M0 0 L92.4 0 M13.9 0 L21.3 -14.6 M13.9 0 L21.3 14.6 M23.1 0 L30.5 -14.6 M23.1 0 L30.5 14.6 M34.2 0 L41.6 -14.6 M34.2 0 L41.6 14.6 M50.8 0 L58.2 -14.6 M50.8 0 L58.2 14.6 M69.3 0 L76.7 -14.6 M69.3 0 L76.7 14.6' fill='none' stroke='%23235f3a' stroke-opacity='.24' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(20.0 130.0) rotate(-15)'%3E%3Cpath d='M0 0 C18.9 -17.1 60.5 -15.4 75.6 0 C60.5 15.4 18.9 17.1 0 0Z M22.7 -16.2 L26.5 -2.6 L25.3 -16.2 Z M27.2 15.7 L31.0 2.6 L29.9 15.7 Z M36.3 -16.2 L40.1 -2.6 L38.9 -16.2 Z M40.8 15.7 L44.6 2.6 L43.5 15.7 Z M49.9 -16.2 L53.7 -2.6 L52.5 -16.2 Z M54.4 15.7 L58.2 2.6 L57.1 15.7 Z' fill='%23235f3a' fill-opacity='.22' fill-rule='evenodd'/%3E%3Cpath d='M0 0 L75.6 0 M11.3 0 L17.4 -12.0 M11.3 0 L17.4 12.0 M18.9 0 L24.9 -12.0 M18.9 0 L24.9 12.0 M28.0 0 L34.0 -12.0 M28.0 0 L34.0 12.0 M41.6 0 L47.6 -12.0 M41.6 0 L47.6 12.0 M56.7 0 L62.7 -12.0 M56.7 0 L62.7 12.0' fill='none' stroke='%23235f3a' stroke-opacity='.22' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E"); background-size: 240px 200px; } .theme-jungle .rose-vents { display: none; } .theme-jungle .deco-jungle { display: block; position: absolute; right: 16px; bottom: 12px; width: 86px; height: 86px; object-fit: contain; opacity: .95; pointer-events: none; } .theme-jungle .chemin path { stroke: #d8b46a; stroke-width: 7; stroke-dasharray: 3 11; opacity: .95; } .theme-jungle .chemin path.fait { stroke: #ffd23f; } .theme-jungle .ile .medaillon img { box-shadow: 0 0 0 5px #e4f4dc, 0 0 0 7px #6e4318, 0 14px 24px -8px rgba(10,40,20,.6); } .theme-jungle .ile.terminee .medaillon img { box-shadow: 0 0 0 5px var(--or-500), 0 0 0 7px #6e4318, 0 14px 24px -8px rgba(10,40,20,.6); } .theme-jungle .ile .ecriteau b { font-size: 1rem; } .theme-jungle .ile .ecriteau small { color: #fffbe0; } /* 16/10 (22 h 15) : noms des temples plus lisibles : ecriteau en bambou fonce, texte creme plus gras avec un contour sombre (avant : texte blanc sur bambou clair) */ .theme-jungle .ile .ecriteau.planche, .theme-jungle .ile .ecriteau { background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 45%), repeating-linear-gradient(90deg, transparent 0 58px, rgba(0,0,0,.28) 58px 61px, rgba(255,255,220,.14) 61px 62px), linear-gradient(180deg, #4f7d24, #3b6419 55%, #2c4d12); box-shadow: inset 0 0 0 1.5px rgba(216,180,106,.75), inset 0 -3px 0 rgba(0,0,0,.3), 0 6px 14px -6px rgba(0,0,0,.6); } .theme-jungle .ile .ecriteau b { color: #fff6cf; font-size: 1.06rem; font-weight: 800; letter-spacing: .2px; text-shadow: 0 1px 0 #1c3009, 1px 0 0 #1c3009, -1px 0 0 #1c3009, 0 -1px 0 #1c3009, 0 2px 3px rgba(0,0,0,.55); } .theme-jungle .ile .ecriteau small { color: #e6f2c8; opacity: 1; font-weight: 600; text-shadow: 0 1px 1px rgba(0,0,0,.6); } /* le vehicule de l'eleve (a la place du petit bateau) */ .theme-jungle .ile .bateau { box-shadow: 0 4px 0 #6e4318; } .theme-jungle .ile .bateau img { width: 44px; height: 38px; object-fit: contain; } /* les 4 totems (a la place des 4 rochers) : petits poteaux sculptes */ .theme-jungle .ile .rochers { gap: 6px; bottom: -12px; } .theme-jungle .ile .rocher { width: 16px; height: 26px; border-radius: 7px 7px 3px 3px; background: radial-gradient(circle at 32% 22%, #2a1a0a 0 1.6px, transparent 2px), radial-gradient(circle at 68% 22%, #2a1a0a 0 1.6px, transparent 2px), linear-gradient(180deg, #c8502a 0 38%, #e9b824 38% 46%, #2f8a6a 46% 74%, #e9b824 74% 80%, #8a5a2b 80%); box-shadow: inset -3px 0 0 rgba(0,0,0,.18), 0 2px 0 rgba(0,0,0,.25); } .theme-jungle .ile .rocher.encours { background: #fffbe0; animation: rebond-rocher 1.6s ease-in-out infinite; } .theme-jungle .ile .rocher.fait { background: radial-gradient(circle at 35% 30%, #fff1b0, var(--or-500) 60%, var(--or-700)); box-shadow: inset -3px 0 0 var(--or-700); } .theme-jungle .ile .rocher.fait::after { padding-top: 5px; } /* boss, sac perdu, message du toucan */ .theme-jungle .boss-ile { background: rgba(12,42,29,.78); box-shadow: inset 0 0 0 1.5px rgba(168,198,78,.6), 0 3px 0 rgba(10,30,15,.4); } .theme-jungle .boss-ile.objectifs { background: rgba(12,42,29,.92); } .theme-jungle .boss-ile.revanche { background: rgba(200,90,30,.92); } .theme-jungle .epave-ile span { background: #6e4318; box-shadow: 0 2px 0 #3a2410; } .theme-jungle .bouteille img { width: 76px; height: 76px; object-fit: contain; } .theme-jungle .bouteille.vide img { transform: none; } /* choix de l'avatar */ .theme-jungle .choix-avatar img { background: #fff; object-fit: cover; } /* fonds de l'avatar (boutique jungle) */ .fond-cascade .rond, .avatar.fond-cascade { background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 3px, transparent 3px 12px), linear-gradient(180deg, #8fdcf0, #3aa8d0 60%, #2f7a45 60%); } .fond-feuillage .rond, .avatar.fond-feuillage { background: radial-gradient(ellipse at 20% 30%, #7cc04a 0 18%, transparent 19%), radial-gradient(ellipse at 75% 25%, #4f9a3a 0 20%, transparent 21%), radial-gradient(ellipse at 50% 80%, #3f8f3a 0 25%, transparent 26%), linear-gradient(180deg, #1f5c38, #123d2a); } .fond-temple .rond, .avatar.fond-temple { background: linear-gradient(0deg, #6e4318 0 22%, transparent 22%), radial-gradient(circle at 50% 70%, #ffe27a 0 14%, transparent 15%), linear-gradient(180deg, #f07a2a, #f2b33a 55%, #c8502a); } .fond-lucioles .rond, .avatar.fond-lucioles { background: radial-gradient(circle at 25% 30%, #f6ff8a 0 2%, transparent 7%), radial-gradient(circle at 70% 22%, #f6ff8a 0 2%, transparent 7%), radial-gradient(circle at 55% 65%, #f6ff8a 0 2%, transparent 7%), radial-gradient(circle at 20% 75%, #f6ff8a 0 2%, transparent 6%), linear-gradient(180deg, #0c2a1d, #1f4a3a); } /* boutique : le comptoir de l'expedition */ .theme-jungle .cabine .mer-mini { background: linear-gradient(180deg, #bfe6f2 0 48%, #6fb04a 48%, #3a7f30); box-shadow: inset 0 0 0 3px #6e4318; } .theme-jungle .cabine .mer-mini img { animation: none; object-fit: contain; } .theme-jungle .entete-boutique img { animation: none; object-fit: contain; } .theme-jungle .rayon { background: rgba(12,42,29,.62); } .theme-jungle .rayon:hover { background: rgba(12,42,29,.82); } .theme-jungle .rayon.actif { background: var(--parchemin); color: #1f5c38; box-shadow: 0 4px 0 var(--parchemin-3); } .theme-jungle .sous-rayon.actif { color: #1f5c38; } .theme-jungle .article .vitrine img { object-fit: contain; } .theme-jungle .article.rayon-navire .vitrine { background: linear-gradient(180deg, #d6f0fa 0 58%, #6fb04a 58%, #3a7f30); } /* ===================================================================== Lot 044 (PROD) : THEME JUNGLE sur les pages d'exercice, du boss, du message du toucan (defi du jour), du sac perdu et de la victoire ===================================================================== */ .theme-jungle .corde .navire { color: #2fd07a; filter: drop-shadow(0 2px 0 rgba(58,36,16,.8)); } .theme-jungle .compagnon img, .theme-jungle .bandeau-reponse img { object-fit: contain; } .theme-jungle .panneau-serie img, .theme-jungle .boss-grand, .theme-jungle .boss-img { object-fit: contain; } .theme-jungle .panneau-boss .boss-img { filter: drop-shadow(0 6px 10px rgba(10,40,20,.5)); } .theme-jungle .navire-coeurs .fa-heart { color: #e0452f; } .theme-jungle .navire-coeurs .fa-heart.perdu { color: rgba(255,255,255,.3); } .theme-jungle .panneau-victoire .perroquet { object-fit: contain; } .theme-jungle .epave-ile img { width: 66px; height: 56px; object-fit: contain; } .theme-jungle .choix-avatar img { object-fit: cover; } /* ===================================================================== Lot 046 : THEME FERME (CP) - body.theme-ferme (copie de la section « Lot 043 / 046 » de la maquette, couleurs « Soir d'ete » retenues le 17/10) « La Ferme de Cocotte » : un grand pre ensoleille, panneaux en planches de grange rouge, carte = la ferme vue d'en haut avec un chemin de terre, police Baloo 2 (ronde et tres lisible pour les CP). ile -> coin de la ferme, rocher -> botte de paille (3 bottes sous chaque coin), navire -> vehicule de la ferme, doublons -> oeufs de poule (blancs, pas en or). Couleurs : grange #c8321f / #9a2418, pre #7cc04a / #4f9a2e, ciel #8fd3f4, paille #f2c94c / #d9a62a, bois #7a4a22, creme #fff8e6. ===================================================================== */ .deco-ferme { display: none; } .theme-ferme { --ocean-950: #23400f; --ocean-900: #2f5a18; --ocean-800: #3f7a22; --ocean-700: #4f9a2e; --ocean-500: #6cb83f; --ocean-300: #bfe59a; --ocean-100: #eef8e2; --bois-900: #4a1a10; --bois-700: #9a2418; --bois-500: #c8321f; --bois-300: #f0b8a8; --corail: #e8552a; --police-titre: "Baloo 2", "Fredoka", Arial, sans-serif; } /* fond : le ciel bleu au-dessus d'un grand pre fleuri */ .theme-ferme.ocean { background: radial-gradient(700px 300px at 85% -6%, rgba(255,240,150,.55), transparent 60%), linear-gradient(180deg, #8fd3f4 0, #bfe6f6 150px, #8cc95a 151px, #6cb83f 45%, #4f9a2e 100%); background-attachment: fixed; } .theme-ferme.ocean::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='200'%3E%3Cellipse cx='36.8' cy='40.0' rx='4.6' ry='2.2' transform='rotate(0 36.8 40.0)' fill='%23ffffff' fill-opacity='.22'/%3E%3Cellipse cx='34.8' cy='44.8' rx='4.6' ry='2.2' transform='rotate(45 34.8 44.8)' fill='%23ffffff' fill-opacity='.22'/%3E%3Cellipse cx='30.0' cy='46.8' rx='4.6' ry='2.2' transform='rotate(90 30.0 46.8)' fill='%23ffffff' fill-opacity='.22'/%3E%3Cellipse cx='25.2' cy='44.8' rx='4.6' ry='2.2' transform='rotate(135 25.2 44.8)' fill='%23ffffff' fill-opacity='.22'/%3E%3Cellipse cx='23.2' cy='40.0' rx='4.6' ry='2.2' transform='rotate(180 23.2 40.0)' fill='%23ffffff' fill-opacity='.22'/%3E%3Cellipse cx='25.2' cy='35.2' rx='4.6' ry='2.2' transform='rotate(225 25.2 35.2)' fill='%23ffffff' fill-opacity='.22'/%3E%3Cellipse cx='30.0' cy='33.2' rx='4.6' ry='2.2' transform='rotate(270 30.0 33.2)' fill='%23ffffff' fill-opacity='.22'/%3E%3Cellipse cx='34.8' cy='35.2' rx='4.6' ry='2.2' transform='rotate(315 34.8 35.2)' fill='%23ffffff' fill-opacity='.22'/%3E%3Ccircle cx='30.0' cy='40.0' r='3.1' fill='%23ffd23f' fill-opacity='.22'/%3E%3Cellipse cx='155.6' cy='120.0' rx='3.8' ry='1.8' transform='rotate(0 155.6 120.0)' fill='%23ffffff' fill-opacity='.18'/%3E%3Cellipse cx='153.9' cy='123.9' rx='3.8' ry='1.8' transform='rotate(45 153.9 123.9)' fill='%23ffffff' fill-opacity='.18'/%3E%3Cellipse cx='150.0' cy='125.6' rx='3.8' ry='1.8' transform='rotate(90 150.0 125.6)' fill='%23ffffff' fill-opacity='.18'/%3E%3Cellipse cx='146.1' cy='123.9' rx='3.8' ry='1.8' transform='rotate(135 146.1 123.9)' fill='%23ffffff' fill-opacity='.18'/%3E%3Cellipse cx='144.4' cy='120.0' rx='3.8' ry='1.8' transform='rotate(180 144.4 120.0)' fill='%23ffffff' fill-opacity='.18'/%3E%3Cellipse cx='146.1' cy='116.1' rx='3.8' ry='1.8' transform='rotate(225 146.1 116.1)' fill='%23ffffff' fill-opacity='.18'/%3E%3Cellipse cx='150.0' cy='114.4' rx='3.8' ry='1.8' transform='rotate(270 150.0 114.4)' fill='%23ffffff' fill-opacity='.18'/%3E%3Cellipse cx='153.9' cy='116.1' rx='3.8' ry='1.8' transform='rotate(315 153.9 116.1)' fill='%23ffffff' fill-opacity='.18'/%3E%3Ccircle cx='150.0' cy='120.0' r='2.5' fill='%23ffd23f' fill-opacity='.18'/%3E%3Cellipse cx='99.3' cy='175.0' rx='2.9' ry='1.4' transform='rotate(0 99.3 175.0)' fill='%23ffe9f0' fill-opacity='.2'/%3E%3Cellipse cx='98.1' cy='178.1' rx='2.9' ry='1.4' transform='rotate(45 98.1 178.1)' fill='%23ffe9f0' fill-opacity='.2'/%3E%3Cellipse cx='95.0' cy='179.3' rx='2.9' ry='1.4' transform='rotate(90 95.0 179.3)' fill='%23ffe9f0' fill-opacity='.2'/%3E%3Cellipse cx='91.9' cy='178.1' rx='2.9' ry='1.4' transform='rotate(135 91.9 178.1)' fill='%23ffe9f0' fill-opacity='.2'/%3E%3Cellipse cx='90.7' cy='175.0' rx='2.9' ry='1.4' transform='rotate(180 90.7 175.0)' fill='%23ffe9f0' fill-opacity='.2'/%3E%3Cellipse cx='91.9' cy='171.9' rx='2.9' ry='1.4' transform='rotate(225 91.9 171.9)' fill='%23ffe9f0' fill-opacity='.2'/%3E%3Cellipse cx='95.0' cy='170.7' rx='2.9' ry='1.4' transform='rotate(270 95.0 170.7)' fill='%23ffe9f0' fill-opacity='.2'/%3E%3Cellipse cx='98.1' cy='171.9' rx='2.9' ry='1.4' transform='rotate(315 98.1 171.9)' fill='%23ffe9f0' fill-opacity='.2'/%3E%3Ccircle cx='95.0' cy='175.0' r='2.0' fill='%23ffd23f' fill-opacity='.2'/%3E%3Cpath d='M110.0 60.0 q-3 -7.2 -8 -12.0 M110.0 60.0 q0 -8.4 1 -13.8 M110.0 60.0 q3 -7.2 8 -12.0' stroke='%23d8f5a0' stroke-opacity='.22' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M200.0 30.0 q-3 -6.0 -8 -10.0 M200.0 30.0 q0 -7.0 1 -11.5 M200.0 30.0 q3 -6.0 8 -10.0' stroke='%23d8f5a0' stroke-opacity='.18' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M40.0 150.0 q-3 -6.6 -8 -11.0 M40.0 150.0 q0 -7.7 1 -12.6 M40.0 150.0 q3 -6.6 8 -11.0' stroke='%23d8f5a0' stroke-opacity='.2' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M185.0 190.0 q-3 -5.4 -8 -9.0 M185.0 190.0 q0 -6.3 1 -10.3 M185.0 190.0 q3 -5.4 8 -9.0' stroke='%23d8f5a0' stroke-opacity='.16' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 220px 200px; animation: none; } /* panneaux en planches de grange rouge, liseres blancs */ .theme-ferme .planche { background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 45%), repeating-linear-gradient(90deg, transparent 0 44px, rgba(70,10,5,.38) 44px 46px, rgba(255,200,180,.18) 46px 47px), linear-gradient(180deg, #d63b25, #c8321f 55%, #a8281a); color: #fffaf0; text-shadow: 0 1px 0 rgba(70,10,5,.5); box-shadow: inset 0 -4px 0 #fff8e6, inset 0 4px 0 rgba(255,248,230,.85), 0 6px 18px -6px rgba(30,40,10,.5); } .theme-ferme .barre-eleve.planche { box-shadow: inset 0 -5px 0 #fff8e6, inset 0 -8px 0 #7a1a10, 0 6px 18px -6px rgba(30,40,10,.5); } .theme-ferme .barre-eleve .logo { color: #ffe27a; font-size: 1.75rem; text-shadow: 0 2px 0 #4a1a10; font-weight: 800; } .theme-ferme .barre-eleve .logo i { color: #fffaf0; } .theme-ferme .compteur { color: #fffaf0; background: rgba(70,10,5,.35); } .theme-ferme .parchemin.clous::before, .theme-ferme .parchemin.clous::after { background: radial-gradient(circle at 35% 35%, #fff, #c9b48a); } .theme-ferme .voile { background: rgba(35,64,15,.55); } /* la monnaie : un oeuf de poule (image ChatGPT a venir ; en attendant, un oeuf dessine en CSS) */ .theme-ferme .piece { background: url("../img/boutique/oeuf.png") center / contain no-repeat, radial-gradient(ellipse at 38% 30%, #fff 0 18%, #fbf3e2 45%, #ead6b0 85%, #d6bc8a); color: transparent; box-shadow: 0 0 0 1.5px #b89a66, 0 2px 0 #a8864e; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform: scale(.82, .96); text-shadow: none; } /* titres : Baloo 2, rouge grange souligne de paille */ .theme-ferme .bloc-progression h1, .theme-ferme .entete-boutique h1, .theme-ferme .cabine h2, .theme-ferme .modale h2, .theme-ferme .banniere-fin h2, .theme-ferme .victoire h1 { color: #b02a1a; text-shadow: 0 2px 0 #f2c94c; font-weight: 800; letter-spacing: .2px; } .theme-ferme .bloc-progression h1 { font-size: 2.3rem; line-height: 1.05; } .theme-ferme .bloc-mission h2 { color: #b02a1a; font-weight: 800; } .theme-ferme .enseigne-boutique b { color: #ffe27a; font-size: 1.3rem; text-shadow: 0 2px 0 #4a1a10; font-weight: 800; } .theme-ferme .enseigne-boutique .etal { background: #fff8e6; box-shadow: 0 0 0 4px #7a4a22; } @media (max-width: 700px) { .theme-ferme .bloc-progression h1 { font-size: 1.8rem; } } /* la carte : la ferme vue d'en haut, des parcelles de champs et un chemin de terre entre les coins */ .theme-ferme .mer-carte { background: /* lot 046 : couleurs v1 -> fond couleur « paille » (avant : pre vert #94d062 / #7cc04a / #64ad3a) */ radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(140,95,25,.30) 100%), repeating-linear-gradient(90deg, rgba(150,100,30,.12) 0 6px, transparent 6px 14px) 0 0 / 28% 26% no-repeat, repeating-linear-gradient(0deg, rgba(255,250,220,.40) 0 5px, transparent 5px 13px) 100% 100% / 30% 28% no-repeat, repeating-linear-gradient(115deg, rgba(190,140,40,.10) 0 2px, transparent 2px 9px), repeating-linear-gradient(65deg, rgba(255,250,215,.22) 0 1px, transparent 1px 11px), radial-gradient(circle at 20% 18%, rgba(255,255,230,.45), transparent 35%), linear-gradient(160deg, #f8e7aa, #f0d68a 50%, #e4c46c); box-shadow: inset 0 0 0 4px #7a4a22, inset 0 0 0 9px #fff8e6, inset 0 0 0 11px #7a4a22, inset 0 0 60px rgba(140,95,25,.30), var(--ombre); } .theme-ferme .mer-carte::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='170'%3E%3Cpath d='M30.0 40.0 q-3 -6.6 -8 -11.0 M30.0 40.0 q0 -7.7 1 -12.6 M30.0 40.0 q3 -6.6 8 -11.0' stroke='%232f6e1f' stroke-opacity='.28' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M140.0 25.0 q-3 -5.4 -8 -9.0 M140.0 25.0 q0 -6.3 1 -10.3 M140.0 25.0 q3 -5.4 8 -9.0' stroke='%232f6e1f' stroke-opacity='.24' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M90.0 120.0 q-3 -7.2 -8 -12.0 M90.0 120.0 q0 -8.4 1 -13.8 M90.0 120.0 q3 -7.2 8 -12.0' stroke='%232f6e1f' stroke-opacity='.26' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M180.0 150.0 q-3 -5.4 -8 -9.0 M180.0 150.0 q0 -6.3 1 -10.3 M180.0 150.0 q3 -5.4 8 -9.0' stroke='%232f6e1f' stroke-opacity='.22' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='73.7' cy='70.0' rx='2.5' ry='1.2' transform='rotate(0 73.7 70.0)' fill='%23ffffff' fill-opacity='.55'/%3E%3Cellipse cx='72.6' cy='72.6' rx='2.5' ry='1.2' transform='rotate(45 72.6 72.6)' fill='%23ffffff' fill-opacity='.55'/%3E%3Cellipse cx='70.0' cy='73.7' rx='2.5' ry='1.2' transform='rotate(90 70.0 73.7)' fill='%23ffffff' fill-opacity='.55'/%3E%3Cellipse cx='67.4' cy='72.6' rx='2.5' ry='1.2' transform='rotate(135 67.4 72.6)' fill='%23ffffff' fill-opacity='.55'/%3E%3Cellipse cx='66.3' cy='70.0' rx='2.5' ry='1.2' transform='rotate(180 66.3 70.0)' fill='%23ffffff' fill-opacity='.55'/%3E%3Cellipse cx='67.4' cy='67.4' rx='2.5' ry='1.2' transform='rotate(225 67.4 67.4)' fill='%23ffffff' fill-opacity='.55'/%3E%3Cellipse cx='70.0' cy='66.3' rx='2.5' ry='1.2' transform='rotate(270 70.0 66.3)' fill='%23ffffff' fill-opacity='.55'/%3E%3Cellipse cx='72.6' cy='67.4' rx='2.5' ry='1.2' transform='rotate(315 72.6 67.4)' fill='%23ffffff' fill-opacity='.55'/%3E%3Ccircle cx='70.0' cy='70.0' r='1.7' fill='%23f2b33a' fill-opacity='.55'/%3E%3Cellipse cx='173.1' cy='95.0' rx='2.1' ry='1.0' transform='rotate(0 173.1 95.0)' fill='%23ffffff' fill-opacity='.5'/%3E%3Cellipse cx='172.2' cy='97.2' rx='2.1' ry='1.0' transform='rotate(45 172.2 97.2)' fill='%23ffffff' fill-opacity='.5'/%3E%3Cellipse cx='170.0' cy='98.1' rx='2.1' ry='1.0' transform='rotate(90 170.0 98.1)' fill='%23ffffff' fill-opacity='.5'/%3E%3Cellipse cx='167.8' cy='97.2' rx='2.1' ry='1.0' transform='rotate(135 167.8 97.2)' fill='%23ffffff' fill-opacity='.5'/%3E%3Cellipse cx='166.9' cy='95.0' rx='2.1' ry='1.0' transform='rotate(180 166.9 95.0)' fill='%23ffffff' fill-opacity='.5'/%3E%3Cellipse cx='167.8' cy='92.8' rx='2.1' ry='1.0' transform='rotate(225 167.8 92.8)' fill='%23ffffff' fill-opacity='.5'/%3E%3Cellipse cx='170.0' cy='91.9' rx='2.1' ry='1.0' transform='rotate(270 170.0 91.9)' fill='%23ffffff' fill-opacity='.5'/%3E%3Cellipse cx='172.2' cy='92.8' rx='2.1' ry='1.0' transform='rotate(315 172.2 92.8)' fill='%23ffffff' fill-opacity='.5'/%3E%3Ccircle cx='170.0' cy='95.0' r='1.4' fill='%23f2b33a' fill-opacity='.5'/%3E%3Cellipse cx='28.1' cy='140.0' rx='2.1' ry='1.0' transform='rotate(0 28.1 140.0)' fill='%23ffd6e4' fill-opacity='.55'/%3E%3Cellipse cx='27.2' cy='142.2' rx='2.1' ry='1.0' transform='rotate(45 27.2 142.2)' fill='%23ffd6e4' fill-opacity='.55'/%3E%3Cellipse cx='25.0' cy='143.1' rx='2.1' ry='1.0' transform='rotate(90 25.0 143.1)' fill='%23ffd6e4' fill-opacity='.55'/%3E%3Cellipse cx='22.8' cy='142.2' rx='2.1' ry='1.0' transform='rotate(135 22.8 142.2)' fill='%23ffd6e4' fill-opacity='.55'/%3E%3Cellipse cx='21.9' cy='140.0' rx='2.1' ry='1.0' transform='rotate(180 21.9 140.0)' fill='%23ffd6e4' fill-opacity='.55'/%3E%3Cellipse cx='22.8' cy='137.8' rx='2.1' ry='1.0' transform='rotate(225 22.8 137.8)' fill='%23ffd6e4' fill-opacity='.55'/%3E%3Cellipse cx='25.0' cy='136.9' rx='2.1' ry='1.0' transform='rotate(270 25.0 136.9)' fill='%23ffd6e4' fill-opacity='.55'/%3E%3Cellipse cx='27.2' cy='137.8' rx='2.1' ry='1.0' transform='rotate(315 27.2 137.8)' fill='%23ffd6e4' fill-opacity='.55'/%3E%3Ccircle cx='25.0' cy='140.0' r='1.4' fill='%23f2b33a' fill-opacity='.55'/%3E%3C/svg%3E"); background-size: 200px 170px; } .theme-ferme .rose-vents { display: none; } /* lot 046 : sur le fond paille (toutes les versions), touffes d'herbe -> brins de paille dores, chemin un peu plus fonce, et contour marque pour que les bottes de paille restent visibles */ .theme-ferme .mer-carte::before { filter: sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(.95); opacity: .8; } .theme-ferme .ile .rocher { outline: 1.5px solid rgba(110,65,15,.75); outline-offset: 0; } .theme-ferme .deco-ferme { display: block; position: absolute; right: 18px; bottom: 14px; width: 86px; height: 86px; object-fit: contain; opacity: .95; pointer-events: none; } .theme-ferme .chemin path { stroke: #a8743f; stroke-width: 9; stroke-dasharray: none; stroke-linecap: round; opacity: .9; } .theme-ferme .chemin path.fait { stroke: #b8452c; } /* lot 046 : rouge grange (le jaune ne se voyait plus sur la paille) */ .theme-ferme .ile .medaillon img { box-shadow: 0 0 0 5px #fff8e6, 0 0 0 7px #7a4a22, 0 14px 24px -8px rgba(40,70,15,.55); } .theme-ferme .ile.terminee .medaillon img { box-shadow: 0 0 0 5px #f2c94c, 0 0 0 7px #7a4a22, 0 14px 24px -8px rgba(40,70,15,.55); } .theme-ferme .ile .ecriteau { font-family: "Baloo 2", "Fredoka", Arial, sans-serif; } .theme-ferme .ile .ecriteau b { font-size: 1rem; font-weight: 800; } .theme-ferme .ile .ecriteau small { color: #fffaf0; } /* le vehicule de l'eleve (a la place du petit bateau) */ .theme-ferme .ile .bateau { box-shadow: 0 4px 0 #7a4a22; } .theme-ferme .ile .bateau img { width: 44px; height: 38px; object-fit: contain; } /* les 3 bottes de paille (a la place des 4 rochers) : petits ballots rectangulaires, deux ficelles */ .theme-ferme .ile .rochers { gap: 6px; bottom: -12px; } .theme-ferme .ile .rocher { width: 26px; height: 18px; border-radius: 5px; background: linear-gradient(90deg, transparent 0 24%, #a0521f 24% 32%, transparent 32% 68%, #a0521f 68% 76%, transparent 76%), repeating-linear-gradient(0deg, rgba(160,110,20,.35) 0 1px, transparent 1px 4px), linear-gradient(180deg, #f6dc7a, #e7bf45 60%, #c99a2a); box-shadow: inset -2px -2px 0 rgba(120,80,10,.3), 0 2px 0 rgba(60,40,10,.35); } .theme-ferme .ile .rocher.encours { background: linear-gradient(90deg, transparent 0 24%, #a0521f 24% 32%, transparent 32% 68%, #a0521f 68% 76%, transparent 76%), linear-gradient(180deg, #fffbe8, #fff1b8); animation: rebond-rocher 1.6s ease-in-out infinite; } .theme-ferme .ile .rocher.fait { background: linear-gradient(90deg, transparent 0 24%, #a0521f 24% 32%, transparent 32% 68%, #a0521f 68% 76%, transparent 76%), linear-gradient(180deg, #ffe680, #f2b01e 70%, #c98a10); box-shadow: inset -2px -2px 0 rgba(150,90,0,.35), 0 0 8px rgba(255,215,90,.8); } .theme-ferme .ile .rocher.fait::after { color: #4a1a10; text-shadow: 0 0 2px #fff8e6; } /* boss, panier renverse, lettre de Cocotte */ .theme-ferme .boss-ile { background: rgba(122,26,16,.82); box-shadow: inset 0 0 0 1.5px rgba(255,248,230,.6), 0 3px 0 rgba(60,10,5,.4); } .theme-ferme .boss-ile.objectifs { background: rgba(122,26,16,.93); } .theme-ferme .boss-ile.revanche { background: rgba(232,120,30,.94); } .theme-ferme .epave-ile span { background: #7a4a22; box-shadow: 0 2px 0 #4a1a10; } .theme-ferme .bouteille img { width: 76px; height: 76px; object-fit: contain; } .theme-ferme .bouteille.vide img { transform: none; } /* choix de l'avatar */ .theme-ferme .choix-avatar img { background: #fff; object-fit: cover; } /* fonds de l'avatar (boutique ferme) */ .fond-pre .rond, .avatar.fond-pre { background: radial-gradient(circle at 22% 72%, #fff 0 4%, transparent 5%), radial-gradient(circle at 74% 80%, #ffd6e4 0 4%, transparent 5%), radial-gradient(circle at 50% 88%, #fff 0 3%, transparent 4%), linear-gradient(180deg, #8fd3f4 0 52%, #7cc04a 52%, #4f9a2e); } .fond-tournesols .rond, .avatar.fond-tournesols { background: radial-gradient(circle at 25% 62%, #6b3a12 0 5%, #ffc61a 6% 13%, transparent 14%), radial-gradient(circle at 72% 58%, #6b3a12 0 5%, #ffc61a 6% 13%, transparent 14%), radial-gradient(circle at 50% 80%, #6b3a12 0 4%, #ffd23f 5% 11%, transparent 12%), linear-gradient(180deg, #8fd3f4 0 45%, #5aa83a 45%); } .fond-soir-ferme .rond, .avatar.fond-soir-ferme { background: linear-gradient(0deg, #4a1a10 0 20%, transparent 20%), radial-gradient(circle at 50% 72%, #fff1a0 0 14%, transparent 15%), linear-gradient(180deg, #f6a04a, #f07a6a 55%, #b84a6a); } .fond-nuit-grange .rond, .avatar.fond-nuit-grange { background: radial-gradient(circle at 72% 24%, #fff8d0 0 9%, transparent 10%), radial-gradient(circle at 25% 30%, #fff 0 1.5%, transparent 3%), radial-gradient(circle at 45% 15%, #fff 0 1.5%, transparent 3%), radial-gradient(circle at 15% 55%, #fff 0 1.2%, transparent 2.5%), linear-gradient(0deg, #2a4a1a 0 18%, transparent 18%), linear-gradient(180deg, #1a2350, #2f3f7a); } /* boutique : la boutique de Cocotte */ .theme-ferme .cabine .mer-mini { background: linear-gradient(180deg, #bfe6f6 0 48%, #7cc04a 48%, #4f9a2e); box-shadow: inset 0 0 0 3px #7a4a22; } .theme-ferme .cabine .mer-mini img { animation: none; object-fit: contain; } .theme-ferme .entete-boutique img { animation: none; object-fit: contain; } .theme-ferme .rayon { background: rgba(122,26,16,.62); } .theme-ferme .rayon:hover { background: rgba(122,26,16,.82); } .theme-ferme .rayon.actif { background: var(--parchemin); color: #b02a1a; box-shadow: 0 4px 0 var(--parchemin-3); } .theme-ferme .sous-rayon.actif { color: #b02a1a; } .theme-ferme .article .vitrine img { object-fit: contain; } .theme-ferme .article.rayon-navire .vitrine { background: linear-gradient(180deg, #d6f0fa 0 58%, #7cc04a 58%, #4f9a2e); } /* --------------------------------------------------------------------- Lot 046 (17/10) : COULEURS « SOIR D'ETE » retenues pour le CP (ancienne v4). Elles s'appliquent par-dessus les couleurs de base ci-dessus (la grange rouge) ; le centre de la carte garde son fond paille. Plus de jeux de couleurs a comparer. --------------------------------------------------------------------- */ /* « Soir d'ete » : ciel abricot et rose du coucher de soleil, planches bois chocolat, titres framboise, pre vert olive dore */ .theme-ferme { --ocean-950: #2f3a0e; --ocean-900: #414f14; --ocean-800: #56661c; --ocean-700: #6e8024; --ocean-500: #8f9e34; --ocean-300: #dbe2a4; --ocean-100: #f6f8e4; --bois-900: #2e1608; --bois-700: #5a3218; --bois-500: #7a4626; --bois-300: #d8b89a; --corail: #e8456a; } .theme-ferme.ocean { background: radial-gradient(700px 300px at 85% -6%, rgba(255,230,140,.7), transparent 60%), linear-gradient(180deg, #f7a98a 0, #ffd8a0 150px, #b4bd52 151px, #8f9e34 45%, #6e8024 100%); background-attachment: fixed; } .theme-ferme .planche { background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 45%), repeating-linear-gradient(90deg, transparent 0 44px, rgba(30,12,4,.42) 44px 46px, rgba(255,220,190,.16) 46px 47px), linear-gradient(180deg, #8a5430, #7a4626 55%, #5f3419); text-shadow: 0 1px 0 rgba(30,12,4,.55); } .theme-ferme .barre-eleve.planche { box-shadow: inset 0 -5px 0 #fff8e6, inset 0 -8px 0 #2e1608, 0 6px 18px -6px rgba(40,20,10,.5); } .theme-ferme .barre-eleve .logo, .theme-ferme .enseigne-boutique b { text-shadow: 0 2px 0 #2e1608; } .theme-ferme .compteur { background: rgba(30,12,4,.35); } .theme-ferme .voile { background: rgba(60,20,30,.5); } .theme-ferme .bloc-progression h1, .theme-ferme .entete-boutique h1, .theme-ferme .cabine h2, .theme-ferme .modale h2, .theme-ferme .banniere-fin h2, .theme-ferme .victoire h1, .theme-ferme .bloc-mission h2 { color: #c2264f; text-shadow: 0 2px 0 #ffd8a0; } .theme-ferme .enseigne-boutique .etal { box-shadow: 0 0 0 4px #5f3419; } .theme-ferme .mer-carte { box-shadow: inset 0 0 0 4px #5f3419, inset 0 0 0 9px #fff8e6, inset 0 0 0 11px #5f3419, inset 0 0 60px rgba(140,95,25,.30), var(--ombre); } .theme-ferme .chemin path { stroke: #8a5430; } .theme-ferme .chemin path.fait { stroke: #c2264f; } .theme-ferme .ile .medaillon img { box-shadow: 0 0 0 5px #fff8e6, 0 0 0 7px #5f3419, 0 14px 24px -8px rgba(60,30,15,.5); } .theme-ferme .ile.terminee .medaillon img { box-shadow: 0 0 0 5px #f2c94c, 0 0 0 7px #5f3419, 0 14px 24px -8px rgba(60,30,15,.5); } .theme-ferme .ile .bateau { box-shadow: 0 4px 0 #5f3419; } .theme-ferme .boss-ile, .theme-ferme .boss-ile.objectifs { background: rgba(150,30,65,.88); } .theme-ferme .epave-ile span { background: #5f3419; } .theme-ferme .rayon { background: rgba(95,52,25,.7); } .theme-ferme .rayon:hover { background: rgba(95,52,25,.88); } .theme-ferme .rayon.actif, .theme-ferme .sous-rayon.actif { color: #c2264f; } .theme-ferme .rayon.actif { background: var(--parchemin); } .theme-ferme .cabine .mer-mini, .theme-ferme .article.rayon-navire .vitrine { background: linear-gradient(180deg, #ffd8a0 0 52%, #a6b148 52%, #6e8024); } .theme-ferme .cabine .mer-mini { box-shadow: inset 0 0 0 3px #5f3419; } /* ===================================================================== Lot 046 (PROD) : THEME FERME sur les pages d'exercice, du boss, de la lettre de Cocotte (defi du jour), du panier renverse et de la victoire ===================================================================== */ .theme-ferme .corde .navire { color: #c2264f; filter: drop-shadow(0 2px 0 rgba(95,52,25,.8)); } .theme-ferme .compagnon img, .theme-ferme .bandeau-reponse img { object-fit: contain; } .theme-ferme .panneau-serie img, .theme-ferme .boss-grand, .theme-ferme .boss-img { object-fit: contain; } .theme-ferme .panneau-boss .boss-img { filter: drop-shadow(0 6px 10px rgba(60,30,15,.45)); } .theme-ferme .navire-coeurs .fa-heart { color: #c2264f; } .theme-ferme .navire-coeurs .fa-heart.perdu { color: rgba(255,255,255,.3); } .theme-ferme .panneau-victoire .perroquet { object-fit: contain; } .theme-ferme .epave-ile img { width: 66px; height: 56px; object-fit: contain; } .theme-ferme .choix-avatar img { object-fit: cover; } /* ---------- Lot 033 : avatar des enseignants et admins (Mon compte), filtre des iles ---------- */ .choix-avatars-adultes { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } .choix-avatars-adultes .choix-avatar { text-align: center; line-height: 1.2; } .choix-avatars-adultes .choix-avatar input { position: absolute; opacity: 0; pointer-events: none; } .choix-avatars-adultes .choix-avatar img { width: 72px; height: 72px; } .choix-avatars-adultes .choix-avatar:focus-within { outline: 3px solid var(--ocean-300); } .choix-avatars-adultes .choix-avatar.actif { outline: 3px solid var(--or-500); } .segments a small { font-weight: 500; color: var(--encre-3); } /* ---------- Lot 038 : avatar de l'eleve plus grand dans le bandeau du haut (carte, boutique, jeux) ---------- (v2, 15/10 18 h) taille selon l'ecran : 80 px sur ordinateur, 68 px sur tablette, 58 px sur smartphone. Le medaillon deborde un peu du bandeau (marges negatives) : le bandeau garde sa hauteur. */ .barre-eleve .capitaine .avatar { width: 80px; height: 80px; margin: -6px 0 -26px; border-width: 4px; box-shadow: 0 3px 0 var(--or-700), 0 8px 18px -6px rgba(0,0,0,.5); transition: transform .15s; position: relative; z-index: 2; } .barre-eleve .capitaine .avatar:hover { transform: scale(1.06); } .barre-eleve .capitaine .avatar[class*="fond-"] { padding: 4px; } @media (max-width: 1024px) { .barre-eleve .capitaine .avatar { width: 68px; height: 68px; margin: -6px 0 -18px; } } @media (max-width: 640px) { .barre-eleve .capitaine .avatar { width: 58px; height: 58px; margin: -4px 0 -14px; border-width: 3px; } .barre-eleve .capitaine .avatar[class*="fond-"] { padding: 3px; } } /* le bandeau tient sur une ligne sur tablette et smartphone (avant, sur smartphone, le bouton Quitter sortait de l'ecran) */ @media (max-width: 1024px) { .barre-eleve .btn .cache-mobile { display: none; } .barre-eleve .btn-s { padding: .5em .75em; } .capitaine .sous { white-space: nowrap; } } @media (max-width: 640px) { .barre-eleve { gap: 6px; padding: 8px 8px; } .barre-eleve .logo i { font-size: 1.05rem; } .capitaine { gap: 6px; min-width: 0; flex: 0 1 auto; } .capitaine > div { min-width: 0; } .capitaine .nom { font-size: .8rem; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .capitaine .sous .titre-haut { display: none; } .barre-eleve .compteur { padding: 4px 8px 4px 4px; font-size: .85rem; gap: 4px; } .barre-eleve .btn-s { padding: .45em .6em; } } /* ===================================================================== Lot 049 : CM1 (pirates) - la boussole peinte remplace la rose des vents ===================================================================== */ .deco-pirate { display: block; position: absolute; right: 16px; bottom: 12px; width: 96px; height: 96px; object-fit: contain; opacity: .95; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); } .theme-espace .deco-pirate, .theme-chevaliers .deco-pirate, .theme-jungle .deco-pirate, .theme-ferme .deco-pirate { display: none; } @media (max-width: 640px) { .deco-pirate { width: 72px; height: 72px; right: 10px; bottom: 8px; } } /* ========================================================================= Lot 051 : page Statistiques dynamique - filtres du haut sans rechargement (#contenu-stats), perimetre affiche - tuile "Exercices les plus rates" : top 5 (echecs, reussites, %, recommencements), clic = fenetre avec tous les exercices (tri par colonne, 50 par page) ========================================================================= */ #contenu-stats { display: flex; flex-direction: column; gap: 22px; transition: opacity .2s; } #contenu-stats.chargement { opacity: .45; pointer-events: none; } .perimetre-stats { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--bord-bo); color: var(--encre-2); font-size: .85rem; font-weight: 600; margin-bottom: -8px; } .perimetre-stats i { color: var(--ocean-700); font-size: .8rem; } .tuiles-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.7fr); } @media (max-width: 1150px) { .tuiles-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tuiles-stats .kpi-rates { grid-column: 1 / -1; } } @media (max-width: 560px) { .tuiles-stats { grid-template-columns: 1fr; } } .kpi-rates { cursor: pointer; transition: box-shadow .15s, transform .15s; } .kpi-rates:hover { box-shadow: 0 12px 28px -14px rgba(16,38,61,.55); transform: translateY(-1px); } .kpi-rates:focus-visible { outline: 3px solid var(--ocean-500); outline-offset: 2px; } .mini-rates { width: 100%; border-collapse: collapse; font-size: .86rem; margin-top: 4px; } .mini-rates th { font-size: .7rem; color: var(--encre-3); font-weight: 600; text-align: right; padding: 0 5px 4px; text-transform: uppercase; letter-spacing: .5px; } .mini-rates th:first-child, .mini-rates td:first-child { text-align: left; padding-left: 0; } .mini-rates td { padding: 3px 5px; text-align: right; border-top: 1px solid #f1e9d8; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--encre-2); } .mini-rates td.ko { color: var(--erreur-fonce); font-weight: 700; } .mini-rates td.ok { color: var(--succes-fonce); font-weight: 700; } .mini-rates .mono { font-size: .78rem; padding: 1px 6px; } .kpi-rates .voir-tout { margin-top: auto; padding-top: 8px; font-size: .85rem; font-weight: 600; color: var(--ocean-700); } .kpi-rates:hover .voir-tout i { transform: translateX(3px); } .kpi-rates .voir-tout i { transition: transform .15s; } /* fenetre "Reussite par exercice" */ .modale-stats { width: min(1100px, 100%); padding: 26px 0 0; display: flex; flex-direction: column; overflow: hidden; } .modale-stats > h2, .modale-stats > .sous-titre-stats, .modale-stats > .note-stats { padding-left: 26px; padding-right: 56px; } .sous-titre-stats { margin: 4px 0 14px; color: var(--encre-3); font-size: .9rem; } .note-stats { margin: 0; padding-bottom: 18px; color: var(--encre-3); font-size: .82rem; } .modale-stats .table-bo-wrap { border-top: 1px solid var(--bord-bo); transition: opacity .15s; flex: 1 1 auto; min-height: 0; overflow: auto; } .modale-stats thead th { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--bord-bo); } .modale-stats.chargement .table-bo-wrap { opacity: .5; } #table-exercices th[data-col] { cursor: pointer; user-select: none; } #table-exercices th[data-col]:hover, #table-exercices th[data-sens] { color: var(--encre); } #table-exercices th[data-col]:focus-visible { outline: 2px solid var(--ocean-500); outline-offset: -2px; } #table-exercices td.nb { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } #table-exercices td.ko { color: var(--erreur-fonce); } #table-exercices td.ok { color: var(--succes-fonce); } .sous-ligne { display: block; color: var(--encre-3); font-size: .78rem; margin-top: 3px; } td.taux { white-space: nowrap; } td.taux b { font-variant-numeric: tabular-nums; font-size: .9rem; } .barre-taux { display: inline-block; vertical-align: middle; width: 70px; height: 8px; border-radius: 999px; background: #efe6d3; overflow: hidden; margin-right: 8px; } .barre-taux span { display: block; height: 100%; border-radius: 999px; background: var(--succes); } td.taux.moyen .barre-taux span { background: var(--or-500); } td.taux.faible .barre-taux span { background: var(--erreur); } .pagination .pages button:disabled { opacity: .4; cursor: default; } .pagination .pages .trou { align-self: center; padding: 0 4px; color: var(--encre-3); } /* ========================================================================= Lot 052 : code secret propose (un vrai mot) et verifie en direct ========================================================================= */ .champ-code .code-ligne { display: flex; gap: 8px; align-items: center; } .champ-code .code-ligne input { flex: 1; min-width: 0; letter-spacing: 1px; font-weight: 600; } .champ-code .code-ligne .btn-icone { flex: none; } .champ-code .btn-icone.tourne i { animation: de-tourne .4s ease; } @keyframes de-tourne { to { transform: rotate(360deg); } } .champ-code.code-libre input { border-color: var(--succes); } .champ-code.code-pris input, .champ-code.code-pris input:focus { border-color: var(--erreur); box-shadow: 0 0 0 3px var(--erreur-clair); background: #fff7f5; } .code-alerte { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--erreur-clair); color: var(--erreur-fonce); font-size: .85rem; font-weight: 600; line-height: 1.35; } .code-alerte i { margin-top: 2px; } /* ===== Lot 072 : paiement en ligne (Commandes, Mon abonnement) ===== */ /* les colonnes de la fiche (demande, commande) ne debordent plus l'une sur l'autre quand un tableau est large */ .grille-demande { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } @media (max-width: 1000px) { .grille-demande { grid-template-columns: minmax(0, 1fr); } } /* classes multi-niveaux (CM1 + CM2...) : pastilles cote a cote et cases a cocher des niveaux */ .niv-classe { display: inline-flex; gap: 3px; flex-wrap: wrap; vertical-align: middle; } .niv-classe .niv { min-width: 0; } .cases-niveaux { display: flex; flex-wrap: wrap; gap: 8px; } .case-niv { position: relative; cursor: pointer; } .case-niv input { position: absolute; opacity: 0; width: 1px; height: 1px; } .case-niv span { display: inline-block; min-width: 54px; text-align: center; padding: 8px 12px; border-radius: 10px; font-weight: 700; font-size: .9rem; color: var(--encre-2); background: #fff; border: 2px solid #e3d3b2; transition: .15s; } .case-niv input:checked + span { color: #fff; border-color: transparent; background: #457b9d; } .case-niv.niv-CP input:checked + span { background: #e76f51; } .case-niv.niv-CE1 input:checked + span { background: #f4a261; } .case-niv.niv-CE2 input:checked + span { background: #2a9d8f; } .case-niv.niv-CM1 input:checked + span { background: #457b9d; } .case-niv.niv-CM2 input:checked + span { background: #6a4c93; } .case-niv input:focus-visible + span { outline: 3px solid var(--ocean-500); outline-offset: 2px; } .case-niv.niv-CP, .case-niv.niv-CE1, .case-niv.niv-CE2, .case-niv.niv-CM1, .case-niv.niv-CM2 { background: none; padding: 0; color: inherit; min-width: 0; }