body.partie-en-cours .haut-page { opacity: 0; transform: translateY(14px); pointer-events: none; } .vitrine-tuile { position: relative; display: flex; flex-direction: column; gap: .5rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 5px solid var(--terre); border-radius: var(--r-l); padding: 1.6rem 1.5rem 1.4rem; box-shadow: var(--ombre-s); color: inherit; will-change: transform; transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi); } .vitrine-tuile:hover { text-decoration: none; } .vitrine .vitrine-tuile:nth-child(2) { border-top-color: var(--bleu); } .vitrine .vitrine-tuile:nth-child(3) { border-top-color: var(--ocre); } .vitrine .vitrine-tuile:nth-child(4) { border-top-color: var(--rouge); } .vitrine-embleme { width: 60px; height: 60px; border-radius: var(--r-m); display: grid; place-items: center; color: #fff; margin-bottom: .4rem; background: linear-gradient(150deg, var(--terre), #9c3f20); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .28), 0 6px 14px rgba(44, 33, 23, .18); } .vitrine .vitrine-tuile:nth-child(2) .vitrine-embleme { background: linear-gradient(150deg, var(--bleu), #084a97); } .vitrine .vitrine-tuile:nth-child(3) .vitrine-embleme { background: linear-gradient(150deg, var(--ocre), var(--terre)); } .vitrine .vitrine-tuile:nth-child(4) .vitrine-embleme { background: linear-gradient(150deg, var(--rouge), var(--rouge-fonce)); } .vitrine-titre { font-size: 1.25rem; margin: 0; color: var(--titre); } .vitrine-txt { margin: 0; color: var(--encre-doux); flex: 1; } .vitrine-pied { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; font-family: var(--police-titres); font-weight: 700; color: var(--terre-texte); } a.vitrine-tuile:hover .vitrine-pied .i { transform: translateX(4px); } .ex-profil { background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); box-shadow: var(--ombre-s); padding: 1.4rem 1.3rem 1.2rem; margin: 0 auto 1.8rem; max-width: 920px; } .ex-profil[hidden] { display: none; } .ex-profil-titre { font-size: 1.25rem; color: var(--titre); margin: 0 0 .2rem; } .ex-profil-chapo { margin: 0 0 1.3rem; color: var(--encre-doux); font-size: .93rem; } .ex-piliers { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; align-items: end; height: 210px; padding: 2rem 0 2.6rem; perspective: 900px; perspective-origin: 50% 120%; } .ex-pilier { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; transform-style: preserve-3d; } .ex-pilier-corps { position: relative; display: block; height: calc(var(--h) * 1%); min-height: 6px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--pilier-haut), var(--pilier)); transform-origin: bottom center; transform: rotateX(6deg); box-shadow: 0 6px 14px rgba(12, 35, 64, .18); transition: height .5s var(--rebond), background var(--transi); } .ex-pilier.est-cible .ex-pilier-corps { background: linear-gradient(180deg, #d0764f, var(--terre)); } .ex-pilier.est-cible .ex-pilier-corps::before { background: #d0764f; } .ex-pilier-val { position: absolute; left: 0; right: 0; bottom: calc(var(--h) * 1% + 2.9rem); text-align: center; font-family: var(--police-titres); font-weight: 700; font-size: .86rem; color: var(--encre-doux); transition: bottom .5s var(--rebond); } .ex-pilier.est-cible .ex-pilier-val { color: var(--terre-texte); } .ex-pilier-nom { position: absolute; left: 0; right: 0; bottom: -2.15rem; text-align: center; font-size: .76rem; color: var(--encre-doux); line-height: 1.25; } .ex-pilier.est-cible .ex-pilier-nom { color: var(--terre-texte); font-weight: 700; } .ex-profil-bas { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--bord); } .ex-profil-conseil { margin: 0; flex: 1 1 16rem; font-size: .95rem; } .ex-profil-conseil b { color: var(--terre-texte); } .ex-profil.est-vide .ex-piliers { height: 100px; } @media (prefers-reduced-motion: no-preference){ .ex-pilier-corps { animation: exPousse .7s var(--rebond) both; } .ex-pilier:nth-child(2) .ex-pilier-corps { animation-delay: .07s; } .ex-pilier:nth-child(3) .ex-pilier-corps { animation-delay: .14s; } .ex-pilier:nth-child(4) .ex-pilier-corps { animation-delay: .21s; } .ex-pilier:nth-child(5) .ex-pilier-corps { animation-delay: .28s; } } .ex-bilan { display: flex; flex-direction: column; gap: .2rem; max-width: 920px; margin: 1.8rem auto 0; padding: 1.2rem 1.4rem 1.3rem; border-radius: var(--r-m); background: linear-gradient(150deg, var(--indigo), var(--nuit)); color: #fff; text-decoration: none; box-shadow: var(--ombre-m); border: 1px solid rgba(255, 255, 255, .14); transition: transform var(--transi), box-shadow var(--transi); } .ex-bilan:hover, .ex-bilan:focus-visible { transform: translateY(-3px); text-decoration: none; } .ex-bilan-quoi { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--or); } .ex-bilan-titre { font-family: var(--police-titres); font-size: 1.4rem; line-height: 1.2; color: inherit; margin: 0; } .ex-bilan-aide { font-size: .9rem; color: #c9d6e8; } .ex-bilan-pied { display: inline-flex; align-items: center; gap: .4rem; margin-top: .55rem; font-family: var(--police-titres); font-weight: 700; color: var(--or); } .jx-portes { display: grid; gap: 1rem; margin: 0 auto 1.8rem; max-width: 920px; } .jx-portes[hidden] { display: none; } @media (min-width: 680px){ .jx-portes { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } .jx-porte { position: relative; display: flex; flex-direction: column; gap: .2rem; padding: 1.15rem 1.3rem 1.2rem; border-radius: var(--r-m); background: linear-gradient(150deg, var(--indigo), var(--nuit)); color: #fff; text-decoration: none; box-shadow: var(--ombre-m); border: 1px solid rgba(255, 255, 255, .14); transition: transform var(--transi), box-shadow var(--transi); } .jx-porte:hover, .jx-porte:focus-visible { transform: translateY(-3px); text-decoration: none; } .jx-porte--reprise { background: linear-gradient(150deg, #6b3520, #3d1d11); } .jx-porte-quoi { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--or); } .jx-porte-titre { font-family: var(--police-titres); font-size: 1.35rem; line-height: 1.2; } .jx-porte-aide { font-size: .88rem; color: #c9d6e8; } .jx-porte-pied { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; font-family: var(--police-titres); font-weight: 700; color: var(--or); } .vitrine-fiche { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; } .vitrine-embleme svg * { transform-box: fill-box; transform-origin: center; } .vitrine-embleme.em--bleu { background: linear-gradient(150deg, var(--bleu), #084a97); } .vitrine-embleme.em--ocre { background: linear-gradient(150deg, var(--ocre), var(--terre)); } .vitrine-embleme.em--rouge { background: linear-gradient(150deg, var(--rouge), var(--rouge-fonce)); } @media (prefers-reduced-motion: no-preference){ .vitrine-tuile:hover .em--memory .c1, .vitrine-tuile:focus-visible .em--memory .c1 { animation: emRetourne 1.6s var(--rebond) infinite; } .vitrine-tuile:hover .em--memory .c2, .vitrine-tuile:focus-visible .em--memory .c2 { animation: emRetourne 1.6s var(--rebond) .22s infinite; } .vitrine-tuile:hover .em--quiz .q, .vitrine-tuile:focus-visible .em--quiz .q { animation: emBascule 1.5s var(--rebond) infinite; } .vitrine-tuile:hover .em--quiz .bulle, .vitrine-tuile:focus-visible .em--quiz .bulle { animation: emPulse 1.5s ease-in-out infinite; } .vitrine-tuile:hover .em--phrase .m1, .vitrine-tuile:focus-visible .em--phrase .m1 { animation: emRange1 2.2s var(--rebond) infinite; } .vitrine-tuile:hover .em--phrase .m2, .vitrine-tuile:focus-visible .em--phrase .m2 { animation: emRange2 2.2s var(--rebond) infinite; } .vitrine-tuile:hover .em--phrase .m3, .vitrine-tuile:focus-visible .em--phrase .m3 { animation: emRange3 2.2s var(--rebond) infinite; } .vitrine-tuile:hover .em--bwato .coque, .vitrine-tuile:focus-visible .em--bwato .coque, .vitrine-tuile:hover .em--bwato .rame, .vitrine-tuile:focus-visible .em--bwato .rame { animation: emTangue 2.4s ease-in-out infinite; } .vitrine-tuile:hover .em--bwato .vague, .vitrine-tuile:focus-visible .em--bwato .vague { animation: emVague 2.4s ease-in-out infinite; } .vitrine-tuile:hover .em--devine .qui, .vitrine-tuile:focus-visible .em--devine .qui { animation: emDemasque 2s ease-in-out infinite; } .vitrine-tuile:hover .em--devine .plus, .vitrine-tuile:focus-visible .em--devine .plus { animation: emTourne 2s var(--rebond) infinite; } .vitrine-tuile:hover .em--mobembo .de, .vitrine-tuile:focus-visible .em--mobembo .de { animation: emRoule 2.6s var(--rebond) infinite; } .vitrine-tuile:hover .em--mobembo .p1, .vitrine-tuile:focus-visible .em--mobembo .p1 { animation: emPoint 2.6s steps(1) infinite; } .vitrine-tuile:hover .em--mobembo .p2, .vitrine-tuile:focus-visible .em--mobembo .p2 { animation: emPoint 2.6s steps(1) .1s infinite; } .vitrine-tuile:hover .em--mobembo .pion, .vitrine-tuile:focus-visible .em--mobembo .pion { animation: emAvance 2.6s ease-in-out infinite; } .vitrine-tuile:hover .em--croises .k, .vitrine-tuile:focus-visible .em--croises .k { animation: emRemplit 2.4s ease-in-out infinite; } .em--croises .k2 { animation-delay: .3s !important; } .em--croises .k3 { animation-delay: .6s !important; } .vitrine-tuile:hover .em--kotonga .tombe, .vitrine-tuile:focus-visible .em--kotonga .tombe { animation: emTombe 2.4s cubic-bezier(.5, 0, .75, 0) infinite; } .vitrine-tuile:hover .em--kotonga .ligne, .vitrine-tuile:focus-visible .em--kotonga .ligne { animation: emEfface 2.4s ease-in-out infinite; } } .jeu-retour { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.5rem; padding: .32rem .95rem .32rem .32rem; border-radius: 999px; background: var(--blanc-chaud); border: 1px solid var(--bord); box-shadow: var(--ombre-s); font-family: var(--police-titres); font-weight: 700; font-size: .9rem; color: var(--titre); transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi); } .jeu-retour:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--ombre-m); border-color: var(--ocre); } .jeu-retour:active { transform: translateY(0) scale(.97); transition-duration: .08s; } .jeu-retour-pastille { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; flex: none; border-radius: 50%; background: var(--sable); color: var(--terre-texte); transition: background var(--transi), color var(--transi); } .jeu-retour:hover .jeu-retour-pastille { background: var(--terre); color: #fff; } .jeu-retour-txt { padding-right: .1rem; } .jeu-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .9rem 1.4rem; margin-bottom: 1.3rem; } .jeu-niveaux { display: inline-flex; gap: .5rem; flex-wrap: wrap; } .jeu-relance { font-size: .95rem; padding: .6rem 1.2rem; } .jeu-etat { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin: 0 0 1.3rem; color: var(--encre-doux); font-weight: 600; } .jeu-etat b { color: var(--titre); font-family: var(--police-titres); font-size: 1.1em; } .kt-mur-txt { margin-top: .6rem; } .jeu-joueurs { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0 0 1.3rem; } .jeu-joueurs[hidden] { display: none; } .jeu-joueur { display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .95rem; border-radius: 999px; font-weight: 700; font-size: .95rem; background: var(--blanc-chaud); border: 2px solid var(--bord); color: var(--encre-doux); transition: transform .2s var(--rebond), box-shadow .2s, background .2s, color .2s; } .jeu-joueur-score { font-family: var(--police-titres); font-size: 1.15rem; min-width: 1ch; text-align: center; } .jeu-joueur.est-j1 { border-color: var(--bleu); } .jeu-joueur.est-j2 { border-color: var(--rouge); } .jeu-joueur.est-j3 { border-color: var(--or); } .jeu-joueur.est-j4 { border-color: var(--ocre); } .jeu-joueur.est-j1.est-actif { background: var(--bleu); } .jeu-joueur.est-j2.est-actif { background: var(--rouge); } .jeu-joueur.est-j3.est-actif { background: var(--or); color: var(--nuit); } .jeu-joueur.est-j4.est-actif { background: var(--ocre); } .recap-item.jeu-classe.est-j1 { background: var(--bleu); } .recap-item.jeu-classe.est-j2 { background: var(--rouge); } .recap-item.jeu-classe.est-j3 { background: var(--or); color: var(--nuit); } .recap-item.jeu-classe.est-j4 { background: var(--ocre); } .recap-item.jeu-classe b { font-size: 1.1rem; } .jeu-joueur.est-out { opacity: .4; filter: grayscale(1); } .dv-scene { margin-top: 1rem; } .dv-consigne { text-align: center; font-weight: 700; color: var(--titre); margin: 0 0 .7rem; min-height: 1.4em; transition: color .2s; } .dv-bulle { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: 0 auto .8rem; max-width: 30rem; padding: .55rem .9rem; border-radius: 14px; border-bottom-left-radius: 5px; background: var(--blanc-chaud); border: 2px solid var(--or); box-shadow: var(--ombre-s); } .dv-bulle[hidden] { display: none; } .dv-bulle.est-neuve { animation: masTombe .38s var(--rebond) both; transform-origin: top center; } .dv-bulle-q { font-style: italic; color: var(--encre-doux); } .dv-bulle-rep { display: inline-flex; align-items: baseline; gap: .4rem; } .dv-bulle-rep b { font-size: 1.15rem; color: var(--terre-texte); } .dv-bulle-gloss { font-size: .84rem; color: var(--encre-doux); } .dv-menu { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin: 0 0 1.1rem; } .dv-q { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .5rem .85rem; border-radius: 12px; cursor: pointer; background: var(--bleu); color: #fff; border: 2px solid transparent; transition: transform .15s, box-shadow .15s, background .2s; } .dv-q-ln { font-weight: 700; } .dv-q-gloss { font-size: .78rem; opacity: .85; } .dv-plateau { display: grid; gap: .7rem; margin: 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 34rem; perspective: 900px; } .dv-plateau[data-cartes="12"], .dv-plateau[data-cartes="20"] { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 46rem; } @media (max-width: 560px){ .dv-plateau { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .dv-plateau[data-cartes="12"], .dv-plateau[data-cartes="20"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .dv-carte { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .5rem .35rem .55rem; border-radius: 12px; cursor: pointer; background: var(--blanc-chaud); border: 2px solid var(--liseret); transition: transform .35s, opacity .35s, border-color .15s, box-shadow .15s; transform-origin: bottom center; transform-style: preserve-3d; } .dv-carte:hover, .dv-carte:focus-visible { border-color: var(--terre); box-shadow: var(--ombre-m); } .dv-carte.est-cible { border-color: var(--terre); box-shadow: 0 0 0 3px var(--terre); } .dv-carte.est-rabattue { transform: rotateX(-88deg) translateY(6px); opacity: .28; pointer-events: none; transition-delay: calc(var(--i) * 22ms); } .dv-carte.est-trouvee { border-color: var(--or); box-shadow: 0 0 0 3px var(--or), var(--ombre-m); animation: dvTrouve .5s var(--rebond) both; } .dv-visage { width: 54px; height: 54px; display: block; } .dv-visage svg { width: 100%; height: 100%; } .dv-nom { font-weight: 800; font-size: .9rem; color: var(--titre); } .dv-chips { display: flex; flex-wrap: wrap; gap: .2rem; justify-content: center; } .dv-chip { font-size: .68rem; font-weight: 700; padding: .08rem .4rem; border-radius: 999px; color: #fff; white-space: nowrap; } .dv-chip--lieu { background: var(--bleu); } .dv-chip--animal { background: var(--vert); } .dv-chip--mosala { background: var(--ocre); } .dv-chip--humeur { background: var(--terre); } .dv-accuser { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem; margin: 1rem auto 0; max-width: 32rem; text-align: center; padding: .7rem .9rem; border-radius: 14px; background: var(--blanc-chaud); border: 2px dashed var(--terre); } .dv-accuser[hidden] { display: none; } .dv-accuser-txt { font-weight: 800; color: var(--titre); } .dv-accuser-btns { display: flex; gap: .5rem; } .dv-suivant { display: inline-flex; margin: 1.1rem auto 0; } .dv-suivant[hidden] { display: none; } .dv-histo { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .4rem; } .dv-histo-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .45rem .7rem; border-radius: 10px; background: var(--blanc-chaud); border-left: 4px solid var(--liseret); } .dv-histo-ligne.est-juste { border-left-color: var(--or); } .dv-histo-ligne.est-faux { border-left-color: var(--rouge); } .dv-histo-nom { font-weight: 800; color: var(--titre); } .dv-histo-info { font-size: .82rem; color: var(--encre-doux); } .jeu-plateau { display: grid; gap: .7rem; grid-template-columns: repeat(4, 1fr); max-width: 620px; margin: 0 auto; } .jeu-plateau[data-niveau="3"] { grid-template-columns: repeat(5, 1fr); max-width: 780px; } .jeu-carte { position: relative; border: 0; background: none; padding: 0; cursor: pointer; aspect-ratio: 4 / 5; perspective: 900px; animation: monterCourt .35s ease backwards; transition: transform var(--transi); } .jeu-carte:not(.est-retournee):not(.est-trouvee):hover { transform: translateY(-3px); } .jeu-carte-int { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s var(--rebond); } .jeu-carte.est-retournee .jeu-carte-int, .jeu-carte.est-trouvee .jeu-carte-int { transform: rotateY(180deg); } .jeu-face { position: absolute; inset: 0; display: grid; place-content: center; gap: .25rem; text-align: center; padding: .45rem; border-radius: var(--r-m); border: 1px solid var(--bord); box-shadow: var(--ombre-s); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .jeu-face--dos { background: url("/medias/motif-kuba.svg") 0 0/40px repeat, linear-gradient(150deg, #17456f, var(--nuit)); background-blend-mode: soft-light, normal; color: var(--or); font-size: 1.7rem; border-color: transparent; text-shadow: 0 2px 10px rgba(6, 20, 40, .55); } .jeu-face--avant { background: var(--blanc-chaud); transform: rotateY(180deg); } .jeu-face--ref { border-top: 4px solid var(--bleu); } .jeu-face--ln { border-top: 4px solid var(--or); } .jeu-mot { font-weight: 800; color: var(--titre); line-height: 1.22; font-size: clamp(.82rem, 2.3vw, 1.05rem); overflow-wrap: anywhere; } .jeu-langue { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-doux); } .jeu-carte.est-trouvee .jeu-face--avant { border-color: var(--or); box-shadow: 0 0 0 3px rgba(242, 183, 5, .34), var(--ombre-s); animation: pop .45s var(--rebond); } .jeu-carte.est-erreur { animation: secouer .4s ease; } .jeu-bravo-etoiles { display: block; color: var(--or); font-size: 1.5rem; letter-spacing: .3em; animation: scintille 2.8s ease-in-out infinite; } .recap { margin: 0 0 1.4rem; text-align: left; } .recap-bilan { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.2rem; } .recap-item { display: inline-flex; align-items: baseline; gap: .35rem; padding: .32rem .78rem; border-radius: 999px; font-size: .82rem; font-weight: 600; } .recap-item b { font-size: 1.05rem; } .recap-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; } .recap-ligne { display: flex; gap: .55rem; align-items: flex-start; width: 100%; padding: .5rem .65rem; border-radius: var(--r-s); border: 1px solid var(--bord); border-left: 3px solid var(--bord); text-align: left; } .recap-ligne.est-juste { border-left-color: #2a9d5c; } .recap-ligne.est-faux { border-left-color: var(--rouge); } .recap-ligne.est-temps { border-left-color: var(--ocre); } .recap-ligne.est-neutre { border-left-color: var(--or); } button.recap-ligne { background: var(--blanc-chaud); cursor: pointer; transition: border-color .15s, box-shadow .15s; } button.recap-ligne:hover { border-color: var(--or); box-shadow: var(--ombre-s); } .recap-marque { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; color: #fff; line-height: 1; } .est-juste .recap-marque { background: #2a9d5c; } .est-faux .recap-marque { background: var(--rouge); } .est-temps .recap-marque { background: var(--ocre); } .est-neutre .recap-marque { background: var(--or); } .recap-corps { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .45rem; font-size: .92rem; } .recap-mot { font-weight: 700; color: var(--encre); } .recap-fleche { color: var(--encre-doux); } .recap-cible { color: var(--encre); } .recap-note { flex-basis: 100%; font-size: .82rem; font-style: italic; color: var(--encre-doux); } @media (max-width: 560px){ .jeu-plateau { gap: .5rem; } .jeu-plateau[data-niveau="3"] { grid-template-columns: repeat(4, 1fr); max-width: 620px; } .jeu-etat { gap: 1.3rem; } } .quiz-chrono { height: 8px; max-width: 620px; margin: 0 auto 1.5rem; background: var(--bleu-clair); border-radius: 999px; overflow: hidden; } .quiz-chrono[hidden] { display: none; } .quiz-chrono-jauge { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--or), var(--terre)); border-radius: 999px; } .quiz-depart { max-width: 560px; margin: 0 auto; padding: 2.2rem 1.5rem; text-align: center; background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 5px solid var(--bleu); border-radius: var(--r-l); box-shadow: var(--ombre-m); animation: monterCourt .4s var(--rebond) both; } .quiz-depart[hidden] { display: none; } .quiz-depart-embleme { display: inline-flex; width: 3.4rem; height: 3.4rem; margin-bottom: 1rem; align-items: center; justify-content: center; color: #fff; border-radius: 50%; background: linear-gradient(150deg, var(--bleu), #084a97); box-shadow: var(--ombre-s); } .quiz-depart-embleme svg { width: 1.8rem; height: 1.8rem; } .quiz-depart-txt { margin: 0 auto 1.5rem; max-width: 34ch; color: var(--encre-doux); font-size: 1.05rem; } .quiz-depart-txt[hidden] { display: none; } .quiz-trop-peu { color: var(--terre-texte); font-style: italic; } .quiz-depart-btn { font-size: 1.05rem; } .jeu-vide { max-width: 420px; margin: 1.6rem auto 0; text-align: center; color: var(--terre-texte); font-style: italic; } .quiz-scene { perspective: 1200px; } .quiz-scene[hidden] { display: none; } .quiz-carte { position: relative; max-width: 620px; margin: 0 auto 1.6rem; padding: 2rem 1.4rem; text-align: center; background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 5px solid var(--or); border-radius: var(--r-l); box-shadow: var(--ombre-m); transform-origin: center bottom; } .quiz-carte.est-entrante { animation: quizEntre .55s var(--rebond) both; } .quiz-mot--cache { color: var(--encre-doux); letter-spacing: .3em; } .quiz-langue { display: inline-block; margin-top: .5rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-doux); } .quiz-ecouter { display: inline-flex; margin: .9rem auto 0; padding: .5rem; align-items: center; justify-content: center; background: var(--bleu-clair); color: var(--bleu-texte); border: 0; border-radius: 50%; cursor: pointer; transition: transform var(--transi), background var(--transi); } .quiz-ecouter[hidden] { display: none; } .quiz-verdict { min-height: 1.4em; margin: .8rem 0 0; font-weight: 700; font-family: var(--police-titres); letter-spacing: .01em; } .quiz-verdict:not(:empty) { animation: pop .4s var(--rebond); } .recap-joueur { flex: none; align-self: center; padding: .16rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 700; color: #fff; white-space: nowrap; } .recap-joueur.est-j4 { background: var(--ocre); } .exo-scene { perspective: 1400px; max-width: 560px; margin: 0 auto; } .exo-scene[hidden] { display: none; } .exo-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.5rem 1.3rem; text-align: center; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-l); box-shadow: var(--ombre-m); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .exo-face--recto { border-top: 5px solid var(--bleu); } .exo-face--verso { transform: rotateY(180deg); border-top: 5px solid var(--or); } .exo-mot { margin: 0; font-family: var(--police-titres); font-weight: 800; color: var(--titre); line-height: 1.15; font-size: clamp(1.5rem, 5vw, 2.2rem); overflow-wrap: anywhere; } .exo-form { display: flex; gap: .55rem; width: 100%; max-width: 24rem; margin-top: .6rem; } .exo-valider { font-size: .98rem; padding: .6rem 1.1rem; } .exo-passer { border: 0; background: none; padding: .3rem .5rem; cursor: pointer; color: var(--encre-doux); font-size: .88rem; text-decoration: underline; transition: color var(--transi); } .exo-verdict { margin: 0; min-height: 1.4em; font-weight: 700; font-family: var(--police-titres); letter-spacing: .01em; } .exo-verdict:not(:empty) { animation: pop .4s var(--rebond); } .exo-bonne { margin: 0; font-family: var(--police-titres); font-weight: 800; color: var(--terre-texte); line-height: 1.15; font-size: clamp(1.4rem, 4.6vw, 2rem); overflow-wrap: anywhere; } .exo-taponse { margin: 0; min-height: 1.2em; font-size: .9rem; font-style: italic; color: var(--encre-doux); } .exo-autre { margin: 0; font-size: .85rem; color: var(--ambre-texte); } .exo-autre:empty { display: none; } .exo-face--verso .btn { margin-top: .5rem; } .exo-astuce { font-size: .88rem; font-style: italic; margin-top: -0.8rem; } .exo-astuce[hidden] { display: none; } .exo-outils-ligne { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .9rem 1.4rem; } .bilan-axes { display: grid; gap: 1.1rem; margin: 0 0 1.3rem; } @media (min-width: 560px){ .bilan-axes { grid-template-columns: 1fr 1fr; align-items: start; } } @media (min-width: 880px){ .bilan-axes { grid-template-columns: 1fr 1fr 1fr; } } .conseils { margin: 0 0 1.4rem; padding: .95rem 1.1rem; text-align: left; background: var(--sable); border-left: 4px solid var(--or); border-radius: var(--r-s); } .conseils h3 { margin: 0 0 .45rem; font-size: .95rem; color: var(--titre); } .conseils ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; color: var(--encre-doux); font-size: .92rem; } .recap-ligne.est-presque { border-left-color: var(--ocre); } .est-presque .recap-marque { background: var(--ocre); } .recap-ligne.est-passe { border-left-color: var(--rouge); } .est-passe .recap-marque { background: var(--rouge); } @media (max-width: 420px){ .exo-face { padding: 1.2rem .9rem; } .exo-form { flex-direction: column; } } .exv-carte { min-height: 27rem; } .exv-consigne { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 0; } .exv-puce { padding: .26rem .75rem; border-radius: 999px; background: var(--sable); border: 1px solid var(--bord); font-weight: 700; font-size: .92rem; color: var(--titre); } .exv-puce--temps { background: rgba(242, 183, 5, .22); border-color: rgba(242, 183, 5, .55); } .exv-affichage { margin: .2rem 0; min-height: 1.3em; font-family: var(--police-titres); font-weight: 800; line-height: 1.15; font-size: clamp(1.5rem, 5vw, 2.1rem); overflow-wrap: anywhere; } .exv-seg--pronom { color: var(--terre-texte); } .exv-seg--sujet { color: var(--bleu-texte); } .exv-seg--temps { color: var(--ambre-texte); } .exv-seg--racine { color: var(--titre); } .mas-scene { display: grid; gap: .7rem; margin: .2rem 0 1rem; } .mas-bulle { max-width: 22rem; padding: .75rem 1.05rem; border-radius: var(--r-m); background: var(--raffia); box-shadow: var(--ombre-s); line-height: 1.5; } .mas-bulle--a { justify-self: start; border-bottom-left-radius: 5px; } .mas-bulle--b { justify-self: end; background: var(--blanc-chaud); border-top: 3px solid var(--or); border-bottom-right-radius: 5px; } .mas-bulle-gloss, .mas-bulle-pensee { display: block; margin-top: .15rem; font-size: .84rem; font-style: italic; font-weight: 400; color: var(--encre-doux); } .mas-indice { margin: .1rem 0 0; text-align: center; font-size: .9rem; font-style: italic; color: var(--encre-doux); } .mas-indice[hidden] { display: none; } .mas-trou { display: inline-block; min-width: 3.4rem; padding: 0 .5rem; text-align: center; border-bottom: 2px dashed var(--terre); color: var(--terre-texte); letter-spacing: .12em; } .mas-remplie { display: inline-block; font-weight: 800; color: var(--terre-texte); padding: 0 .15rem; } .mas-remplie--pose { animation: masTombe .4s var(--rebond) both; transform-origin: top center; } .mas-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .1rem 0 .2rem; } .mas-chip { font: inherit; font-weight: 700; color: var(--terre-texte); cursor: pointer; background: var(--blanc-chaud); border: 2px solid var(--bord); border-radius: 999px; padding: .4rem .9rem; transition: transform var(--transi), border-color var(--transi), background var(--transi), color var(--transi); } .mas-chip:hover, .mas-chip:focus-visible { transform: translateY(-2px) rotateX(10deg); border-color: var(--terre); } .mas-chip.est-choisi { background: var(--terre); color: #fff; border-color: transparent; } .mas-rep { color: var(--terre-texte); font-weight: 800; } .mas-rep-faux { color: var(--rouge-texte); font-weight: 700; text-decoration: line-through; } .exv-rouleaux { display: flex; gap: 1.4rem; justify-content: center; } .exv-rouleau { display: flex; flex-direction: column; align-items: center; gap: .3rem; } .exv-rouleau-nom { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--encre-doux); } .exv-fenetre { position: relative; width: 9.5rem; height: 84px; overflow: hidden; perspective: 480px; border: 1px solid var(--bord); border-radius: var(--r-m); background: var(--carte-vive); box-shadow: inset 0 0 14px rgba(6, 42, 82, .08); } .exv-tambour { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .4s var(--rebond); } .exv-face { position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px; display: flex; flex-direction: column; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; line-height: 1.1; } .exv-face b { font-family: var(--police-titres); font-size: 1.12rem; color: var(--titre); } .exv-note-pronom { max-width: 560px; margin-inline: auto; font-size: .9rem; font-style: italic; color: var(--encre-doux); border-left: 3px solid var(--or); padding-left: .9rem; text-align: left; } .exv-btn { display: grid; place-items: center; width: 2rem; height: 1.6rem; border: 1px solid var(--bord); border-radius: 999px; background: var(--blanc-chaud); color: var(--terre-texte); cursor: pointer; transition: background var(--transi), color var(--transi), transform var(--transi); } .exv-btn:hover { background: var(--terre); color: #fff; } .exv-btn:active { transform: scale(.92); transition-duration: .08s; } .exv-actions { display: flex; align-items: center; gap: 1rem; margin-top: .4rem; flex-wrap: wrap; justify-content: center; } .exv-bonne { font-size: clamp(1.5rem, 5vw, 2.1rem); } @media (prefers-reduced-motion: reduce){ .exv-tambour { transition: none; } } @media (max-width: 420px){ .exv-carte { min-height: 29rem; } .exv-rouleaux { gap: .8rem; } .exv-fenetre { width: 8rem; } } .exn-carte { min-height: 24rem; } .exn-affichage { min-height: 4.6rem; display: grid; place-items: center; width: 100%; } .exn-phrase { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; } .exh-affichage { min-height: 4.6rem; display: grid; place-items: center; width: 100%; } .exh-invite { font-family: var(--police-titres); font-weight: 800; color: var(--titre); font-size: clamp(1.6rem, 5.5vw, 2.4rem); text-align: center; overflow-wrap: anywhere; } .exn-phrase--mini .brq { font-size: .76rem; padding: .14rem .45rem; } .exn-cache { font-size: 2rem; letter-spacing: .3em; font-weight: 800; color: var(--encre-doux); font-family: var(--police-titres); } .exn-palettes { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; justify-content: center; perspective: 600px; } .exn-palette { display: grid; place-items: center; min-width: 2.2rem; height: 3rem; padding: 0 .3rem; font-family: var(--police-titres); font-size: 1.8rem; font-weight: 700; color: var(--or); border-radius: .5rem; box-shadow: var(--ombre-s); background: linear-gradient(180deg, #17456f 0 48%, rgba(255, 255, 255, .18) 49% 51%, var(--nuit) 52% 100%); transform-origin: center top; animation: paletteTombe .5s var(--rebond) both; } .exn-espace { width: .5rem; } .exn-rappel { display: flex; justify-content: center; } .exn-bonne { display: grid; place-items: center; width: 100%; } @media (prefers-reduced-motion: reduce){ .exn-palette { animation: none; } } @media (max-width: 420px){ .exn-carte { min-height: 26rem; } .exn-palette { min-width: 1.8rem; height: 2.5rem; font-size: 1.45rem; } } .jp-scene { perspective: 900px; max-width: 620px; margin: 0 auto; } .jp-scene[hidden] { display: none; } .jp-carte { display: flex; flex-direction: column; align-items: center; gap: .9rem; min-height: 24rem; padding: 1.6rem 1.3rem; text-align: center; background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 5px solid var(--bleu); border-radius: var(--r-l); box-shadow: var(--ombre-m); animation: quizEntre .55s var(--rebond) backwards; } .jp-carte .quiz-demande { margin: 0; } .jp-sens-ligne { display: flex; align-items: center; gap: .6rem; margin: 0; flex-wrap: wrap; justify-content: center; } .jp-sens { font-family: var(--police-titres); font-weight: 800; color: var(--titre); font-size: clamp(1.15rem, 3.6vw, 1.55rem); line-height: 1.2; } .jp-sens-ligne .quiz-ecouter { margin: 0; } .jp-ligne { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; min-height: 3rem; padding: .55rem; width: 100%; border: 2px dashed var(--bord); border-radius: var(--r-m); background: rgba(255, 255, 255, .55); transition: border-color var(--transi), box-shadow var(--transi); } .jp-ligne.est-juste { border-color: var(--or); border-style: solid; box-shadow: 0 0 0 3px rgba(242, 183, 5, .25); } .jp-ligne.est-secouee { animation: secouer .4s ease; } .jp-creux { width: 4.6rem; height: 2.2rem; border-radius: var(--r-s); background: var(--sable); border: 1px dashed #d9c6a8; } .jp-nuage { display: flex; flex-wrap: wrap; gap: .6rem .7rem; justify-content: center; align-content: center; min-height: 7.5rem; width: 100%; transform-style: preserve-3d; } .jp-tuile { padding: .5rem .9rem; cursor: pointer; font-family: var(--police-titres); font-weight: 700; font-size: 1.02rem; color: var(--titre); background: var(--carte-vive); border: 1px solid var(--bord); border-bottom: 3px solid var(--ocre); border-radius: var(--r-m); box-shadow: var(--ombre-s); transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi), opacity var(--transi); } #jp-nuage .jp-tuile { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px)); animation: monterCourt .35s var(--rebond) backwards, jpFlotte 3.2s ease-in-out infinite; } #jp-nuage .jp-tuile:hover:not(:disabled) { transform: rotateX(0) rotateY(0) translateZ(46px); border-color: var(--or); box-shadow: var(--ombre-m); } .jp-tuile:disabled { cursor: default; } .jp-tuile.est-estompee { opacity: .38; } #jp-ligne .jp-tuile { animation: monterCourt .28s var(--rebond) backwards; } #jp-ligne .jp-tuile.est-juste { border-color: var(--or); border-bottom-color: var(--or); box-shadow: 0 0 0 2px rgba(242, 183, 5, .3), var(--ombre-s); animation: pop .45s var(--rebond) backwards; } #jp-ligne .jp-tuile.est-revelee { animation: jpRevele .5s var(--rebond) backwards; } .jp-verdict { margin: 0; min-height: 1.4em; font-weight: 700; font-family: var(--police-titres); letter-spacing: .01em; } .jp-verdict.est-juste { color: var(--juste-texte); } .jp-verdict.est-encore { color: var(--ambre-texte); } .jp-verdict.est-rate { color: var(--rouge-texte); } .jp-verdict:not(:empty) { animation: pop .4s var(--rebond); } @media (prefers-reduced-motion: reduce){ .jp-carte, #jp-nuage .jp-tuile, #jp-ligne .jp-tuile { animation: none; } } @media (max-width: 420px){ .jp-carte { padding: 1.2rem .8rem; min-height: 25rem; } .jp-creux { width: 3.9rem; height: 2rem; } .jp-tuile { font-size: .92rem; padding: .45rem .7rem; } } .bw-scene { max-width: 620px; margin: 0 auto; } .bw-scene[hidden] { display: none; } .bw-carte { display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 1.3rem 1.1rem 1.6rem; text-align: center; background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 5px solid var(--bleu); border-radius: var(--r-l); box-shadow: var(--ombre-m); animation: quizEntre .55s var(--rebond) backwards; } .bw-fleuve { position: relative; width: 100%; height: 7.2rem; overflow: hidden; border-radius: var(--r-m); perspective: 700px; background: linear-gradient(#eaf4ff 0 55%, #9ec9ee 55% 100%); } .bw-eau { position: absolute; left: -10%; right: -10%; bottom: 0; height: 45%; background: radial-gradient(14px 9px at 14px 6px, #7db4e2 45%, transparent 47%) 0 0/56px 18px repeat-x, linear-gradient(#8ec0ea, #5f9fd6); animation: bwCourant 7s linear infinite; z-index: 2; opacity: .92; } .bw-pirogue { position: absolute; left: 50%; bottom: 34%; width: 8.2rem; z-index: 1; margin-left: -4.1rem; transform: translateY(calc(var(--enfonce, 0) * 5px)); transition: transform .45s ease; animation: bwTangue 3.6s ease-in-out infinite; } .bw-pirogue svg { width: 100%; height: auto; display: block; } .bw-pirogue.est-touchee { animation: bwPlonge .55s ease, bwTangue 3.6s ease-in-out .55s infinite; } .bw-pirogue.est-sauvee { animation: none; transform: translateX(300%) translateY(-10px) scale(.6); transition: transform 1.4s ease-in; } .bw-pirogue.est-coulee { animation: none; z-index: 1; transform: translateY(64px) rotate(24deg); opacity: .45; transition: transform 1.2s ease-in, opacity 1.2s ease-in; } .bw-mot { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; perspective: 600px; min-height: 2.6rem; } .bw-case { display: block; width: 2.15rem; height: 2.6rem; } .bw-case-int { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s var(--rebond); } .bw-case.est-vue .bw-case-int { transform: rotateX(180deg); } .bw-case .bw-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--r-s); backface-visibility: hidden; -webkit-backface-visibility: hidden; font-family: var(--police-titres); font-weight: 700; font-size: 1.25rem; } .bw-face--dos { background: var(--sable); color: #c9b28d; border: 1px dashed #d9c6a8; } .bw-face--lettre { background: var(--carte-vive); color: var(--titre); border: 1px solid var(--bord); border-bottom: 3px solid var(--or); transform: rotateX(180deg); } .bw-case.est-manquee .bw-face--lettre { color: var(--rouge-texte); border-bottom-color: var(--rouge); } .bw-clavier { display: flex; flex-direction: column; gap: .34rem; width: 100%; } .bw-rangee { display: flex; gap: .34rem; justify-content: center; flex-wrap: wrap; } .bw-touche { min-width: 2.15rem; height: 2.3rem; padding: 0 .45rem; cursor: pointer; font-family: var(--police-titres); font-weight: 700; font-size: 1rem; color: var(--titre); background: var(--carte-vive); border: 1px solid var(--bord); border-bottom: 3px solid var(--clavier-pied); border-radius: var(--r-s); transition: transform .12s ease, background var(--transi), border-color var(--transi), opacity var(--transi); } .bw-touche--voyelle { background: var(--clavier-voyelle-fond); border-bottom-color: var(--or); } .bw-touche--paire { background: var(--clavier-paire-fond); border-bottom-color: var(--ocre); font-size: .92rem; } .bw-touche:disabled { cursor: default; } .bw-touche.est-trouvee { background: var(--juste-fond); border-color: var(--juste-bord); border-bottom-color: var(--juste-bord); color: var(--juste-texte); } .bw-touche.est-ratee { background: var(--rate-fond); border-color: var(--rouge); border-bottom-color: var(--rouge); color: var(--rouge-texte); opacity: .6; } @media (prefers-reduced-motion: reduce){ .bw-carte, .bw-pirogue, .bw-eau { animation: none; } .bw-case-int, .bw-pirogue { transition: none; } } @media (max-width: 420px){ .bw-carte { padding: 1rem .6rem 1.3rem; } .bw-fleuve { height: 6rem; } .bw-case { width: 1.85rem; height: 2.3rem; } .bw-case .bw-face { font-size: 1.05rem; } .bw-touche { min-width: 1.9rem; height: 2.15rem; font-size: .92rem; padding: 0 .3rem; } } .mc-scene[hidden] { display: none; } .mc-consigne-jeu { text-align: center; font-weight: 600; color: var(--encre-doux); margin: 0 0 1rem; min-height: 1.4em; } .mc-plateau { display: grid; gap: 1.4rem; align-items: start; } @media (min-width: 860px){ .mc-plateau { grid-template-columns: minmax(0, 1fr) 20rem; } } .mc-grille-zone { display: grid; gap: .9rem; justify-items: center; } .mc-grille { display: grid; gap: 3px; justify-content: center; grid-template-columns: repeat(var(--cols, 10), var(--case, 2.2rem)); } .mc-grille.est-faux { animation: mcShake .4s; } .mc-vide { width: var(--case, 2.2rem); height: var(--case, 2.2rem); } .mc-case { position: relative; width: var(--case, 2.2rem); height: var(--case, 2.2rem); padding: 0; border: none; background: none; cursor: pointer; perspective: 500px; } .mc-num { position: absolute; top: 1px; left: 3px; z-index: 2; font-size: .56rem; font-weight: 700; color: var(--encre-doux); line-height: 1; pointer-events: none; } .mc-lettre { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s var(--rebond); } .mc-case.est-verrouille .mc-lettre { transform: rotateX(180deg); } .mc-face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; border-radius: 6px; font-family: var(--police-titres); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; } .mc-face--dos { background: var(--carte-vive, #fff); border: 1.5px solid var(--bord); color: var(--titre); } .mc-face--avant { transform: rotateX(180deg); background: var(--or); border: 1.5px solid var(--or-fonce, #c79a2e); color: var(--nuit); } .mc-case.est-actif .mc-face--dos { border-color: var(--bleu); background: var(--bleu-clair, #eaf2fb); } .mc-case.est-curseur .mc-face--dos { border-color: var(--bleu); box-shadow: inset 0 0 0 2px var(--bleu); } .mc-clavier { display: flex; flex-direction: column; gap: .34rem; width: 100%; max-width: 30rem; } .mc-rangee { display: flex; gap: .34rem; justify-content: center; flex-wrap: wrap; } .mc-touche { min-width: 2.15rem; height: 2.4rem; padding: 0 .5rem; border: 1px solid var(--bord); border-bottom-width: 3px; border-radius: 9px; background: var(--carte-vive, #fff); font-family: var(--police-titres); font-weight: 700; font-size: 1.05rem; color: var(--encre); cursor: pointer; transition: transform var(--transi), border-color var(--transi); } .mc-touche--voyelle { background: var(--clavier-voyelle-fond); border-bottom-color: var(--or); } .mc-touche--eff { background: var(--clavier-paire-fond); border-bottom-color: var(--ocre); } .mc-touche:hover { transform: translateY(-2px); border-color: var(--or); } .mc-touche:active { transform: translateY(1px); border-bottom-width: 1px; } .mc-passer { background: var(--sable); border: 1px solid var(--bord); color: var(--encre-doux); font-weight: 700; } .mc-defs { text-align: left; } .mc-defs-titre { font-size: 1.05rem; margin: 0 0 .5rem; color: var(--titre); } .mc-defs-titre:not(:first-child) { margin-top: 1.2rem; } .mc-def-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; } .mc-def { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; cursor: pointer; color: var(--encre); border: 1px solid var(--bord); border-radius: var(--r-m); background: var(--blanc-chaud); padding: .4rem .55rem; transition: border-color var(--transi), background var(--transi); } .mc-def:hover { border-color: var(--or); } .mc-def.est-actif { border-color: var(--bleu); background: var(--bleu-clair, #eaf2fb); } .mc-def.est-resolu { opacity: .55; } .mc-def.est-resolu .mc-def-sens { text-decoration: line-through; } .mc-def-num { font-family: var(--police-titres); font-weight: 800; color: var(--bleu-texte); min-width: 1.4rem; } .mc-def-sens { flex: 1; font-size: .92rem; } .mc-def-son { display: inline-flex; color: var(--bleu-texte); } @media (prefers-reduced-motion: reduce){ .mc-lettre { transition: none; } .mc-grille.est-faux { animation: none; } } @media (max-width: 520px){ .mc-grille { --case: 1.85rem; } .mc-face { font-size: .98rem; } .mc-touche { min-width: 1.95rem; height: 2.2rem; font-size: .95rem; } } .mk-verbe { display: flex; flex-direction: column; align-items: center; gap: .55rem; width: 100%; } .mk-champ-ligne { flex: 1; display: flex; min-width: 0; } .mk-champ-ligne .exo-champ { flex: 1; min-width: 0; } .mk-champ-ligne[hidden] { display: none; } .mk-tag { flex: none; align-self: center; padding: .16rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 700; white-space: nowrap; color: #fff; } .mk-tag--voc { background: var(--bleu); } .mk-tag--verbe { background: var(--ocre); } .mk-tag--nombre { background: var(--or); color: var(--nuit); } .mk-tag--masolo { background: var(--terre); } .mk-tag--ngonga { background: var(--rouge); } .mk-masolo { width: 100%; } .mb-scene { display: grid; gap: 1.1rem; } .mb-scene[hidden] { display: none; } .mb-piste-boite { position: relative; order: 2; max-height: 44vh; overflow-y: auto; overscroll-behavior: contain; padding: .7rem .6rem; background: var(--sable); border: 1px solid var(--bord); border-radius: var(--r-l); } .mb-piste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .34rem; } .mb-case { display: flex; align-items: center; gap: .55rem; padding: .42rem .6rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-left: 5px solid var(--bord); border-radius: var(--r-m); transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi); } .mb-piste .mb-case:nth-child(even) { margin-left: 1.4rem; } .mb-case-num { flex: none; width: 1.6rem; text-align: center; font-family: var(--police-titres); font-size: .82rem; color: var(--encre-doux); } .mb-case-icone { flex: none; width: 1.05rem; height: 1.05rem; } .mb-case-nom { flex: 1; font-size: .86rem; font-weight: 600; color: var(--titre); } .mb-case-pions { flex: none; display: flex; gap: .18rem; min-width: 1.1rem; } .mb-case.est-mot { border-left-color: var(--bleu); } .mb-case.est-mot .mb-case-icone { color: var(--bleu-texte); } .mb-case.est-oreille { border-left-color: var(--or); } .mb-case.est-oreille .mb-case-icone { color: var(--or-fonce); } .mb-case.est-likambo { border-left-color: var(--terre); } .mb-case.est-likambo .mb-case-icone { color: var(--terre-texte); } .mb-case.est-pose { border-left-color: #9fb3a6; } .mb-case.est-fleuve { border-left-color: #5f9fd6; } .mb-case.est-fleuve .mb-case-icone { color: var(--bleu-texte); } .mb-case.est-depart, .mb-case.est-arrivee { border-left-color: var(--ocre); background: var(--carte-vive); } .mb-case.est-depart .mb-case-nom, .mb-case.est-arrivee .mb-case-nom { font-family: var(--police-titres); font-size: .95rem; } .mb-case.est-ici { transform: translateX(3px); border-color: var(--or); box-shadow: 0 0 0 3px rgba(242, 183, 5, .22), var(--ombre-s); } .mb-pion { display: block; width: .82rem; height: .82rem; border-radius: 50%; border: 2px solid var(--blanc-chaud); box-shadow: var(--ombre-s); } .mb-pion.est-j1 { background: var(--bleu); } .mb-pion.est-j2 { background: var(--rouge); } .mb-pion.est-j3 { background: var(--or); } .mb-pion.est-j4 { background: var(--ocre); } .mb-pion.est-actif { animation: mbPouls 1.6s ease-in-out infinite; } .mb-action { order: 1; display: flex; flex-direction: column; gap: .9rem; } .mb-lancer-zone { display: flex; flex-direction: column; align-items: center; gap: .6rem; } .mb-lancer-zone[hidden] { display: none; } .mb-de { font-size: 3.4rem; line-height: 1; color: var(--titre); filter: drop-shadow(0 2px 3px rgba(12, 35, 64, .18)); } .mb-de.est-lance { animation: mbDe .6s var(--rebond); } .mb-lancer:disabled { opacity: .5; cursor: default; } .mb-question, .mb-carte { padding: 1.1rem 1rem 1.3rem; text-align: center; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-l); box-shadow: var(--ombre-m); animation: quizEntre .45s var(--rebond) backwards; } .mb-question[hidden], .mb-carte[hidden] { display: none; } .mb-consigne { margin: 0 0 .5rem; color: var(--encre-doux); font-size: .95rem; } .mb-mot-ligne { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 0 .9rem; } .mb-mot { font-family: var(--police-titres); font-size: 1.7rem; color: var(--titre); } .mb-mot--cache { letter-spacing: .3em; color: var(--encre-doux); } .mb-sens { margin: -.5rem 0 .9rem; font-size: 1.02rem; font-weight: 600; color: var(--terre-texte); } .mb-sens[hidden] { display: none; } .mb-choix { display: grid; gap: .55rem; max-width: 460px; margin: 0 auto; } .mb-opt-sens { display: block; margin-top: .18rem; font-size: .82rem; font-weight: 500; color: var(--encre-doux); line-height: 1.25; } .mb-opt-sens[hidden] { display: none; } @media (min-width: 560px){ .mb-choix { grid-template-columns: 1fr 1fr; } } .mb-verdict { min-height: 1.5rem; margin: .8rem 0 0; font-weight: 700; } .mb-verdict.est-juste { color: var(--juste-texte); } .mb-verdict.est-faux { color: var(--rouge-texte); } .mb-carte { border-top: 5px solid var(--terre); } .mb-carte.est-bonne { border-top-color: #1f8a4c; } .mb-carte.est-mauvaise { border-top-color: var(--rouge); } .mb-carte.est-defi { border-top-color: var(--or); } .mb-carte.est-pose { border-top-color: #9fb3a6; } .mb-carte.est-pose .mb-carte-titre { font-family: var(--police-titres); font-size: 1.75rem; } .mb-carte.est-pose .mb-carte-txt { font-size: 1.05rem; color: var(--terre-texte); font-weight: 600; } .mb-carte-titre { margin: 0 0 .4rem; font-size: 1.15rem; } .mb-carte-txt { margin: 0; color: var(--encre-doux); } .mb-suite { align-self: center; } .mb-suite[hidden] { display: none; } .mb-journal { min-height: 2.6rem; margin: 0; padding: .5rem .7rem; background: var(--carte-vive); border-radius: var(--r-m); color: var(--titre); font-size: .92rem; text-align: center; } @media (prefers-reduced-motion: reduce){ .mb-de.est-lance, .mb-pion.est-actif, .mb-question, .mb-carte { animation: none; } .mb-case { transition: none; } } @media (min-width: 860px){ .mb-scene { grid-template-columns: minmax(260px, 340px) 1fr; align-items: start; gap: 1.4rem; } .mb-piste-boite { order: 1; max-height: 62vh; } .mb-action { order: 2; } } @media (max-width: 420px){ .mb-piste-boite { max-height: 38vh; padding: .5rem .45rem; } .mb-case { padding: .36rem .45rem; gap: .4rem; } .mb-case-nom { font-size: .8rem; } .mb-piste .mb-case:nth-child(even) { margin-left: .9rem; } .mb-de { font-size: 2.9rem; } .mb-mot { font-size: 1.45rem; } } .kt-scene { display: flex; flex-direction: column; align-items: center; gap: .8rem; scroll-margin-top: calc(var(--entete-h) + .6rem); } .kt-familles { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; } .kt-famille { font-size: .82rem; font-weight: 700; padding: .18rem .6rem; border-radius: 999px; color: var(--kt-encre); } .kt-mot-ligne { display: flex; align-items: baseline; gap: .6rem; margin: 0; } .kt-mot-etiquette { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-doux); } .kt-mot { font-family: var(--police-titres); font-size: 1.7rem; font-weight: 700; color: var(--titre); padding: .1rem .7rem; border-radius: var(--r-s); transition: background var(--transi), color var(--transi); } .kt-mot.est-t1, .kt-mot.est-t2, .kt-mot.est-t3, .kt-mot.est-t4, .kt-mot.est-t5, .kt-mot.est-t6 { color: var(--kt-encre); } .kt-sens-ligne { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 0; min-height: 2rem; } .kt-sens { font-size: 1.05rem; color: var(--encre-doux); } .kt-btn-sens { font: inherit; font-size: .85rem; font-weight: 700; color: var(--terre-texte); background: var(--carte-vive); border: 2px solid var(--bord); border-radius: 999px; padding: .2rem .8rem; min-height: 2rem; cursor: pointer; transition: background var(--transi), border-color var(--transi); } .kt-btn-sens:hover { background: var(--sable); border-color: var(--terre); } .kt-apercu-sens { font-size: .82rem; color: var(--encre-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .kt-plateau { display: flex; align-items: flex-start; gap: .9rem; } .kt-cote { display: flex; flex-direction: column; gap: .7rem; min-width: 6.6rem; } .kt-apercu { display: flex; flex-direction: column; gap: .15rem; margin: 0; } .kt-apercu-titre { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-doux); } .kt-apercu-mot { font-weight: 700; font-size: 1rem; padding: .25rem .5rem; border-radius: var(--r-s); background: var(--carte-vive); border: 1px solid var(--bord); color: var(--titre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kt-apercu-mot.est-vide { color: var(--encre-doux); font-weight: 400; } .kt-apercu-mot.est-t1, .kt-apercu-mot.est-t2, .kt-apercu-mot.est-t3, .kt-apercu-mot.est-t4, .kt-apercu-mot.est-t5, .kt-apercu-mot.est-t6 { color: var(--kt-encre); border-color: transparent; } .kt-grille-boite { position: relative; } .kt-grille { display: grid; grid-template-columns: repeat(var(--kt-cols, 10), 1fr); gap: 2px; height: min(62vh, 600px); aspect-ratio: var(--kt-cols, 10) / var(--kt-rangs, 18); max-width: 100%; padding: 4px; border-radius: var(--r-m); background: var(--sable); border: 2px solid var(--bord); box-shadow: var(--ombre-s); touch-action: none; } .kt-case { border-radius: 3px; background: var(--kt-case-fond); display: flex; align-items: center; justify-content: center; font-size: clamp(8px, 1.9vh, 14px); font-weight: 700; line-height: 1; color: transparent; user-select: none; } .kt-case.est-pleine { background: var(--kt-pleine); color: var(--kt-encre); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); } .kt-case.est-active { outline: 2px solid var(--or); outline-offset: -2px; } .kt-case.est-t1 { background: var(--kt-t1); } .kt-case.est-t2 { background: var(--kt-t2); } .kt-case.est-t3 { background: var(--kt-t3); } .kt-case.est-t4 { background: var(--kt-t4); } .kt-case.est-t5 { background: var(--kt-t5); } .kt-case.est-t6 { background: var(--kt-t6); } .kt-famille.est-t1, .kt-mot.est-t1, .kt-apercu-mot.est-t1 { background: var(--kt-t1); } .kt-famille.est-t2, .kt-mot.est-t2, .kt-apercu-mot.est-t2 { background: var(--kt-t2); } .kt-famille.est-t3, .kt-mot.est-t3, .kt-apercu-mot.est-t3 { background: var(--kt-t3); } .kt-famille.est-t4, .kt-mot.est-t4, .kt-apercu-mot.est-t4 { background: var(--kt-t4); } .kt-famille.est-t5, .kt-mot.est-t5, .kt-apercu-mot.est-t5 { background: var(--kt-t5); } .kt-famille.est-t6, .kt-mot.est-t6, .kt-apercu-mot.est-t6 { background: var(--kt-t6); } .kt-voile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(12, 35, 64, .78); color: #fff; font-family: var(--police-titres); font-size: 1.4rem; border-radius: var(--r-m); } .kt-commandes { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; } .kt-cmd { min-width: 3.1rem; min-height: 3.1rem; font-size: 1.25rem; font-weight: 700; background: var(--carte-vive); color: var(--titre); border: 2px solid var(--bord); border-radius: var(--r-s); cursor: pointer; transition: transform var(--transi), background var(--transi); } .kt-cmd:hover { background: var(--bleu-clair); } .kt-cmd:active { transform: translateY(2px); } .kt-cmd--large { min-width: 4.2rem; } .kt-cmd--texte { min-width: 5.4rem; font-size: .92rem; } .kt-cmd[aria-pressed="true"] { background: var(--or); border-color: var(--or); color: var(--nuit); } .kt-record-ligne { margin: .2rem 0 1rem; color: var(--encre-doux); } .kt-record-ligne b { color: var(--or-fonce); font-size: 1.15rem; } .jp-verdict.kt-pure { font-weight: 700; } @media (max-width: 620px){ .kt-plateau { flex-direction: column-reverse; align-items: center; gap: .6rem; } .kt-cote { flex-direction: row; min-width: 0; gap: .6rem; width: 100%; justify-content: center; } .kt-apercu { align-items: center; } .kt-apercu-mot { max-width: 8.5rem; text-align: center; } .kt-mot { font-size: 1.45rem; } .kt-grille { height: min(50vh, 470px); } .kt-cmd { min-width: 2.9rem; min-height: 2.9rem; } }